Hvorfor fonter betyr noe: Innsikt i UX og typografi

Når brukere kommer til nettstedet ditt, kommer de vanligvis med et mål i tankene. Dette målet er sjelden å oppdage ditt fantastiske nettsteddesign og nyte den avanserte funksjonaliteten.

Brukere kommer oftest for informasjon, det være seg om noen aspekter av livet generelt eller om et produkt du tilbyr. Her kommer typografi inn da det er ment å sikre best mulig oppfatning av informasjonen på nettstedet ditt. I dag er det på tide å grave inn i den intrikate forbindelsen mellom UX og typografi og spore virkningen av skrifttypevalgene dine på den generelle nettleseropplevelsen.

Hvorfor er typografi så viktig for UX?

Det er rapportert at mer enn 95 % av informasjonen på Internett finnes i form av tekst (skriftspråk). Denne informasjonen er ment å bli absorbert av folk, og de prøver å gjøre sitt beste for å behandle så mye informasjon som de kan. Her fungerer typografi som en støttende venn som hjelper folk å få mest mulig ut av surfetiden og innsatsen.

God typografi er ofte vanskelig å legge merke til. Det gjør leseprosessen strømlinjeformet og du legger ikke merke til den. På den annen side kan dårlige typografivalg ødelegge nettleseropplevelsen og redusere leseoppfatningen til et minimum. Siden ingen liker å kaste bort tiden sin, blir typografi en av de iboende UX-hendlene som i stor grad påvirker den generelle brukeropplevelsen på et gitt nettsted.

Ved å justere nettstedtypografien din forbedrer du:

• tekst lesbarhet;
• innhold tilgjengelighet;
• nettstedets brukervennlighet;
• og generell grafisk balanse.

Her diskuterer vi kun UX og typografi-lenken, og nevner ikke rollen som typografi i å danne nettstedets visuelle personlighet, definere merkevaren din og fange leserens oppmerksomhet. Sjekk ut denne artikkelen for å lære mer.

Valget av typografi for denne kirkens nettside øker ikke bare brukeropplevelsen på nettstedet, men hjelper også med å forme merkevarens visuelle identitet).

Hvordan øke brukeropplevelsen på nettstedet ditt ved å optimalisere typografi?

Det er flere måter du kan øke brukeropplevelsen på nettstedet ditt ved å optimalisere typografien. Ettersom UX og typografi er nært knyttet sammen, ved å optimalisere typografi, optimerer du også lesbarheten til teksten din, og dermed øker den generelle UX-en på nettstedet ditt. La oss se hva reglene for å optimalisere typografi er:

1: Minimer antall skrifter som brukes

Hvis du vil at nettstedet ditt skal se sammenhengende og profesjonelt ut, bruk opptil tre fonter (ikke flere). Ulike skrifttyper på ett nettsted kolliderer og distraherer brukeren fra å lese teksten. Bruk av flere skrifttyper som ser lignende ut hjelper deg med å skape sammenheng i UX på hele nettsidene dine og frigjør brukere fra å ta i bruk til hyppige stilendringer.

Det er akkurat dette du bør unngå på nettstedet ditt.

Ofte er bruk av bare én font nok. Hvis du fortsatt føler at du trenger et par fonter, gå for skriftene som har samme tegnbredde. I dette tilfellet vil ikke skriftene avvike for mye fra hverandre og distrahere leseren.

Dette ombyggingsnettstedet bruker den ukonvensjonelle Six Caps-fonten for å øke nettstedets visuelle identitet. Denne fonten er kombinert med Roboto Condensed for å ha to fonter, hvor tegnbredden samsvarer.

En annen god idé om å kombinere et par fonter er å kombinere skriftene som imiterer håndskrift med de vanlige. Håndskrevet typografi gir et personlig preg til ditt generelle nettsteddesign og utvikler den visuelle karakteren til nettstedet ditt.

Denne nettsiden har en myk og feminin følelse med Caveat Handwriting-font.

2: Gå for Sans Serif-fonter for å forbedre lesbarheten

Seriffer er de små linjene i enden av bokstavstreker. I trykt typografi hjelper seriffer folk til å gjenkjenne trykte bokstaver raskere og mer effektivt. Men på skjermen, spesielt på en ikke-retina, er seriffer ikke så godt skissert som på papiret, noe som delvis svekker lesingen.

I tillegg til å sikre bedre lesbarhet, snakker sans serif-fonter på en dristigere og mer minimal måte.

Her argumenterer jeg ikke for at du helt bør forlate serif-fonter. Et bedre råd ville være å være mer forsiktig med dem og bruke de som er rene og presise.

For eksempel bruker dette kreative fotograferingsnettstedet Open Sans sans serif-font som hjelper nettstedet til å gi en dristig, stilig og avgjørende uttalelse.

3: Husk anstendig skriftstørrelse

Plassen på Internett er ubegrenset. Det er derfor det ikke er nødvendig å lagre det og gå for små skriftstørrelser som påfører brukerne ekstra øyebelastning. Lesere med nedsatt syn kan oppleve vanskeligheter med å lese liten tekst, mens selv lesere med godt syn opplever tretthet og må ta pauser for å komme til slutten av, la oss si, 10 pkt tekst.

Hvis du ikke vil at brukerne dine skal slite med å lese teksten du presenterer eller zoome inn på, kan du velge skriftstørrelser på 16 pkt +. Slike skriftstørrelser minimerer belastningen på øynene og hjelper brukerne med å oppnå målet sitt på nettstedet ditt uten visuell utmattelse.

Malcolmy-nettstedet bruker lesbar 16pt typografi for hjemme- og bloggsidene.

4: Observer optimal linjelengde

På nettstedet ditt bør du ikke stappe all ledig plass med teksten din. Ved å passe på en optimal linjelengde holder du deg til høye leseopplevelsesstandarder. Hvis linjene er for korte, må leserens øyne gå frem og tilbake når du leser teksten, noe som medfører ekstra belastning for øynene. Hvis linjene er for lange, er det for vanskelig å konsentrere seg om det nøyaktige ordet du leser og for lett å gå seg vill.

For å unngå begge ugunstige situasjonene, hold deg til 60 tegn per linje (for nettbrett/PC-skjermer).

Dette bildet illustrerer at tekstene med for korte eller for lange linjer er vanskeligere å lese enn tekstene som holder seg til en linjelengde på «gylden midt» på ~ 60 pkt.

Den optimale linjelengden for mobile enheter (f.eks. smarttelefoner) er kortere. For at teksten skal være lesbar på små skjermer, bør linjen inneholde rundt 30 – 40 tegn.

5: Gå for skrifttyper som fungerer bra i forskjellige størrelser

Som du vet er bokstavstørrelsen for overskrifter vanligvis større enn for brødtekst. Overskriftene varierer også i størrelse, fra den minste til den største. På nettstedet ditt må du velge forskjellige skriftstørrelser for forskjellige elementer (f.eks. knapper, bildetekster, navigasjonselementer, etc.), samt forskjellige skriftvekter for fremheving.

For å sikre at nettstedelementene dine kan skilles ut, bør du velge en skrifttype som kommer i forskjellige størrelser og vekter. Hvis du går for en av standardfontene, f.eks. Google Fonts Roboto-skrifttype, vil du se alle variantene den har. Noen fonter kommer i 10+ varianter, noen har bare et par. Gå for en skrifttype som har et rikt sett med varianter for å sikre mangfoldig innholdsrepresentasjon på nettstedet ditt.

Ulike skriftstiler av Roboto Google-skrift.

6: Gjør smarte fargevalg

Tidene med flerfargede, skrikende nettsteder har gått. Nå er lesbarhet og kontrast de herskende kreftene som bestemmer fargevalg. For det første skal innholdet ditt være lesbart, og kombinasjonen som i mange år ble ansett som den beste er svart tekst på hvit bakgrunn. Denne kombinasjonen sikrer maksimal kontrast og dateres tilbake til klassisk typografi.

Men nylig har det ofte blitt hevdet at svart farge påfører øynene mer enn mørkegrå. Nyansene av mørkegrå kontrasterer også godt med hvit bakgrunn, men de er litt mindre tette og gir en mer behagelig leseopplevelse.

Dette er gråtonene som overgår svart når det gjelder å sikre en komfortabel leseopplevelse.

En nettside som bruker mørk grå som skyvetekstfarge.

Når du velger farge, sørg for at du tester den på forskjellige enheter og i forskjellige miljøer. Teksten som er god å lese i et typisk kontormiljø kan være vanskelig å skille på en smarttelefon, spesielt når den brukes utendørs. Det er vanskelig å gjøre rede for alle faktorene, men målet ditt bør være å ta hensyn til de fleste miljøer og gi forskjellige brukergrupper en komfortabel nettleseropplevelse.

7: Ikke eksperimenter med linjehøyde

Å minimere linjehøyden for å få plass til mer innhold er ikke en god praksis. Hvis linjene er for nær hverandre, er det mer sannsynlig at en leser hopper til forrige eller etterfølgende linje og blir sittende fast. Avstanden mellom linjene (ledende) bør være 30 % større enn høyden på tegnene som brukes. En slik føring sikrer best lesbarhet av innholdet og dets klare visuelle oppfatning.

Når linjehøyden blir mindre enn 1,3 tegnhøyde, blir teksten vanskelig å lese.

8: La brukerne dine bestemme

Når du bruker UX og typografi, er det viktig å huske på målgruppen din og dens behov. Vet hva slags lesere nettstedets gjester er, og hva er de typiske situasjonene de oppdager innholdet på nettstedet ditt i. For eksempel, hvis du målretter deg mot ungdom, vær mer oppmerksom på mobil UX og juster typografien deretter.

Kjør A/B-testing for typografivalgene dine og se hvilken som reduserer fluktfrekvensen og gir flere konverteringer. Vær klar til å hele tiden justere typografien din for å fortsette å forbedre deg selv og gjøre brukeropplevelsen mulig.

For mer informasjon om A/B-testing, sjekk ut denne artikkelen.

Konklusjoner

Å grave i koblingen mellom brukeropplevelse og typografi kan resultere i flere verdifulle forbedringer av brukeropplevelsen på nettstedet ditt. Hvis du går for typografi-relaterte justeringer som er oppført ovenfor, vil du garantert få et lesbart nettsted, som er en sann fornøyelse å surfe. Jeg ønsker deg lykke til i dette arbeidet!

Har jeg gått glipp av noe? Gi meg beskjed i kommentarfeltet nedenfor. Dine emnerelaterte spørsmål er også hjertelig velkommen.

Følg med!