Digitaalinen suunnittelu alkaa usein samoista peruskysymyksistä kuin fyysinen rakentaminen. Kuinka paljon tilaa on käytettävissä? Miten sisältö sijoitetaan niin että se säilyy selkeänä? Toimiiko kokonaisuus yhtä hyvin pienessä ja suuressa koossa? Verkkosivujen suunnittelussa mittoja ei kuitenkaan käsitellä vain senttimetreinä tai pikseleinä. Tavoitteena on luoda joustava rakenne joka mukautuu eri laitteisiin ja käyttötapoihin.
Fyysisen tilan logiikka toimii myös verkossa
Huoneen, julisteen tai kirjan sivun suunnittelussa käytettävissä oleva pinta-ala asettaa selkeät rajat. Suunnittelija tietää tarkasti kuinka leveä seinä on tai kuinka paljon tekstiä yhdelle sivulle mahtuu. Digitaalisessa ympäristössä tila muuttuu jatkuvasti sillä käyttäjät avaavat sivustoja erikokoisilla puhelimilla, tableteilla ja tietokoneilla.
Tästä huolimatta fyysisestä suunnittelusta tutut periaatteet ovat edelleen hyödyllisiä. Sisällön ympärille tarvitaan tyhjää tilaa, tärkeimpien elementtien pitää erottua ja käyttäjän katsetta on ohjattava luonnollisessa järjestyksessä. Jos kaikki osat ovat yhtä suuria tai liian lähellä toisiaan, näkymä tuntuu raskaalta.
Verkkopalvelujen vertailussa toimiva rakenne on erityisen tärkeä koska käyttäjä etsii usein nopeasti olennaisia tietoja. Esimerkiksi luotettavat suomalaiset nettikasinot kiinnostavat pelaajia yleensä useiden ominaisuuksien kautta eikä vain yhden näyttävän elementin perusteella. Kun sisältö on jaettu selkeisiin osiin, palvelujen ominaisuuksia on helpompi hahmottaa myös pienellä näytöllä.
Digitaalisen layoutin tehtävä on siis sama kuin hyvin suunnitellun fyysisen tilan: sen pitäisi auttaa käyttäjää löytämään oikea asia ilman tarpeetonta etsimistä.
Pikselit eivät yksin riitä joustavaan suunnitteluun
Pikseli on digitaalisen suunnittelun tunnetuin mittayksikkö mutta nykyaikainen verkkosivu ei voi perustua vain kiinteisiin pikselimittoihin. Jos sisältöalue määritellään aina saman levyiseksi, se voi näyttää hyvältä yhdellä näytöllä ja epäkäytännölliseltä toisella.
Siksi suunnittelussa käytetään myös suhteellisia mittoja. Elementin leveys voidaan määritellä prosenttina käytettävissä olevasta tilasta tai tekstin koko voidaan sitoa selaimen perusasetuksiin. Tällöin näkymä mukautuu paremmin eri laitteisiin ja käyttäjien omiin asetuksiin.
Yleisiä digitaalisen suunnittelun mittatapoja ovat:
- pikselit tarkasti rajattuihin yksityiskohtiin
- prosentit joustaviin sisältöalueisiin
- suhteelliset yksiköt tekstikokoihin ja väleihin
- enimmäisleveydet liian leveiden tekstipalstojen estämiseen
- näyttöön perustuvat mitat suurissa visuaalisissa osioissa
Hyvä suunnittelija ei valitse yhtä mittayksikköä kaikkeen. Hän yhdistää eri tapoja sen perusteella mitä elementin pitäisi tehdä. Logo voi tarvita tarkat rajat mutta tekstipalstan kannattaa joustaa hallitusti.
Myös rivin pituudella on merkitystä. Liian leveä tekstialue vaikeuttaa lukemista koska silmän on vaikeampi löytää seuraavan rivin alkua. Liian kapea palsta taas katkoo tekstiä ja tekee sivusta tarpeettoman pitkän. Digitaalinen mittasuunnittelu on tämän tasapainon jatkuvaa hakemista.
Responsiivisuus perustuu sisältöön eikä laitemalleihin
Aiemmin verkkosivuja suunniteltiin usein tiettyjä näyttökokoja varten. Nykyään laitteita on niin paljon ettei jokaista mallia voida käsitellä erikseen. Responsiivinen suunnittelu lähtee siksi sisällöstä ja siitä missä kohdassa alkuperäinen rakenne lakkaa toimimasta.
Jos kolme rinnakkaista sisältölaatikkoa muuttuu liian kapeiksi, ne voidaan järjestää kahdelle riville tai allekkain. Jos navigointivalikko ei mahdu yhdelle riville, se voidaan korvata pienemmällä valikkopainikkeella. Muutoskohdat eivät siis perustu vain puhelimen tai tabletin nimelliseen kokoon vaan siihen milloin sisältö tarvitsee uuden asettelun.
Tärkeimpiä responsiivisen suunnittelun ratkaisuja ovat:
- Sisältöpalstojen määrän vähentäminen pienillä näytöillä.
- Painikkeiden ja kosketusalueiden kasvattaminen mobiilikäytössä.
- Kuvien skaalaaminen ilman että ne rikkovat sivun leveyttä.
- Vähemmän tärkeiden elementtien siirtäminen alemmas.
- Tekstin koon ja rivivälien mukauttaminen luettavuuden säilyttämiseksi.
Tavoitteena ei ole tehdä jokaisesta näkymästä täysin samanlaista. Hyvä responsiivinen sivu säilyttää saman sisällön ja visuaalisen identiteetin mutta järjestää elementit kullekin näytölle sopivalla tavalla.
Käytännön testaus paljastaa mittavirheet
Suunnittelutyökalu voi näyttää layoutin siistinä mutta todellinen käyttö paljastaa usein ongelmia. Tekstit voivat olla odotettua pidempiä, kuvat eri mittasuhteissa ja painikkeiden nimet liian leveitä. Myös käyttäjän suurentama tekstikoko voi muuttaa koko näkymän rakennetta.
Siksi digitaalisia näkymiä on testattava useilla näyttöleveyksillä. Pelkkä työpöytä- ja mobiiliversion tarkistus ei riitä sillä ongelmia voi syntyä juuri niiden väliin jäävissä ko’oissa. Sivua kannattaa kaventaa asteittain ja seurata milloin elementit alkavat törmätä toisiinsa tai teksti muuttuu vaikeaksi lukea.
Testauksessa huomioidaan myös käytettävyys. Painikkeen täytyy olla riittävän suuri sormella painettavaksi ja tekstin kontrastin pitää säilyä eri taustoilla. Lomakkeiden, valikoiden ja taulukoiden pitäisi toimia ilman vaakasuuntaista vierittämistä aina kun se on mahdollista.
Fyysisten mittojen muuttaminen digitaaliseksi layoutiksi ei tarkoita suoraa senttimetrien muuntamista pikseleiksi. Kyse on tilan, mittasuhteiden ja hierarkian soveltamisesta ympäristöön joka muuttuu käyttäjän laitteen mukana. Kun suunnittelu perustuu joustaviin mittoihin ja käytännön testaukseen, lopputulos säilyy selkeänä eri näytöillä ja palvelee käyttäjää aidosti.
About the Author
