Användbarhet på webben

Användbarhet är det samma som nytta multiplicerat med användarvänlighet. Vad innebär då detta och vad kan du göra för att få till en bättre användbarhet på ditt företags webbplats?

Det är viktigt att förenkla så mycket som möjligt för dagens otåliga användare på webben och om möjligt korta ner vägen till det mål som finns för besökaren. Målet bör inte finnas mer än tre klick bort.

Man brukar prata om fyra ”dörrar”

Utseendet
Språket
Strukturen
Interaktionen

Och en femte dörr kan vara tillgänglighet och förtroende.

Ställ dig själv några frågor

Vem använder sidan?
Hur används sidan idag?
Vem vill vi ska använda sidan?
Hur ser dessa gruppers användning ut, och vilka sajter besöker de kontinuerligt?

Att tänka på designmässigt

Gutenbergs diagonal

Finns den viktigaste informationen i en diagonal sedd från övre vänstra hörnet ned mot det nedre högra hörnet? Försök att placera viktig info längs denna linje då det är ett naturligt sätt för det mänskliga ögat att skanna av en sida. Läs om fler användbara diagonaler

Länklogik

De mest efterfrågade länkarna ska i menyer placeras i rangordning från högsta till vänster och lägsta till höger eller högsta längst upp och lägsta längst ned.

Tänk AIDA(S)

Attention, Interest, Desire, Action – i den ordningen när du bygger sidan, för att besökaren ska stanna kvar och göra ett avslut. S är lika med satisfaction och ska få besökare att återkomma till sidan.

Call to Action

Finns det något som sticker ut på sidan, drar till sig uppmärksamheten och gör det lättare för besökaren att hitta till målet? Tex en köpknapp med slagkraftig formulering och attraherande färg?

Färgval

Är färgerna på sidan behagliga för ögat och fungerar de bra tillsammans? Passar de för det budskap du vill förmedla?

Typografi

Välj lämpliga typsnitt och blanda inte för många på sidan, helst inte fler än tre. Använd huvudrubriker, underrubriker och ingresser. Dela upp långa texter i stycken.

Verktyg för förbättrad användbarhet

Validering av HTML, CSS m.m

Kontrollera att kodning är utförd på ett korrekt sätt genom validering av HTML och CSS, samt att sidan är användbar för personer som använder kommunikationshjälpmedel. Sträva efter så fel som möjligt för att koden ska kunna läsas på rätt sätt av olika sorters webbläsare.

Validering av HTML

På sidan W3 HTML Validator. Validera varje sida för sig.

Validering av stylesheets, CSS

På sidan W3 CSS Validator.

Validering för kommunikationshjälpmedel

För att personer med funktionshinder ska kunna förstå vad som visas och skrivs på sidan. Bland annat ska det finnas alt-taggar till bilder som kan läsas av kommunikationshjälpmedel. WAI-validering.

Validering av länkar

Finns det brutna länkar på sidan, dvs länkar som inte leder någon vart utan bara till en 404-sida? W3 Linkchecker.

Webmaster Tools

Skapa ett konto och testa hur sajten presterar på nätet. Få förslag för förbättringar för metataggar, indexeringar, lägg in Sitemaps, kontrollera svarstider, inlänkningar med mera. Webmaster Tools.

Website Optimizer

Utför splittester, A/B-tester där du kan lägga upp flera sajter med olika design och testa vilken som är mest framgångsrik. Besökarna hamnar slumpvis på olika platser. Du kan testa att visa helt olika sajter eller bara ändra innehållet på en sida, t.ex testa köpknappar med olika ord eller färger. Website Optimizer är nu integrerad i Google Analytics – under experimentdelen.

Testa sidorna i olika webbläsare och versioner

Testa användarupplevelsen i Internet Explorer 7, 8, 9 och 10, Mozilla Firefox, Google Chrome, Safari och Opera. Anpassa sidan så att den upplevs så lika som möjligt i samtliga webbläsare och blir så användbar som möjligt. För äldre webbläsare kan det vara i stort sett omöjligt att få till den moderna snyggheten, men tänk då först och främst på att sidan ska gå att använda till det den är tänkt för.

Mozilla Web Developer Tools

Installera Developer Tools och testa att avaktivera Flash, JavaScript m.m. Går sidan att förstå och använda ändå? Verktyget är även bra för att markera olika element på en sida för att granska DOM, bilder, H1-rubriker etc. Mozilla Web Developer Add-on.