Miks fondid on olulised: ülevaated kasutajakogemusest ja tüpograafiast

Kui kasutajad teie veebisaidile tulevad, on neil tavaliselt mingi eesmärk. See eesmärk on harva märgata teie imelist saidikujundust ja nautida selle täiustatud funktsioone.

Kasutajad tulevad kõige sagedamini teabe saamiseks, olgu selleks siis teave mõne eluvaldkonna kohta üldiselt või teie pakutava toote kohta. Siin tuleb kasutada tüpograafiat, mis on mõeldud teie veebisaidil oleva teabe parima võimaliku tajumise tagamiseks. Täna on aeg süveneda UX ja tüpograafia keerukasse seosesse ning jälgida oma fondivalikute mõju veebisaidi sirvimise üldisele kogemusele.

Miks on tüpograafia kasutajakogemuse jaoks nii oluline?

On teatatud, et enam kui 95% Internetis leiduvast teabest on teksti kujul (kirjakeel). See teave on mõeldud inimestele omaksvõtmiseks ja nad püüavad anda endast parima, et töödelda võimalikult palju teavet. Siin toimib tüpograafia toetava sõbrana, mis aitab inimestel sirvimisaega ja -pingutusi maksimaalselt ära kasutada.

Head tüpograafiat on sageli raske märgata. See muudab lugemisprotsessi sujuvamaks ja te ei pööra sellele tähelepanu. Teisest küljest võivad halvad tüpograafiavalikud rikkuda sirvimiskogemust ja viia lugemise tajumise kiiruse miinimumini. Kuna kellelegi ei meeldi oma aega raisata, saab tüpograafiast üks UX-i olemuslikest hoobadest, mis mõjutab suuresti üldist kasutajakogemust antud veebisaidil.

Oma veebisaidi tüpograafiat kohandades parandate:

• teksti loetavus;
• sisu juurdepääsetavus;
• veebisaidi kasutatavus;
• ja üldine graafiline tasakaal.

Siin käsitleme ainult kasutajakogemuse ja tüpograafia linki, rääkimata tüpograafia rollist veebisaidi visuaalse isiksuse kujundamisel, teie kaubamärgi määratlemisel ja lugeja tähelepanu köitmisel. Lisateabe saamiseks lugege seda artiklit.

Selle kiriku veebisaidi tüpograafia valik mitte ainult ei suurenda veebisaidi kasutajakogemust, vaid aitab kujundada ka kaubamärgi visuaalset identiteeti).

Kuidas oma veebisaidil UX-i suurendada, optimeerides tüpograafiat?

Tüpograafia optimeerimise abil saate oma veebisaidi kasutajakogemust suurendada mitmel viisil. Kuna kasutajakogemus ja tüpograafia on omavahel tihedalt seotud, optimeerite tüpograafiat optimeerides ka oma teksti loetavust ja suurendate seeläbi oma veebisaidi üldist kasutuskogemust. Vaatame, millised on tüpograafia optimeerimise reeglid:

1: minimeerige kasutatavate fontide arv

Kui soovite, et teie veebisait näeks välja ühtne ja professionaalne, kasutage kuni kolme fonti (mitte rohkem). Ühe veebisaidi erinevad fondid põrkavad kokku ja segavad kasutaja tähelepanu teksti lugemisest. Mitme sarnase välimusega fondi kasutamine aitab teil luua UX-i sidusust kogu veebisaidi lehtedel ja vabastab kasutajad sagedaste stiilimuutuste vastuvõtmisest.

Just seda peaksite oma veebisaidil vältima.

Sageli piisab vaid ühe fondi kasutamisest. Kui tunnete endiselt, et vajate paari fonti, valige sama tähelaiusega fondid. Sel juhul ei erine fondid üksteisest liiga palju ega sega lugeja tähelepanu.

See ümberkujundatav veebisait kasutab veebisaidi visuaalse identiteedi suurendamiseks ebatavalist Six Caps fonti. See font on kombineeritud Roboto Condensediga, et saada kaks fonti, mille tähemärgilaiused ühtivad.

Veel üks suurepärane idee paari fondi kombineerimiseks on käsitsikirja jäljendavate fondide ühendamine tavaliste fondidega. Käsitsi kirjutatud tüpograafia lisab teie veebisaidi üldisele kujundusele isikupära ja arendab teie veebisaidi visuaalset iseloomu.

Sellel veebisaidil on Caveat Handwriting fondi abil pehme ja naiselik tunne.

2: loetavuse parandamiseks kasutage Sans Serif fonte

Serifid on väikesed jooned tähejoonte otstes. Trükitüpograafias aitavad serifid inimestel trükitähti kiiremini ja tõhusamalt ära tunda. Kuid ekraanil, eriti mitte-Retina puhul, pole seriifid nii hästi välja toodud kui paberil, mis halvendab lugemist osaliselt.

Lisaks parema loetavuse tagamisele räägivad sans serif-fondid julgemalt ja minimaalsemalt.

Siin ma ei väida, et peaksite serif-fondidest täielikult loobuma. Parem nõuanne oleks olla nendega ettevaatlikum ja kasutada neid, mis on puhtad ja täpsed.

Näiteks see loomingulise fotograafia veebisait kasutab Open Sans sans serif fonti, mis aitab veebisaidil teha julge, stiilse ja otsustava avalduse.

3: Mind korralik fondi suurus

Internetis on ruum piiramatu. Seetõttu pole vaja seda salvestada ja eelistada väikeseid kirjasuurusi, mis koormavad kasutajate silmi veelgi. Nägemispuudega lugejatel võib tekkida raskusi väikese teksti lugemisel, samas kui isegi hea nägemisega lugejad kogevad väsimust ja peavad tegema pause, et näiteks 10-punktilise teksti lõpuni jõuda.

Kui te ei soovi, et teie kasutajad näeksid vaeva teie esitatud teksti lugemise või selle sissesuumimisega, valige fondisuurused 16 pt +. Sellised kirjasuurused vähendavad silmade väsitamist ja aitavad kasutajatel oma eesmärki teie veebisaidil ilma visuaalse kurnatuseta täita.

Malcolmy veebisait kasutab oma kodu- ja ajaveebilehtede jaoks loetavat 16-punktilist tüpograafiat.

4: jälgige optimaalset joone pikkust

Te ei tohiks oma veebisaidil kogu saadaolevat ruumi tekstiga toppida. Pidades silmas optimaalset rea pikkust, järgite kõrgeid lugemiskogemuse standardeid. Kui read on liiga lühikesed, peavad lugeja silmad teksti lugedes edasi-tagasi liikuma, mis koormab silmi veelgi. Kui read on liiga pikad, on liiga raske keskenduda täpselt sellele sõnale, mida loed, ja liiga lihtne eksida.

Mõlema ebasoodsa olukorra vältimiseks hoidke kinni 60 tähemärgist rea kohta (tahvelarvutite/arvutite ekraanide puhul).

See pilt illustreerib, et liiga lühikeste või liiga pikkade ridadega tekste on raskem lugeda kui tekste, mille rea pikkus on ~ 60pt.

Mobiilseadmete (nt nutitelefonide) optimaalne liini pikkus on lühem. Et tekst oleks väikestel ekraanidel loetav, peaks rida sisaldama umbes 30–40 tähemärki.

5 Valige kirjatüübid, mis töötavad hästi erinevates suurustes

Nagu teate, on pealkirjade tähesuurus tavaliselt suurem kui põhiteksti puhul. Pealkirjad erinevad ka suuruse poolest, ulatudes väikseimast kuni suurimani. Peate oma veebisaidil valima erinevate elementide jaoks (nt nupud, pealdised, navigeerimisüksused jne) erineva fondisuuruse, aga ka rõhutamiseks kasutama erineva fondi kaalu.

Oma veebisaidi elementide eristatavuse tagamiseks valige erineva suuruse ja kaaluga font. Kui valite ühe standardfondi, nt Google Fonts Roboto kirjatüübi, näete kõiki selle variatsioone. Mõnel fontil on 10+ variatsiooni, mõnel on ainult paar. Valige font, millel on rikkalik valik variatsioone, et tagada teie saidil mitmekesine sisu.

Roboto Google’i fondi erinevad kirjastiilid.

6: tehke nutikaid värvivalikuid

Mitmevärviliste, karjuvate veebisaitide ajad on möödas. Nüüd on loetavus ja kontrastsus domineerivad jõud, mis määravad värvivaliku. Esiteks peaks teie sisu olema loetav ja mitu aastat parimaks peetud kombinatsioon on must tekst valgel taustal. See kombinatsioon tagab maksimaalse kontrasti ja pärineb klassikalisest tüpograafia aegadest.

Viimasel ajal on aga sageli väidetud, et must värv koormab silmi rohkem kui tumehall. Tumehallid toonid on samuti valge taustaga hästi kontrastsed, kuid need on veidi vähem tihedad ja pakuvad mugavamat lugemiskogemust.

Need on hallid toonid, mis on mugava lugemiskogemuse poolest paremad kui mustad.

Veebisaidi leht, mis kasutab liuguri tekstivärvina tumehalli.

Värvivalikut tehes testige seda kindlasti erinevates seadmetes ja erinevates keskkondades. Teksti, mida on tavalises kontorikeskkonnas hea lugeda, võib nutitelefonis olla raske eristada, eriti kui seda kasutatakse õues. Kõiki tegureid on raske arvesse võtta, kuid teie eesmärk peaks olema võtta arvesse enamikku keskkondadest ja pakkuda erinevatele kasutajarühmadele mugavat sirvimiskogemust.

7: Ärge katsetage joone kõrgusega

Rea kõrguse minimeerimine suurema sisu mahutamiseks ei ole hea tava. Kui read on üksteisele liiga lähedal, hüppab lugeja tõenäolisemalt eelmisele või järgnevale reale ja takerdub. Ridade vaheline ruum (alates) peaks olema 30% suurem kasutatavate märkide kõrgusest. Selline juhtimine tagab sisu parima loetavuse ja selle selge visuaalse taju.

Kui rea kõrgus on väiksem kui 1,3 tähemärgi kõrgust, muutub tekst raskesti loetavaks.

8: Laske oma kasutajatel otsustada

UX-i ja tüpograafia kasutamisel on oluline meeles pidada oma sihtrühma ja selle vajadusi. Tea, millised lugejad on teie saidi külalised ja millistes tüüpilistes olukordades nad teie veebisaidi sisu avastavad. Näiteks kui sihite noori, pöörake rohkem tähelepanu mobiilsele kasutajakogemusele ja kohandage tüpograafiat vastavalt.

Käivitage oma tüpograafiavalikute jaoks A/B-testid ja vaadake, milline neist vähendab põrkemäära ja toob rohkem konversioone. Olge valmis oma tüpograafiat pidevalt kohandama, et end paremaks muuta ja kasutajakogemust pakkuda.

A/B-testimise kohta lisateabe saamiseks lugege seda artiklit.

Järeldused

UX-i ja tüpograafia vahelise seose uurimine võib kaasa tuua teie veebisaidi kasutajakogemuse mitmeid väärtuslikke täiustusi. Kui otsite ülaltoodud tüpograafiaga seotud näpunäiteid, saate kindlasti loetava veebisaidi, mille sirvimine on tõeline nauding. Soovin teile selles ettevõtmises edu!

Kas ma olen millestki ilma jäänud? Palun andke mulle allolevas kommentaaride jaotises teada. Samuti on soojalt teretulnud teie teemakohased küsimused.

Püsige lainel!