Varför teckensnitt är viktiga: Insikter om UX och typografi
När användare kommer till din webbplats kommer de vanligtvis med något mål i åtanke. Detta mål är sällan att upptäcka din underbara webbplatsdesign och njuta av dess avancerade funktionalitet.
Användare kommer oftast för att få information, vare sig det handlar om vissa aspekter av livet i allmänhet eller om en produkt du erbjuder. Här kommer typografi in eftersom det är tänkt att säkerställa bästa möjliga uppfattning av informationen på din webbplats. Idag är det dags att gräva ner sig i den invecklade kopplingen mellan UX och typografi och spåra effekten av dina teckensnittsval på den övergripande webbupplevelsen.
Varför betyder typografi så mycket för UX?
Det har rapporterats att mer än 95 % av informationen på Internet finns i form av text (skriftspråk). Denna information är tänkt att absorberas av människor och de försöker göra sitt bästa för att bearbeta så mycket information de kan. Här fungerar typografi som en stödjande vän som hjälper människor att få ut det mesta av sin surftid och ansträngning.
Bra typografi är ofta svårt att lägga märke till. Det gör läsprocessen strömlinjeformad och du uppmärksammar den inte. Å andra sidan kan dåliga typografival förstöra surfupplevelsen och minska läsuppfattningen till ett minimum. Eftersom ingen gillar att slösa bort sin tid, blir typografi en av de inneboende UX-spakarna som i hög grad påverkar den övergripande användarupplevelsen på en given webbplats.
Genom att justera din webbplatstypografi förbättrar du:
- textläsbarhet;
- innehålls tillgänglighet;
- webbplatsens användbarhet;
- och övergripande grafisk balans.
Här diskuterar vi bara UX och typografilänken, utan att nämna typografins roll för att forma webbplatsens visuella personlighet, definiera ditt varumärke och fånga läsarens uppmärksamhet. Kolla in den här artikeln för att lära dig mer.
Valet av typografi för den här kyrkans webbplats ökar inte bara UX på webbplatsen, utan hjälper också till att forma varumärkets visuella identitet).
Hur man ökar användarupplevelsen på din webbplats genom att optimera typografi?
Det finns flera sätt du kan öka UX på din webbplats genom att optimera typografin. Eftersom UX och typografi är nära sammankopplade, genom att optimera typografi, optimerar du också läsbarheten för din text, och på så sätt ökar den övergripande UX på din webbplats. Låt oss se vad reglerna för att optimera typografi är:
1: Minimera antalet använda teckensnitt
Om du vill att din webbplats ska se sammanhängande och professionell ut, använd upp till tre typsnitt (inte fler). Olika typsnitt på en webbplats krockar och distraherar användaren från att läsa texten. Användning av flera typsnitt som ser liknande ut hjälper dig att skapa samstämmighet i UX på dina webbsidor och befriar användare från att ta till sig frekventa stiländringar.
Det är precis vad du bör undvika på din webbplats.
Ofta räcker det med användning av bara ett typsnitt. Om du fortfarande känner att du behöver ett par typsnitt, välj typsnitt som har samma teckenbredd. I det här fallet kommer typsnitten inte att skilja sig alltför mycket från varandra och distrahera läsaren.
Denna ombyggnadswebbplats använder det okonventionella Six Caps-teckensnittet för att öka webbplatsens visuella identitet. Detta teckensnitt kombineras med Roboto Condensed för att ha två teckensnitt, vars teckenbredd matchar.
En annan bra idé om att kombinera ett par typsnitt är att kombinera de typsnitt som imiterar handstil med de vanliga. Handskriven typografi ger en personlig touch till din övergripande webbdesign och utvecklar den visuella karaktären på din webbplats.
Den här webbplatsen har en mjuk och feminin känsla med teckensnittet Caveat Handwriting.
2: Välj Sans Serif-teckensnitt för att förbättra läsbarheten
Seriffer är de små linjerna i ändarna av bokstavsdrag. I tryckt typografi hjälper seriffer människor att känna igen tryckta bokstäver snabbare och mer effektivt. Men på skärmen, särskilt på en icke-Retina en, är seriffer inte så väl skisserade som på papperet, vilket delvis försämrar läsningen.
Förutom att säkerställa bättre läsbarhet talar sans serif-teckensnitt på ett djärvare och mer minimalistiskt sätt.
Här argumenterar jag inte för att du helt ska överge serif-teckensnitt. Ett bättre råd skulle vara att vara mer försiktig med dem och använda de som är rena och exakta.
Till exempel använder den här kreativa fotograferingswebbplatsen Open Sans sans serif-font som hjälper webbplatsen att göra ett djärvt, elegant och avgörande uttalande.
3: Mind Decent Font Size
Utrymmet på Internet är obegränsat. Det är därför det inte finns något behov av att spara det och välja små teckenstorlekar som belastar användarna ytterligare. Läsare med nedsatt syn kan uppleva svårigheter att läsa liten text, medan även läsare med god syn upplever trötthet och måste ta pauser för att komma till slutet av, låt oss säga, 10pt text.
Om du inte vill att dina användare ska kämpa med att läsa texten du presenterar eller zooma in, välj 16 pkt + teckenstorlekar. Sådana teckensnittsstorlekar minimerar ögonbelastningen och hjälper användare att uppnå sina mål på din webbplats utan visuell utmattning.
Malcolmys webbplats använder läsbar 16pt typografi för sina hem- och bloggsidor.
4: Observera optimal linjelängd
På din webbplats ska du inte fylla på allt tillgängligt utrymme med din text. Genom att ha en optimal radlängd håller du dig till höga läsupplevelsestandarder. Om raderna är för korta måste läsarens ögon gå fram och tillbaka när man läser texten, vilket medför ytterligare ansträngning för ögonen. Om raderna är för långa är det för svårt att koncentrera sig på exakt det ord du läser och för lätt att gå vilse.
För att undvika båda ogynnsamma situationerna, håll dig till 60 tecken per rad (för surfplattor/PC-skärmar).
Den här bilden illustrerar att texter med för korta eller för långa rader är svårare att läsa än texter som håller sig till en radlängd på "gyllene mitten" på ~ 60 pkt.
Den optimala linjelängden för mobila enheter (t.ex. smartphones) är kortare. För att texten ska vara läsbar på små skärmar bör raden innehålla cirka 30 – 40 tecken.
5: Välj typsnitt som fungerar bra i olika storlekar
Som du vet är bokstavsstorleken för rubriker vanligtvis större än för brödtext. Rubrikerna skiljer sig också åt i storlek, allt från den minsta till den största. På din webbplats måste du välja olika teckenstorlekar för olika element (t.ex. knappar, bildtexter, navigeringsobjekt, etc.), såväl som olika teckensnittsvikter för betoning.
För att säkerställa särskiljbarheten av dina webbplatselement, välj ett teckensnitt som finns i olika storlekar och vikter. Om du väljer ett av standardteckensnitten, t.ex. Google Fonts Roboto-typsnitt, kommer du att se alla varianter som det har. Vissa typsnitt finns i 10+ varianter, vissa har bara ett par. Välj ett teckensnitt som har en mängd olika varianter för att säkerställa en mångsidig innehållsrepresentation på din webbplats.
Olika teckensnittsstilar av Roboto Google-teckensnitt.
6: Gör smarta färgval
Tiderna för flerfärgade, skrikande webbplatser har passerat. Nu är läsbarhet och kontrast de styrande krafterna som avgör färgvalen. Först och främst ska ditt innehåll vara läsbart, och den kombination som i många år ansågs vara den bästa är svart text på vit bakgrund. Denna kombination säkerställer maximal kontrast och går tillbaka till klassisk typografi.
Men nyligen har det ofta hävdats att svart färg påför mer ögonpåfrestning än mörkgrå. Nyanserna av mörkgrå kontrasterar också bra med vit bakgrund, men de är lite mindre täta och ger en bekvämare läsupplevelse.
Det här är nyanserna av grått som överträffar svart när det gäller att säkerställa en bekväm läsupplevelse.
En webbsida som använder mörkgrå som skjutreglagets textfärg.
När du gör ditt färgval, se till att du testar det på olika enheter och i olika miljöer. Texten som är bra att läsa i en typisk kontorsmiljö kan vara svår att urskilja på en smartphone, särskilt när den används utomhus. Det är svårt att ta hänsyn till alla faktorer, men ditt mål bör vara att ta hänsyn till de flesta miljöer och ge olika användargrupper en bekväm surfupplevelse.
7: Experimentera inte med linjehöjd
Att minimera linjehöjden för att få plats med mer innehåll är inte en bra praxis. Om raderna är för nära varandra är det mer sannolikt att en läsare hoppar till föregående eller efterföljande rad och fastnar. Avståndet mellan raderna (ledande) bör vara 30 % större än höjden på de tecken som används. En sådan ledning säkerställer bästa läsbarhet för innehållet och dess tydliga visuella uppfattning.
När radhöjden blir mindre än 1,3 teckens höjd blir texten svårläst.
8: Låt dina användare bestämma
När du använder UX och typografi är det viktigt att tänka på din målgrupp och dess behov. Ta reda på vilken typ av läsare dina webbplatsgäster är och vilka är de typiska situationerna de upptäcker ditt webbplatsinnehåll i. Om du till exempel riktar dig mot ungdomar, ägna mer uppmärksamhet åt mobil UX och justera typografin därefter.
Kör A/B-testning för dina typografival och se vilken som minskar avvisningsfrekvensen och ger fler omvandlingar. Var redo att hela tiden justera din typografi för att fortsätta att förbättra sig själv och göra användarupplevelsen möjlig.
Läs den här artikeln för mer information om A/B-testning .
Slutsatser
Att gräva i länken mellan UX och typografi kan resultera i flera värdefulla förbättringar av användarupplevelsen på din webbplats. Om du går efter typografirelaterade tweaks som anges ovan, kommer du garanterat att få en läsbar webbplats, att surfa vilket är ett sant nöje. Jag önskar dig lycka till i detta företag!
Har jag missat något? Vänligen meddela mig i kommentarsektionen nedan. Dina ämnesrelaterade frågor är också varmt välkomna.
Håll ögonen öppna!