Användbarhet på webben

Share on TwitterSubmit to StumbleUponDigg This

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.

Vi 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 och dina kollegor 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 för bättre användbarhet

    Tillämpas Gutenbergregeln?

    Dvs, 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.

    Länklogik

    Placera de mest efterfrågade och använda länkarna i menyer från vänster till höger eller uppifrån och 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 så att det finns 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.

    Testa sidorna i olika webbläsare och versioner

    Testa användarupplevelsen i Internet Explorer 7, 8 och 9, 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.

    Testa hur sidan upplevs med lägre upplösning

    Hur upplevs sajten på en 800×600-skärm, eller på en mobil enhet? Kan det vara lämpligt med en mobilanpassad sajt? Svaret är med stor sannolikhet ja.

    Detta var en liten introduktion till området användbarhet på webben.
    Läs gärna mer om vår tjänst användbarhetsanalys.

    Bästa användbarhetshälsningar

    Fredrik Olsson
    SEOTREE
    fredrik@seotree.se

    Fredrik Olsson - VD på SEOTREE

Posted in Webbdesign



Kategorier

250x250

Bloggar vi följer

Smashing Magazine
Mashable
SEOMOZ Blog
ReelSEO