Categorieën
usability web design

Usability checklist

Vorige weet stuitte ik op ‘In Defense of Checklist Accessibility‘ en ik vond eigenlijk dat we dat soort lijstjes maar eens openbaar moesten maken. Nu zijn er al hele studies gedaan met uitgebreide criteria. Zo hebben we in Nederland het drempelvrij-keurmerk en de webrichtlijnen-check. Dus wat levert een extra lijstje op? Niet zo heel veel extra’s. Wel is het opstellen van dit soort lijstjes goed om nog weer eens even je uitgangspunten te checken.

Usability zit niet alleen in het gebruik van valide code. Eerder gaat het om inlevingsvermogen in de eindgebruiker. En weten dat je niet kunt voorspellen hoe een gebruiker je website gaat gebruiken, hoe groot je empathie ook is. De gebruiker is altijd gekker of inventiever dan je je kunt voorstellen.

Dus zonder de claim volledig te zijn, hier mijn checklist, voor mei 2011. Een work in progress.

  • Toegankelijkheid / Accessibility
    1. zo kort mogelijke response tijd van de website
    2. Tekst
      • voldoende contrast in tekst
      • Goede verhouding tussen lettergrootte en regelafstand
      • Is begijpelijk voor alle gebruikers. Vermijd onnodig jargon
    3. De site is te gebruiken zonder extra add-ons als flash. Basis-functionaliteit is niet afhankelijk van CSS / Javascript.
    4. Plaatjes hebben een beschrijvende ALT-attribuut, of komen uit CSS
    5. Er is voorzien in fallback opties voor flash, video’s of browsers die geen plaatjes tonen (zgn. gelaagd bouwen)
    6. De site is bruikbaar in alle gangbare browsers.
    7. Site heeft een bruikbare 404 not‐found pagina en heeft een bruikbare 500 script error pagina
  • Herkenbaarheid / identiteit
    1. De site is herkenbaar. Bedrijfslogo is zichtbaar en herkenbaar
    2. Tagline / functionaliteit maken doel van site duidelijk
    3. de vormgeving is consistent toegepast
    4. Informatie over makers van de site is makkelijk bereikbaar
      • contact
      • feedback
      • disclaimer
      • sitemap
  • Navigeerbaarheid
    1. Duidelijke hoofdnavigatie:
      • begrijpelijke en kernachtige labels in het navigatiemenu
      • Het aantal links in de hoofdnavigatie is overzichtelijk
      • Het bedrijfslogo is tevens een link naar de homepage
    2. Links zijn duidelijk herkenbaar (onderlijnd, of vet). Ook zijn de links herkenbaar voor kleurenblinden. Idealiter hebben links herkenbare en onderscheidbare states voor: unvisited, active, visited en hover.
    3. Bij contentrijke site: bruikbare sitesearch
    4. in bestelprocessen is duidelijk waar een gebruiker zich bevindt. De gebruiker kan terugnavigeren naar eerder bezochten stappen in het proces.
    5. URLs zijn betekenisvol, gebruiksvrienndelijk en onveranderlijk.
    6. Klikbare tekst en navigatieelementen zijn ook bruikbaar voor mensen met een motorisch beperking (Fitts’s law)
    7. Houdt de standaardfunctionaliteit van de browser in stand; houdt de ‘back’ button bruikbaar.
    8. Bij lightboxes:
      • bij het openen: zet de focus op het eerste element in de lightbox.
      • geef de gebruiker zoveel mogelijk de kans de lightbox zonder verlies aan informatie te sluiten.
    9. Maak de website geschikt voor navigatie via toetsenbord
  • Leesbaarheid
    1. Tekstkopjes zijn beschrijvend, beknopt en begrijpelijk. Er is een inzichtelijke hiërarchie in de structuur van de tekstopbouw
    2. Belangrijke content is zoveel mogelijk direct zichtbaar (‘above the fold’, hoewel?)
    3. Stijlen en kleuren zijn consistent toegepast. Geen overmatig gebruik van cursief en vette tekst.
    4. Tekst en opmaak zijn gescheiden. Geen opmaak in de tekst met style-attributen.
    5. Advertenties & pop‐ups zijn niet hinderlijk aanwezig
    6. Alle content is beknopt en begrijpelijk
    7. HTML pagina titles via <title> zijn beschrijvend en relevant
    8. Afkortingen worden getoond met <abbr>
    9. Gebruik grammaticaal correcte als beschrijvende markup
    10. Gebruik <ul> en <ol> om lijsten weer te geven of definition lists.
  • Formulieren
    1. Het doel van een formulier is makkelijk te begrijpen
    2. De velden zijn voorzien van duidelijke uitleg van doel, beperkingen en vereisten voor invoer
    3. De werking van formulieren is niet louter afhankelijk van client-side scripting. Alle uiteindelijke validatie gebeurt server side.
    4. Gebruik zoveel mogelijk vertrouwde formulierelementen. Wees terughoudend in het gebruik van CSS voor invoerlementen. En houd rekening met de verschillend tussen diverse browsers en besturingssystemen.
    5. In flows (bv bestelprocessen) kan de gebruiker terugnavigeren naar eerder bezochte pagina’s. Hierbij hoeft hij niet opnieuw gegevens in te voeren.
    6. Vermijd automatische doorverwijzing bij interactie met formulieren (webrichtlijnen)
    7. Laat bezoekers niet raden: geef informatie over hoe ze een gemaakte fout kunnen herstellen. Houd rekening met veelgemaakte fouten.
    8. Geef bezoekers een ‘vluchtroute’: mogelijkheden om verder te kunnen gaan als ze vastlopen. Vluchtroutes zijn onder andere behulpzame links, het kunnen gebruiken van de terug (back) knop, een zoekfunctie, of het onmiddellijk kunnen corrigeren van invoerfouten.
  • Call to action:
    1. een call to action is herkenbaar
    2. en is begrijpelijk (percieved affordance)
  • Per element, check op:
    1. klikbaarheid
    2. discoverability
    3. accidental activation

Voor een uitgebreidere en uitputtender lijst van criteria zie:

2 reacties op “Usability checklist”

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.