Användbarhet på webben – Mina 10 bästa tips

2010-01-24 @ 22:42

Här kommer mina 10 bästa tips för god användbarhet på webben.

1. Undvik dropdown-menyer

Det finns många webbplatser som idag har dropdown-menyer. sxc.hu är en webbplats som har en dropdown-meny till vänster. Det går inte se att ”Browse” innehåller en dropdown-meny. När man håller över den täcks välkomst-texten över. Skulle man exempelvis vilja markera rubriken, är det lätt att råka röra musen över dropdown-menyn. Det är mycket irriterande.

Använd istället ett fliksystem. Det finns ett skäl till varför exempelvis Ribbon-systemet kom till (det som finns i MS Office). Även Microsoft har insett att flikar är bättre än dropdown-menyer.

Exempel på fliksystem finns på Boendetorget.

2. Undvik registreringar så långt som möjligt

När man låter någon registera sig på webbplatsen man bygger bör man fråga sig ”Vad får användaren ut av att registrera sig?”. Om det är en webbutik så kan det vara för att behålla sina adressuppgifter till nästa gång. Här kan det vara bättre att slå ihop köpet med registreringen så att användaren knappt märker att denne registrerar sig på sidan. Låt i så fall kunden handla och lägga saker i varukorgen innan denne måste fylla i något.

Exempel finns på Boendetorget där användaren aldrig registrerar sig för att lägga till en produkt.

3. Undvik intro-sidor

Finns det något mer irriterande än ett intro på 30 sekunder som inte går att avbryta? Flera studier pekar på att en besökare stannar kvar på en webbsida max 4 sekunder innan denne bestämt sig för att stanna eller gå. Hur snyggt ett intro än må vara är användaren mer stressad än att vilja titta på det.

4. Minimera antalet fält som ska fyllas i

Låt oss säga att du låter användaren fylla i ett formulär. Fundera noga igenom varje fält, vilka som verkligen behövs. Varje fält är nämligen en belastning för användaren. Tänk dig själv om du skulle behöva fylla i 10 fält. På nätet är 10 fält ganska mycket och få kommer orka ta sig tiden att fylla i dessa.

Boendetorget – Lägg till produkt finns ett formulär men bara med de fält som verkligen kommer att användas.

5. Gör det lätt att komma i mål

Om användaren ska fylla i formulär eller ta sig vidare i olika steg, se till att underlätta processen så mycket som möjligt. Ett sätt kan vara att göra stegen tydliga, exempelvis genom att skriva att man är på steg 2/3. Ett annat sätt är att låta Javascript kontrollera om fälten är rätt ifyllda. Om fälten är fel ifyllda och informationen dessutom försvinner om man gjort fel är det inte säkert att användaren orkar fylla i dessa igen.

6. Låt designen främja användbarheten, inte tvärt om

Att skapa en snygg design kan skapa en bättre miljö för användaren, men man får se upp så att inte den snygga designen tar överhanden och försämrar användbarheten. För mycket färger kan ge ett rörigt intryck och försvåra för användaren. Använd rätt färg på rätt ställe. Har ni ett specialerbjudande som bara gäller just nu, sätt en stark färg på det så det verkligen sticker ut.

Var inte rädd för att använda riktigt stora eller små typsnitt. Det gör det enklare att överblicka sidan. Låt inte snygga grafiska element göra att navigeringen göms eller hamnar tokigt. En snygg webbplats säljer inte bättre om folk inte vet hur de ska använda den.

7. Låt användaren veta vart denne befinner sig i hierarkin

I större webbplatser kan det vara lätt att inte veta vart man befinner sig i hierarkin. Det gäller speciellt om man hittat sidan genom en sökmotor. Därför är det viktigt att tydlig på ett eller flera sätt markera det. Ett sätt är att använda ”breadcrumbs” som visar vilka steg man tagit. Ett annat sätt är att markera varje steg, markera toppmenyvalet, sedan markera undermenyvalet och sedan sidomenyvalet. Då kan användaren enkelt gå tillbaka till tidigare sidor. Ytterligare ett sätt är att skapa en webbplatskarta någonstans på webbplatsen där hierarkin beskrivs tydligt.

Exempel på breadcrumbs finns på Boendetorget.

8. Utnyttja konvensioner

De vanor vi och andra människor har hjälper oss att snabbare hitta information om internet. Det bör vi utnyttja när vi skapar vår webbplats.

Några exempel

  • Logotypen placeras i toppen
  • Länkar är ofta blå och understrukna
  • I sidfoten som placeras längst ner hittar vi oftast kontakt-information eller andra saker som inte behöver vara i fokus

9. Låt inte användaren tänka

Om användaren har 4 sekunder på sig att bestämma sig för att stanna eller gå finns knappast tid för att tänka. Därför är det viktigt att användaren direkt ser något att klicka på för att hamna rätt. Det är i många fall bättre att låta användaren klicka en gång för mycket än att låta denne tänka för att fundera över vilket val som är rätt.

10. Luft är en del av designen

Jag har sett webbplatser där webbproducenten varit rädd för luft och resonerat att all information ska ta så lite plats som möjligt för att få plats med så mycket som möjligt på skärmen. Faktum är att luft i många fall gör webbplatsen lättare att läsa. Var därför inte rädda för luft, mellan stycken, mellan rader och mellan text och bilder.

Folk drar sig inte för att scrolla om det skulle behövas. Stora tidningswebbplatser som Aftonbladet och Expressen låter användare scrolla hela tiden.

11. Gör webbplatsen sökbar

Om man nu inte hittar vad man söker på en webbplats kan en sökfunktion på sidan vara räddaren i nöden. Tänk dig att du sitter i en webbutik med tusentals produkter. Då kan det vara helt avgörande för försäljningen om användaren med en sökfunktion på sidan kan hitta det den söker.

Slutord

Utgå från att dina användare förväntar sig en snygg, snabb och enkel webbplats. Utgå också från att användaren aldrig har varit på din webbplats förut, att han / hon är stressad och dessutom är både lat och kräsen. Om man kan göra en sådan användare till en kund så har man kommit långt.

Vilka är dina bästa användbarhetstips?

RSS-feed för kommentarer

4 svar till “Användbarhet på webben – Mina 10 bästa tips”

  • Eric W »
    2010-01-25 @ 18:41

    Ang. sökfunktion på en hemsida så skulle jag säga att den bör placeras någonstans längst upp till höger bland innehåll eller längst till höger i menyn.

    Annars en bra sammanfattning

    • admin »
      2010-01-27 @ 7:53

      Tack för din kommentar och komplettering.

  • JZ
    2012-01-13 @ 8:17

    Låt aldrig användaren hamna i en återvändsgränd (typ 404). Dvs, ge alltid användaren möjlighet att komma vidare till annan sida och/eller felanmäla i realtid (chat etc)

    • admin »
      2012-04-09 @ 13:45

      Bra förslag.