Category: käyttöliittymäsuunnittelu

Sivuston suunnittelusta, osa 2 (Rautalankamallit)

Tässä projektissa oli tavoitteena tehdä suunnitelmat mahdollisimman pitkälle ennen kuin mukaan otettiin toteuttajat. Tämä ei aina ole järkevä vaihtoehto, eteenkään silloin, kun halutaan tehdä jotain ihan uutta ja erilaista. Silloin voi olla paras vaihtoehto kuvata toteutettavaa palvelua hyvin löyhästi ja mielikuvin, ja antaa toteuttajille mahdollisuus käyttää omaa osaamistaan. Tällöin toteutusvaihtoehdot voivat olla hyvinkin erilaisia, mutta toteuttajat ovat verkkoviestinnän asiantuntijoita; he tietävät, mikä on tämän hetken trendi, mihin ollaan menossa, millaisia tekniikoita ja tapoja on hyvä käyttää parhaan lopputuloksen saamiseksi.

Nyt oli tavoitteena luoda kumminkin perusverkkosivut, nykyaikaiset puitteet museoille, jotta he voivat tuottaa sisältöä verkkoon helposti ja monin eri tavoin. Verkkosivujen suunnittelussa yksi perusjuttu on rautalankamallit. Rautalankamallin voi periaatteessa piirtää vaikka käsin. Niiden avulla sivuston rakennetta, elementtien paikkoja ja toiminnallisuutta hahmotetaan, sekä minimoidaan suunnitteluvirheitä. Rautalankamallissa ei oteta kantaa siihen, miltä verkkosivusto näyttää visuaalisesti. Ilmaisia mallinnusohjelmia on verkko täynnä, esim. tätä voi kokeilla hakemalla googlesta sanoilla ”free wireframing tool”. Tässä projektissa käytin Hotgloo-nimistä ohjelmaa, joka ei ole ilmainen vaan maksaa noin 10 euroa kuussa. Usein ohjelmissa on kumminkin koeaika, jolloin ohjelmaa voi käyttää ilmaiseksi. Tässäkin ohjelmassa oli 15 päivää. Sitä ikkunaa kannattaa hyödyntää. 🙂 Alla esimerkkikuva ohjelman käyttöliittymästä. Oikeassa alalaidassa näkyy elementtiosio (elements), josta sai vetämällä (drag & drop) muokkauskenttään (valkoinen osio) haluamiaan elementtejä. Ohjelmassa oli sekä hyviä puolia (nykyaikainen käyttöliittymä, intuitiivinen) että puutteita (aika suppea valikoima elementtejä, muutamia epäloogisuuksia käytettävyydessä esimerkiksi mastereiden kanssa toimiessa…).

Hotgloo-rautalankamallinnusohjelman käyttöliittymä

Hotgloo-rautalankamallinnusohjelman käyttöliittymä

Rautalankamalleista on erityisesti hyötyä responsiivisia sivuja suunnitellessa, jolloin jokaisesta näkymästä tulee suunnitella esimerkiksi tässä tapauksessa kolme eri näkymää (läppäri, täppäri ja mobiili). Alla esimerkit etusivun tabletti- ja mobiilinäkymästä. Suurin ero varmaan on se, että mobiilissa tila loppuu helposti kesken yläpalkissa ja tällöin on hyvä tehdä valikko uudelleen. Usein päädytään siihen ratkaisuun, että valikosta näkyy mobiiliversiossa vain sana valikko (tai menu) ja kun sitä painaa, valikko avautuu alaspäin horisontaalisesti. Suunnittelin sivut myös niin, että esimerkiksi etusivulla on kaikkien neljän museon tiedot omissa palkeissaan tai palstoistaan. Yhden palstan leveys on 25% (tässä tapauksessa 960 pikselistä). Tablettiversiossa (joka alkaa siis kun päätelaite on alle 800 pikseliä ja päätyy 480 pikseliin) palkkien leveys on 50%. Jos tablettiversiossa palstojen leveys olisi edelleen 25%, tällöin kapeimmassa vaihtoehdossa eli siinä tapauksessa, kun päätelaite on 480 pikseliä, palstan leveys olisi enää 120 pikseliä (480 pikselistä 25%). Ei kovin miellyttävä lukea. Mobiiliversiossa palstan leveys on sitten aina 100%. Usein mobiiliversiosta pudotetaan myös kokonaan etusivun banneri(kuva) pois käytettävyyden nimissä.

Mobiilimallinnus etusivusta

Mobiilimallinnus etusivusta

Täppärimallinnus etusivusta

Täppärimallinnus etusivusta

Rautalankamallien tekotapoja on varmasti yhtä paljon kuin on tekijöitäkin. Eikä niitä kannata lähteä tekemään, jos ei tiedä verkkosuunnittelun periaatteista mitään. Tällöin voi koko työ mennä hukkaan. Toisaalta mallit voi tehdä myös hyvin suppeasti tai hyvin laajasti. Eli jos joitakin ajatuksia on siitä, miltä toivoisi verkkosivujen näyttävän, toki siihen voi käyttää rautalankamallinnusohjelmia. Asiasta oli hyvää tekstiä muun muassa Aucorin sivuilla ja englanninkielisessä Wikipedia-artikkelissa.

Tärkeätä on myös, että omista suunnitelmista ei pidä kynsin hampain kiinni. Muutoksia varmasti tulee sitä mukaan, kun huomataan, että joku ei toimi.

Minna

Meri-Lapin museoiden verkkosivuston suunnittelua – kuinka monta eri leiskaa?

Olen selaillut eri sivustoja, joissa on hyviä vinkkejä responsiiviseen suunnitteluun ja tyyliin ”20 vinkkiä kuinka suunnitella sivut responsiivisesti.

Ensi alkuun tulisi päättää se, kuinka monelle eri koolle tekee leiskat. Yllä olevasta linkistä löytyy linkki toiselle sivustolle, jossa on hyvä diagrammi.

Olen päätynyt kolmeen eri kokoon:

1. 960px – 801px (”Läppärikoko”)

2. 800px – 481px (”Täppärikoko”)

3. 480px —> (”Mobiilikoko”)

Nämä kolme kokoa kattaa minusta hyvin kaikki tämän hetkiset laitteet. Toki jos päätelaite on valtavan suuri, pohja ei enää toimi. Mikähän ratkaisu tähän? Löysin sivuston, jossa pohditaan ongelmaa. Sivusto käyttää hyvää vertauskuvaa: ”suurilta laitteilta katsottaessa 960px-pohja on kuin kelluva lautta keskellä suurta valtamerta”. Sivustolla tarjotaan yhdeksi ratkaisuksi sitä, että suunnittelee sivuston käyttämällä suhteellista kokoa koko leiskassa. Toisaalta sivustolla kyseenalaistetaan ajatus siitä, että suuria päätelaitteita käytettäisiin samaan tapaan kuin pienempiä, jolloin niille suunnittelu on ehkä hivenen resurssien tuhlausta.

Käytettävyyden kannalta 960px on todettu hyväksi kooksi. Kolumnit pysyvät riittävän kapeina ja miellyttävinä lukea. Lukemisen kannalta optimaalinen sanojen määrä yhdellä rivillä on noin 12 sanaa. Ja tähän kun lisää sen tiedon, että suurin osa verkkokäyttäjistä käyttää yhä pienempiä laitteita, niin näillä kolmella leiskalla katetaan kumminkin suurin osa käyttäjistä. Näillä siis mennään eteenpäin.

Minna

Verkkosivujen käyttöliittymäsuunnittelua vol.1: mitä on responsiivinen suunnittelu?

Verkkosivujen suunnittelu on siitä mukavaa hommaa, että sen voi oikeastaan tehdä miten päin haluaa. Ainakin periaatteessa.

Suunnittelussa on nimittäin mahdollista mennä vaikeimman kautta (oma tapani) tai mahdollisimman viisaasti ja tehokkaasti (oikeaoppisessa järjestyksessä ja sääntöjen mukaan.). Aloitin aikanaan verkkosivujen työstämisen valmiista pohjista, jolloin muokkaamalla koodia testasin, mikä lopputuloksessa muuttui. Hölmö tapa oppia, ainakin ihan älyttömän hidas (ensin opettelet käytännön, sitten teorian) ja oikeastaan ihan vääränlainenkin (opit paljon helpommin asiat väärin kun muokkaat toisen koodia, joka on voinut tehdä alunperinkin jo huonoa koodia.). Silti se oli hyvä tapa minulle, sillä huolimatta koulun penkillä asian tiimoilla istuneena, minulle sopi parhaiten se, että pääsi heti kokeilemaan suurempia kokonaisuuksia. Ja toisaalta  koodin hallintani on/oli muutenkin aika avutonta, näin siihen pääsi käsiksi helpoiten.

En ole moniakaan käyttöliittymäleiskoja eli verkkosivujen pohjapiirroksia ihan alusta asti tehnyt itse, vaan olen lähtenyt rakentamaan jo olemassa olevaa teemaa. Se kääntyy ehkä edukseni, nyt kun olen luomassa toista kertaa leiskoja responsiivisen suunnittelun eli päätelaitteeseen mukautuvan suunnittelun (ihana sanahirviö) periaatteiden mukaisesti. Minun ”taakkanani” ei ole  perinteisiin verkkosivujen suunnitteluperiaatteisiin tottuminen, vaan pääsen tavallaan maalaamaan tyhjää taulua. Toki siinä on myös riskinsä.

Mitä on responsiivinen suunnittelu?

Responsiivisessa suunnittelussa suunnittelija lähtee rakentamaan sivuja tietäen, että niitä tullaan lukemaan ja käyttämään hyvin monella eri kokoisella päätelaitteella kuten läppärillä, tabletilla ja eri kokoisilla mobiililaitteilla ns. kännyköillä. Onnistunut suunnittelun tulos johtaa siihen, että sivuja on miellyttävä ja helppo lukea kaikilla eri päätelaitteilla, tieto on helposti löydettävissä ja sivut latautuvat nopeasti. Käytännössä suunnittelija hyödyntää ruudukko-pohjaa, media queryja, skaalautuvia kuvia sekä suhteellisia kokoja sekä fonteissa että lähes kaikissa elementeissä. 

Aika moni uusi sivusto tehdään responsiivisesti. Se on tavallaan käyttöliittymäsuunnittelijoiden vastaus nykypäivän verkkokäyttäjien kysyntään. Ennenhän (ja edelleenkin joissain tapauksissa on järkevää) tämä toteutettiin niin, että tehtiin mobiiliversio ja selainversio erikseen. Kevyttä mobiiliversiota käytetään usein myös kriisitilanteessa, kun verkkoliikenne sivuilla voi kasvaa moninkertaiseksi normaalista.

Mobiiliversio on perinteisesti tekstipohjainen, riisuttu versio sivustosta, jossa on hyvin vähän graafista ilmettä ja paljon asiaa. En tiedä miksi, mutta usein myös mobiiliversioista on poistettu kaikki sosiaalinen media eli ne tuntuvat vanhanaikaisilta ja uutiset ja artikkelit ilman kommenttiosiota jotenkin tyngiltä, varsinkin jos kuuluu ns. ”some”-sukupolveen. Hyvänä esimerkkinä m.iltasanomat.fi, jossa kommenttiosio on jätetty kokonaan pois, tai m.taloussanomat.fi, jonka kommenttiosio on yhtä tyhjän kanssa, todella epämukava käyttää.
Yksi pohja, monta eri laitetta

Kun sivut tehdään responsiivisesti, tehdään vain yksi versio sivustosta, ei erillistä mobiiliversiota. Sivut skaalautuvat oikeaan kokoonsa sen mukaan, minkäkokoisella päätelaitteella käyttäjä sivuille eksyy. Sivut on rakennettu niin, että ne tavallaan kysyvät käyttäjän päätelaitteelta (hyödyntämällä media queryja), minkäkokoinen se on. Kun käyttöliittymä on suunniteltu responsiivisesti, käyttäjä saa eteensä sivun leiskan (Mikä tähänkin olisi parempi sana? Leiska on väännelmä englannin kielen sanasta layout.) omaan päätelaitteeseen optimoituna. Parhaimpia puolia tässä on saavutettavuus, joka paranee huomattavasti, kun sivujen fonttikoko on suhteellinen, ei etukäteen lukkoon lyöty koko. Kaikki ”älykännyköitä” käyttävät tietävät, kuinka turhauttavaa on tulla verkkosivuille, joita joutuu kokoajan suurentamaan ja pienentämään peukalo-etusormi -liikkeellä ”pinch-to-zoom”. Tämä on käytännössä historiaa responsiivisen suunnittelun myötä.

Esimerkkejä responsiivisesti suunnitelluista sivuista: (testaa responsiivisuutta joko eri päätelaitteilla tai niin, että pienennät selaimesta oikeassa yläkulmassa olevasta ikkunasta ja sitten skaalaat selainta kapeammaksi ja leveämmäksi.)

http://www.indochino.com/

http://www.starbucks.com/

Minna