Usability workshop

Usability workshop 24 november2006

Gebruiksvriendelijkheid in de praktijk
- kan een gebruiker vinden wat hij zoekt
- begrijpt de gebruiker de informatie
- kan de gebruiker de benodigde functies gebruiken

Afgeleid hiervan zijn:
Is de gebruiker tevreden
Vindt er conversie plaats
Komt de gebruiker terug en wordt hij fan

Een usable website is:
1) effectief
2) efficiënt
3) makkelijk te leren
4) makkelijk te onthouden
5) bevredigend/prettig/leuk

Waarom is usability belangrijk?
- online marketing: meer bezoekers
- we willen dat de bezoekers
-info begrijpen
-contact opnemen
-producten/diensten kopen
Kortom conversie

Wat zin uw doelen? Het is belangrijk die doelen meetbaar te maken

Conversie is alles wat je zelf definieert

4 types conversie:
1) branding: tijd op de site: pagina's bekeken
2) conversie tot lead: nieuwsbrief, mailafriend, contact
3)conversie tot prospect: offerte/optie aanvraag
4) verkoop: aantal boekingen, waarde van de boekingen

In USA gebruikersonderzoek gedaan: ontluisterend.
42% kon de juiste informatie niet vinden
62% kon het gezochte product niet vinden
67% van de winkelwagens wordt niet besteld
1-6%doet een aankoop

Accessibility is een onderdeel van usability: een toegankelijke website kan door iedereen worden bediend.
Dus geen vermindering van functionaliteit en informatierijkheid

Website dient toegankelijk te zijn voor alle mensen;
- visueel beperkt
- auditief beperkt
Motorisch beperkt (denk aan uitklapmenuus)

Toegankelijk voor alle systemen:
- browsers
- brailleregel
- screen reader (leest de website voor voor blinden
- kleinere schermen (PDA's, mobiele telefoons)
Maar ook voor zoekmachines.

Waarom accessibility?
-om het bereik van je website te vergroten
- om het gebruiksgemak en de tevredenheid te vergroten
- meer zoekmachine vriendelijkheid
- lagere onderhoudskosten
- beter voorbereid op de toekomst
Dit alles opgeteld leidt tot een verhoging van het rendement
Van de website

Test zelf je toegankelijkheid (doe het zelf testing)
* bekijk de ruwe bron (de website van becam is een schoolvoorbeeld van hoe het moet
* maak accesskey voor screenreaders
* bekijk hoe google je website ziet: type cache:www.library.tudelft.nl
Zie je hier weinig tekst dan is dit een slecht teken.
* bekijk je website met dichtgeknepen ogen
* laat je website voorlezen met een screenreader (er zijn er veel gratis te downloaden)
* vergroot het lettertype in de browser
* denk na over de noodzaak om multimedia te gebruiken
Laat je teksten lezen door een kennisloze buitenstaander (bijv je moeder)
* gebruik je menu’s met een bibberhand

Voor het vergroten van het font wordt ook vaak het symbool aA gebruikt. Voordeel is dan dat je een aparte stylesheet aan de pagina kan hangen dat bijv. alleen de nuttige tekst vergroot

Goed voorbeeld van een toegankelijke website is die van de BBC:
www.bbc.co.uk
Op deze pagina bevindt zich de optie accessibility help: hiermee krijg je ook toegang tot de hoogcontrast versie

Houdt ook rekening met kleurenblindheid: 8% van de mannen is kleurenblind. Er zijn bedrijven die screenshots maken van hoe een kleurenblinde jouw website ziet.
Kleine zelftest: zet je monitor op zwart-wit

Drempels weg:
aantal sites hebben een keurmerk dat aangeeft dat ze ook toegankelijk zijn voor minder valide:
- W3C bepaalt hiervoor de standaarden (op de site vind je veel toegangsrichtlijnen)
- drempelvrij speciaal logo
- overheden werken vaak met hun eigen standaard (http://webrichtlijnen.overheid.nl/)
Logo zegt niet alles: er zijn sites die het logo voeren maar toch nog heel wat verbeteringen in hun toegankelijkheid zouden kunnen aanbrengen.

Twee tips:
zorg dat javascript niet in de broncode komt : het wordt er door de readers wel uitgefilterd maar maakt je bestand wel groter en vanuit SEO oogpunt is dit minder gewenst
Om dezelfde reden hoort CSS code ook niet in de broncode.

Verschillende soorten Usability onderzoek:
- expert audit/review/scan
- gebruikersonderzoek (gebruiker doet op je website een aantal vooraf gedefinieerde taken, totaal gedurende een half uur. Dit wordt met software en camera geregistreerd. Als je website verschillende gebruikersgroepen kent zijn 4 personen per groep voldoende).
- Statistische analyse (bijv. met Prophet). Met deze software kun je een click map analyse maken (registreren waar gebruikers klikken)
- kwalitatief onderzoek middels enquete: bijv. onder de afhakers van je website. Echter: usability gaat over gedrag en gedrag voorspellen. Het is voor mensen moeilijk om hun eigen gedrag te beschrijven, daarom is het lastig om een klant zelf zo’n enquete te laten invullen: vragen als: waar wil je deze button etc leveren weinig op.
Wel nuttig voor vragen van wat meer algemene aard: - wie ben je, wat wil je, waar was je naar op zoek…

Usability is niet iets wat je eenmalig doet: het is een cyclisch proces waarin je continue evalueert en verbeteringen aanbrengt.

usability tips
- look & feel: lettertype, kleur.
- navigatie: informatie architectuur: ook wel horizontale navigatie. Informatie “geur” . Als je een website bekijkt heeft alles een geur die sterker of zwakker is. Alles moet een geur hebben die bij de gebruiker aansluit: een gebruiker vindt een aantal klikken geen probleem als hij/zij maar het gevoel heeft dichter bij het doel te komen.
- content: scan & leesbaarheid van je teksten. Het gebruik van tussenkopjes vergroot de scanbaarheid: gebruikers weten sneller dat ze goed zitten en het verhoogt de tevredenheid. Het patroon dat gebruikers scannend over een website maken heeft de vorm van een F. Eerst bovenaan van links naar rechts dan naar beneden en dan nog een keer van links naar rechts. Houdt teksten leesbaar: een zin van 7-10 woorden is voor een beeldscherm genoeg.
- interactie met formulieren: formulieren zijn erg belangrijk. Over het algemeen geldt: hoe minder velden hoe beter. Meer velden betekend meer afhaakmomenten.
- foutmeldingen: geef je je gebruiker hulp of een schuldgevoel. Zorg voor goede foutafhandeling (bijv. bij het invoeren van een verkeerde URL) en geef suggesties hoe het probleem verholpen kan worden (voorbeeld hoe je het goed kan doen: http://www.usarchy.com/static/404_output/).

Eenvoudig aan te brengen wijzigingen die de usability verhogen:
kleurstelling en contrast aanpassen. Zorg ervoor dat de kleurstelling consistent is
Zorg ervoor dat links altijd een afwijkende kleur hebben. Zorg ook voor een afwijkende kleur voor bezochte links
zorg ervoor dat de tekst getoond wordt in leesbaar contrast

Content toevoegen/herindelen/herschrijven
- inventarisatie van de teksten met opdrachtgever
- links in de tekst doen het beter dan aparte links naast de tekst

Functionaliteit toevoegen
zoekfunctionaliteit en kruimelpad ontbreken vaak
n.b. gebruik kruimelpad niet om de geschiedenis van de gebruiker op de website weer te geven: hiervoor zijn dient de backbutton in de browser. Gebruik van het kruimelpad voor de geschiedenis wekt verwarring.
andere navigatie facet toevoegen (bijv. zoeken op startdatum van een cursus op een website van een cursusaanbieder)

formulieren herdelen & verkorten
- mensen die bij de kassa laten afhaken is erg kostbaar: maak een winkelwagen met een cookie: klanten waarvan de verbinding wegvalt hoeven niet opnieuw alles in het winkelwagentje te leggen.
- als mensen steeds dezelfde velden leeg laten overweeg ze dan te verwijderen uit het formulier.

Bouw conversie mogelijkheden in daar waar het logisch is: Veel gebruikte indeling van het scherm is als volgt:


Navigatie


Tekst

conversie

Veel gebruikt wordt A-B testing: de helft van de klanten krijgt pagina A te zien, de andere helft pagina B. Gekeken wordt welk van de pagina het het beste doet.
KLM doet dit veel: 90% krijgt pagina A te zien: 10% pagina B. Als pagina B meer gaat opleveren dan pagina A wordt pagina A vervangen door pagina B en wordt er een nieuwe pagina gemaakt C die aan 10% van de klanten getoond wordt.

Linksbovenin het scherm je logo tonen is common case

opmerkingen met betrekking tot huidige website:
- url moeilijk te onthouden. met en zonder www: Google vindt beide pagina’s en ziet ze als aparte pagina’s: dat vindt de zoekmachine niet leuk.
- menu: ziet er niet uit als een uitklapmenu
- nieuws; nieuws moet er anders uitzien: datum + tekst
- Links hebben geen afwijkende kleur: ook bezochte links worden niet in een afwijkende kleur getoond.
- VKC homepage ziet er al een stuk beter uit vanuit usability oogpunt

Scan van nieuwe huisstijl (TUD huisstijl)
- lettertype is erg klein
- Banners zijn erg sterk
- teasers leiden wel erg veel af.

Links openen in apart venster versus in hetzelfde venster
voorkeur gaat uit naar het openen in hetzelfde venster. Gebruikers waarderen popups/popunders niet, veel gebruikers hebben een popup blokker bovendien zijn gewend dat ze met de backbutton terug kunnen naar de vorige pagina: als je een venster over dat venster legt werkt dat niet meer.