Eye-Tracking & Usability Bereiken van ultieme bezoekerservaring Alex van Ginneken 1
Van dezelfde auteur: - Internet marketing, Word online marktleider in uw branche - E-mail marketing, Opzetten van succesvolle e-mail campagnes - Zoekmachine Marketing, Meer bezoekers, meer klanten - Affiliate marketing, Verkoop maximaliseren door partners - Opzetten van een Webwinkel, De weg naar ultieme online aankoopervaring - Eye Tracking & Usability, Bereiken van ultieme bezoekerservaring - Live Chat, Bereik optimale service en meer verkoop - Online Franchisen, Versneld uitbreiden van uw online vestigingen - Aanvragen van offertes, Bespaar geld en ergernis met een duidelijke offerte aanvraag - Webteksten, Van bezoekers naar klanten - CRM in uw Internet Marketing Strategie, Automatisch klantrelaties opbouwen - Lanceren van Websites, Maximale aandacht door inzet van media - Personal Branding, Ontwikkel uw online persoonlijkheid - Google AdWords & Online Adverteren, Slim en betaalbaar uw doelgroep bereiken - Beginnen met Google Analytics, Analyseer uw website, zie de mogelijkheden, bepaal uw succes - Onmisbare Marketingbronnen, Websites, boeken, podcasts en radio- /televisieprogramma s - Blauwdruk Internet Marketing Plan, Ontwikkel uw eigen internet marketing plan 2
While anyone can make simple things complicated, it takes a lot of skill to make the complex appear simple ClearLeft.com 3
Omslagontwerp: Caspar Hardholt, mediact, Groningen Redactie: Edwin Dijkstra, mediact, Groningen Vormgeving & Productie: SU KS media & design, Leeuwarden 2009 tweede uitgave GEGEVENS: Ginneken van, Alex Eye-Tracking & Usability, bereiken ultieme bezoekers ervaring www.deblauwedoos.nl 2009 De Blauwe Doos, A lex van Ginneken Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, verkocht, opgeslagen in een geautomatiseerd gegevensbestand, of openbaar gemaakt, in enige vorm of op enige wijze, het zij elektronisch, mechanisch, door fotokopieën, opnamen, of enige andere manier, zonder voorafgaande toestemming van de uitgever. Voor zover het maken van kopieën uit deze uitgave is toegestaan op grond van artikel 16B Auteurswet 1912 j het Besluit van 20 juni 1974, St. b. 351, zoals gewijzigd bij Besluit van 23 augustus 1985, St. b. 471 en artikel 17 Auteurswet 1912, dient men de daarvoor wettelijk verschuldigde vergoedingen te voldoen aan de Stichting Reprorecht. Voor het overnemen van gedeelte(n) uit deze uitgave in bloemlezingen, syllabi, readers en andere compilatie- of andere werken (artikel 16 Auteurswet 1912), in welke vorm dan ook, dient men zich tot de uitgever te wenden. Ondanks alle aan de samenstelling van dit boek bestede zorg kan noch de redactie, noch de auteur, noch de uitgever aansprakelijkheid aanvaarden voor schade die het gevolg is van enige fout in deze uitgave. 4
Samenvatting Usability is een ander woord voor gebruiksvriendelijkheid. Hoe gebruikersvriendelijker uw product is, of dit nou een website of een auto is, des te makkelijker zal de gebruiker met dit product werken. Dit boek begint met een inleidend hoofdstuk over usability: wat is het en waarom is het belangrijk? Hierop volgend wordt usability in websites behandeld. In dit hoofdstuk leest u welke onderdelen belangrijk zijn om rekening mee te houden om een website gebruiksvriendelijk te laten zijn. Naast usability in websites behandel ik in dit boek ook hoe u een nieuwsbrief, een webwinkel en een webapplicatie gebruiksvriendelijk maakt. Tenslotte leest u hoe u de gebruiksvriendelijkheid van een website, webapplicatie of nieuwsbrief test, waarbij speciaal aandacht wordt besteed aan Eye-Tracking. 1
2
Inhoudsopgave 1. Wat is usability?... 4 2. Usability in websites... 7 Tekst & typografie... 7 Indeling... 9 Het AIDA-model online toepassen... 11 Afbeeldingen... 15 Formulieren... 15 Veel gemaakte fouten in formulieren:... 16 Navigatie... 20 Zoeken... 22 3. Usability in e-mailnieuwsbrieven... 25 4. Usability in webwinkels... 27 5. Usability in webapplicaties... 30 6. Usability testing... 33 7. Eye-Tracking... 34 Hoe werkt Eye-Tracking?... 35 De toekomst van Eye-Tracking... 37 Resultaten van Eye-Tracking... 37 Alternatief voor Eye-Tracking... 38 8. Bronnen... 39 3
Wat is usability? Usability is het Engelse woord voor gebruikersvriendelijkheid. Het begrip usability beschrijft het gemak waarmee een product of dienst, en de interface daarvan, te gebruiken is. Het maken van gebruikersvriendelijke software, interfaces, websites of webwinkels is niet eenvoudig. Werkende software is namelijk iets anders dan gebruikersvriendelijke software. Vroeger was het algemene denkbeeld dat de gebruiker zich wel aanpast aan de software. Tegenwoordig doet de gebruiker geen moeite meer om zich aan te passen aan software, en terecht. Als een programma of website niet naar wens werkt, is de kans groot dat de gebruiker afhaakt en verder zoekt naar iets dat hij of zei wel direct begrijpt. Jakob Nielsen 1 is een pionier in het gebruikersvriendelijk maken van websites. Hij heeft vijf kwaliteitscomponenten van gebruikersvriendelijkheid opgesteld. Dit zijn: 1. Learnability (Leercurve) 2. Efficiency (Effectiviteit) 3. Memorability (Onthouden) 4. Errors (meldingen) 5. Satisfaction (tevredenheid) 1. Leercurve De leercurve geeft aan hoeveel tijd het gebruikers kost om basistaken uit te voeren bij de eerste keer dat ze geconfronteerd worden met een programma of website. Volgens Nielsen is het prettiger werken wanneer de leercurve kort is. 2. Effectiviteit Bij deze component gaat het erom hoe snel gebruikers gewenste taken kunnen uitvoeren nadat ze de werking van de interface begrijpen. Gebruikersvriendelijk houdt hierbij ook in dat er zo weinig mogelijk stappen hoeven te worden genomen om gewenste taken uit te voeren. 1 Bron: meer over Jacob Nielsen op: www.useit.com 4
3. Onthouden Als gebruikers de software een periode niet gebruikt hebben, is de software dan nog steeds goed te gebruiken, of moet de software weer wennen? Als de interface onlogisch is, betekent dit, dat een gebruiker zich telkens afvraagt hoe zat het ook al weer?. Door gebruik te maken van een logische opbouw en herkenbare elementen (taalgebruik, iconen, indeling) snappen gebruikers een interface sneller. 4. Meldingen Worden door de gebruiker fouten gemaakt met de software? Hoe helder en gebruikersvriendelijk is de melding? Is het duidelijk hoe de gebruiker het probleem kan oplossen? Weet hij welke stappen hij moet volgen? Zo niet, wat moet de gebruiker dan doen om het probleem op te lossen? Kan hij iemand bellen en wanneer? Kan de melding worden doorgestuurd naar een meldkamer? Maak eventuele alternatieven kenbaar via de melding, zodat de gebruiker het probleem kan oplossen. 5. Tevredenheid Hoe plezierig is het om met de software te werken, zijn de gebruikers tevreden over het gemak en de snelheid van de software? De ontwikkelaar van de software vindt het allemaal maar logisch, maar voor de gebruiker is dit vaak niet zo. Hoe langer het duurt om de software eigen te maken en hoe meer hij qua bediening en gemak verschilt van vergelijkbare producten, hoe groter de ontevredenheid over en de weerstand tegen het gebruik ervan. Houd de genoemde punten altijd in het achterhoofd als u: - Een design voor uw website / webwinkel laat ontwikkelen - Een (web)applicatie laat ontwikkelen - Een keuze moet maken voor een beheersysteem voor uw website Let er ook goed op dat niet alleen de voorkant (de website zelf) van een website of webwinkel goed moet werken maar ook de achterzijde (het systeem achter de website of webwinkel, ofwel de back-end). U of uw personeel gaat hier namelijk mee werken. Als de beheeromgeving traag, onduidelijk of onplezierig werkt, dan neemt het werkplezier af; met 5
als gevolg dat de website niet optimaal wordt beheerd. Minder stappen niet altijd het beste Het bereiken van een bepaald doel in zo min mogelijk klikken is niet altijd de beste oplossing. Schrijver Steve Krug 2 van het boek Don t make me think gebruikt de volgende regel: laat gebruikers zo min mogelijk nadenken om een doel te bereiken. 2 Meer over Steve Krug op: http://www.sensible.com 6
1. Usability in websites Tekst & typografie Welkomsttekst Het woord welkom is verboden op uw website. Dit is namelijk non-informatie en leidt de bezoeker alleen maar af van waar hij daadwerkelijk naar op zoek is. Zorg voor een krachtige headline. Dit is het eerste dat een bezoeker ziet en de headline bepaalt of de bezoeker verder leest. Standaard lettertype Gebruik een standaard lettertype op uw website. Wanneer u afwijkt van de standaard lettertypes, dan denken bezoekers snel dat het gaat om advertenties. Geef dus niet al te veel glans aan uw teksten en zorg ervoor dat ze eenvoudig gelezen kunnen worden. Lettergrootte Kleinere letters zorgen voor meer gefocused leesgedrag, terwijl grotere lettertypes zorgen dat de tekst gescand wordt. Afhankelijk van het doel van uw tekst kunt u het één boven het ander verkiezen. Tussenkoppen Een bezoeker kijkt alleen naar tussenkoppen binnen de tekst ( headings ) als het hem of haar interesseert. Dit maakt het voor bezoekers makkelijker om door de teksten heen te scannen. Dit omdat bezoekers van websites teksten scannen in plaats van lezen. Maak tussenkoppen relevant en interessant. 7
Korte alinea s Korte alinea s en paragraven doen het beter dan lange. Informatie op uw website moet opgesteld zijn voor korte aandacht. Geen grote tekstblokken De gemiddelde bezoeker besteedt geen tijd aan het bestuderen van grote tekstblokken. Hierbij maakt het niet uit hoe informatief of hoe goed de tekst geschreven is. Daarom moet u grote stukken tekst opdelen in kleinere paragraven. Benadruk hierbij bepaalde stukken tekst door bijvoorbeeld: Quotes Opsommingen zoals deze VET te gebruiken bij belangrijke woord(en) of zinnen HOOFDLETTERS (verlaagd wel de leesbaarheid) Gebruik Een Hoofdletter Voor Elk Nieuw Woord (alleen bij (sub)koppen) Maak gebruik van links zoals: lees verder over onderwerp> Kolommen Overlaad de bezoekers niet met te veel informatie. Eenvoud is het belangrijkst. Het gebruik van meerdere tekstkolommen wordt vaak genegeerd door de bezoekers. Een website is geen magazine. Gebruik van advertenties Dit heeft iets minder te maken met gebruikersvriendelijkheid, maar ik wil dit wel even noemen. Advertenties linksboven in de pagina krijgen de meeste aandacht. De positie zorgt wel voor maximale zichtbaarheid, maar betekent niet dat bezoekers er op gaan klikken. Als u wilt, dat uw advertenties gezien worden of dat er op geklikt wordt, dan kunt u deze integreren in het design van uw website. Vervolgens plaatst u deze advertentie op plekken in de content waar de meest interessante informatie te vinden is. 8
Tekstadvertenties Internetgebruikers zijn inmiddels gewend om niet teveel tijd te besteden aan advertenties. Tekstadvertenties worden als veel minder irritant ervaren door de bezoeker en zijn daardoor succesvoller. Indeling Tekst & afbeelding In sommige websites is tekst het eerste dat opvalt. Andere websites proberen via een afbeelding of video de aandacht te krijgen. Hoe dan ook, de meeste, gewone bezoekers komen naar uw website voor informatie en niet voor afbeeldingen. Zorg ervoor dat uw website zo ontworpen is dat de belangrijkste tekst snel te vinden is. Witruimtes Witruimtes zijn belangrijk. Sommige webdesigners zijn gewend elk gaatje in de website te vullen. Het is beter om sommige ruimtes vrij te laten van tekst of afbeeldingen. Websites die te druk of te vol zijn, worden niet meer goed bekeken door bezoekers. Less is more! Linksboven De initiële oogbewegingen van een bezoeker gaan naar links bovenin op de webpagina. Houd hier rekening mee in uw website, plaats de belangrijkste content linksboven. F-Vorm Bezoekers lezen geen websites, maar scannen websites. De standaard route die de ogen afleggen is de F vorm. Zorg ervoor dat belangrijke elementen van uw content in deze F-vorm staan. Plaats hier de koppen, subkoppen, opsommingen ( bullet points ) en benadruk teksten, zodat bezoekers gemotiveerd worden om verder te lezen. Links bovenin de F-vorm wordt ook wel de gouden driehoek genoemd. In onderstaand figuur ziet u de testresultaten van het 9
kijkgedrag van bezoekers van een website. F-vorm De Gouden Driehoek 10
Wees creatief met banners Verschillende onderzoeken laten zien, dat de meeste bezoekers banners op websites negeren, maar een fractie van een seconde naar de tekst kijken. Als u geld wilt verdienen met advertenties, dan zult u creatief moeten zijn in het plaatsen van uw advertenties. Navigatie Bezoekers kijken eerst bovenin uw website, onder uw logo, om de navigatie te vinden. Plaatst u daar uw menu, dan speelt u op veilig. Zorg dat het menu duidelijk is. Denk na over de volgorde (het belangrijkste links of bovenin) en de woordkeuze. Dit is het belangrijkste onderdeel op een website. Zorg dat de tekst duidelijk leesbaar is. Het AIDA-model online toepassen Om bezoekers van een website aan te zetten tot actie, is het nodig om de aandacht te trekken, interesse te wekken, te overtuigen en tot slot de bezoeker aan te zetten tot actie. Caspar Hardholt van mediact schreef op het weblog van mediact het artikel Het AIDA-model online toegepast om conversie te verhogen. In dit artikel legt Caspar Hardholt uit hoe het AIDA-model online kan worden ingezet voor een website. Wat is het AIDA-model? Het AIDA-model is een marketingmodel dat in de reclame- en marketingwereld een begrip is. Vooral in reclamecampagnes en -uitingen wordt dit model veel toegepast. AIDA staat voor Attention (aandacht), Interest (interesse), Desire (verlangen) en Action (actie). Deze vier letters (stappen) worden door een persoon doorlopen bij het zien van een reclamecampagne of -uiting. De toepassing van AIDA in webdesign zie je minder vaak terug. Toch kan het AIDA-model, verwerkt in de vormgeving/indeling van een homepage, een praktische en effectieve manier zijn om de conversie te verhogen. Waarom het AIDA-model? Bezoekers bepalen binnen 0,05 seconde of een website interessant is of niet. Dit blijkt uit onderzoek van Carleton University Ontario in 2006. Daarom is het van groot belang 11
dat de aandacht van de bezoeker meteen wordt getrokken. Kleur, vorm en fotografie bepalen de eerste reactie van een bezoeker. Houdt u 'm binnen? Dan is het zaak om de interesse te wekken. Met het AIDA-model verhoogt u niet alleen uw conversie, maar verlaagt u ook het weigeringspercentage van uw website. Toepassing AIDA-model in websites Bij binnenkomst op een website wordt de aandacht getrokken van de bezoeker, bijvoorbeeld door een foto of grote koptekst. Wanneer u de aandacht van de bezoeker heeft, geeft u bondige informatie die de interesse van de bezoeker wekt. Wanneer de interesse is gewekt, kijkt de bezoeker verder. Nu komt u op het punt, waar u inspeelt op het verlangen van de bezoeker. Dit doet u door een interessant aanbod of een uitdagende vraag te presenteren. Hierna overtuigt u de bezoeker door een Call-toaction om over te gaan tot actie. Dit hoeft niet per se een (bestel)formulier of checkout-pagina te zijn, maar kan ook een andere pagina zijn met meer informatie. Zolang de bezoeker maar naar de pagina gaat die u als doel gesteld heeft. Westerse internetgebruikers zijn links oriënterend en bekijken websites in een F-vorm. Verwerk daarom het AIDA-model in deze F-vorm. De F-vorm kunt u voor uzelf visualiseren door een grote F-vorm over uw website te denken. Meer informatie over dit patroon vindt u aan het eind van deze paragraaf bij interessante links. Voorbeelden van toepassingen van het AIDA-model: Hieronder vindt u homepages waarin het AIDA-model terug te vinden is. 1. Attention 2. Interest 3. Desire 4. Action 12
Silverbackapp.com www.basecamphq.com Fatburgr.com invoicemachine.com 13
De manier waarop u een website indeelt en welke informatie u plaatst, spelen een belangrijke rol in hoe succesvol uw website is. Wilt u weten hoe bezoekers uw website gebruiken? Dan kunt u een eye-tracking of guerrilla usability test laten doen. Een website op een spontane en no-nonsense manier laten testen, kan met Silverback. Dit is een applicatie voor Mac die het klikgedrag van de tester registreert en samen met een opname van het gezicht toont hoe gebruikers omgaan met een website. Een mooie manier om snel hobbels in uw website waar te nemen. Wilt u een indruk hoe uw bezoekers waarschijnlijk naar uw site kijken? Upload dan een screenshot van uw website op Feng-GUI.com en bekijk het resultaat! Wilt u weten hoe het AIDA-model in uw website kan worden toegepast? Stuur mij een mailtje op caspar.hardholt@mediact.nl en ik geef u graag advies. Bronnen en interessante links Meer weten over het AIDA-model? Wikipedia: http://nl.wikipedia.org/wiki/aida-model Wapedia: http://wapedia.mobi/nl/aida-model Informatie over Call-to-action: http://www.mediact.nl/nl/weblog/a/94/call-to-actions-van-bezoeker-naar-klant/ Informatie over F-vorm (Engels) http://www.useit.com/alertbox/reading_pattern.html Heatmaps http://www.feng-gui.com/ 14
Afbeeldingen Grote afbeeldingen Als u van plan bent om afbeeldingen te gebruiken in uw website, gebruik dan grote afbeeldingen. Bezoekers zijn meer geïnteresseerd in afbeeldingen waar details en informatie goed zichtbaar zijn. Gezichten en mensen Gebruik geen abstracte en kunstzinnige foto s in uw website, ondanks dat het mooi kan staan. Ze zorgen niet voor de aandacht van uw bezoeker. Maak bij voorkeur gebruik van foto s van mensen. Zorg daarnaast ook voor foto s van echte mensen, geen modellen. Formulieren Op een website zijn vaak diverse formulieren aanwezig: - Offerteaanvraagformulier - Informatieaanvraagformulier - Inschrijfformulier - Bestelformulieren Bij het ontwikkelen van formulieren dient u te letten op: - Het doel van het formulier - De indeling van de vragen - Toelichting bij de vragen - Opbouw van de vragen - Woordkeus - Mogelijkheid tot herstel - Bedankt-pagina - Labels klikbaar 15
Veel gemaakte fouten in formulieren: Postcode Sommige postcodevelden hebben maximaal 6 posities in plaats van 7. Vaak wil men een postcode als volgt invullen 1234 AB. In dit geval zijn er 7 posities nodig. Bied de mogelijkheid om een postcode met 7 tekens in te vullen of splits de cijfers en de letters in aparte vakken, zodat er geen onduidelijkheid ontstaat. Dit laatste heeft overigens niet de voorkeur, want er is voor de gebruiker een extra handeling nodig. Geslacht Gebruik geen selectbox bij het laten kiezen van geslacht, maar een radiobutton. Radiobuttons Voorbeeld van een selectbox De knop wissen Plaats geen knop wissen naast het verzendformulier. Deze knop wordt in de praktijk niet gebruikt en kan er voor zorgen dat iemand er per ongeluk op klikt, met als gevolg dat een gebruiker het formulier weer opnieuw moet invullen. 16
Waarom moet ik dit invullen? Vaak ontbreekt een toelichting bij bepaalde vragen. Inventariseer bij welke vragen een toelichting gewenst kan zijn, bijvoorbeeld waarom u een telefoonnummer vraagt van de bezoeker en waarvoor u deze gaat gebruiken. Datumvelden Vaak wordt er via een selectbox om een geboortedatum gevraagd. Gebruikersvriendelijker is om een visuele kalender te gebruiken of de gebruiker zelf de datum te laten invullen. Geef in het geval van een selectbox aan welk datumformaat wordt gehanteerd, bijvoorbeeld: dd-mmjjjj. Is het veld verplicht? Als het veld verplicht moet worden ingevuld door een gebruiker, zorg er dan voor dat dit voor het invulveld wordt weergegeven. Dit kan door middel van een rood sterretje. De toelichting over de betekenis van het sterretje plaatst u het beste bovenaan het formulier. Bijvoorbeeld: Velden met een * sterretje zijn verplicht. Welk veld? Er wordt vaak niet duidelijk aangegeven in welk veld de gebruiker zich bevindt, ofwel in welk vak hij actief is. In dit figuur ziet u dat de cursor van de gebruiker in het veld wachtwoord zit. Google Auto Fill Er zijn veel mensen die gebruik maken van de Google Toolbar. In deze toolbar zitten een aantal functies, waaronder Google Auto Fill. Mensen kunnen, als ze een formulier voor zich hebben op de website, op deze knop drukken en vervolgens worden alle velden die herkend 17
worden automatisch ingevuld. Dit kan alleen wanneer de ontwikkelaar de velden heeft voorzien van de juiste naamgeving. De velden die herkend worden door Google Auto Fill worden in het geel weergegeven aan de gebruiker, zie het volgende figuur. Het veld Full Name is herkend als naamveld door Google Auto Fill Zodra velden herkend worden door deze functie kan de gebruiker op een knop drukken, zodat de gegevens ingevuld worden zonder te typen. Dit bespaart de gebruiker tijd en voorkomt de kans op fouten, bovendien is het gebruikersvriendelijk! Verstuurknop Vaak heeft de verstuurknop een onduidelijke beschrijving zoals verzend of send. Geef een actieve omschrijvende tekst aan een dergelijke knop, zoals: - Bestel! - Verstuur gegevens - Verzend gegevens - Verstuur uw aanvraag Foutmeldingen Als een gebruiker een formulier niet goed of onvolledig heeft ingevuld, moet hij hierop feedback krijgen. Geef aan, welke velden verkeerd of niet zijn ingevuld door de melding te 18
geven op de plek waar het fout gaat. Bevestigen Als de gebruiker bepaalde gegevens heeft verstuurd, dient hij feedback te krijgen. In de feedback moet staan dat de gegevens goed zijn ontvangen, eventueel met een samenvatting. Daarnaast dient vermeld te worden wat er vervolgens gaat gebeuren met de gegevens en wat een gebruiker eventueel nog moet doen. Bedankt-pagina Op de bedankt-pagina staat uiteraard een kort dankwoord, zeker als het gaat om een aankoop of het versturen van de vraag. Daarna geeft u de feedback zoals beschreven bij het vorige onderdeel bevestigen. Navigatie tussen stappen Als er genavigeerd kan worden tussen verschillende stappen in formulieren, zoals bijvoorbeeld in een bestelproces, zorg er dan voor dat de gegevens die ingevuld zijn onthouden worden. Niets is vervelender dan wanneer een gebruiker een stap terug wil in het proces en daarmee de gegevens van de huidige stap kwijt is. Onthouden Als een gebruiker eenmaal zijn gegevens ergens heeft ingevuld op uw website kunt u diezelfde gegevens hergebruiken. Stel, iemand heeft zich ingeschreven voor de e-mailnieuwsbrief, dan kunt u de naam en het e-mailadres ook al vast invullen in het bestelformulier. Hier zijn diverse mogelijkheden voor. Heeft u zelf niet de technische kennis? Raadpleeg dan uw internetbureau. Voorwaarden Als u gebruikers akkoord wilt laten gaan met bepaalde voorwaarden, dient u dit duidelijk te vermelden. De voorkeur gaat uit naar een variant als in het onderstaande figuur. 19
Een alternatief is: Als u voor deze oplossing kiest, zorg er dan voor dat de algemene voorwaarden in een nieuw scherm worden geopend. Hierdoor raakt de gebruiker het scherm met de eventuele eerder ingevulde gegevens niet kwijt en kan hij gemakkelijk terug naar het scherm waar hij gebleven is. Navigatie Heldere, duidelijke en doelgerichte navigatie is van groot belang. Te veel onduidelijke knoppen zorgen ervoor, dat de gebruiker niet begrijpt waar hij moet kijken en wat hij moet doen. Om goed te kunnen navigeren zijn de volgende punten van belang: Submenu-navigatie Als er gebruik wordt gemaakt van submenu-navigatie, zie ik vaak de volgende zaken verkeerd gaan: - Uitklapmenu s werken niet in alle internetbrowsers - Uitklapmenu s verdwijnen als de muis niet exact het pad volgt van het uitgeklapte onderdeel - Submenu s zijn vaak zoekmachine-onvriendelijk - Submenu s staan soms op onlogische plekken 20
- De volgorde van de menu-items zijn niet logisch - Er wordt geen highlight toegepast, waardoor de gebruiker niet het gevoel krijgt dat het menu-item klikbaar is Zoals u ziet, kunnen er in de submenu-navigatie nogal een aantal zaken misgaan. Goede submenu-navigatie is van groot belang voor gebruikersvriendelijke navigatie. Werkt u met uitklapmenu s? Kijk er eens kritisch naar. Tip! Veel submenu-navigatie is ontwikkeld in Javascript en daarom vaak zoekmachineonvriendelijk. Ga na hoe de navigatie van uw website is ontwikkeld, met enkele technische ingrepen is deze alsnog zoekmachinevriendelijk te maken. Breadcrumbs Zorg dat de gebruiker weet waar hij zich bevindt. Dit geeft rust en houvast voor de gebruiker. Dit wordt gedaan door gebruik te maken van zogenaamde breadcrumbs, ook wel kruimelpad of navigatiepad genoemd. Een breadcrumb kan er als volgt uitzien: home -> producten -> keuken -> lepels De onderdelen van de breadcrumbs dienen klikbaar te zijn, behalve het laatste woord (ofwel de huidige pagina) Logo Maak het logo altijd klikbaar en zorg dat de gebruiker hiermee op de beginpagina van de website terugkomt. Het klikbare logo dient als een soort reddingsboei; als de bezoeker de weg kwijt is, kan hij altijd op het logo klikken om terug te keren naar de homepage. Meertaligheid Als uw website meerdere talen ondersteunt, zorg er dan voor dat de gebruiker eenvoudig van 21
taal kan wisselen. Plaats deze mogelijkheid daarom op een prominente plaats in de website vlakbij uw navigatie. Gebruik ook taaldetectie binnen uw website. Met een technische ingreep in uw website kan deze herkennen op welke taal de internetbrowser is ingesteld. Op deze manier hoeft een gebruiker niet zelf van taal te wisselen. Zoeken Ik raad sterk aan om op uw website een zoekfunctie te bieden. Ten eerste leert u waar uw bezoeker in is geïnteresseerd. Daarnaast analyseert u op basis van de zoekopdrachten welke inhoud van de website (de content) moeilijk vindbaar is, en past u dit doelgericht aan. Zorg er voor dat de interne zoekmachine goed en snel werkt. Zorg ook dat meta-informatie, zoals titels, meta-tags en categorieën, zoekbaar is. Veel websites maken de fout door alleen de inhoud van een pagina zoekbaar te maken. Zoekresultaten De manier waarop de zoekresultaten worden weergegeven, is ook van belang in verband met de gebruikersvriendelijkheid. Als er alleen titels worden getoond in de vorm van een link, dan heeft de gebruiker nog geen idee wat er gebeurt, als er op geklikt wordt. Geef daarom altijd de volgende zaken weer: - De categorie waar het resultaat zich in bevindt - De titel - De omschrijving eventueel met highlights met het gezochte woord - De link naar het onderwerp Als u een webwinkel heeft, kunt u in de zoekresultaten een productenoverzicht tonen, compleet met een foto en de prijs van het product. Een mooi voorbeeld hiervan vindt u in het volgende figuur. 22
Zoekresultaten op Wehkamp.nl bij het zoekwoord grill Zoals u op bovenstaande afbeelding kunt zien, wordt er duidelijk aangeven hoeveel resultaten er zijn en op welk woord er is gezocht. Tip! De pagina met zoekresultaten is een goede plek om de contactgegevens van uw organisatie in op te nemen. Plaats hier bijvoorbeeld een Live Chat-knop, een vragenformulier, telefoonnummer en/of e-mailadres. Een bezoeker is namelijk op zoek naar informatie en zit met een vraag of probleem. Zeker wanneer er geen resultaten via de zoekfunctie worden gevonden, dienen de verschillende contactvormen aanwezig te zijn. Meldingen Wanneer een bezoeker een fout maakt bij het invullen van een formulier, het bezoeken van een pagina die niet meer bestaat of het bestellen van een product dat uitverkocht is, krijgt de bezoeker over het algemeen een melding. De manier waarop een melding wordt gegeven is vaak niet gebruiksvriendelijk en leidt vaak tot afhakende bezoekers. Een goede foutmelding voldoet aan de volgende eigenschappen: 23
- De melding moet op een relevante plek worden weergegeven - De melding dient vriendelijk te zijn - De melding dient uit te leggen wat er fout gaat en wat er gedaan moet worden om het op te lossen Wanneer de fout niet kan worden opgelost, is het aan te bevelen dat er support mogelijkheden zijn zoals Live Chat, een telefoonnummer of webformulier. 24
2. Usability in e-mail nieuwsbrieven Onderwerp Het onderwerp van de nieuwsbrief bepaalt in grote mate of deze geopend wordt. Het oog van de gebruiker is getraind om bij e-mail eerst te kijken naar het onderwerp. Vervolgens gaat het oog naar de afzender. Om aan te geven hoe belangrijk het onderwerp is heb ik een schermafdruk gemaakt van mijn e-mail. Wie over zich zelf spreekt wordt niet geopend U ziet een willekeurige weergave van mijn e-mailbox. E-mails met bedrijfsnamen, nieuwsbrief of met hun eigen naam in het onderwerp worden niet geopend. De enige uitzondering daarop is de e-mail van de afzender Amazon. Dit komt door de tekst voor het woord Amazon (Ontdek!) in de onderwerpregel. Ook de afzender is belangrijk, gebruik daarbij uw eigen naam of bedrijfsnaam. Gebruik bijvoorbeeld niet newsletter@a4uexpo.com, dit komt namelijk niet persoonlijk over. Kijk maar eens naar uw eigen e-mailbox, welke e-mail leest u wel, en welke niet? 25
Inhoudelijk - Gebruik duidelijke (tussen)kopjes in de tekst - Houd de layout overzichtelijk - Plaats uw logo bovenin in de nieuwsbrief - Geef een korte opsomming van de punten die worden behandeld - Plaats, waar relevant, een link naar uw website Meer weten over hoe e-mails het beste opgesteld kunnen worden? Lees dan het boek 'E-mail Marketing'. 26
3. Usability in webwinkels Veel webwinkels zijn niet gebruikersvriendelijk. Dit geldt niet alleen voor kleine webwinkels, maar ook voor webwinkels van grote organisaties. Er zijn twee verschillende soorten webwinkels: 1. webwinkels met een groot assortiment (bijvoorbeeld: Albert.nl) 2. webwinkels met een klein assortiment en duurderde producten (bijvoorbeeld: Dell.nl) Bij het eerste type webwinkel gaat het erom, dat een bezoeker gemakkelijk kan shoppen, snel door de verschillende categorieën kan navigeren en de artikelen snel en eenvoudig in de winkelwagen kan plaatsen. Bij het tweede type webwinkel is er sprake van een ander soort aankoopproces. Hier is het veel belangrijker om artikelen te kunnen vergelijken en reviews te lezen. Als het product eenmaal is geselecteerd (bijvoorbeeld een laptop) dienen er aanvullende relevante producten te worden getoond. Denk hierbij bijvoorbeeld aan accessoires voor de laptop. Dit vereist een andere indeling van een webwinkel als bij de eerste variant. Denk goed na in welke categorie uw webwinkel valt. Misschien is er sprake van een combinatie van beide. Case Intertoys In de webwinkel van Intertoys (www.intertoys.nl) gaat er in de gebruikersvriendelijkheid veel mis. In de bovenste balk, in het menu boven de witruimte, kan de winkelwagen bekeken worden; terwijl het winkelgedeelte veel lager zit. Mensen die niet vaak online winkelen zullen moeite hebben met het vinden van de link naar de winkelwagen. 27
Winkelwagen bovenin de navigatie Veel gemaakte fouten Veel gemaakte fouten op het gebied van usability in webwinkels op een rij: - Winkelwagen is onvindbaar - Er moet eerst ingelogd worden om de winkelwagen te bekijken - Onduidelijk of de producten inclusief of exclusief BTW zijn - Het bladeren door de verschillende pagina s is onduidelijk - Geen accent (bijvoorbeeld door middel van kleur) op knoppen - Betaalwijzen zijn moeilijk te vinden - Logo Thuiswinkel.org verstopt of niet aanwezig (is belangrijk voor het vertrouwen) - Fouten/meldingen, de gebruiker schrikt hiervan. Bovendien ogen meldingen over het algemeen erg technisch. Bezoekers houden niet van onverwachte pop-ups. 28
Wie gaat er bladeren? Voorbeeld van een Javascript error. Een nogal technische en onvriendelijke manier van het tonen van een vraag 29
4. Usability in webapplicaties Webapplicaties zijn softwaretoepassingen die via de webbrowser toegankelijk zijn. Een voorbeeld hiervan is Google Adwords (voor het opzetten van advertentiecampagnes) of Salesforce.com (voor online Customer Relationship Management, CRM). Het verschil met websites is dat webapplicaties technisch veel geavanceerder zijn dan websites en ontwikkeld zijn voor het beheren, bewerken en soms verspreiden van informatie. Mocht u zelf een webapplicatie willen ontwikkelen of u wilt een webapplicatie beoordelen op gebruikersvriendelijkheid, dan vindt u hierbij een aantal aandachtspunten op het gebied van usability. Dashboards Als u een applicatie ontwikkelt, ontwikkel dan ook altijd een dashboard. Dit is een scherm waarin gebruikers in één oogopslag relevante informatie zien. Dashboard 30
Voorbeelden van typische dashboardinformatie in een CRM-systeem: - Aantal verkopen deze week ten opzichte van de gestelde doelen - Lead-bronnen (via welke kanalen komen leads binnen?) - Stadia van leads/prospects Toon de mogelijkheden en benodigde uitleg Webapplicaties bevatten over het algemeen veel mogelijkheden. Denkt u eens aan uw eigen CMS, Google Analytics of bijvoorbeeld Hyves. Juist omdat webapplicaties veel mogelijkheden bevatten, is het belangrijk om goed na te denken over usability. Een gebruiker verwacht dat hij zonder na te denken de gewenste actie kan verrichten. Daarom is het zaak om alle mogelijkheden duidelijk weer te geven, maar ook om hierbij uitleg te geven. In de volgende figuur ziet u hoe Google dit in Google AdWords heeft toegepast. Het is een gebruikersvriendelijke interface waar de gebruiker kan spelen met de gegevens. Sorteren is mogelijk op elke kolom Toelichting op figuur: 1. De gebruiker bepaalt zelf welke kolommen hij wil zien 2. Het vraagtekenicoon vertelt de gebruiker, door erop te klikken, wat de waarden in deze kolom voorstellen 3. Het zwarte driehoekje geeft aan op welke kolom er gesorteerd is en in welke richting, in dit geval aflopend 31