Månad: oktober 2019

Vikten av att veta din besökares upplevelse och uppförande är viktigt för att din hemsida och dess innehåll skall nå fram till besökaren. Genom att låta någon vän eller dylikt besöka din hemsida eller kommentera dess design kan ge ledtrådar kring hur majoriteten kommer uppfatta din sida men räcker det? Många faktorer kan påverka besökarens upplevelse och hur de kommer navigera och söka på din hemsida. Frågor som du kan ställa dig är till exempel om besökaren bara kommer att besöka din hemsida enbart på mobilen eller bara på en dator. Fungerar hemsidan lika bra på båda saker och uppfattats designen och innehållet lika bra på båda?

Besökaren som en bil på motorvägen

Rollen som en webbdesigner är att hjälpa mottagaren att kunna identifiera vad det handlar om och vem avsändaren är, oavsett om det handlar om en hemsida, reklam, information eller bruksanvisningar. Ta till exempel vägskyltar, de skall uppfattas i en hastighet upp till 110 km/h. Skylten skall bland annat få förarens uppmärksamhet, ge ett tydligt budskap och skall kunna upptäckas i god tid. Man kan göra en liknelse när vi surfar på på internet. När vi designar hemsidor tror vi att besökaren kommer titta på alla element som finns på dem. Vad som egentligen händer (om vi har tur) är att besökaren blickar igenom hemsidan, skannar lite av texten och klickar på den första länken som fångar deras intresse eller vagt liknar saken de letar efter, och snabbt går det, likt bilen som går i 110 km/h på motorvägen.

Som du kanske börjar ana är det lite mer komplicerat att förstå hur en besökare till en hemsida kommer uppträda när de besöker er hemsida. Ofta men inte alltid antar vi webbdesigners, att besökaren kommer använda hemsidan som vi gör och vi tror ofta att vi har en stark vision på hur vår design kommer uppfattas av besökaren. Har vi det?

Lite grundfakta kring gemene internetanvändaren

För att vi ska kunna skapa bra användbarhet och en bra design när vi bygger hemsidor kan det vara bra att ha grundläggande information kring hur folk använder hemsidor.

Vi läser inte hemsidor. Vi skannar dem.

Jo du läste rätt. Ett av de få väldokumenterade fakta om webben är att människor spenderar väldigt lite tid att läsa hemsidor. Istället, skannar eller skummar vi dem, letandes efter ord eller fraser som fångar vår blick. Varför gör vi då detta?

Jo:

• Vi har vanligtvis bråttom. Mycket av vårt webbsurfande är motiverande av önskan att få oss att spara tid. Webbanvändare tenderar att agera som hajar: De måste hålla sig rörande, annars dör de. Hur många gånger per dag slänger du upp mobilen för att snabbt söka upp något? Själv gör jag det ofta och snabbt likt hajen skummar jag igenom efter mitt mål.

 

• Vi vet att vi oftast inte behöver läsa allting. På de flesta hemsidor, är vi ofta bara intresserade i en bråkdel av vad som finns på hemsidan. Vi söker endast efter bitar som matchar vårat intresse, resten blir irrelevant. Genom att skanna är hur vi fångar de relevanta bitarna.

 

• Vi är bra på det. Vi har scannat tidningar, magasiner och böcker hela vårt liv för att hitta delarna vi är intresserade i, och vi vet att det fungerar.

Detta kan göra arbetet för en webbdesigner problematiskt ifall man inte har koll på det. Det kan vara många grafiska element som skall synas och en visuell hierarki skall följas. Klientens önskan kring design och hur mycket information som skall vara med kan göra jobbet för en webbdesigner extra besvärligt. Så hur skall vi agera därefter?

Punkter som kan vara värda att tänka på.

• Vem? (Mottagare/målgrupp) Det är viktigt att veta så mycket som möjligt om mottagaren och hur hon/han tänker för att effektivt kunna nå fram med budskapet. Kom ihåg att man alltid kommunicerar på mottagarens villkor.

 

• Vad? (Budskapet) Vad vill man säga måste framgå tydligt.

 

• Hur? (På vilket sätt) Vilken är den bärande idén i budskapet? Hur skall budskapet utformas, både grafiskt och i text, för att bli uppmärksammat?

 

• Var? (Vilken kanal) Vilken slags hemsida riktar sig designen till. Design som passar en viss typ av företag eller föreningen kanske inte kan tillämpas på det ena eller det andra.

Genom att i förväg sätta upp punkter och förhållningssätt kan vi utforma webbdesignen utifrån dessa mål som vi satt upp i ett tidigt skede. Genom att arbeta mer på detta sätt kan man dels spara tid men även jobba utifrån en plan efter hur folk kommer agera på din hemsida som du kan presentera för din klient.

Tips när det går undan.

Eftersom användaren snabbt skannar av och uppträder som en haj i havet finns det saker som gör att du kan få besökarens uppmärksamhet så att de ser och förstår så mycket av din webbdesign som möjligt. Här kommer fyra tips:

• Skapa en klar visuell hierarki på varje sida – Detta för att fånga användarens uppmärksamhet och guida dem med hjälp av din design

 

• Visa tydligt vad som är klickbart – Eftersom vad en stor del av internetanvändaren gör på nätet är att leta efter klickbara element är det viktigt att visa vad som är klickbart och inte.

 

• Dela in sidan i tydliga definerade områden – Att dela sidan i tydligt definierade områden är viktigt eftersom det gör det möjligt för användare att snabbt bestämma vilka områden på sidan att fokusera på och vilka områden de på ett säkert sätt kan ignorera

 

• Minimera visuellt brus – Att ha för många grafiska element på sidan kan ge motsatt effekt och göra användaren irriterad och välja att stänga ner hemsidan för att gå vidare i sökandet.

Värt att nämna är att människor har olika mycket tolerans för distraktioner och komplexitet. Vissa människor som surfar har inga problem alls med komplicerade hemsidor och mycket visuellt brus, men många har det och tröttnar fort och surfar vidare.

Slutord

Därav så är det en bra idé att utforska om hur folks surfvanor fungerar i verkligheten. Kommer de att titta på alla element som du designat fram? På vilket medium kommer de främst att titta på din hemsida? Frågorna kan bli många men att tidigt börja tänka på hur ens design kommer uppfattas och användas kan vara värt att tänka på för att öka användbarheten. Du kan själv göra ett snabbt test och besöka en hemsida du ej besökt förut där du söker något speciellt på just den hemsidan. Fokusera extra noga på vad du kollar på först och hur du navigerar dig på sidan. Fråga dig själv sen varför du gjorde på det viset du gjorde och hitta du det du sökte efter? Hur lång tid tog det?. Säkert fanns det olika element som sökte din uppmärksamhet och påverkande ditt sökande positivt och negativt.

Att skriva på webben är inte helt olikt som att skriva för tryck. Många principer stämmer för båda och kan tillämpas för respektive medium. Oavsett om du använder dig av pixlar, ems eller viewport width finns det några saker att tänka på och akta sig för så att inte texten blir svårläst för besökaren. Här kommer några tips för att förbättra typografin.

Tips nr 1: Gör inte dina textrader för långa.

Detta är något som ofta kan förekomma på hemsidor. Jämför dessa två texter, vilka anser du lättast att läsa?

En rekommendation är att hålla sig till max 75 tecken i bredd. Allt längre än det blir svårt att läsa och orsakar onödig belastning på ögonen på grund av avståndet ögat måste resa från vänster till höger och tillbaka igen. Hur gör vi detta med css? Jo, sätt en max-width på elementet paragrafen är i. Själv rekommenderar jag att ställa in en max-width separat i en container eller en grid-klass istället för på paragraf-elementet i din css för om man i framtiden vill ändra på textens bredd eller storlek blir det då lättare att korrigera.

Tips nr 2: Rätt radavstånd.

Titta på dessa tre paragrafer. Vilken tycker du är lättast att läsa?

Felaktig radavstånd bidrar till en svårläst text. Avståndet mellan raderna skall vara så stort att det bildas ett tydligt ljusrum. En bra tumregel är att hålla radavståndet mellan 140% till 180% av grundstorleken på fonten. Mindre gör det svårläst och känns trångt medans större gör att ögat kan förlora sin fokus och man blir vilsen i texten. Hur tillämpar vi detta med css då? Jo säg att du har en font-size på 18pixlar och du siktar på att ha ett radavstånd på 150% så multiplicerar du helt enkelt din font med 1.5 för att få rätt radavstånd: 27 pixlar.

Typsnittet själv kan avgöra vilket radavstånd som krävs. Ett typsnitt med långa upp- och nerstaplar behöver mycket luft för att staplarna inte skall kollidera. Titta på bilden nedan:

Tips nr 3: Undvik tunn font om inte designen kräver det.

Kanske ett av de vanligare problemen på nätet när det gäller typografi på webben. Nämligen användandet av extremt tunna sans-serif typsnitt för stycketext. Detta gör texten svårläst eftersom texten börjar blekna mot bakgrunden på grund av bristen på kontrast. Ett exempel på ett för tunt typsnitt:

Försök och läs texten där. Märker du att du kämpar för att läsa den? Mer fokus krävs för att läsa den. Läsbarheten minskar och läsningen blir mycket mer irriterande än den verkligen måste vara. Jag rekommenderar att du väljer en vanlig vikt för brödtext. Att läsa tunna fonter kan vara en fin effekt i korta partier men att läsa den i en längre form blir ansträngande.

Tips nr 4: Skapa en bättre hierarki med fetstil på dina Rubriker.

Kan kännas självklart men en tydlig hierarki är avgörande för att kontrollera läsarens fokus, särskilt i komplexa applikationer som visar massor av data. Även om det brukade vara vanligare för ett par år sedan, brukar jag fortfarande se att många använder mycket tunna vikter för rubriker på webbplatser. Hur svårt är det att se rubriken nedan?

Det finns ofantligt mycket böcker och artiklar om typografi om man vill lära sig mera men detta är enkla knep som ger en bra grund. Som webbdesigner är det en bra egenskap att ha grundläggande information om hur man ska presentera text på nätet. 95% av informationen på webben är nämligen text.

Visuell hierarki finns överallt. På hemsidor, flygblad och på kaffeautomaten på jobbet. Idén är att nå fram med ett budskap till användaren. Detta kan till exempel vara att förmedla en känsla eller kanske en viss information som användaren ska ta till sig.

Att kunna skapa en visuell hierarki är viktigt för att kunna leda din besökare genom ett material. Må detta vara en hemsida eller ett flygblad. Med en tydlig visuell hierarki lyfter du fram en fokuspunkt och guidar mottagaren genom ditt grafiska material. Notera bilderna nedan.

Vart börjar ni titta? troligtvis enligt denna ordningen:

Ögat försöker att behandla det som presenteras och en visuell rangordning har skapats. Genom att endast ändra lite på bildernas storlek och position kan man ändra fokuspunkt och den visuella hierarkin ändras.

Fokuspunkten ändras och den visuella hierarkin ändras. Förhoppningsvis dras första anblicken mot den vänstra bilden. Ögat har som vana att dras till sådant som sticker ut ifrån det vanliga.

Detta gör att det skapas en spänning inom oss och vi blir nyfikna. Man kan på så vis skapa en visuell guide för åskådaren för hur ens material skall avsynas.

Notera bilden nedan. En enkel poster som till exempel skulle kunna vara en hemsidas front.

Själva bilden förmedlar en känsla men det är inte huvudfokus med denna designen. Om vi säger att huvudfokus skall ligga på texten om vi ansåg att det är viktigt för designen kan vi ändra om den lite för att skapa lite bättre visuell hierarki.

Fokus ligger nu mer på texten än på bilden. Hur har jag åstadkommit det här? Jo om ni tittar på bildens färger så är de genomgående kalla och skapar en kall känsla. Jag valde därför en varm färg för att ge kontrast mot fotots känsla och färger. Det är för övrigt inte bara färg du kan använda dig utav för att skapa kontrast och förändra fokuspunkten och därmed påverka den visuella hierarkin.

Värt att nämna är dock att alla inte alltid kommer att tyda ditt material som du tänkt dig men man bör ändå skapa så bra förutsättningar som möjligt för att den visuella hierarkin kommer följas. Det finns många faktorer som påverkar din fokuspunkt. Dessa punkter kan vara saker så som:

• Kontrast
• Utrymme
• Symmetri&Asymmetri

Varför ska man då bry sig om den visuella hierarkin? Här nämns några fördelar medans det finns fler.

• Du kan leda din besökare genom en design till exempel en hemsida
• Du kan skapa en mer spännande design
• Du kan planera din design bättre och därmed bli mindre låst i ditt arbete.
• Du repeterar dig mindre och förblir kreativ som designer

Så nästa gång du ser någon grafisk design du gillar kan du fråga dig vad det är som gör att du gillar det. Troligtvis har personen bakom materialet använt sig av olika metoder vid skapandet av just den designen.

Att bli inspirerad är en viktig faktor för att hålla kreativiteten uppe. Människor som får en att bli inspirerad ser jag som viktiga. Eftersom internet har funnits ett tag nu så har antalet människor som inspirerat mig ökat men här presenterar jag mina topp 3 som verkligen hjälpt mig genom åren.

Chris Coyier

Skaparen av css-tricks.com. Sidan som jag vet inte hur många gånger jag besökt genom åren. Skönare kille hittar man inte. På hans sida finns oerhört mycket som rör css-kodande vilket har hjälpt mig mycket genom åren.

Jeffrey Zeldman

Lite av en fadersfigur inom webbdesign. Ordet mysgubbe ploppar upp. Driver en podcast ”The big web show” som man somnat in till ett par gånger.

Rachel Nabors

Tecknaren som började göra hemsidor. Animatör som jobbar med animation på webben. Tjejen som verkligen med denna film fick mig att förstå att allt kommer inte så lätt för alla när det gäller programmering.

Vilka har ni som favoriter? Skriv gärna i kommentarerna.