Miksi kirjasimilla on väliä: näkemyksiä käyttökokemuksesta ja typografiasta

Kun käyttäjät tulevat verkkosivustollesi, heillä on yleensä jokin tavoite mielessään. Tämä tavoite on harvoin löytää upea sivustosi suunnittelu ja nauttia sen edistyneistä toiminnoista.

Käyttäjät tulevat useimmiten hakemaan tietoa, olipa kyse sitten jostain elämän osa-alueesta yleensä tai tarjoamastasi tuotteesta. Tässä typografia tulee käyttöön, koska sen tarkoituksena on varmistaa paras mahdollinen käsitys verkkosivustosi tiedoista. Tänään on aika perehtyä UX:n ja typografian monimutkaiseen yhteyteen ja seurata fonttivalintojen vaikutusta verkkosivuston yleiseen selauskokemukseen.

Miksi typografia on niin tärkeä UX:lle?

On raportoitu, että yli 95 % Internetin tiedoista on tekstin muodossa (kirjoitettu kieli). Tämä tieto on tarkoitettu ihmisten imeytyväksi, ja he yrittävät tehdä parhaansa käsitelläkseen mahdollisimman paljon tietoa. Täällä typografia toimii tukevana ystävänä, joka auttaa ihmisiä saamaan kaiken irti selausajastaan ​​ja vaivastaan.

Hyvää typografiaa on usein vaikea havaita. Se tekee lukemisesta virtaviivaista, etkä kiinnitä siihen huomiota. Toisaalta huonot typografiavalinnat voivat pilata selauskokemuksen ja laskea lukuhavaintonopeuden minimiin. Koska kukaan ei halua tuhlata aikaa, typografiasta tulee yksi luontaisista UX-vipuista, joka vaikuttaa suuresti yleiseen käyttökokemukseen tietyllä verkkosivustolla.

Säätämällä verkkosivustosi typografiaa parannat:

• tekstin luettavuus;
• sisällön saavutettavuus;
• verkkosivuston käytettävyys;
• ja yleinen graafinen tasapaino.

Tässä puhutaan vain UX- ja typografialinkistä, emmekä mainitse typografian roolia verkkosivuston visuaalisen persoonallisuuden muodostamisessa, brändisi määrittelyssä ja lukijan huomion kiinnittämisessä. Tutustu tähän artikkeliin saadaksesi lisätietoja.

Tämän kirkon verkkosivuston typografian valinta ei vain lisää verkkosivuston käyttökokemusta, vaan auttaa myös muokkaamaan brändin visuaalista identiteettiä).

Kuinka parantaa UX-käyttöä verkkosivustollasi optimoimalla typografia?

Voit parantaa verkkosivustosi käyttökokemusta useilla tavoilla optimoimalla typografia. Koska käyttökokemus ja typografia liittyvät läheisesti toisiinsa, optimoimalla typografia optimoit myös tekstisi luettavuuden ja näin lisäät verkkosivustosi yleistä käyttökokemusta. Katsotaanpa, mitkä ovat typografian optimointisäännöt:

1: Minimoi käytettyjen fonttien määrä

Jos haluat, että verkkosivustosi näyttää yhtenäiseltä ja ammattimaiselta, käytä enintään kolmea kirjasinta (ei enempää). Eri fontit yhdellä verkkosivustolla törmäävät toisiinsa ja häiritsevät käyttäjää lukemasta tekstiä. Useiden samannäköisten kirjasimien käyttö auttaa luomaan UX:n johdonmukaisuutta verkkosivustosi sivuilla ja vapauttaa käyttäjät toistuvista tyylimuutoksista.

Juuri tätä sinun tulee välttää verkkosivustollasi.

Usein vain yhden fontin käyttö riittää. Jos sinusta tuntuu edelleen, että tarvitset muutaman kirjasimen, valitse fontit, joilla on sama merkkileveys. Tässä tapauksessa kirjasimet eivät eroa liikaa toisistaan ​​eivätkä häiritse lukijaa.

Tämä uudistettu verkkosivusto käyttää epätavanomaista Six Caps -kirjasinta parantamaan verkkosivuston visuaalista identiteettiä. Tämä fontti on yhdistetty Roboto Condensediin ja sisältää kaksi fonttia, joiden merkkileveydet vastaavat.

Toinen loistava idea muutaman kirjasimen yhdistämisestä on yhdistää käsinkirjoitusta jäljittelevät kirjasimet tavallisiin kirjasimiin. Käsinkirjoitettu typografia lisää persoonallisuutta verkkosivustosi suunnitteluun ja kehittää sivustosi visuaalista luonnetta.

Tällä sivustolla on pehmeä ja naisellinen tunnelma Caveat Handwriting -fontilla.

2: Valitse Sans Serif -fontit luettavuuden parantamiseksi

Serifit ovat pieniä viivoja kirjainviivojen päissä. Painetussa typografiassa serifit auttavat ihmisiä tunnistamaan painetut kirjaimet nopeammin ja tehokkaammin. Näytöllä, varsinkin ei-Retina-näytöllä, serifit eivät kuitenkaan ole niin hyvin ääriviivattuja kuin paperilla, mikä osittain heikentää lukemista.

Sen lisäksi, että sans serif -kirjasimet varmistavat paremman luettavuuden, ne puhuvat rohkeammin ja minimaalisella tavalla.

Tässä en väitä, että sinun pitäisi kokonaan hylätä serif-fontit. Parempi neuvo olisi olla varovaisempi niiden kanssa ja käyttää niitä, jotka ovat puhtaita ja tarkkoja.

Esimerkiksi tämä luova valokuvaussivusto käyttää Open Sans sans serif -fonttia, joka auttaa verkkosivustoa antamaan rohkean, tyylikkään ja päättäväisen lausunnon.

3: Mielenkiintoinen fonttikoko

Internetissä tilaa on rajattomasti. Siksi sitä ei tarvitse tallentaa ja valita pieniä kirjasinkokoja, jotka rasittavat käyttäjiä lisää. Näkövammaisilla lukijoilla voi olla vaikeuksia lukea pientä tekstiä, kun taas lukijat, joilla on hyvä näkökyky, kokevat väsymystä ja joutuvat pitämään taukoja päästäkseen vaikkapa 10 pt tekstin loppuun.

Jos et halua käyttäjiesi vaikeuttavan esittämäsi tekstin lukemista tai sen lähentämistä, valitse 16 pt + fonttikoot. Tällaiset kirjasinkoot minimoivat silmien rasitusta ja auttavat käyttäjiä saavuttamaan tavoitteensa verkkosivustollasi ilman visuaalista uupumusta.

Malcolmy-verkkosivusto käyttää luettavaa 16p-typografiaa koti- ja blogisivuillaan.

4: Tarkkaile optimaalista linjan pituutta

Web-sivustollasi ei tule tukahduttaa kaikkea käytettävissä olevaa tilaa tekstilläsi. Kun pidät optimaalisen rivin pituuden, noudatat korkeita lukukokemusstandardeja. Jos rivit ovat liian lyhyitä, lukijan silmät joutuvat liikkumaan edestakaisin tekstiä lukiessaan, mikä lisää silmien rasitusta. Jos rivit ovat liian pitkiä, on liian vaikeaa keskittyä tarkalleen lukemaansa sanaan ja liian helppo eksyä.

Vältä molemmat epäsuotuisat tilanteet pitämällä kiinni 60 merkistä riviä kohden (tablet-/PC-näytöt).

Tämä kuva havainnollistaa, että tekstit, joissa on liian lyhyitä tai liian pitkiä rivejä, ovat vaikeammin luettavia kuin tekstit, jotka pitävät ”kultaisen keskikohdan” rivipituudella ~ 60 pt.

Optimaalinen linjan pituus mobiililaitteille (esim. älypuhelimille) on lyhyempi. Jotta teksti olisi luettavissa pienillä näytöillä, rivin tulee sisältää noin 30–40 merkkiä.

5: Valitse kirjasintyypit, jotka toimivat hyvin eri kokoisina

Kuten tiedät, otsikoiden kirjainkoko on yleensä suurempi kuin leipätekstin. Otsikoiden koko vaihtelee myös pienimmästä suurimpaan. Sivustollasi sinun on valittava eri fonttikoot eri elementeille (esim. painikkeet, kuvatekstit, navigointikohteet jne.) sekä eri fonttien painot korostusta varten.

Varmistaaksesi verkkosivustosi elementtien erottuvuuden, valitse fontti, jota on erikokoisia ja -painoisia. Jos valitset jonkin vakiofontin, esim. Google Fonts Roboto -kirjasin, näet kaikki sen muunnelmat. Joistakin fonteista on yli 10 muunnelmaa, joistakin vain pari. Valitse fontti, jossa on runsaasti muunnelmia, jotta voit varmistaa sivustosi monipuolisen sisällön.

Roboto Google -fontin eri kirjasintyylejä.

6: Tee älykkäitä värivalintoja

Moniväristen, huutavien verkkosivustojen ajat ovat ohi. Nyt luettavuus ja kontrasti ovat hallitsevia voimia, jotka määräävät värivalinnat. Ensinnäkin sisältösi tulee olla luettavaa, ja useiden vuosien ajan parhaana pidetty yhdistelmä on musta teksti valkoisella pohjalla. Tämä yhdistelmä varmistaa maksimaalisen kontrastin ja juontaa juurensa klassiseen typografia-aikoihin.

Viime aikoina on kuitenkin usein väitetty, että musta väri rasittaa silmiä enemmän kuin tummanharmaa. Myös tummanharmaan sävyt kontrastivat hyvin valkoisen taustan kanssa, mutta ne ovat hieman vähemmän tiheitä ja tarjoavat mukavamman lukukokemuksen.

Nämä harmaan sävyt ylittävät mustan miellyttävän lukukokemuksen.

Verkkosivusto, joka käyttää liukusäätimen tekstin värinä tummanharmaata.

Kun teet värivalintaa, varmista, että testaat sitä eri laitteilla ja eri ympäristöissä. Tyypillisessä toimistoympäristössä hyvä lukea tekstiä voi olla vaikea erottaa älypuhelimella, varsinkin kun sitä käytetään ulkona. Kaikkia tekijöitä on vaikea ottaa huomioon, mutta tavoitteesi tulisi olla ottaa huomioon suurin osa ympäristöistä ja tuoda eri käyttäjäryhmille mukava selauskokemus.

7: Älä kokeile linjan korkeutta

Rivin korkeuden minimoiminen, jotta siihen mahtuu enemmän sisältöä, ei ole hyvä käytäntö. Jos rivit ovat liian lähellä toisiaan, lukija hyppää todennäköisemmin edelliselle tai seuraavalle riville ja juuttuu. Rivien välisen välin (alku) tulee olla 30 % suurempi kuin käytettyjen merkkien korkeus. Tällainen johtaminen varmistaa sisällön parhaan luettavuuden ja sen selkeän visuaalisen havainnoinnin.

Kun rivin korkeus laskee alle 1,3 merkkiä, tekstistä tulee vaikea lukea.

8: Anna käyttäjien päättää

Kun käytät käyttökokemusta ja typografiaa, on tärkeää pitää mielessä kohdeyleisösi ja sen tarpeet. Tiedä millaisia ​​lukijoita sivustosi vieraat ovat ja missä tyypillisissä tilanteissa he löytävät sivustosi sisältöä. Jos esimerkiksi kohdistat nuoriin, kiinnitä enemmän huomiota mobiilikäyttöön ja säädä typografia sen mukaan.

Suorita typografiavalintojen A/B-testaus ja katso, kumpi vähentää välitöntä poistumisprosenttia ja tuo enemmän tuloksia. Ole valmis muokkaamaan typografiasi jatkuvasti parantaaksesi itseäsi ja tuodaksesi käyttökokemuksen mahdolliseksi.

Lisätietoja A/B-testauksesta on tässä artikkelissa.

Johtopäätökset

UX:n ja typografian välisen linkin kaivaminen voi johtaa useita arvokkaita parannuksia verkkosivustosi käyttökokemukseen. Jos etsit yllä lueteltuja typografiaan liittyviä parannuksia, saat varmasti luettavan verkkosivuston, jonka selaaminen on todella nautintoa. Toivon sinulle onnea tähän yritykseen!

Olenko missannut jotain? Kerro minulle alla olevassa Kommentit-osiossa. Myös aiheeseen liittyvät kysymyksesi ovat lämpimästi tervetulleita.

Pysy kanavalla!