White space in architecture

Vaikuta valkoisella tilalla, luo tunnetta typografialla

Visuaalista ilotulitusta ja silmäkarkkia tärkeämpää on huolehtia, että perusasiat ovat kunnossa. Senior Visual Designerimme Tommi Leskinen kirjoittaa hierarkian, valkoisen tilan ja typografian merkityksestä miellyttävän digitaalisen asiointikokemuksen muotoilussa. Kannattaako fontiksi valita Baskerville vai Fira? Se riippuu kontekstista.
 

Visuaalisen suunnittelun avulla luodaan miellyttäviä katselu-, luku-, ja asiointikokemuksia.

Kolme miellyttävän käyttö- ja lukukokemuksen syntyyn eniten vaikuttavaa tekijää ovat hierarkia, valkoisen tilan käyttö ja typografia. Nämä ansaitsevat visuaalisessa suunnittelussa enemmän huomiota kuin ne usein saavat.

Siksipä kokosin tähän postaukseen tietoa ja vinkkejä jokaisesta näistä. Vinkit perustuvat sekä omaan kokemukseeni visuaalisena suunnittelijana että lukuisiin tutkimuksiin, joihin olen urani aikana tutustunut. Postauksen lopusta löydät muutaman lähteen, joiden kautta voit syventää osaamistasi.
 

1) Hierarkian avulla autat hahmottamaan kokonaisuutta

Hierarkialla tarkoitetaan visuaalisten elementtien ryhmittelemistä siten, että käyttäjän on helppo hahmottaa sekä kokonaisuus, että sen osien väliset suhteet. Sen avulla käyttäjä ymmärtää nopeasti, mitkä asiat ovat kulloisenkin tehtävän kannalta tärkeimpiä ja mitkä kuuluvat olennaisesti yhteen.
 

Hyvän hierarkian avulla käyttäjä osaa aloittaa asioimisprosessin vaivattomasti tai löytää nopeasti tiensä syvemmälle tietoon.

Tämä vaikutus syntyy siitä, että ihmisen aivoilla on taipumus ryhmitellä asioita jatkuvasti. Etsimme järjestystä epäjärjestykseen. Kun tarjoat sitä havainnollistamalla asioiden tärkeysjärjestyksen esimerkiksi tyhjän tilan ja fonttikoon avulla, poistat aivoilta valtavan määrän työtä. Ja se tarkoittaa helpompaa ja miellyttävämpää asiointikokemusta.
 

2) Vaikuttavinta on valkoinen tila

Ehkä jopa hieman yllättäen valkoinen tila on tutkitusti kaikkein tärkein katseen ohjaamiseen vaikuttava asia. Aivot nimittäin käyttävät ennen kaikkea valkoista tilaa tulkitessaan asioiden välisiä suhteita. Selkeästi valkoisen tilan avulla rytmitetty taitto rauhoittaa luku- ja käyttökokemusta ja tekee siitä miellyttävän.

Valkoisen tilan avulla:

  • Autetaan aivoja hahmottamaan asioiden välisiä suhteita ja ohjataan tiedonkulkua.
  • Autetaan aivoja tunnistamaan, mitkä elementit kuuluvat yhteen.
  • Ohjataan katse kulloisenkin tehtävän kannalta tärkeimpiin asioihin ja autetaan käyttäjää saavuttamaan päämääränsä vaivattomasti.

Alla oleva kuva havainnollistaa valkoisen tilan optimaalisen ja ei-niin-optimaalisen käytön eroja. Valkoisella tilalla luodaan myös kokonaisuuden hahmottamista helpottava hierarkia elementtien välille. Huomaatko itse?

A picture of how hierarchy can look by typeface.

Kolme Gestalt-näkymää, joista keskimmäistä näkee eniten verkossa. Se ei kuitenkaan luo optimaalista lukukokemusta samoin kuin oikeanpuolimmainen, jossa aivoilta on poistettu kaikki ylimääräinen työ ryhmittelyn osalta.

Hyvässä designissa aivot pääsevät vähemmällä. Energiaa ei kulu tiedon jäsentelyyn, vaan se voidaan ohjata suoraan olennaisimpaan.
 

3) Typografian avulla luot tunnetta ja helpotat lukemista


Hyväkään valkoisen tilan käyttö ei pelasta, jos typografian suunnittelu jää puolitiehen ja luettavuus kärsii. Tutkimukset osoittavat, että typografia on eräs keskeisin käyttäjien kokemaan tunnelmaan ja käytön helppouteen vaikuttava tekijä.

Kartta tunteista, joita erilaiset fontit erilaisilla sivustoilla käyttäjissä herättivät

Tunteet, joita erilaiset fontit erilaisilla sivustoilla käyttäjissä herättivät

Yllä oleva kuva havainnollistaa sitä, miten erilaiset fontit vaikuttavat asiointikokemukseen. Esimerkiksi pankin sivuilla päätteellinen ja perinteinen Baskerville-fontti koettiin luotettavimmaksi, kun taas fitness-sivuilla luotettavimmaksi nousi modernimpi, päätteetön Fira.

Fontti kannattaakin valita aina käyttötilanteen mukaan, ei omien mieltymysten tai trendien perusteella. Lähtökohdat hyvälle typografialle erityisesti verkossa ovat:

  1. Valitse fontti käyttötilanteen ja halutun tunnelman kannalta oikein
  2. Luettavuus on tärkeintä.
  3. X-korkeus. Nyrkkisääntönä on se, että monissa moderneissa fonteissa tämä on jo valmiiksi kohdillaan. Suosi niitä.
  4. Laajemman mittasuhteen fontit takaavat selkeän lukukokemuksen verkossa.
  5. Käytä etenkin verkossa vasenta tasausta. Molemminpuolinen tasaus tekee tekstistä vaikealukuista, varsinkin jos se aiheuttaa sanojen väliin isoja ja erikokoisia        välejä.
  6. Huomaa tekstilinjojen sopiva pituus luettavuuden kannalta.
  7. Käytä maksimissaan kahta erilaista fonttia.
  8. Käytä välistyksiä harkiten.
     

Alla olevan kuvasarjan oikeanpuolimmaisessa taitossa on huomioitu optimaalisesti kaikki tämän postauksen opit: hyvä hierarkia, valkoisen tilan käyttö ja selkeä typografia.

Kolme näkymää samaan tietoon – mitä näistä pidät helppokäyttöisimpänä ja miksi?

Kolme näkymää samaan tietoon – mitä näistä pidät helppokäyttöisimpänä ja miksi?

 

Toivottavasti koit nämä vinkit hyödyllisiksi ja pystyt soveltamaan niitä omassa työssäsi!

 

Näistä lähteistä voit ammentaa lisää tietoa:

How fonts influence users’ perception of your product, Alessio Laiso

The Aesthetics of Reading, Kevin Larson & Rosalind Picard

---

Haluatko keskustella liiketoimintasi ihmislähtöisestä kehittämisestä? Ota yhteyttä.

 

Lue seuraavaksi: 

Business design – ihmislähtöistä liiketoiminnan muotoilua

Hyvä muotoilu on hyvää bisnestä