Usability design. Leereenheid 17

Leereenheid 17 Usability design

Leereenheid 17

Usability design

INTRODUCTIE

In de voorafgaande leereenheid (16) is voor webdesign het begrip usability geïntroduceerd. Daarbij werd een definitie gegeven die afkomstig is uit de koker van Jakob Nielsen. Definitie van usability volgens Jakob Nielsen.

Usability van een gebruikersinterface voor het web is een kenmerk van kwaliteit voor die interface, bestaande uit vijf kwaliteitscomponenten, namelijk leerbaarheid, efficiency, onthoudbaarheid, fouttolerantie en tevredenheid. Maar hoe ziet een webinterface eruit, wil deze in lijn zijn met die vijf kwaliteitskenmerken? Welke specifieke kenmerken moet een website hebben om usable te zijn, en welke kenmerken juist niet? Voor die vragen is het bestek van een leereenheid te kort om daarop een compleet antwoord te geven, voor zover dat al mogelijk mocht zijn. Maar we kunnen en zullen wel wat zaken noemen die zich bewezen hebben als zijnde nuttig. In deze leereenheid volgen we de voetstappen van twee veelgeciteerde personen, namelijk de Amerikaanse consultant Steve Krug en de eerder genoemde Jakob Nielsen. Allerlei adviezen van deze twee personen komen aan bod, waarbij we steeds in het achterhoofd moeten houden dat alles draait om een centraal punt, namelijk eenvoud. Nielsen (1999) stelt dat ontwerpen van webusability te kwalificeren is als ‘the practice of simplicity’. En Krug (2006) heeft drie wetten van usability geformuleerd, waarvan de eerste luidt: ‘Don’t make me think’. Dat wil zeggen dat een website en webinterface zo simpel in elkaar moeten zitten, dat voor het gebruik ervan niet echt moet worden nagedacht. Ontwerpen is een creatieve bezigheid. Veel ontwerpers zijn ook graag creatief en artistiek bezig en proberen heel mooie websites te ontwerpen. Dat is prima, want een aantrekkelijke website nodigt uit. Maar als de usability niet goed is, dan zijn bezoekers in no time vertrokken. Vandaar de aandacht voor usability in deze leereenheid.

FIGUUR 17.1

Creativiteit versus usability Bron: website Bunnyfoot, bunnyfoot.com/blog

39

Open Universiteit

Webcultuur

Usability design van websites kun je ontleden in usability in relatie tot navigatiedesign, paginadesign en contentdesign. De genoemde thema’s komen als volgt aan bod in deze leereenheid Inleiding

De leereenheid begint met een inleiding waarin we ingaan op het begrip usability, en waarin usability wordt afgezet tegen andere elementen die bepalen of een website als goed, dat wil zeggen als aanvaardbaar, is te bestempelen voor de verschillende stakeholders.

Korte beschrijving van de inhoud van leereenheid voor de paragrafen 17.2 t/m 17.4.

Na de inleiding volgen drie paragrafen, waarvan de eerste beschrijft hoe mensen met websites omgaan en wat voor consequenties dat heeft voor de inrichting van sites. De daaropvolgende paragraaf noemt een aantal kernpunten voor de inkleding van websites. En de laatste van het trio paragrafen gaat dan over navigatiedesign en beschrijft een aantal fundamentele aspecten van navigeren binnen websites.

Korte beschrijving van de inhoud van leereenheid voor de paragrafen 17.5 t/m 17.8.

De laatste paragrafen gaan vooral over pagina- en contentdesign. Dat gebeurt met als vertrekpunt de onderzoeksresultaten die gevonden zijn met eyetracking. Dat is een techniek waarmee in kaart wordt gebracht waar gebruikers naar kijken en hoe lang ze naar iets kijken. Na een inleidende paragraaf waarin de techniek van eyetracking wordt uitgelegd, volgt een paragraaf waarin is beschreven wat geleerd kan worden van eyetracking voor wat betreft de manier waarop mensen kijken naar webpagina’s en wat dat betekent voor paginadesign. De twee laatste paragrafen hebben betrekking op contentdesign. De eerste gaat over zaken waarop doorsnee gebruikers niet zitten te wachten, en zaken die genegeerd worden. De laatste is een paragraaf waarin wordt ingegaan op beelden als content. LEERDOELEN

Na bestudering van deze leereenheid moet u in staat zijn om – aan te geven wat wordt bedoeld met de aanvaardbaarheid of acceptability van een product – uit te leggen wat het verschil is tussen sociale aanvaardbaarheid en praktische aanvaardbaarheid – de begrippen usefulness, utitily en usability te duiden – uit te leggen wat wordt bedoeld met de opmerking dat bezoekers van webpagina’s scanners zijn, en wat de redenen zijn dat gebruikers webpagina’s scannen – te vertellen wat het wil zeggen dat gebruikers satisficers zijn, en waarom ze kiezen voor satisficing als strategie – aan te geven wat de voordelen zijn van een site die helder is en begrepen wordt door de gebruikers – een website systematisch te analyseren vanuit het oogpunt van de beoogde gebruikers – een toelichting te geven bij de drie wetten van usability zoals die zijn geformuleerd door Krug – kenmerken te noemen van goede hyperlinks – zaken te noemen waaraan een gebruiker geen tijd moet hoeven spenderen bij het bezoeken van een website – voordelen te noemen van bondige webpagina’s – ‘happy talk’ te herkennen op webpagina’s

40


– aan te geven waarom instructies op websites tot een minimum moeten worden teruggebracht – navigatiebeginselen te benutten bij analyse en ontwerp – verschillende vormen van navigatie aan te geven en toe te lichten – een toelichting te geven bij de begrippen search-dominant user en link-dominant user – het verschil aan te geven tussen doelgerichte websitebezoekers en explorerende websitebezoekers – nadelen te noemen van browsen en aan te geven wat mensen aantrekt in browsen – aanbevelingen te doen die nuttig zijn voor efficiënte navigatie – voordelen te noemen van het gebruik van tabbladen – de begrippen tag en tag cloud te duiden – een toelichting te geven bij de techniek van eyetracking – uit te leggen wat een heatmap is en wat een gazeplot is – ontwerprichtlijnen te gebruiken zoals die gevonden zijn bij eyetracking-onderzoek, vermeld onder andere door Nielsen – richtlijnen te geven voor de lay-out van een webpagina – uit te leggen waarom segmentering van webpagina’s nuttig is – aan te geven wat een priority spot is en waardoor de prioriteit van een gebied van een webpagina wordt bepaald – uit te leggen wanneer gebruikers wel of niet een boodschap hebben aan banners – uit te leggen waarom de responsiviteit van een site van belang is – te bepalen wanneer afbeeldingen relevant zijn en hoe deze optimaal kunnen worden benut voor het manipuleren van de aandacht – een toelichting te geven bij het schalen en knippen van afbeeldingen – aan te geven wat bedoeld wordt met een magnetische afbeelding en welke zaken maken dat een afbeelding onweerstaanbaar is – redenen te noemen voor het toepassen van bewegende beelden op een website – elementen aan te geven waarmee rekening moet worden gehouden bij het toepassen van animaties op websites – uit te leggen dat content die is gecreëerd voor een ander medium, bijvoorbeeld televisie, niet altijd goed is over te zetten naar het web.

Weblink Site Nielsen

Studeeraanwijzing De studielast van deze leereenheid is ongeveer 8 uur. De eerste helft van deze leereenheid is zo goed als geheel gebaseerd op het boek Don’t Make Me Think! van Steve Krug waaruit veelvuldig wordt geciteerd. De tweede helft van de leereenheid is met name gebaseerd op materiaal van Jakob Nielsen dat op zijn website (zie weblink) te vinden is en op zijn boek, met co-auteur Kara Pernice, Eyetracking Web Usability. Diverse plaatjes uit deze leereenheid zijn ook te zien op studienet. Dat heeft als voordeel dat de plaatjes beter te zien zijn, en eventueel te vergroten. Dat is vooral nuttig voor de plaatjes in het tweede deel van de leereenheid, omdat daarvan de kleuren relevant zijn.

41

Open Universiteit

Webcultuur

LEERKERN 1

Nielsen Norman Group (NN/g)

Jakob Nielsen Bron: wikipedia

Inleiding

Jakob Nielsen werd geboren in 1957 in Kopenhagen, studeerde daar aan de Technische Universiteit, en promoveerde er op gebied van mens-machine-interactie. Na zijn studie werkte hij onder meer bij IBM, om vervolgens van 1994 tot 1998 voor Sun Microsystems te werken. Bij Sun werkte hij eerst aan het meer hanteerbaar maken van zware applicatiepakketten, om zich daarna steeds meer bezig te houden met het opkomende gebied van usability van websites. Nielsen werkte in die tijd in de Verenigde Staten, waar hij in augustus 1998 samen met de Amerikaan Donald Norman een consultancybedrijf stichtte op gebied van usability. Dat bedrijf draagt de naam Nielsen Norman Group (NN/g). Nielsen geeft aan (1993) dat de usability van een product een beperkte zaak is vergeleken met het grotere thema van de aanvaardbaarheid (acceptability) van een product. Bij dat laatste gaat het namelijk om de vraag of het product goed genoeg is om alle behoeften en eisen te vervullen van de gebruikers en andere stakeholders, zoals de opdrachtgevers en managers (zie figuur 17.2).

Aanvaardbaarheid

FIGUUR 17.2

Zaken die van belang zijn bij ontwerpen van systeem Bron: Nielsen, 1993, p.25

Sociale aanvaardbaarheid Praktische aanvaardbaarheid

De allesomvattende aanvaardbaarheid van een product zoals een website is een combinatie van sociale aanvaardbaarheid en praktische aanvaardbaarheid. Voorbeeld

Ter illustratie kunnen we denken aan een website waarop om allerlei persoonlijke gegevens wordt gevraagd om daarmee gebruikersprofielen op te stellen. Die profielen kunnen op diverse manieren worden gebruikt, bijvoorbeeld voor het doen van gerichte aanbiedingen en voor het uitsluiten van gebruikers met een profiel dat wijst op mogelijk frauduleus gedrag.

42


Met zo’n systeem kunnen veel potentiële oplichters worden herkend, waardoor het systeem als praktisch aanvaardbaar kan worden beschouwd. Maar over de sociale aanvaardbaarheid zal niet iedereen het eens zijn. De praktische aanvaardbaarheid van een systeem gaat over bekende zaken als kosten en betrouwbaarheid, en ook over usefulness. Usefulness

Usefulness heeft betrekking op de kwestie of een website gebruikt kan worden voor bereiken van een gewenst doel. Het is een thema dat gesplitst kan worden in de twee categorieën van utility en usability. Utility gaat over de vraag of een systeem in staat is om te doen wat nodig is, met andere woorden, of een systeem beschikt over de benodigde functionaliteit. Usability betreft de vraag in welke mate gebruikers die functionaliteit kunnen gebruiken. In het Nederlands is hiervoor het begrip bruikbaarheid gangbaar. Utility en usability gaan niet gelijk op, vaak integendeel. Iedereen kent wel webinterfaces met een enorme utility doordat ze overladen zijn met interactiemogelijkheden, maar die door al die mogelijkheden zo onoverzichtelijk en overweldigend zijn dat gebruikers er nauwelijks of geen raad mee weten, waardoor ze een slechte usability hebben.

Utility

Usability

FIGUUR 17.3

Systeem met goede functionaliteit is niet altijd usable Bron: website Dilbert, dilbert.com

Weblink SiteNielsen

Op het web is usability een noodzakelijke voorwaarde voor overleving. Nielsen schrijft daar op zijn website het volgende over.

Citaat van de website useit.com van Jakob Nielsen.

‘If a website is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. If users get lost on a website, they leave. If a website’s information is hard to read or doesn’t answer users’ key questions, they leave. Note a pattern here? There’s no such thing as a user reading a website manual or otherwise spending much time trying to figure out an interface. There are plenty of other websites available; leaving is the first line of defense when users encounter a difficulty. The first law of e-commerce is that if users cannot find the product, they cannot buy it either. For intranets, usability is a matter of employee productivity. Time users waste being lost on your intranet or pondering difficult instructions is money you waste by paying them to be at work without getting work done.’ Bron: Nielsen, 2003.

43

Open Universiteit

Webcultuur

OPGAVE 17.1

Geef in eigen bewoordingen weer waarom usability een kritische factor is voor het succes van een webwinkel. 2

Webgebruikers

Voordat we verder gaan met de opvattingen van Nielsen over usability, gaan we eerst bij Steve Krug te rade. Krug is een Amerikaanse usability consultant voor een uitlopende reeks van klanten zoals Apple, Bloomberg, Lexus, NPR, the International Monetary Fund, en vele andere. Hij is vooral bekend geworden door zijn boek Don’t Make Me Think! A Common Sense Approach to Web Usability, waarvan in 2000 de eerste druk verscheen en inmiddels meer dan 300.000 exemplaren zijn verkocht. Steve Krug Bron: website boagworld.com

Steve Krug heeft uitgebreid gekeken naar mensen die het web gebruiken, en is getroffen door het feit dat er een groot verschil is tussen hoe webontwerpers denken dat mensen websites gebruiken, en hoe mensen die echt gebruiken. Webontwerpers maken hun ontwerpen vanuit het idee dat gebruikers zich verdiepen in elke pagina, de zorgvuldig opgestelde teksten lezen, uitzoeken hoe de dingen zijn georganiseerd, en hun mogelijkheden overwegen alvorens te beslissen op welke link te klikken (Krug, 2006). Maar, zo schrijft Krug (2006), wat ze in werkelijkheid meestal doen, is een blik werpen op elke nieuwe pagina, een gedeelte van de tekst scannen, en klikken op de eerste beste link die de aandacht trekt, of die in de verte lijkt op wat ze zoeken. Er zijn in de regel grote delen van de pagina’s waar ze helemaal niet naar te kijken (zie figuur 17.4).

FIGUUR 17.4

We lezen niet systematisch, maar we scannen Bron: Krug, 2006, p.21

Je kunt het lezen van een website vergelijken met het lezen van een billboard waar je met 100 kilometer per uur langsrijdt. Als je effectieve websites wilt ontwerpen, is dat iets waarmee je terdege rekening moet houden. Je moet goed weten hoe gebruikers webpagina’s bekijken, hoe ze keuzes maken, en hoe ze naar gewenste informatie zoeken.

44


OPGAVE 17.2

Wat betekent het concreet voor het ontwerpen van een website, dat het lezen van een website te vergelijken is met het lezen van een billboard waar je langsrijdt met een snelheid van 100 kilometer per uur? 2.1

Mensen zijn scanners

WEBGEBRUIKERS ZIJN SCANNERS

Mensen spenderen in de regel heel weinig tijd aan het lezen van webpagina’s, zo geeft Steve Krug aan. In plaats daarvan scannen gebruikers de pagina’s, of ze bekijken die vluchtig, op zoek naar woorden of plaatjes die hun aandacht trekken. Dat is natuurlijk niet zo voor pagina’s met documenten in de vorm van nieuwsberichten of sommige verslagen. Maar zelfs dan gaat het vaak niet van harte. Zodra een document wat langer is, zijn veel mensen geneigd het te printen, omdat ze het gemakkelijker vinden om van papier te lezen dan van een scherm (Krug, 2006). (Misschien dat eReaders voor wat dit betreft voor een ommekeer zullen zorgen.) We scannen pagina’s om onder andere de volgende redenen. – We hebben meestal haast. Aan het bezoek van een website willen we geen onnodige tijd besteden. We gunnen ons gewoonweg niet de tijd om meer te lezen dan dat wat noodzakelijk is (Krug, 2006). – We weten dat we het niet nodig hebben om alles te lezen. Meestal zijn we geïnteresseerd in slechts een heel klein deel van de inhoud van een site. We scannen webpagina’s op zoek naar stukjes die aansluiten bij de doelstellingen van het webbezoek, en de rest doet er niet toe. Scannen is de manier om relevante stukjes snel te vinden (Krug, 2006). – We zijn er goed in. Ons hele leven is doorspekt met het scannen van kranten, tijdschriften en boeken op zoek naar stukjes informatie die ons interesseren, en we weten dat scannen werkt (Krug, 2006). Kortom, wat we waarnemen bij het bekijken van een webpagina hangt af van wat we precies willen op het web. Meestal is dat slechts een heel klein deel van de totale inhoud van de pagina (zie figuur 17.5).

FIGUUR 17.5

We kijken selectief Bron: Krug, 2006, p.23

45

Open Universiteit

Webcultuur

We hebben de neiging om ons te concentreren op woorden en zinnen die lijken te passen bij de doelstelling van het webbezoek, of die aansluiten bij onze belangstelling. En verder wordt de aandacht getrokken door specifieke triggerwoorden, zoals ‘gratis’ en ‘uitverkoop’ (Krug, 2006). OPGAVE 17.3

Geef twee redenen waarom we bij webpagina’s een veel grotere neiging hebben om te scannen dan bij pagina’s op papier. 2.2

WEBGEBRUIKERS ZIJN SATISFICERS

Ontwerpers gaan er nogal eens vanuit dat gebruikers van een webpagina een afweging maken tussen alle mogelijkheden die de pagina biedt, en dat ze dan kiezen voor de beste optie. In werkelijkheid gunnen gebruikers zich veelal niet de tijd om de diverse opties te bekijken en te wegen, maar reageren ze op redelijke opties die ze zien. Zodra gebruikers een link opmerken die oogt alsof die zou kunnen leiden naar wat ze zoeken, dan is er een grote kans dat ze daarop klikken. Ze kiezen niet voor de beste optie, maar voor de eerste de beste acceptabele optie; een strategie die bekend staat als satisficing (Krug, 2006).

Mensen zijn satisficers

Het woord satisfice werd geïntroduceerd door de Amerikaanse psycholoog en socioloog Herbert Simon (1955, 1956). Hij bemerkte dat mensen vaak genoegen nemen met een voldoende resultaat, ook al is dat niet het beste resultaat. Dat is met name het geval als mensen worden geconfronteerd met een relatief groot aantal keuzemogelijkheden. Wanneer mensen meer informatie voorgeschoteld krijgen dan ze kunnen of willen verwerken, zullen ze vaak eenvoudiger beslisregels toepassen. Mensen zijn niet altijd blij met een grote vrijheid van keuze. We illustreren dat met een voorbeeld dat ontleend is aan een tekst uit 2009 met als titel De (ir)rationaliteit van de beslisser, van de hoogleraren sociale psychologie Eric van Dijk en Marcel Zeelenburg. Voorbeeld ontleend aan een tekst van Eric van Dijk en Marcel Zeelenburg.

‘Deze onvrede met keuzevrijheid is ook te vinden in een nu al klassieke studie van Iyengar en Lepper (2000). Zij gaven mensen in een supermarkt de mogelijkheid om jam te proeven. Op verschillende dagen gaven ze de consumenten een keuze uit 6 jams of uit 24 jams. Ze ontdekten dat er meer mensen kwamen kijken bij het grote aanbod dan bij het kleine aanbod. Echter, het percentage dat uiteindelijk besloot jam te kopen was vele malen hoger wanneer er slechts 6 jams gepresenteerd werden dan bij een presentatie van 24 jams. De uitgebreide keuze vergrootte dus wel de initiële aandacht maar verminderde de verkoop. In andere (laboratorium)studies zijn deze resultaten gerepliceerd en werd ook gevonden dat mensen ontevreden werden bij een te groot keuzeaanbod. Iyengar en Lepper noemen dit het choice overload phenomenon.’ Bron: van Dijk & Zeelenberg, 2009, p. 30

Vooral webgebruikers kiezen voor satisficing als strategie. Daarvoor is een aantal redenen te noemen. – Gebruikers hebben meestal haast. Het zoeken van een optimaal resultaat is moeilijk en kost veel tijd. Satisficing is efficiënter (Klein, 1999). – Er staat geen grote boete op het maken van een verkeerde keuze. Satisficing is een effectieve strategie, want de boete bij een verkeerde keuze bestaat uit

46


niet meer dan het klikken op de backknop. Dit veronderstelt natuurlijk wel dat webpagina’s snel laden (Krug, 2006). – Het wegen van de opties levert niet altijd wat op. Als een site een slecht ontwerp kent, is het vaak niet nuttig om tijd en moeite te steken in het zoeken naar de beste optie. Je kunt beter wat gokken en gebruik maken van de backknop als dat niets oplevert (Krug, 2006). OPGAVE 17.4

Is satisficing voor alle soorten websites de beste strategie? 2.3

WEBGEBRUIKERS ZIJN MODDERAARS

Mensen zoeken over het algemeen niet systematisch uit hoe dingen werken. Mensen modderen maar wat aan. Dat wordt meteen duidelijk als je kijkt hoe mensen websites gebruiken, en hoe ze omgaan met (nieuwe) videoapparatuur of wasmachines. Voortdurend gebruiken mensen dingen, zonder dat ze begrijpen hoe ze werken, of met volledig onzinnige denkbeelden over hoe ze werken (Krug, 2006). Slechts weinig mensen gunnen zich de tijd om de instructies te lezen van een nieuw apparaat. In plaats daarvan doen ze maar wat, waarbij ze een vage verklaring bedenken voor wat ze doen en waarom het werkt (Krug, 2006). Maar het is een feit dat ze op die manier wel dingen voor elkaar krijgen. Krug (2006) merkt op dat hij veel mensen heeft gezien die software en websites op een effectieve wijze gebruiken, maar wel op een heel andere wijze dan de ontwerpers voor ogen hadden. En daarbij, aanmodderen is niet beperkt tot beginners. Zelfs technisch onderlegde gebruikers hebben vaak opmerkelijke hiaten in hun begrip over hoe dingen werken.

Mensen modderen aan

Voorbeeld ontleend aan boek van Krug: Don’t Make Me Think!

My favorite example is the people (and I’ve seen at least a dozen of them myself during user tests) who will type a site’s entire URL in the Yahoo search box every time they want to go there—not just to find the site for the first time, but every time they want to go there, sometimes several times a day. If you ask them about it, it becomes clear that some of them think that Yahoo is the Internet, and that this is the way you use it.

FIGUUR 17.6

Intikken van URL in zoekveld is vaak weinig handig

Je kunt je natuurlijk afvragen of het erg is dat gebruikers van een site maar wat aanmodderen, zeker als ze na enig zoeken vinden wat ze zoeken. Het antwoord is dat het er veel toe doet, want aanmodderen mag soms werken, het is in de regel een inefficiënte en foutgevoelige bezigheid (Krug, 2006). Een eigenaar van een site is beter af met een site die helder is en die begrepen wordt door de gebruikers. Steve Krug noemt de volgende voordelen. – Er is een veel grotere kans dat gebruikers zullen vinden wat ze zoeken, wat goed is voor die gebruikers en voor de eigenaar van de site. – Er is een grotere kans dat gebruikers inzicht krijgen in het totaal van wat de site te bieden heeft, niet alleen de onderdelen die ze min of meer toevallig onder ogen krijgen.

47

Open Universiteit

Webcultuur

– Er is een grotere kans dat het lukt om gebruikers te leiden naar de onderdelen van de site die de eigenaar graag wil laten zien. – Gebruikers zullen zich slimmer voelen, waardoor ze graag naar de site zullen terugkeren. Je kunt resultaat hebben met een site die mensen laat aanmodderen, maar slechts tot het moment dat een concurrent komt met een site waar bezoekers zich slim en op hun gemak voelen. 3

Ontwerprichtlijnen

Het ontwerpen van een goede website is niet eenvoudig. Onder meer omdat er niet een unieke en enig juiste wijze van ontwerpen is. Het is een gecompliceerde bezigheid. Maar er zijn wel drie richtlijnen die je in je achterhoofd moet houden bij het ontwerpen. 3.1

Vanzelfsprekend

Krugs eerste wet van usability

EEN WEBPAGINA MOET VANZELFSPREKEND ZIJN

De eerste en waarschijnlijk belangrijkste richtlijn luidt: Elke pagina van een website moet vanzelfsprekend zijn. Elke pagina moet voor zichzelf spreken. Een gebruiker moet zonder veel denkinspanning kunnen snappen wat een pagina heeft te bieden en hoe je een en ander moet gebruiken. Steve Krug heeft dit, in wat hij de eerste wet van Krug noemt, als volgt verwoord: Don’t make me think! Volgens Krug zijn er allerlei dingen op een webpagina die ons kunnen hinderen en ons aanzetten tot onnodig nadenken. Denk aan namen, bijvoorbeeld. Typische boosdoeners zijn geestige of slimme namen, bedrijfsspecifieke namen en onbekende technische namen. Het is veel beter om namen te gebruiken die onmiddellijke herkenning oproepen. Lastig zijn ook zoekvelden waarvoor je niet weet wat je er kunt invullen. Stel als voorbeeld dat je op zoek bent naar een boek, kun je dan volstaan met invullen van steekwoorden, zijn spelfouten mogelijk, kun je zoeken op auteursnaam en op een ISB-nummer? Daarover wil je als gebruiker niet hoeven nadenken. Het verdient dan ook de voorkeur dat gebruikers zo vrij als mogelijk zijn, bij het invullen van zoekvelden. Gebruik goede software om uit te zoeken waarnaar ze precies op zoek zijn. Alles wat een computer kan doen, daar moet je een gebruiker niet mee vermoeien. Het is niet moeilijk om een lijst te maken van dingen waaraan een bezoeker van een site geen tijd moet spenderen. Steve Krug noemt: – Waar ben ik? – Waar moet ik beginnen? – Waar hebben ze dit of dat gezet? – Wat zijn de belangrijkste dingen op de pagina? – Waarom hebben ze dit zo genoemd?

Zelfverklarend

Als ontwerper moet je er naar streven dat elke webpagina geheel voor zichzelf spreekt, zodat de gemiddelde bezoeker meteen kan zien wat de pagina behelst en hoe deze gebruikt moet worden. Dat is overigens niet altijd te realiseren, met name als er iets ontworpen moet worden dat origineel of innoverend moet zijn. In die gevallen, zo stelt Krug, moeten de pagina’s zelfverklarend zijn. Op een zelfverklarende pagina moet een gebruiker wel een beetje nadenken om een en ander te

48


snappen, maar let wel, een beetje. De lay-out van de pagina en de goedgekozen woorden en afbeeldingen moeten er met elkaar voor zorgen dat een gebruiker weliswaar geen onmiddellijke herkenning ervaart, maar wel vrijwel onmiddellijke herkenning (Krug, 2006). 3.2

Simpel bereikbare website

Krugs tweede wet van usability

EEN WEBPAGINA MOET SIMPEL TE BEREIKEN ZIJN

Er is in de loop van de jaren veel gedebatteerd over de vraag hoe vaak naar verwachting gebruikers klikken om iets gedaan te krijgen, zonder dat ze gefrustreerd raken. Er zijn ontwerpregels opgesteld, die aangeven dat een gebruiker nooit meer dan een specifiek aantal keer (meestal drie, vier of vijf keer) moet hoeven klikken voor het bereiken van om het even welke pagina van de site (Krug, 2006). Maar gebruikers maken zich niet zo druk om het aantal keer dat ze moeten klikken, ze willen vooral dat de weg naar hun doel simpel is af te leggen. Dat brengt ons bij de tweede richtlijn voor ontwerpers, namelijk: Elke webpagina van een website moet simpel te bereiken zijn. Gebruikers moeten zeker weten dat elke klik ze dichter bij hun doel brengt en ze willen dat helder is welke keuzes ze moeten maken. Steve Krug formuleert het zo: It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice. Als gebruikers er vertrouwen in hebben dat ze juiste spoor volgen en als het klikken als vanzelfsprekend gaat, zullen gebruikers zich niet druk maken om het aantal klikken. Zolang ze het gevoel hebben dat ze op weg zijn naar de informatie die ze zoeken, zullen ze in de regel doorklikken. Ze moeten vooral niet in onzekerheid komen over de vraag of ze wel op de goede weg zijn, of ze met andere woorden het goede informatiespoor volgen. Op zoek naar informatie moet de ‘geur van de gezochte informatie’ steeds sterker worden, want dan weet je dat je doel nadert. In die zin vergelijkt de Amerikaanse usability-expert Jared Spool de gebruikers van een website met roofdieren die op zoek zijn naar een prooi in een bos door een geurspoor te volgen. Spool (2011) schrijft: “The users coming to your site all have one thing in common: their animal instinct. When a user wants to find something on your site, they are on the hunt. Just like a fox in a forest, they’ll be most successful when they pick up a strong scent”.

Kenmerken van goede hyperlinks

Bij het uitzetten van een goed informatiespoor moet men zich houden aan de volgende regels (Spool e.a., 2004). – Hyperlinks moeten de juiste triggerwoorden bevatten, dat zijn woorden waar de gebruiker naar zoekt – Hyperlinks moeten eruit zien als links; zo zijn tekstlinks blauw en onderstreept. – Elke klik op een hyperlink moet het gevoel geven dat die de gebruikers dichter brengt bij wat ze zoeken. – Gebruik geen jargon in hyperlinks, want dat kan gebruikers afschrikken. Vermijd ook grappige doordenkertjes en technische of overdreven moeilijke woorden. Dat zijn zaken die de geur van een informatiespoor verzwakken.

49

Open Universiteit

Webcultuur

OPGAVE 17.5

a Vindt u het een goed idee om aan de bovenkant van een homepage een hyperlink te plaatsen? b Er zijn websites waarop knoppen worden gebruikt voor het verwijzen naar andere pagina’s. Vindt u dat een goed ontwerpidee? 3.3

Bondige websites

Krugs derde wet van usability

EEN WEBPAGINA MOET BONDIG ZIJN

Als je het lezen van een website kunt vergelijken met het lezen van een billboard waar je met 100 kilometer per uur langs rijdt, dan zal duidelijk zijn dat veel omhaal van woorden niet gewenst is. De derde wet voor ontwerpers luidt dan ook: Elke webpagina van een website moet bondig zijn. Dat is lang niet altijd het geval, want als je webpagina’s bekijkt dan valt op dat ze vaak veel woorden bevatten die eigenlijk alleen maar ruimte innemen, want niemand zal ze ooit lezen, of in ieder geval is het niet per se nodig om ze te lezen. Al die extra woorden versluieren waar het om gaat op een pagina en schrikken gebruikers af. Die constatering heeft Steve Krug (2006) gebracht tot de formulering van zijn derde wet van usability. Get rid of half the words on each page then get rid of half of what’s left. De derde wet Krug klinkt nogal overdreven, zoals Steve Krug zelf ook toegeeft. Nu is het bij de meeste webpagina’s geen probleem om de helft van de woorden te verwijderen, zonder de essentie te verliezen. Om vervolgens nog eens de helft van het restant te verwijderen, is een andere zaak. Maar het is iets waar je wel naar moet streven. De wet wil in feite zeggen dat je je tot het uiterste moet inspannen bij het weghalen van overbodige woorden. Krug geeft aan dat het weghalen van alle onnodige woorden diverse gunstige effecten heeft, namelijk: – Het vermindert de ruis op een webpagina. – Het zorgt ervoor dat de nuttige inhoud meer op de voorgrond treedt. – Het maakt de pagina’s korter, waardoor gebruikers meer van die pagina’s kunnen zien zonder te scrollen.

FIGUUR 17.7

Vermijd onnodige tekst Bron: Mangrove Blog, blog.mangrove.nl

Voor het om zeep helpen van onnodige tekst, noemt Steve Krug twee categorieën van overbodige tekst. Hij duidt die categorieën aan met happy talk en instructions. Teksten uit beide categorieën moeten worden uitgeroeid. Met andere woorden: Happy talk and instructions must die.

50


Happy talk must die

Happy talk must die. Het is niet moeilijk om happy talk te herkennen. Het is bijvoorbeeld de inleidende tekst die gebruikers welkom heet op een site en die vertelt hoe leuk een bezoek aan de site is, of gebruikers meedeelt wat ze kunnen zien op de pagina of de site die ze bezoeken (Krug, 2006). Happy talk betreft verder de teksten waarin wordt verteld hoe goed de persoon of organisatie is achter de website. Op dat soort teksten zitten gebruikers niet te wachten; ze ervaren dat niet als nuttige informatie. Happy talk is net als kletspraat zonder echte inhoud. Het is te vergelijken met kletspraatjes die mensen met elkaar hebben als ze elkaar tegen het lijf lopen. Maar gebruikers van websites hebben in de regel geen behoefte aan zulke praatjes. Ze willen simpelweg hun doelen snel realiseren. Happy talk moet daarom worden vermeden (Krug, 2006).

Instructions must die

Instructions must die. Ook het gebruik van instructies op websites moet zoveel mogelijk worden vermeden. Ze worden eigenlijk nooit gelezen. Pas na eerst zelf zonder succes te hebben aangemodderd, willen gebruikers soms de instructies bekijken. En zelfs dan, als instructies langdradig zijn, is de kans vrij klein dat gebruikers daaruit de gewenste informatie halen (Krug, 2006). Ontwerpers moeten streven naar sites die geen instructies nodig hebben, doordat alles van die sites vanzelfsprekend of zelfverklarend is. En als je echt niet om instructies heen kunt, breng ze dan terug tot het absolute minimum (Krug, 2006). Voorbeeld

Steve Krug verwijst als voorbeeld van een pagina met onnodige tekst naar een gedeelte van een webpagina waarop bezoekers worden uitgenodigd om deel te nemen aan een kort onderzoek met het oog op verbetering van de website (zie figuur 17.8). Als je de uitnodiging bekijkt, dan is duidelijk dat er stevig gesnoeid kan worden in de tekst. De tekst bevat veel onnodige informatie en is te lang om bezoekers te kunnen boeien. Bij een formulering die beknopter is en meer to-thepoint, mag een veel betere respons worden verwacht.

FIGUUR 17.8

Uitnodiging met te veel onnodige tekst Bron: Krug, 2006, p.47

51

Open Universiteit

Webcultuur

OPGAVE 17.6

Bekijk de verschillende zinnen van de uitnodiging op de webpagina die is weergegeven in figuur 17.8, en ga na in hoeverre ze relevant zijn. Formuleer vervolgens een uitnodiging die meer to-the-point is en aanmerkelijk meer beknopt. 4

Navigatiedesign

Het is een onmiskenbaar feit dat gebruikers een website niet zullen gebruiken als ze op die site hun weg niet weten te vinden. Als je naar een site gaat waarop je niet kunt vinden wat je zoekt en als onduidelijk is hoe de site is georganiseerd, dan zul je op die site niet lang vertoeven en ook niet meer terugkeren. Bij het ontwerpen van websites gaat het daarom vooral ook over de vraag: Hoe ontwerp je heldere, simpele en consistente navigatie? Navigatie is een kernelement van een websites. Zonder goede navigatie is een website als een doolhof. Gebruikers verblijven niet graag op zo’n site, en zullen die mijden.

FIGUUR 17.9

Goede navigatiemogelijkheden zijn essentieel Naar: website xkcd, xkcd.com

4.1

EXPLORERENDE EN DOELGERICHTE WEBGEBRUIKERS

Om die vraag te beantwoorden is het nuttig om te bedenken dat het web bezocht wordt door mensen die daarvoor verschillende bedoelingen hebben. We kunnen daarbij onderscheid maken tussen twee hoofdtypen van webbezoekers, die we toelichten met onderstaand voorbeeld. Voorbeeld

Wie kort voor Moederdag de V&D binnenstapt zal twee typen van bezoekers kunnen herkennen. Dat zijn om te beginnen de bezoekers die precies weten waarnaar ze op zoek zijn. Ze willen bijvoorbeeld een koffiezetapparaat en gaan daarvoor direct naar de afdeling met huishoudelijke artikelen. Daarnaast zijn er de bezoekers die nog niet weten wat ze willen kopen. Ze lopen weinig gericht rond, in de hoop iets leuks tegen te komen. Bij binnenkomst stappen ze ook vaak direct op de standaard met folders af, omdat ze weten dat een folder allerlei suggesties voor Moederdag geeft.

52


Ook voor websites geldt dat je twee soorten bezoekers onderscheiden kunt, namelijk de doelgerichte bezoekers en de explorerende bezoekers. Explorerende bezoeker

De explorerende bezoekers kijken vaak tamelijk ongericht rond op de site, en kijken of er iets van hun gading is te vinden. Bij commerciële websites probeert men die bezoekers vast te houden en ze ondersteuning te geven bij hun zoektocht. Bij de site van Amazon bijvoorbeeld krijg je vergelijkbare alternatieven te zien als je een bepaald item bekijkt, er zijn aanbiedingen die vaak afgestemd zijn op de tijd van het jaar, en ze hebben een pagina die leidt naar allerlei suggesties voor cadeaus (zie figuur 17.10).

FIGUUR 17.10

Doelgerichte bezoeker

Deel van een webpagina van Amazon bedoeld voor mensen die behoefte hebben aan cadeausuggesties

De doelgerichte bezoekers weten waarnaar ze op zoek zijn, en proberen hun doel liefst zo efficiënt mogelijk te bereiken. Ze zien in de regel weinig van de webpagina’s die ze onder ogen krijgen op weg naar hun doel, hoewel het natuurlijk wel kan voorkomen dat ze worden afgeleid door aandachttrekkende elementen op de pagina’s. We zullen ons in het vervolg van deze paragraaf vooral richten op de navigatie voor doelgerichte bezoekers Dat neemt niet weg dat de meeste ontwerpregels die worden gegeven, van toepassing zijn voor zowel doelgerichte bezoekers als explorerende bezoekers.

53

Open Universiteit

Webcultuur

4.2

LINK-DOMINANT EN SEARCH-DOMINANT WEBGEBRUIKERS

Als je als (doelgerichte) gebruiker op zoek bent naar informatie, dan kun je dat doen op twee manieren. Dat is als eerste door gebruik te maken van zoekvakken en als tweede door rond te snuffelen op de site en te klikken op veelbelovende hyperlinks (zie figuur 17.11). Je kunt twee wegen volgen op weg naar een gewenst doel op een website. Je kunt zoeken met behulp van een zoekvak, en je kunt uitzien naar geschikte links en daarop klikken.

FIGUUR 17.11

Op een site kun je zoeken en browsen ofwel grasduinen. Bron: Straub, 2005.

De twee genoemde manieren passen bij twee typen gebruikers. Die twee typen kom je buiten het web in feite ook tegen. Voorbeeld

Search-dominant users

Link-dominant users Sitemap

Als men de bezoekers van een boekwinkel gadeslaat, dan valt op dat er twee soorten bezoekers zijn (als we ons beperken tot de doelgerichte bezoekers), namelijk bezoekers die meteen afstappen op een medewerker en vervolgens aangeven wat ze zoeken, en er zijn grasduiners die zelf op zoek gaan en alleen te rade gaan bij een verkoper als ze er zelf niet uitkomen. Op het web zie je in feite hetzelfde. Er zijn gebruikers die bij het binnengaan van een website meteen op zoek gaan naar een zoekvak, Jakob Nielsen (2006) noemt zulke gebruikers search-dominant users. Daarnaast zijn er de ‘browsers’ die wat grasduinen op de site en die alleen gebruik maken van een zoekvak als ze geen zinvolle links meer zien of als ze voldoende gefrustreerd zijn door de site. Nielsen duidt die aan als link-dominant users. Search-dominant users kennen het probleem dat het soms moeilijk is om een passende zoekterm te vinden. En voor link-dominant users is het niet altijd even simpel om een snelle weg te vinden naar de gewenste informatie, vooral als het een grote website betreft. Om de link-dominante users tegemoet te komen, zijn grote websites soms voorzien van een sitemap. Dat is een aparte pagina met links naar alle belangrijke pagina’s van de site. Sitemaps kunnen op verschillende manieren worden vormgegeven, bijvoorbeeld op de manier van figuur 17.12.

54


FIGUUR 17.12

Deel van een sitemap

OPGAVE 17.7

De sitemap van figuur 17.12 is eenvoudig van vorm; het is niet veel meer dan een lijst met links. Hoe zou je een sitemap met wat meer structuur kunnen inkleden? 4.3

ZOEKEN

Search-dominant users zullen bij het betreden van een site meteen op zoek gaan naar een zoekvak. Bedenk daarom dat veel gebruikers, als eerste echte daad na het bereiken van een site zullen speuren naar bekende patronen van zoekvelden (zie figuur 17.13).

FIGUUR 17.13

55

Drie bekende patronen voor zoekvelden

Open Universiteit

Webcultuur

Houd je voor de basis bij die drie patronen; maak het de gebruikers niet lastiger dan nodig is. Houd het zo simpel mogelijk. Gebruik vooral ook geen onnodig toelichtende teksten zoals ‘Vul hier je zoekterm in’. Iedereen die het web langer dan vandaag gebruikt, weet dat je zoektermen moet invullen in een zoekveld. Natuurlijk moet je voor Engelstalige sites het woord ‘Zoek(en)’ vervangen door ‘Search’. En als je ‘Search’ als label gebruikt, dan kun je het woord ‘Go’ gebruiken als knopnaam (zie figuur 17.14a). En als er verwarring mogelijk is over de reikwijdte van een zoekopdracht (wat wordt doorzocht: de site, een gedeelte van de site, of het hele web), dat moet je die duidelijk aangeven (zie figuur 17.14b).

FIGUUR 17.14

Alternatieve patronen voor zoekvelden

Er zijn gevallen denkbaar waarvoor het nuttig is om als gebruiker zelf de reikwijdte van een zoekopdracht te beperken. Je kunt dan bijvoorbeeld opgeven dat je wilt zoeken op titel of auteur van een boek. Of je geeft aan dat je in een bepaalde sectie wilt zoeken (zie figuur 17.15). Het beperken van de reikwijdte is vooral nuttig in gevallen dat het aantal hits erg groot is. Maar in het algemeen moet men gebruikers zoveel mogelijk de ruimte gunnen; opties brengen gebruikers al gauw in verwarring (Krug, 2006).

FIGUUR 17.15

Zoekopties bij Bol.com Bron: website Bol.com

4.4

BROWSEN

Browsen op een site is in veel opzichten vergelijkbaar met rondsnuffelen in de fysieke wereld. Als we op het web grasduinen dan voelt dat soms ook aan alsof we ons in een fysieke ruimte rondstruinen. Maar op het web missen we veel van de aanknopingspunten waarop we vertrouwen in de wereld om ons heen (Krug, 2006). Het gaat om de volgende zaken. Geen gevoel van schaal

– Geen gevoel van schaal. Tijdens een bezoek aan een website hebben we vaak geen idee van de grootte van die site. Zelfs nadat we geruime tijd op de site hebben doorgebracht, kunnen we niet aangeven of er bij benadering sprake is van 100 pagina’s, 1000 pagina’s, of 20 000 pagina’s.

56


Dat is heel anders dan bij een boek, een museum of een warenhuis, waarvoor je altijd een aardig idee hebt van de grootte en een ruw idee hebt van wat je wel en wat je niet hebt gelezen of gezien. Op een website is het daarom moeilijk om te weten of je alle relevante zaken onder ogen hebt gehad, wat vervolgens betekent dat je niet weet of het zin heeft om door te gaan met je zoektocht op de site (Krug, 2006). – Geen gevoel van richting. Op een website bestaat er geen echte richting; er is geen links en rechts, geen voor en achter en geen boven en onder. Je hoort gebruikers wel praten over naar boven gaan en naar beneden gaan, maar dan gaat het over omhoog en omlaag in de hiërarchische opbouw van een site (Krug, 2006). – Geen gevoel van locatie. In fysieke ruimtes verzamelen we kennis over de ruimte terwijl we ons in die ruimte verplaatsen. We ontwikkelen een gevoel van waar dingen zich bevinden en kunnen op basis daarvan kortere routes naar gewenste plaatsen bedenken (Krug, 2006). Maar op het web kun je geteleporteerd worden, dus je verplaatsen zonder enige ruimte te doorkruisen en zonder een blik te werpen op de dingen langs de weg. Als we terug willen keren naar een plek op een website, dan moeten we weten waar die plek zich bevindt binnen de hiërarchische opbouw van de site, dan wel moeten we kunnen terugkeren op onze schreden.

Geen gevoel van richting

Geen gevoel van locatie

In de verfilmde televisieserie Star Trek verplaatsen mensen zich regelmatig – onder meer in benarde situaties – door teleportatie. Ze laten zich ‘opstralen’ met de oproep: “Beam me up, Scotty.”

FIGUUR 17.16

‘Beam me up, Scotty’ ofwel ‘Straal me op, Scotty’ Naar: Bruce Beattie in Valley Daily News, 13 november 1988.

OPGAVE 17.8

Zoals u hebt kunnen lezen, kan voor websitebezoekers het ontbreken van een gevoel van schaal, richting en locatie op een website een probleem zijn. Hoe kun je op relatief simpele wijze een bezoeker de mogelijkheid bieden om zich toch een idee te vormen van schaal, richting en locatie? Opmerkelijk veel mensen houden van browsen. Browsen is echter voor de meesten alleen leuk en soms ook wel spannend als duidelijk is dat ze steeds hun weg terug kunnen vinden. Als het goed is, kun je daarvoor altijd de backknop gebruiken van de internetbrowser (denk aan Internet Explorer, Mozilla Firefox en Google Chrome). Maar niettemin is er voor het ondersteunen van het browsen op een website nog een aantal nuttige aanbevelingen te doen. Home-optie

– Geef op elke pagina de mogelijkheid om direct naar Home te gaan. Vanaf Home kun je weer een frisse start maken, bijvoorbeeld nadat je bent verdwaald op de site. Home is een vaste plaats op een website, en daarmee een centraal oriëntatiepunt.

57

Open Universiteit

Webcultuur

Consistente navigatie

– Zorg voor consistente navigatie. Daarvan is sprake als de gebruiker op dezelfde manier kan navigeren op alle plaatsen van de website. Het is verstandig om de navigatiemogelijkheden steeds op dezelfde wijze en dezelfde plaats weer te geven op pagina’s van een website. Door pagina’s op een zelfde manier in te kleden en te voorzien van steeds weer hetzelfde navigatiesysteem, is er bij het browsen voortdurend een bevestiging voor de gebruiker dat hij nog steeds op dezelfde site vertoeft. Ook niet onbelangrijk is dat gebruikers maar één keer hoeven te leren hoe de navigatie voor de verschillende pagina’s werkt (Krug, 2006). – Gebruik breadcrumbs. Het is mogelijk om op een site het spoor weer te geven dat een gebruiker heeft gevolgd (zie figuur 17.17). De sporen worden breadcrumbs genoemd, naar de broodkruimels die Hans liet vallen om de weg naar huis terug te kunnen vinden, in het bekende sprookje van Hans en Grietje. Het toepassen van breadcrumbs is aan te bevelen op grote sites, met een hiërarchische structuur die meer dan drie niveaus diep is (Bhulai, 2011).

Gebruik breadcrumbs

FIGUUR 17.17

Webpagina met breadcrumbs (omcirkeld) Bron: website Bol.com

Toon de locatie

– Geef de locatie op de site aan. Mensen willen graag weten waar ze zich bevinden, en daarom kom je op allerlei plaatsen in Nederland plattegronden tegen met daarop een pijl en de tekst: ‘U bevindt zich hier.’ Op het web wil je mensen ook een idee geven van de locatie waarop ze zich op zeker moment bevinden. Dat kan door de positie van de webpagina’s aan te geven binnen de opbouw van de site met de homepage als referentiepunt. Bijvoorbeeld op de manier die wordt getoond in figuur 17.18. De betreffende pagina is blijkbaar een pagina in de vierde laag van de site. In termen van breadcrumbs: Home > Mooi & verzorgd > Gezichtsverzorging > Dagcreme.

58


FIGUUR 17.18

Webpagina met aanduiding van de locatie Bron: website Kruidvat

OPGAVE 17.9

Door op een link te klikken wordt in het bestaande venster de aanwezige pagina vervangen door een andere pagina. Maar soms ook wordt de nieuwe pagina geplaatst in een nieuw venster. Wat is een nadeel vanuit het oogpunt van navigatie van het openen van een nieuw venster? 4.5

TABBLADEN

Op sommige sites wordt gebruik gemaakt van tabs voor navigatie. Tabs zijn heel geschikt voor navigatie op omvangrijke sites. Krug (2006) noemt daarvoor vier redenen. – Tabs spreken voor zich. Tabbladen in kaartenbakken en ordners kent iedereen. Dat maakt dat iedereen een interface met tabs begrijpt, en weet wat men er mee kan doen. – Tabs springen in het oog. Navigatielinks en zeker knoppenbalken die zich bovenaan een webpagina bevinden, worden opmerkelijk vaak niet waargenomen. Maar tabbladen springen zo in het oog dat je ze niet kunt missen. En omdat ze moeilijk voor iets anders zijn te gebruiken dan voor navigatie, ontstaat daarmee een duidelijke en gewenste scheiding tussen navigatie en content. – Tabs ogen goed. Webontwerpers doen meestal moeite om sites te maken met pagina’s die aantrekkelijk zijn voor de bezoekers. Goed ontworpen tabbladen kunnen daarbij van dienst zijn, omdat ze een elegant of professioneel uiterlijk geven aan webpagina’s, naast natuurlijk het feit dat ze heel bruikbaar zijn. – Tabs suggereren ruimtelijkheid. Met tabbladen kun je de illusie creëren van ruimtelijkheid. Dat gebeurt door een geselecteerd tabblad als het ware voor de andere tabbladen te plaatsen. Door die ruimtelijkheid ervaren gebruikers heel duidelijk dat de site verdeeld is in secties, en kunnen heel gemakkelijk zien dat ze zich in een van de secties bevinden en welke sectie van de website dat is.

59

Open Universiteit

Webcultuur

OPGAVE 17.10

In welke gevallen vindt u het gebruik van tabbladen op een website niet aan te bevelen?

FIGUUR 17.19

Tabs moeten ruimtelijkheid suggereren Bron: Krug, 2006, p.82

Bij moderne sites lijken de tabbladen vaak niet meer zoveel op de fysieke tabbladen in een kaartenbak. Wat niet wegneemt dat ze in essentie op dezelfde manier blijven functioneren (zie figuur 17.20).

FIGUUR 17.20

Alternatieve vormgeving van tabs Bron: website Bol.com

Internetbrowsers, zoals Internet Explorer en Google Chrome, maken ook gebruik van tabbladen. Het bijzondere daarbij is dat je als gebruiker zelf kunt aangeven of er een nieuw tabblad moet worden gecreëerd; het aantal tabbladen is variabel. Bij een internetbrowser heeft elk tabblad een eigen venster, wat betekent dat er een aantal vensters tegelijk open kan staan. Dat kan handig zijn als je informatie van verschillende sites wil vergelijken en combineren. Dat is anders voor de tabbladen van websites. Het is voor bezoekers van een site het meest overzichtelijk als ze, bij elk afzonderlijk bezoek aan website, slechts op één locatie binnen die site kunnen zijn. 4.6

Tag

TAGS

Tags zijn in leereenheid 3 besproken. We bekijken hier als voorbeeld een webwinkel voor cd’s. Om de klanten van dienst te zijn kun je de cd’s voorzien van tags. Je kunt bijvoorbeeld aan een cd de tags klassiek, zang, koor en renaissance hangen. En klanten kunnen dan binnen die vier categorieën zoeken naar cd’s.

60


Zie ook leereenheden 3 en 14.

Tags voor de objecten van een website worden in veel gevallen door de gebruikers zelf bedacht. In feite gebeurt dat met name op diverse sociale netwerken; bijvoorbeeld op Flickr voor het categoriseren van foto’s. Maar ook webwinkels zetten tags in die afkomstig zijn van gebruikers. Ze doen dat als ondersteuning voor gebruikers die rondkijken op de website van de winkel, in de hoop iets van hun gading te vinden. We kijken als voorbeeld naar de website van Amazon.

Voorbeeld

Een gebruiker bezoekt een pagina met daarop informatie over het boek Undercover User Experience Design. Op die pagina zijn de tags weergegeven die aan dat boek zijn toegekend door andere gebruikers (zie figuur 17.21). Blijkbaar zijn er gebruikers die het boek zien als een boek over usability. Door op de tag link te klikken, komt de gebruiker op een pagina met een lijst van boeken die ook de tag usability hebben.

FIGUUR 17.21

Tag cloud

Tag links bij een boek van Amazon

Een tag cloud is een visuele weergave van de meest voorkomende tags. Tags in een cloud zijn woorden die meestal alfabetisch zijn gerangschikt, waarbij de relatieve belangrijkheid van een tag is af te lezen aan de grootte van de letters van de tag. Voorbeeld

Een bezoeker van Amazon is op zoek naar boek als presentje voor een kennis. Om zich te oriënteren kijkt hij eerst naar de tag cloud met de categorieën van de meest populaire boeken (zie figuur 17.22).

FIGUUR 17.22

Gedeelte van een tag cloud bij Amazon

OPGAVE 17.11

Waarom zijn in een tag cloud de tags meestal alfabetisch geordend?

61

Open Universiteit

Webcultuur

5

Nieuwe bevindingen

Steve Krug heeft zich voor zijn aanbevelingen over webdesign gebaseerd op zijn ervaringen als ontwerper. Ook Jakob Nielsen heeft veel geleerd van werkzaamheden op gebied van ontwerp. Veel van zijn ervaringen heeft hij gebundeld in een boek. Dat boek van Nielsen, dat in 1999 zijn eerste druk beleefde, heeft als titel Designing Web Usability: The Practice of Simplicity. Net als van het eerder aangegeven boek van Steve Krug, zijn er inmiddels meer dan 300.000 exemplaren van verkocht. Lange tijd gold het als de bijbel voor de webontwerpers, en nog steeds is het nuttig om dat boek te lezen. Dat neemt niet weg dat er van alles is veranderd op het web, en dat ook Nielsen het nodige heeft bijgeleerd. Zijn nieuwste denkbeelden zijn te vinden op de eerder genoemde site en vooral ook in zijn meest recente boeken. Veel van de aanbevelingen die Nielsen in die boeken doet, zijn gebaseerd op resultaten van experimenten die hij heeft gedaan. 5.1

EYETRACKING

Nielsen heeft, samen met ‘intranetgoeroe’ Kara Pernice, het afgelopen decennium namelijk heel wat tijd besteed aan onderzoek naar de manier waarop gebruikers interacteren met het beeldscherm. Ze maakten daarbij gebruik van eyetracking. Dat is een techniek waarbij de blikrichting van de gebruiker van een website gevolgd wordt tijdens de interactie.

Eyetracking

Nielsen en Pernice baseerden zich daarbij op eerder eyetrackingonderzoek, met name uitkomsten van een onderzoeksgroep van Poynter, een instituut voor Journalism & New Media and Eyetools. Het gaat in het bijzonder om het onderzoek met als titel Eyetrack III - What You Most Need to Know (Outing & Ruel, 2004a, 2004b). Eyetracking is interessant omdat het is toe te passen bij webontwerp. Stel dat je een webwinkel wilt opzetten, dan kun je met eyetracking een idee krijgen van waar gebruikers op zoek gaan naar specifieke informatie over een bepaald artikel, hoe ze verschillende artikelen met elkaar vergelijken, en waar ze kijken naar het winkelwagentje voor navigatie. Drie hoofdvragen bij eyetracking

In relatie tot usability zijn er drie hoofdvragen die centraal staan in het onderzoek van websites met behulp van eyetracking. – Wat trekt de aandacht van gebruikers op webpagina’s? – Wat negeren gebruikers op webpagina’s? – Wat leidt gebruikers af van hun weg richting een gewenst doel? Bij eyetracking gericht op webontwerp wordt meestal gebruik gemaakt van een speciale monitor. Een voorbeeld van zo’n monitor is afgebeeld in figuur 17.23. De getoonde monitor ziet er vrij normaal uit, want het is niet de bedoeling dat een gebruiker anders doet dan normaal. Achter de kleine vensters aan de bovenkant van de monitor zitten infraroodstralers, en aan de onderkant van de monitor zitten vensters waarachter zich infraroodcamera’s bevinden. De camera’s registreren het infrarode licht, dat afkomstig is van de infraroodstralers, na de weerkaatsing door de ogen van gebruiker. Op die manier wordt een beeld verkregen van de oogbewegingen van de gebruikers.

62


FIGUUR 17.23

Monitor voor eyetracking Bron: Penzo, 2005.

Door een gebruiker te laten kijken naar een webpagina, op een monitor voor eyetracking, krijg je een beeld van waar de gebruiker naar kijkt, voor hoe lang en in welke volgorde. Zo’n beeld heet een gazeplot (zie figuur 17.24a). De lijnen in een gazeplot geven bewegingen van de ogen aan, terwijl de stippen fixaties van de ogen aanduiden. De grootte van de stippen zijn een maat voor de duur van kijken naar een plek. Hoe groter de stip, hoe langer er wordt gekeken naar een bepaalde plek. Verder is het gebruikelijk de stippen te nummeren zodat het traject dat de gebruiker aflegt gemakkelijk kan worden gevolgd.

Gazeplot

De plaatjes kunt u ook bekijken via weblink Gaze/heat. Ze zijn dan wat duidelijker, en bovendien in kleur.

FIGUUR 17.24

Een voorbeeld van een gazeplot (a) en een heatmap (b) Bron a: Rey, 2009. Bron b: Nielsen, 2006.

Heatmap

Door de resultaten voor een bepaalde webpagina te combineren voor meerdere gebruikers ontstaat een zogeheten heatmap. In figuur 17.24b is daarvan een voorbeeld te zien. In principe kun je daarvoor de gegevens van net zoveel gebruikers gebruiken als je zelf wilt. Er zijn twee typen van heatmaps. Bij het eerste type wordt een beeld gegeven van het aantal fixaties voor de diverse plaatsen waarnaar is gekeken. Bij het tweede type wordt voor elk gebied waarnaar is gekeken de totale duur van de gezamenlijke fixaties voor dat gebied in kaart gebracht. In de voorbeelden die hierna volgen is steeds gekozen voor het tweede type, vanuit de gedachte dat lange fixaties zwaarder moeten tellen dan korte.

63

Open Universiteit

Webcultuur

Via de website van Nielsen vindt u voorbeelden; weblink Heatmaps

In heatmaps wordt met kleuren aangegeven hoeveel aandacht er aan de betreffende gebieden is geschonken. De gebieden met veel aandacht geeft Nielsen aan met warme kleuren; rood voor relatief de meeste aandacht, en de kleuren oranje en geel voor wat minder aandacht. Voor de rest worden koude kleuren gebruikt, dat wil zeggen, blauwe gebieden hebben enige aandacht gehad, en de donkere, transparant zwarte, gebieden zijn zonder aandacht gebleven (Nielsen, 2010). 5.2

Een klein uitstapje.

Eye control Eye-gazed interface

EYE CONTROL

Er is veel aandacht voor eyetracking, omdat de techniek niet alleen geschikt is voor het in kaart brengen van gedrag van webgebuikers, maar ook omdat oogbewegingen, eventueel in combinatie met hoofdbewegingen, gebruikt kunnen worden als input voor interfaces. Men spreekt in verband daarmee wel eye control of oogbesturing en daarbij van eye-gazed interfaces. Eye-gazed interfaces zijn interessant. Want hoe zou het zijn om je handen vrij te hebben bij het navigeren op een site, of om te scrollen zonder een muis of toetsenbord aan te raken? Voor mensen met een handicap is dat soms al mogelijk gemaakt, maar ook voor de gewone consument komen die mogelijkheden dichterbij. Tobii, een Zweedse producent van eyetrackingapparatuur wil de markt op met een apparaat, dat consumenten in staat stelt om hun computer met de ogen te besturen. Figuur 17.25 toont een prototype van een laptop waarin eyetracking is geïntegreerd. Met apparatuur van Tobii is het onder meer mogelijk om: – een venster te selecteren door ernaar te kijken – de muiscursor te bewegen naar de plek waarnaar je kijkt – automatisch naar beneden te scrollen bij het lezen van een tekst doordat het scherm ‘ziet’ waar je bent met lezen.

FIGUUR 17.25

Laptop met geïntegreerde eyetracking-technologie Bron: website BrightPk, www.brightpk.com

De eyetrackingtechnologie van Tobii fungeert als een aanvulling op het toetsenbord en de muis. Dus om daadwerkelijk een actie uit te voeren, bijvoorbeeld om een bestand te openen, is het nodig om op het toetsenbord of de muis te klikken. Ook typen gebeurt nog gewoon via het toetsenbord. OPGAVE 17.12

Momenteel wordt ook veel onderzoek gedaan naar eye control voor mobiele apparaten, zoals mobiele telefoons. Met welke specifieke problemen hebben de onderzoekers daarbij van doen?

64


6

Paginadesign

Websitebezoekers zijn in de regel haastig. Het is dus belangrijk om de aandacht van de bezoekers te vangen. Daarvoor is de content van de site natuurlijk belangrijk, maar wat misschien nog wel meer telt is de lay-out van de webpagina’s van de site. Als ontwerper moet je daarvoor weten hoe gebruikers kijken naar webpagina’s en daarvoor is eyetracking een nuttig hulpmiddel. 6.1

F-PATROON

Nielsen en Pernice (2010) hebben een hele reeks aan gazeplots gemaakt voor gebruikers die webpagina’s bekijken. Ze konden daaruit afleiden dat er niet een universele wijze is waarop gebruikers naar webpagina’s kijken. Mensen kijken soms eerst naar het midden van een pagina omdat daar een opvallende afbeelding staat. Soms kijken ze specifiek naar het logo om na te gaan op welke site ze zich bevinden. Anderen gaan snel op zoek naar een zoekfunctie en weer anderen lezen wat van de content of scannen de koppen boven de teksten. Toch zijn er wel patronen te herkennen in de wijze waarop gebruikers webpagina’s bekijken. Die patronen hangen samen met de inkleding van de webpagina’s, de taken waarvoor gebruikers zich gesteld zien, en hun verwachtingen op basis van eerdere ervaringen. Mensen die iets willen zoeken op de website van een bedrijf, gaan in veel gevallen eerst na of er een zoekveld is in de rechter bovenhoek van een webpagina. En gebruikers van de site van een zoekmachine zullen die site meestal bezien op basis van eerdere ervaringen met die site, of eventueel vergelijkbare sites met andere zoekmachines. F-patroon voor het lezen van webcontent

Content en lay-out van websites kunnen dus maken dat er patronen zijn te herkennen in de manier waarop bezoekers naar de pagina’s van die sites kijken. Dat blijkt ook duidelijk uit de heatmaps die Nielsen en Pernice (2010) hebben gemaakt. Een opmerkelijke bevinding daarbij was dat er nog al wat webpagina’s zijn die door veel gebruikers worden bekeken volgens een F-patroon: twee horizontale stroken gevolgd door een verticale strook (zie figuur 17.26). Het dominante leespatroon voor die webpagina’s bestaat dus uit drie delen. Gebruikers lezen eerst in een horizontale beweging, meestal het bovenste gedeelte van het gebied met content. Die beweging betreft de bovenste horizontale balk van de F. Vervolgens gaan de gebruikers een beetje naar beneden op de pagina en lezen dan in een tweede horizontale beweging, die typisch korter is dan de eerste beweging. Hier ontstaat de onderste horizontale balk van de F. Ten slotte scannen de gebruikers de inhoud van de linkerkant in een verticale beweging. Dat geeft de verticale balk van de F. Die beweging betreft soms een vrije trage en systematische scan die zich vertaalt naar een massieve streep op een heatmap. Soms ook verloopt het scannen sneller en dan ontstaat een meer gevlekte heatmap (Nielsen, 2006).

65

Open Universiteit

Webcultuur

FIGUUR 17.26

Heatmaps in de vorm van een F komen veel voor Bron: Nielsen, 2006.

Voorbeeld van de site van Nielsen; weblink F-shape. SERP = Search Engine Results Page

The above heatmaps show how users read three different types of Web pages: an article in the “about us” section of a corporate website (far left), a product page on an e-commerce site (center), and a search engine results page (SERP; far right) (Nielsen, 2006). De drie heatmaps laten alle een F-vormig patroon zien, maar de drie patronen verschillen wel van elkaar. Bij de eBusiness-pagina (middelste voorbeeld) ligt de tweede dwarsbalk van de F lager dan normaal vanwege de tussenliggende productafbeelding. Gebruikers delen ook aanzienlijke fixatietijd toe aan een vak in de rechterbovenhoek van de pagina waar de prijs en de “in winkelwagentje”-knop worden gevonden. Op de resultatenpagina van de zoekmachine (rechter voorbeeld) is de tweede dwarsbalk van de F langer dan de bovenste dwarsbalk, vooral omdat de tweede kopregel langer is dan de eerste. In dit geval bleken de twee kopregels even interessant voor gebruikers (Nielsen, 2006).

Gebruikers lezen in de regel een beperkt deel van webtekst.

De belangrijkste informatie in de eerste twee alinea’s

Belangrijke informatie in eerste twee woorden van vervolgzinnen en subkoppen

Zoals eerder in deze leereenheid aangegeven, lezen gebruikers in de regel maar een beperkt gedeelte van de tekst op een webpagina. Ze lezen een tekst niet woord voor woord. Als het niet tegen zit, lezen ze ongeveer 20% van de tekst. Inderdaad, sommigen zullen meer lezen, maar de meesten niet (Nielsen, 2008a). Dat feit en het feit dat gebruikers vaak lezen volgens een F-vormig patroon, heeft duidelijk implicaties voor webontwerp. Men doet er namelijk verstandig aan om de belangrijkste informatie in de eerste twee alinea’s van de tekst te vermelden. Men mag enige hoop koesteren dat gebruikers daadwerkelijk al dat materiaal zullen lezen, hoewel je er wel rekening mee moet houden dat het waarschijnlijk is dat ze meer van de eerste alinea zullen lezen dan van de tweede. Vervolgens is het nuttig de overige alinea’s en de subkoppen te beginnen met woorden die belangrijke informatie in zich dragen. Gebruikers hebben immers vaak alleen aandacht voor de linkerkant van de content. Ze lezen het derde woord op een regel veel minder vaak dan de eerste twee woorden.

66


Het mag duidelijk zijn dat de eerste regel op een webpagina het meest belangrijk is voor het vangen van de aandacht van gebruikers. Wat dat betreft is die eerste zin te vergelijken met de kopregel van een artikel in een krant. Die kop moet een lezer duidelijk maken dat het de moeite waard is om het artikel te lezen. Elke webpagina heeft meestal ook wel zaken die interessant zijn voor gebruikers en die daarom ook worden gelezen door de gebruikers, maar die buiten het F-vormige patroon vallen. Wat interessant is voor een gebruiker op een webpagina, is afhankelijk van het thema van de pagina en van de belangstelling van de gebruiker. Als gebruikers bijvoorbeeld op zoek zijn naar prijzen van artikelen of naar specifieke getallen, dan zullen ze op een andere, meer directe, manier scannen. OPGAVE 17.13

Nielsen en Pernice hebben geconstateerd dat veel webpagina’s door Amerikaanse webgebruikers bekeken worden volgens een F-vormig patroon. Zou dat ook het geval zijn voor webgebruikers uit andere landen? 6.2

RICHTLIJNEN VOOR LAY-OUT

Als ontwerper wil je dat de ogen van mensen worden geleid naar de ‘juiste’ plaats. Daarvoor moet je volstrekt helder maken aan de gebruikers wat er te zien is op webpagina’s. Dat is mogelijk door de pagina’s te ontwerpen die passen bij een F-vormig patroon van bekijken, door de essentiële elementen van de pagina’s aantrekkelijk te maken en goed in het oog springend, en door aan te sluiten bij de ervaringen en de verwachtingen van de gebruikers. Nielsen en Pernice (2010) noemen een aantal richtlijnen dat, weliswaar niet voor alle, maar toch voor veel websites kan worden gebruikt. Utility-navigatie

Globale navigatie

Richtlijnen voor lay-out

– Plaats de utility-navigatie helemaal bovenaan de webpagina’s of helemaal onderaan, en geef die weinig opvallend weer en visueel minder in het oog springend dan de hoofdnavigatie ofwel globale navigatie. Utility-navigatie betreft zaken over een organisatie zelf, met informatie over menu’s die verwijzen naar banen, locaties, contactgegevens, privacybeleid, een helpfunctie en de sitemap. Mensen gaan vaak voorbij aan de utility-navigatie. Ze kijken er alleen naar als ze zulke informatie nodig hebben, en gaan dan op zoek helemaal aan de bovenkant van de webpagina of anders helemaal onderaan. – Een eventueel logo moet in de regel liefst geplaatst worden in de linkerbovenhoek van alle webpagina’s van een site. – De rechterbovenhoek van alle webpagina’s is een passende plaats voor een open zoekveld. – De rechterbovenhoek van alle webpagina’s is ook een geschikte plaats voor een eventueel winkelwagentje. – En ook voor een login/logout-functie is het passend om die te plaatsen in de rechterbovenhoek van alle webpagina’s van een site. – Globale navigatie is er voor het navigeren naar de hoofdonderdelen van de site. Geef deze daarom een prominente plek en plaats deze aan de bovenkant van de pagina – onder de utility-navigatie, en aan de linkerkant van de pagina. Maak daarbij gebruik van begrijpelijke menu’s met grafische en kleurafscheiding.

67

Open Universiteit

Webcultuur

Globale navigatie fungeert als een anker op kleine en grote websites. – Breng een homeknop aan, in of bij het menu voor de navigatie, geheel aan de linkerkant op elke pagina van een website met uitzondering van de homepage.

FIGUUR 17.27

Veelgebruikte lay-out Naar: Nielsen & Pernice, 2010, p. 97, figure 3.45

6.3

Segmentering en koppen zorgen voor tijdsbesparing

SEGMENTERING

Nielsen en Pernice (2010) merken verder op dat koppen die bijbehorende brokken informatie beschrijven grote tijdbespaarders zijn voor gebruikers, wat betekent dat ontwerpers ze beslist moeten gebruiken. De twee auteurs geven daarbij de volgende tips. – Gebruik witte ruimtes, randen en kleuren zodat de gebruikers gemakkelijk en in een oogopslag de secties binnen een pagina kunnen waarnemen en de onderwerpen daarbinnen. Baken de gebieden af, maar maak het niet te druk. – Bied niet alle informatie aan in een homogeen formaat, maar groepeer de informatie in afzonderlijke blokken. – Voorzie de blokken van passende koppen. Contrasteer de koppen ten opzichte van de rest van de bloktekst door ze ietwat groter of vetter weer te geven en gebruik wat witte ruimte tussen een kop en de tekst of de afbeelding die volgt. Maar wees wel voorzichtig met het groter of vetter

68


maken van koppen, want het is al gauw zo dat gebruikers denken dat het om reclame gaat of om een element dat louter ter verfraaiing is opgenomen. Dat leidt er meestal toe dat gebruikers de bijbehorende tekst negeren. Ga ten slotte na of een gekleurde rand boven of rondom een sectie maakt dat de sectie er duidelijk uitspringt of dat deze slechts bijdraagt aan een soort van visuele ruis. Voorbeeld

Dansk is een gerenommeerd Amerikaans bedrijf dat onder meer bestek en serviesgoed ontwerpt. De homepage van de website van Dansk is op heldere wijze verdeeld in blokken die duidelijk van elkaar zijn gescheiden met witte randen. Elk blok heeft een eigen thema, waarbij de koppen van de blokken duidelijk aangeven om welke thema’s het gaat. De koppen zijn iets groter weergegeven dan de rest van bloktekst en daarvan duidelijk gescheiden.

FIGUUR 17.28

Homepage van de website van Dansk Bron: website Dansk, www.dansk.com

OPGAVE 17.14

In de voorafgaande tekst is een aan aantal richtlijnen voor lay-out gegeven en ook voor segmentering van de content, zoals die geformuleerd zijn door Nielsen en Pernice. Ga na in hoeverre de webpagina in figuur 17.28 overeenstemt met die richtlijnen.

69

Open Universiteit

Webcultuur

6.4

Priority spot

PRIORITY SPOTS

Mensen verwachten dat de meest belangrijke of fundamentele informatie zich bevindt in wat Nielsen en Pernice (2010) priority spots noemen. Dat zijn gebieden die de blik van de gebruikers trekken. Nielsen en Pernice (2010) geven aan dat de prioriteit van een gebied wordt bepaald door – locatie. In de meeste gevallen heeft het bovenste deel van het gebied met content een hogere prioriteit dan het onderste deel. Het gebied met de hoogste prioriteit bevindt zich helemaal bovenaan, meteen in aansluiting met de menu’s (zie figuur 17.29). – grootte en nadruk. Grotere en vettere letters, onderstreping, of gekleurde tekens of achtergrond duiden op belangrijkheid. Maar de lijn is dun tussen het trekken en het verliezen van de aandacht van gebruikers. Ontwerpers moeten de balans vinden tussen het doen opvallen van belangrijke informatie en te veel benadrukken van de informatie waardoor die gaat lijken op een advertentie of een ander item dat gebruikers kunnen veronachtzamen. – uiterlijk in vergelijking met de rest van de pagina. Zelfs een ingetogen gebied kan eruit zien als een high-priority spot als de rest van de pagina naar verhouding nog meer ingetogen is. Doelgerichte visuele focuselementen, zoals langwerpige secties bestaande uit witte ruimte en een aantrekkelijk element aan de onderkant, kunnen de ogen van mensen leiden, langs andere onderdelen, naar de plek waarvan je wilt dat ze er naar kijken.

FIGUUR 17.29

Secties met een verschillende prioriteit Bron: Nielsen & Pernice, 2010, p.97, figure 3.46

70

Usability design. Leereenheid 17

Recommend Documents