Hur man använder typografi och design för att öka användarens upplevelse
Vad gör en webbplats eller ett e-postmeddelande, övertygande och lätt för ögonen? Innan du börjar läsa på guider på guider om hur du skapar en landningssida eller hur du skaffar den perfekta e-posten, kanske du bör tänka på ett enkelt och minimalt sätt för en förändring.
Så vad är det som gör något sådant underbart? Är det det visuella, färgerna, kopian… Eller något annat?
Nåväl, alla dessa är bra och bra, särskilt kopian (wink wink! ), men det finns något som gör att användaren verkligen uppmärksammar: typografi.
Typografi är stilen och utseendet på trycksaker, enligt min gamla vän, Google. Det faktum att detta är en typ av konst i sig är självklart.
Och typografi är grunden på vilken alla typer av mönster som har att göra med det skrivna ordet skapas. Det betyder att du kan hitta det överallt: i böcker, på paket, till och med – och viktigast av allt, för oss – på webbplatser, e-postmeddelanden och målsidor.
Men, konstigt eller inte, typografi är något som måste ge användarna en bra upplevelse, ungefär som alla verktyg. Och kursiva bokstäver kan vara ack så vackra, men är de användbara?
Låt oss se hur vi kan förbättra en användares upplevelse och själva användargränssnittet genom att använda korrekt typografi.
Till en början, There’s The Font
Föreställ dig hur blah och likgiltig din webbplats skulle se ut och hur mycket den skulle ta ut av användarens upplevelse om ditt typsnitt inte matchade ett företags heliga treenighet: din målgrupp, ditt varumärkes ton och dina mål.
Att välja rätt typsnitt är lite som att välja de perfekta gardinerna för ett rum. Klibbiga gardiner visar dålig smak, och ett teckensnitt som helt enkelt inte matchar kan få ditt projekt att se klibbigt ut i bästa fall och i värsta fall skräppost.
Typsnittet är lika viktigt som själva bilden, för att skapa ett intryck och peka ut de saker du behöver för att bli preciserad, både på en webbplats och i ett e-postmeddelande, för att optimera din användares upplevelse.
Du behöver fetstil för djärva uttalanden, kursiva bokstäver och intensiv kalligrafi för saker som är eleganta och inte alltför viktiga. Kombinationer som den nedan är ett måste:
märkestypsnitt
Jag är dock tvungen att varna dig för något: För många teckensnitt kommer att få dig att förlora spelet. Du kan ha två typer av typsnitt som mest, och du måste se till att de används som exemplet ovan: Djärvare och strängare för rubriken, mer förfinad för kopian.
Och kom ihåg följande: Om vi pratar om din webbplats och inte en målsida eller ett e-postmeddelande, kanske du bör tänka på att använda ett standardiserat typsnitt.
Du förstår, kursiv kan ibland vara svårt att läsa och ett resultat som är för konstigt kan vara vackert men det är inte lätt att läsa och förstå. För dagens upptagna kunder, som är skickliga på att skanna textblock och hitta exakt det de behöver veta, för att spara tid, kan något icke-standardiserat se ut som alldeles för mycket ansträngning.
Din publik är mer bekant med Times New Roman, till exempel. De kan till och med berätta var den ska användas och de är lätta som en plätt att skanna igenom.
Dessutom kan det orsaka ett verkligt innehållsproblem, i den meningen att ett mer konstnärligt typsnitt och format kan ta uppmärksamheten från innehållsengagemanget.
Ett teckensnitts speciella element:
Ett teckensnitt består av olika element som kan göra eller bryta dess användning, i stort sett. Du har olika stilar, vikter, arbeten! Så låt oss se vad det här handlar om:
Du har först och främst din typsnittsfamilj. Teckensnittsfamiljen (eller typsnittet) är i stort sett den stora kategorin som innehåller typsnitt av samma stil.
För det andra har du din teckensnittsvikt, bredden på varje tecken, det vill säga. Detta element separerar vilket typsnitt som ska användas för att skapa en rubrik och vilket som kommer att hamna i brödtexten.
För det tredje kommer kerning, dvs mönstret som tecknen följer, dvs avståndet mellan två bokstäver, vilket är nödvändigt, eftersom dina ögon kommer att följa det exakta mönstret.
Detta avstånd och marginalerna är det som kommer att definiera det sista, mycket viktiga elementet:
Antal tecken per rad. För många tecken per rad och textens brödtext kommer att se rörig ut, vilket resulterar i en ganska dålig användarupplevelse.
För få och det kommer att ta mer tid för ögat att nå nästa stycke och få exakt samma resultat som jag nämnde ovan.
Genom att begränsa längden förbättrar du din texts läsbarhet. Om raden är för lång kommer den inte att visas ordentligt på enheten, vilket kommer att innebära att läsaren inte kommer att kunna läsa den ordentligt, vilket kommer att resultera i en röra, CRO(Conversion Rate Optimization)-mässigt.
Du måste hitta ett gyllene snitt som fungerar för dig på den och kom ihåg att detta gyllene snitt måste stanna vid 60 tecken per rad.
Och ett litet tips här: Du måste också vara uppmärksam på avståndet mellan raderna, eftersom det helt enkelt är för lätt att antingen läsa om en rad eller utelämna den helt. Vilket aldrig är en bra praxis, särskilt i denna tid när konsumenterna har så många alternativ.
Teckenstorlek och andra mardrömmar
Hur många gånger har du sett en text i alla städer och tänkt att skribenten vill skrika argt? Jag slår vad om att svaret är "många gånger".
Teckenstorlekar kan fungera precis som tonen i det talade ordet: kursiv stil kan härma, fet stil kan vara krävande, versaler kan få uppmärksamhet och så vidare.
Därför måste en designer vara försiktig när han väljer ett typsnitt och en stil, särskilt om de har en mångsidig publik att "prata" med.
Om du inte tror mig, öppna bara en roman och kolla typsnittet. Öppna sedan en barnbok och gör samma sak.
Det hela kokar ner till det jag nämnde i början: Du måste tilltala din målgrupp genom din typografi såväl som kopian och själva bilden.
Men storleken är inte allt som spelar roll. Eftersom vi pratar digitalt måste din typografi vara oklanderlig på alla enheter. Du måste optimera för mobil, surfplatta och dator för att hindra användaren från att bli förvirrad och slänga ditt innehåll helt och hållet.
Tänk på att höjden är lika viktig. En mycket lång eller mycket kort text som ser bra ut när du testar för skrivbordsvy, kanske inte fungerar bra för mobilen.
Den kanske största mardrömmen av alla är anpassningen av texten. I västerländsk kultur är folk vana vid att läsa från vänster till höger, därför bör du vara uppmärksam på det faktum och agera därefter.
Använd vänsterorientering för att efterlikna hur folk läser texter i tryck, och du är klar.
Detsamma kommer inte att fungera för din målgrupp om denna är belägen någonstans i öster, där läsning är från höger till vänster. Så återigen, din målgrupp är det första du ska tänka på innan du fattar ett beslut.
Trender är dina vänner
Du vet att bästa praxis inte kommer att ta vägen när det kommer till typografi och design, eller hur?
Du kan använda de bästa typsnitten, din anpassning kan vara oklanderlig, men utan att använda designtrender kan din e-post, webbplats, målsida, vad du än skapar, fortfarande förbli en av dina bäst bevarade hemligheter.
Fet är ibland vackert
Tänk på MAC till exempel. Skönhetsmärket älskar att använda fet text och extrem kontrast som ett element:
MAC Cosmetics
Detta är märkets slogan och har varit det sedan alltid. Det är dramatiskt och du kan inte missa det. Detsamma gäller hjältebilden i deras nyhetsbrev:
MAC Cosmetics nyhetsbrev
Hälsningen är bara… Där! Om vi var tvungna att skapa en person av den där hjältebilden skulle det vara en väldigt stilig person som skulle bli väldigt glad över att se dig gå nerför gatan.
Överväg också att göra följande: Förutom att använda fetstilta bokstäver kan du också markera text i din design.
Ungefär som vad vi brukade göra som barn med våra markörer på våra böcker. Kommer du ihåg hur mycket uppmärksamhet detta brukade väcka?
Det här är två sätt du kan använda, för att etablera hierarkin när det kommer till designen.
Piffa upp texten!
Textblock är fantastiska när du anpassar dem och folk kan läsa dem utan att ens försöka, men vad händer när du behöver sticka ut från mängden och krydda lite?
Försök att blanda ihop saker och ting när det kommer till rubrikerna, med text som börjar som horisontell, vänd till vertikal, vänd till spridda bokstäver…
Nyckeln här är att engagera besökaren. Och vilket bättre sätt att engagera dem än att vara lekfulla och låta dem hålla utkik efter dessa små element som kommer att få dem att leka lite.
Magic People Voodoo People
Bilden ovan är den perfekta visualiseringen av poängen jag försöker göra, eftersom jag var tvungen att vända på huvudet en eller två gånger utan att gå vilse. Du kan se att vänsterjusteringsprincipen fortfarande är uppenbar här, eftersom du inte kan läsa namnet fel, såvida det inte är avsiktligt och du behöver en övning i kreativitet!
Bitar och bitar av innehåll
Vad du än gör bör du alltid komma ihåg att innehåll är det du arbetar med och innehåll är kung. Alltid.
Se till att kvaliteten stämmer överens med din vision och hur ofta du postar, laddar upp eller skickar mejl.
För det andra, se till att din design inte tar uppmärksamheten från innehållet. Till exempel bör en CTA-knapp vara fet och kontrasterande färger, men inte till den punkt där mottagaren inte läser budskapet du försöker förmedla.
Fortsätt och läs innehållet, spendera tid med det och sätt dig in i det verkligen. Om du lägger upp många nya saker måste de vara aktuella, relevanta och fånga uppmärksamheten.
Visualisera vad du vill säga. Läs din text högt och se till att du skapar den bild du hade i huvudet när du först såg utkasten.
Och en till för vägen
Var mycket uppmärksam på de färger du ska använda. Förutom färgpsykologi och hur det kan påverka användaren, måste du vara försiktig med ytterligare ett par saker:
Nummer ett, färgblindhet. Använd inte för många röda eller gröna när det gäller att markera viktig information.
Färgblindhet är ett ganska vanligt tillstånd, där röd och grön färgblindhet är de två vanligaste fallen. Så när det kommer till CTAs och saker man bör känna till, som till exempel villkoren, håll dig till svarta och högkontrasterande.
Nummer två, blinkande bilder och text. Blinkande bilder kan orsaka känslor av ångest, de kan distrahera användaren och de är lite irriterande. Men det här är inte de främsta anledningarna till att du bör undvika dem.
Blinkande bilder kan orsaka epileptiska anfall.
Sammanfattningsvis
Det finns fortfarande mycket som är osagt när det kommer till typografi, webbdesign och användarens egen upplevelse, men jag tror att vi har täckt grunderna här.
Se bara till att tänka utanför ramarna och vara relevant utan att vara likadan som alla. En kreativ individ som du kommer säkert att hitta ett sätt att tänka utanför ramarna!
Och glöm inte att lämna en kommentar med din feedback på detta inlägg!