Usability research als inspiratiebron voor webontwerpers

Usability research als inspiratiebron voor webontwerpers Bas Raijmakers

Iedereen droomt van een homepage als die van Google.................................... 2 Iedereen vreest een homepage als die van Yahoo! ........................................ 3 Het evenwicht tussen overdaad en overzicht................................................. 4 Een formulier op de homepage van KLM ....................................................... 4 Top 5 lijstjes op de homepage van de Postbank ............................................ 5 Visueel navigeren op de homepage van Volkswagen ...................................... 6 Navigeren door de bomen van het bos ............................................................ 8 Het gedrag van menu’s aanvoelen ............................................................. 11 Soepel sturend de bocht afsnijden ............................................................. 13 Eenduidig en helder taalgebruik wijst de weg .............................................. 14 Het keurslijf van complexe interacties ........................................................... 16 Flash geeft de vrijheid om het anders te doen ............................................. 18 Op naar meer innovatieve interfaces .......................................................... 20 Testen hoort bij innovatief ontwerpen ........................................................ 22

Webontwerp is een nog relatief jonge discipline. Er zijn inmiddels wat ontwerp conventies, maar die zijn nog lang niet allemaal uitgekristalliseerd. Webontwerpers experimenteren nog steeds en innoveren zo website interfaces. Dat maakt het een spannend vak, maar ook moeilijk. Want de belangen van de opdrachtgevers uit het bedrijfsleven zijn groot. Zij eisen een site die de doelen van het bedrijf verwezenlijkt en gewaardeerd wordt door de bezoekers. Hoe experimenteer je in zo’n situatie, als het resultaat een topprestatie moet zijn? Het antwoord is: Gok er niet op dat je in één keer goed zit met je ontwerp. Meteen goed is bij experimenten onmogelijk. Je moet meerdere ontwerpen maken, testen welke de beste is, verbeteringen aanbrengen na de test en nogmaals testen, ontwerpen, testen, ontwerpen, testen. Tot je zeker weet dat je ontwerp goed is omdat je zelf in de tests gezien hebt dat het begrepen en gewaardeerd wordt door de mensen voor wie je de site ontworpen hebt, de toekomstige bezoekers. Dergelijke tests met de (toekomstige) bezoekers van een site heten usability tests. In de vele jaren dat ik usability tests uitgevoerd heb, onder andere bij Lost Boys, heb ik gezien dat ontwerpers altijd gefascineerd raken door de enorme rijkdom van de feedback die uit een test komt. En ik heb gezien dat die feedback ontwerpers inspireert om nog beter na te denken over wat ze maken, ze inspireert om nog betere ontwerpen te maken. Webontwerp en usability onderzoek horen bij elkaar zoals Research & Development bij elkaar horen. Samen kunnen ze complexe problemen als een Usability research als inspiratiebron voor webontwerpers - Bas Raijmakers Eerste versie d.d. 25 maart 2003

1/22

chaotische homepage, desoriënterende navigatie of verwarrende formulieren aanpakken en oplossen.

Iedereen droomt van een homepage als die van Google

Afbeelding 1.

De service van Google is volstrekt helder: zoeken.

Het is geen wonder dat iedereen droomt van een homepage als die van Google. De pagina is lekker leeg, geeft enorm veel aandacht aan het merk, en biedt een volstrekt heldere service: zoeken. De bezoeker heeft direct overzicht en zal niet snel in de war raken. Google is volgens een recent internetonderzoek1 het merk van het jaar 2002. En ze hebben ze niet eens een reclamebureau in de hand genomen om dat merk te ontwikkelen of uit te bouwen. Dit merk ontleent zijn waardering niet aan een visuele identiteit maar aan hoe het werkt: eenvoudig en recht-toe-recht-aan. Daarvoor heeft Google wel een legertje usability experts en interaction designers in dienst. Zij bepalen wat ik het gedrag van Google noem. Daarmee bedoel ik de wijze waarop Google op de bezoeker reageert. Webontwerpers (usability experts, interaction designers) hebben als opdracht om gedrag van webpagina’s te ontwerpen. En dat moet vooral niet verward worden met het ontwerpen van het gedrag van de bezoekers, door precies voor te schrijven hoe die een pagina moeten gebruiken. Dat zou de omgekeerde wereld zijn. Mensen laten zich namelijk niet voorschrijven hoe ze iets moeten doen. Marissa Mayer, Google product manager, zegt het zo2: “Google should be "what you want, when you want it." As opposed to "everything you could ever want, even when you don't." De Google-pagina oogt zo simpel dat het meteen duidelijk is wat je hier moet doen, toch? Niet helemaal. Sommige wat onervaren internetgebruikers tikken op 1 2

http://www.interbrand.com/features_effect.asp?id=143 http://www.goodexperience.com/columns/02/1015google.html

Usability research als inspiratiebron voor webontwerpers - Bas Raijmakers Eerste versie d.d. 25 maart 2003

2/22

deze pagina een URL (bijvoorbeeld www.ns.nl) in de zoekbalk, omdat ze denken dat dat de snelste manier is om naar een site te gaan. Ze weten niet dat je ook in de browser zelf een URL kan ingeven, en denken niet zelden dat Google gelijk staat aan het internet. Toch is dit geen ramp, ook door www.ns.nl in de zoekmachine in te typen kom je op de Nederlandse Spoorwegen site, al is het via een kleine omweg. Dat is gedrag waar je iets aan hebt. Je wordt niet het bos ingestuurd. En Google laat zich niet voor één gat vangen.

Iedereen vreest een homepage als die van Yahoo!

Afbeelding 2. De overdaad van Yahoo! is onoverzichtelijk, de bezoeker ziet ongetwijfeld vele services over het hoofd. Als Google voor overzicht staat dan staat Yahoo! voor overdaad. De homepage bevat heel veel links met als gevolg dat de bezoeker door de bomen het bos niet meer ziet. De links zijn weliswaar op inhoud gegroepeerd maar de visuele identiteit van die groepjes is niet erg groot. Regelmatig terugkerende bezoekers zullen op den duur wel weten waar ze moeten wezen, maar op nieuwe bezoekers komt zo’n pagina erg chaotisch over.


3/22

Op de homepage is bovendien erg weinig aandacht aan de visuele identiteit van Yahoo! gegeven. De meeste bedrijven hechten sterk aan hun visuele identiteit, hun merk en de beleving daarvan door hun klanten. Daarmee onderscheiden ze zich van hun concurrenten. Daarom is het ondenkbaar dat de homepage van bijvoorbeeld KLM, de Postbank of Volkswagen eruit ziet als die van Yahoo! of die van Google.

Het evenwicht tussen overdaad en overzicht Gezien de hoeveelheid informatie en alle functionaliteit (de interactieve diensten) die vele grote bedrijven aan hun klanten te bieden hebben ontstaat in webprojecten al snel een veldslag om de homepage. Iedere afdeling in het bedrijf wil een stukje kostbaar oppervlak bemachtigen om zijn eigen boodschap uit te dragen. Als webontwerper ben je zo’n beetje de laatste die bepaalt wat op ‘de home’ komt. Jou rest slechts de taak om al die overdaad overzichtelijk te maken. De berg informatie van Yahoo! zo helder vormgeven als Google. En ook nog even alle pagina’s de identiteit van het merk meegeven. Webontwerpers verzinnen allerlei listen om zowel de bezoekers als de eigenaren van de site tevreden te stellen. Dat lukt meestal niet in één keer. Om de juiste balans tussen overdaad en overzicht te vinden zijn een of meer usability tests nodig. In die test wordt precies bepaald wat een bezoeker nog kan bevatten en wat hem teveel wordt. Binnen enkele seconden na opening van de homepage moet duidelijk zijn waar de site over gaat, en wat je er grofweg kan doen. Bij een usability test is dan ook de eerste vraag over een nieuwe homepage: “Vertel eens wat u hier ziet.” De antwoorden geven meestal duidelijk aan of in het ontwerp overdaad en overzicht in balans zijn of niet. Uit zo’n test blijkt ook waar de grootste struikelblokken liggen en waar nog mogelijkheden voor verbetering zijn. Het is niet eenvoudig om een goede balans tussen overdaad en overzicht te vinden. Op het web en in usability tests zie je maar al te vaak dat die balans (nog) niet gevonden is. Het is vooral moeilijk omdat er geen vast recept voor het ontwerpen van een uitgebalanceerde homepage bestaat. Elke keer weer moet de webontwerper een oplossing op maat vinden die past bij het doel van de site, de aard van de informatie en de wensen en vaardigheden van de bezoekers.

Een formulier op de homepage van KLM Een goed voorbeeld van een geslaagde balans tussen overdaad en overzicht is de KLM site. Daar is online boeken de belangrijkste functie. De bezoeker moet dus direct zien dat hij online tickets kan bestellen. Het bleek zeer effectief te zijn om de eerste stap van het boekingsproces op de homepage te zetten. Vergelijk het maar met Google: op de homepage kan je meteen beginnen met de service waar je voor kwam.


4/22

Afbeelding 3. Op de homepage van KLM is meteen duidelijk dat je tickets kan boeken, en daarnaast is er ruimte voor wisselende aanbiedingen en andere services. Om de bookingservice heen staat echter nog een heleboel informatie die voor KLM en haar klanten ook erg belangrijk is. Hier is gekozen om die in de vorm van ‘banners’ aan te bieden. Eigenlijk zijn banners advertenties, maar hier adverteren ze alleen onderdelen die elders op de site staan. De vormgeving van de banners bleek van grote invloed op de mate waarin de bezoekers de pagina rommelig vinden. Kleurgebruik, typografie, hoeveelheid informatie en beeldgebruik zijn allemaal nauwkeurig afgewogen en getest totdat een optimale balans ontstond. De regels met betrekking tot het ontwerp zijn vervolgens vastgelegd in een online tool waarmee KLM zelf wereldwijd dergelijke banners kan maken en plaatsen op de homepages van alle landen waar zij sites heeft. Zo is tegemoet gekomen aan de wens van KLM om veel, snel wisselende informatie en aanbiedingen te plaatsen, met de garantie dat de bezoeker door de bomen het bos nog ziet.

Top 5 lijstjes op de homepage van de Postbank Op de homepage van de Postbank staan nog veel meer links dan bij KLM. Het zijn er bijna evenveel als bij Yahoo!. Toch oogt de homepage van de Postbank overzichtelijker dan die van Yahoo!. Hoe komt dat?


5/22

Afbeelding 4. Top 5 lijstjes op de homepage zijn bij een grote hoeveelheid informatie een goede manier om toch prioriteit aan te geven. En de inhoud kan je snel en eenvoudig wisselen. Ook hier zijn de interactieve diensten erg belangrijk. Er is echter niet één dienst die verreweg het belangrijkst is, zoals bij KLM. Daarom is hier gekozen voor de top 5 lijstjes ‘aanvragen’ en ‘berekenen’ aan de rechterkant. Ook hier staan banners: de grote over internetbankieren en vier kleinere direct daaronder. Daar weer onder staan de headlines van het dagelijks wisselende nieuws. Elk onderdeel heeft een duidelijke eigen visuele stijl. Zo is alles netjes gerubriceerd en kan de bezoeker overzicht houden ondanks de enorme berg aan informatie.

Visueel navigeren op de homepage van Volkswagen Op de site van Volkswagen wisselt de informatie wat minder snel dan bij de Postbank. De verwachtingen van de bezoeker zijn ook anders: op een autosite wil hij mooie plaatjes zien, op een bank site is dat minder belangrijk.


6/22

Afbeelding 5. De visuele homepage van Volkswagen komt tegemoet aan de wens van de bezoeker om mooie plaatjes van auto’s te zien, naast nuttige informatie. Ook hier wordt met wisselende banners gewerkt, aan de rechterzijde. De grote afbeelding in het midden wisselt elke keer dat de homepage opnieuw geladen wordt. Zo wordt hetzelfde oppervlak meerdere keren gebruikt. De bezoeker zal die verschillende versies waarschijnlijk wel zien omdat het vaak voorkomt dat men meermalen teruggaat naar de homepage om opnieuw te beginnen met informatie zoeken. Op de site van Volkswagen is het belangrijkste doel dat de bezoeker zich uitgebreid kan informeren over alle modellen en uitvoeringen. De site is als het ware een online showroom die 24 uur per dag open is zonder dat je op je beurt hoeft te wachten. Er is echter onvoldoende ruimte om alle modellen voortdurend op de homepage te tonen. Hiervoor is een speciale oplossing bedacht.


7/22

Afbeelding 6. Via plaatjes navigeren naar het model van je keuze op de homepage van Volkswagen. De namen van alle modellen staan op de homepage en door met de cursor over die namen heen te bewegen worden de modellen zichtbaar, waarna de bezoeker kan doorklikken naar de pagina met alle uitvoeringen van dat model. Zo staan op één homepage heel veel verschillende informatieve plaatjes die de bezoeker helpen om snel te navigeren. Ook hier waren tests met gebruikers cruciaal om te achterhalen of de doelgroepen deze innovatieve wijze van navigeren via beeld begrijpen en waarderen. Ontwerpinnovaties krijgen meer kans als er grondig getest wordt want de test is een garantie dat de vernieuwing ook daadwerkelijk een verbetering is. Hierdoor zijn ontwerpers vrijer om te experimenteren.

Navigeren door de bomen van het bos Inmiddels is een aantal conventies ontstaan waarmee ontwerpers de dreigende chaos op de homepage te lijf kunnen gaan. Conventies in de navigatiemenu’s vormen een belangrijk onderdeel daarvan. Uit usability-onderzoeken blijkt steeds opnieuw dat gebruikers deze conventies begrijpen en ook verwachten. Dat betekent echter nog niet dat alle menu’s ook hetzelfde eruit moeten zien. De hoofdnavigatie op een site geeft toegang tot vrijwel alle pagina’s. Het menu bestaat uit hoofdcategorieën, subcategorieën en eventueel nog meer daaronder. Bij KLM geven een steeds lichter blauw en kleine inspringingen de hierarchie aan. De witte regel geeft de positie van de laatste klik aan.


8/22

Afbeelding 7. Voor eenvoudige navigatie is een heldere hiërarchie in het menu noodzakelijk. Op de KLM site blijkt die uit het steeds lichter wordende blauw en de ingesprongen tekst. De witte regel geeft aan waar je nu bent. Vaak staat het navigatiemenu links op de pagina, maar dat hoeft niet. Het kan ook rechts of bovenaan de pagina staan zoals bij Volkswagen. Als je naar beneden scrolt en het menu uit beeld dreigt te verdwijnen, beweegt het mee en komt het opnieuw in beeld.

Afbeelding 8. Het menu op de Volkswagen site is horizontaal in plaats van verticaal en klapt uit naar rechts in plaats van naar beneden. Meestal is het aantal items in het menu zo groot dat een of ander uitklapmechanisme bedacht moet worden om (ook hier) de balans tussen overzicht en overdaad te bewaren zoals hier bij de Postbank.


9/22

Afbeelding 9. In dit Postbank menu klappen onderdelen uit, maar ook weer in als je een nieuwe keuze maakt, zodat het menu overzichtelijk blijft. Het lijkt misschien eenvoudig om een overzichtelijk menu te maken. Het kan echter ook eenvoudig mis gaan. Het blijft altijd woekeren met ruimte, net als op de homepage. In het meest extreme geval wordt het hele scherm in beslag genomen door de navigatie en ontstaat chaos.

Afbeelding 10. Op de site van AutoKompas neemt het menu soms het hele scherm in beslag, met als gevolg dat overzicht en gevoel voor hiërarchie Usability research als inspiratiebron voor webontwerpers - Bas Raijmakers Eerste versie d.d. 25 maart 2003

10/22

verloren gaan.

Het gedrag van menu’s aanvoelen Voor het exacte gedrag van menu’s ontstaan langzamerhand conventies. Tegelijkertijd experimenteren webontwerpers ook nog met verschillende vormen van gedrag, vaak ingegeven door de context waarin het menu moet functioneren. Ook de technische mogelijkheden en beperkingen spelen een rol. Als je Flash gebruikt zijn bijvoorbeeld meer interactievormen mogelijk. Een belangrijke referentie (en inspiratiebron) voor de conventies zijn de menu’s van computerprogramma’s. Daarin zie je bijvoorbeeld dat het menu op je reageert doordat het een highlight (vaak een andere, donkerder kleur) geeft als je met de muis over een menu-optie beweegt. En als er nog een subcategorie beschikbaar is staat er een pijltje naar rechts bij de categorie, en klapt rechts een nieuw submenu uit zodra je met de muis over het menu item beweegt. Op de volkswagen site is hetzelfde principe toegepast.

Afbeelding 11. Het gedrag van het hoofdmenu op de Volkswagensite is herkenbaar voor computergebruikers. Het uitklappen, de pijltjes en de highlights komen ook in computerprogramma’s voor. Er is echter niet altijd ruimte op de pagina om het menu naar rechts uit te laten klappen. Op de vervolgpagina’s van de Volkswagen site staat in de rechter kolom een menu waarmee de bezoeker zich kan informeren over de verschillende uitvoeringen van een bepaald model.


11/22

Afbeelding 12. Het gedrag van het rechtermenu op deze pagina is een variatie op de conventie voor computerprogramma’s: het menu klapt naar beneden open in plaats van naar rechts. Ook hier zijn de conventies van de highlight en het uitklapmechanisme gebruikt, maar net iets anders. De bezoeker moet klikken op een categorie met een pijltje erachter om de subcategorieën te zien. Die verschijnen vervolgens onder de hoofdcategorie waar ze bij horen. Pas als de bezoeker op een tweede hoofdcategorie klikt klapt de eerste weer in. Zo blijft het overzicht behouden. Het lijkt misschien vanzelfsprekend om op deze manier overzicht in lange menu’s te ontwerpen. Op het web zie je echter ook veel desoriënterende menu’s waarbij de ontwerper blijkbaar geen nota heeft genomen van de conventies. En bij usability tests blijkt dat mensen toch vaak onzeker zijn over waar ze zich precies bevinden en hoe ze verder kunnen. Dan gaat men naar de homepage en begint vanaf daar opnieuw. Of men gebruikt de backknop van de browser, soms vele malen back back back, totdat weer een herkenbaar punt bereikt is. Als bijvoorbeeld een eerder aangeklikte categorie in het menu niet inklapt na het aanklikken van een nieuwe categorie kan een erg lang en vooral rommelig menu ontstaan. In onderstaand voorbeeld is ook nog eens een overdaad aan pijltjes, bolletjes, lijntjes en kleuren gebruikt. Vergelijk dat eens met de rust en helderheid die de KLM- en Postbankmenu’s daarnaast uitstralen.


12/22

Afbeelding 13. Goede menu’s bieden overzicht: waar ben je en waar kan je naartoe? Daarom moeten ze ook weer inklappen als je een nieuwe keuze maakt. En bolletjes, pijltjes en streepjes verduidelijken niet altijd.

Soepel sturend de bocht afsnijden Een ding wat opvalt bij usability tests is dat bezoekers veel klikken. Op de een of andere manier wordt surfen over internet geassocieerd met overal op klikken. Sommige mensen letten daarbij op het handje dat aangeeft dat iets klikbaar is, anderen in het geheel niet. Die proberen gewoon of er iets gebeurt. Sommigen dubbelklikken zelfs altijd. Een enkeling houdt niet van klikken en beweegt met zijn muis overal overheen en kijkt wat er gebeurt. Als een handje verschijnt dan wil hij nog wel eens klikken. Deze gedragsvormen leren mensen niet zomaar af. De webontwerper moet er rekening mee houden dat al deze mensen uiteindelijk door de site kunnen navigeren. Bij de gebruiksvriendelijkheid van menu’s gaat het vaak om op het eerste oog misschien kleine dingen die de bezoeker van de site zelf zelden opvallen: Een pijltje dat omklapt, een highlight, een schuine beweging naar een submenu. Bij elkaar bepalen ze echter of de navigatie ‘soepel’ aanvoelt. In het geval van Volkswagen kan je er van uitgaan dat een stugge bediening van het menu een negatieve uitstraling op het merk heeft. Daarom is hier gebruik gemaakt van een conventie in computermenu’s waardoor het mogelijk is om ‘de bocht af te snijden’ bij het navigeren naar een submenu. De bezoeker hoeft niet per se helemaal rechts uit het rechthoekje van de categorie te bewegen om in het Usability research als inspiratiebron voor webontwerpers - Bas Raijmakers Eerste versie d.d. 25 maart 2003

13/22

submenu te komen, hij kan ook schuin naar beneden gaan, rechtstreeks naar het tweede item in het submenu.

Afbeelding 14. Als de muisbeweging naar een submenu niet heel precies hoeft te zijn en je de bocht af kan snijden voelt de navigatie prettig soepel aan. Het is natuurlijk subjectief welke navigatie ‘soepel’ is en welke ‘stug’. Dat verschilt van mens tot mens, bijvoorbeeld afhankelijk van de ervaring met computergebruik. Bovendien kan je als ontwerper keuzes maken: hoe ziet een highlight eruit, plaats je een pijltje of niet, hoe klapt een menu uit? Ondanks intuïtie en ervaring blijft het enigszins een gok of de toekomstige bezoekers goed met het menu om kunnen gaan. De beste manier om zekerheid te krijgen is de doelgroep van de site de navigatie te laten gebruiken en te observeren hoe ze dat af gaat. Geef in zo’n geval opdrachten die ervoor zorgen dat ze diep in de menu’s moeten gaan zoeken naar het antwoord. Het is raadzaam om de bewegingen van de cursor over het scherm en de stem van de testpersoon op te nemen3 zodat je later nog eens terug kan kijken wat precies goed en fout ging. Testpersonen zeggen soms in het nagesprek dat ze het gebruik van de navigatie wel makkelijk vonden, terwijl je op de video kan zien dat ze flink zitten te worstelen met de muis. Niemand zegt graag dat hij iets niet goed begrijpt of kan en mensen zijn snel geneigd onhandige dingen te accepteren. Met een usability test kom je er snel achter wat teveel van de vaardigheden van de bezoekers vergt, en wat niet.

Eenduidig en helder taalgebruik wijst de weg De bezoeker is voor zijn navigatie afhankelijk van eenduidig en helder taalgebruik in de menu’s en op knoppen. Het is vaak erg moeilijk om dat te bereiken. Zelfs Google heeft een mysterieuze tekst op een van de knoppen op haar homepage staan. Als je eenmaal weet wat het betekent is het een handige knop. Maar daarvoor moet je wel eerst letterlijk een gok doen en gewoon maar eens klikken op die knop. Hij brengt je overigens direct naar het eerste zoekresultaat, zonder eerst de lijst van zoekresultaten te tonen.

Afbeelding 15. Klikken op “Ik doe een gok” op de homepage van Google is letterlijk een gok want de knoptekst legt niet uit wat de zoekmachine gaat doen. Soms gebruikt men ook iconen in navigatiemenu’s. Uitlsuitend iconen, zonder 3

Bijvoorbeeld met Camtasia, zie ????.com


14/22

begeleidende tekst zijn echter te onduidelijk voor de meeste bezoekers. Heldere tekst is onontbeerlijk. Daarvoor is vaak een goede copywriter nodig.

Afbeelding 16. De meeste website bezoekers hebben aan alleen iconen niet genoeg houvast voor hun navigatie, ze hebben ook tekst nodig. Soms zijn opdrachtgevers of ontwerpers gewend of gehecht aan een bepaalde term omdat die in het dagelijkse spraakgebruik tijdens het werken aan de site, of intern in het bedrijf van de opdrachtgever al gemeengoed is en goed werkt. Het hele projectteam kan bijvoorbeeld volkomen begrijpen wat ‘Car Configurator’ inhoudt. Maar uit een test kan blijken dat de argeloze bezoeker die de term voor het eerst in een menu tegenkomt geen idee heeft. Als de opdrachtgever de nieuwe term vervolgens graag bij de doelgroep wil introduceren, dan moet de site wat uitleg geven. Die uitleg moet dan wel glashelder zijn en zo bondig mogelijk zodat het resultaat bijvoorbeeld op een kleine banner past die her en der op de site kan staan. Zo raken de bezoekers gaandeweg bekend met de term en kan je hem ook in de menu’s gebruiken. Testen of de gevonden oplossing begrepen wordt blijft natuurlijk essentieel.

Afbeelding 17. Als je nieuwe termen, zoals ‘Car Configurator’ introduceert en wil gebruiken in menu’s vereist dat wat uitleg, bijvoorbeeld op banners her en der op de site. In Azië koos Volkswagen voor een andere term: Volkswagen Visualiser. Ook die term heeft uitleg nodig, maar daar koos men een nogal academische oplossing voor die de lezer weinig verder zal helpen. Hoogstens prikkelt het een bepaalde groep bezoekers die dan maar een gok doen.


15/22

Afbeelding 18. Uitleg van een onbekende term in de vorm van een woordenboekdefinitie is weinig aansprekend en roept in dit geval bovendien alleen meer vragen op.

Het keurslijf van complexe interacties De Car Configurator op de Volkswagen site is een goed voorbeeld van een complexe interactie waarbij de bezoeker een heleboel verschillende keuzes moet maken, in dit geval om een hoogstpersoonlijke droomauto samen te stellen. Op het web staan inmiddels vele van dergelijke ‘tools’. Steeds meer bedrijven laten een publieke interface ontwerpen voor de systemen die ze voorheen alleen intern gebruikten en die dus alleen door het eigen personeel bediend werden. Dat personeel volgt over het algemeen een opleiding of krijgt tenminste een instructie om te leren hoe zo’n stuk gereedschap gebruikt moet worden. Op internet kan een bedrijf zijn (potentiële) klanten echter niet opleiden of uitgebreid instrueren, dat is niet klantvriendelijk. De bezoekers van een website willen direct aan de slag en eisen dat de interactie voor zich spreekt. Online bankieren en online een vliegticket bestellen zijn andere voorbeelden van publieke interfaces op bedrijfssoftware die hoge eisen aan de ontwerper stellen. Vanwege de complexiteit van de interactie en de voor klanten nieuwe taken is testen met de doelgroep in deze gevallen hard nodig ter ondersteuning van het ontwerpen. De interface van dergelijke interactieve modules bestaat meestal uit een reeks van formulieren waarmee de bezoeker een aantal stappen doorloopt. Bij de Car Configurator van Volkswagen krijgt de bezoeker nadat hij voor een bepaald model gekozen heeft vijf formulieren voorgeschoteld, achtereenvolgens over de uitrusting, motoren, lakkleuren, bekleding en extra’s. Daarna volgt een pagina met de details van alle gemaakte keuzes en de pijs van de samengestelde auto.


16/22

Afbeelding 19. Bij het samenstellen van je droom-Volkswagen doorloop je zes stappen in een vaste volgorde. Aan dat keurslijf ontsnappen kan niet: als je later de tweede keuze nog wil wijzigen moet je alle stappen daarna opnieuw doorlopen.


17/22

Een belangrijke beperking van deze interactie is dat hij opgebouwd is uit stappen die een vaste volgorde kennen. De bezoeker kan niet aan dit keurslijf ontsnappen, hij moet de formulieren per se in de hier gepresenteerde volgorde invullen. Het is bijvoorbeeld niet mogelijk om eerst een bekleding te kiezen en daarna pas de lakkleur. De bezoeker kan wel teruggaan naar een eerdere stap om iets te wijzigen, maar daarna moet hij alle stappen na die wijziging opnieuw doorlopen. De eerdergemaakte keuzes zijn dan nog wel ingevuld, mits ze nog steeds mogelijk zijn. Om de bezoeker overzicht te bieden in dit soort situaties worden de stappen in het rechtermenu voortdurend op volgorde aangegeven. Dit is een van de conventies bij dergelijke complexe interacties. Bij voorkeur staan alle stappen vanaf het begin in beeld, met of zonder nadere omschrijving per stap, met of zonder nummer.

Afbeelding 20. Bij complexe interacties die meerdere pagina’s met formulieren omvatten heeft de bezoeker veel houvast aan een duidelijk overzicht van de stappen die hij moet doorlopen. Ook al lijken dit misschien eenvoudige conventies, ze worden niet altijd goed toegepast. Er zijn nog vele formulieren zonder een dergelijk overzicht van de stappen op het web. Andere blijken na testen onvoldoende houvast te bieden en vergen aanpassing. Complexe interacties testen bedrijven meestal uitvoerig op begrip en gebruiksvriendelijkheid: Begrijpt de bezoeker wel wat hij allemaal moet doen en is de interactie prettig? Zo’n usability test vinden bedrijven erg belangrijk omdat het succes van de formulieren meestal een directe relatie heeft met meetbare resultaten voor het bedrijf: meer omzet of minder kosten door minder telefoontjes naar het callcenter en minder afhandeling via papieren formulieren. Tijdens de usability test is de eerste vraag van de onderzoeker aan de respondent meestal hetzelfde als de eerste vraag over de homepage: “Legt u eens uit wat u hier ziet.” En vervolgens krijgt de respondent een aantal opdrachten die hem door de hele interactie heen leiden. De onderzoeker observeert en geeft verder geen aanwijzigen, tenzij al duidelijk is dat de respondent iets niet begrepen heeft en hij een aanwijzing nodig heeft om de opdracht verder uit te voeren.

Flash geeft de vrijheid om het anders te doen Bij usability tests blijkt steeds weer dat overzicht houden over wat je aan het doen bent erg belangrijk is voor mensen die complexe online interacties uitvoeren. Uit diezelfde tests blijkt echter ook dat mensen van opvatting verschillen over de ideale volgorde van de stappen. De een verwacht als eerste Usability research als inspiratiebron voor webontwerpers - Bas Raijmakers Eerste versie d.d. 25 maart 2003

18/22

een motor te kunnen kiezen, terwijl anderen willen beginnen met het design van de auto, de bekleding en de kleur. Formulieren in HTML maken het echter niet mogelijk voor de bezoeker om een eigen volgorde te kiezen. Flash daarentegen biedt de mogelijkheid om zelfs het concept van de stappen helemaal te verlaten. Volkswagen Azië heeft al een Car Configurator (aldaar Visualiser geheten) gemaakt die alle keuzes (motoren, lakkleuren, bekleding, extra’s) tegelijk aanbiedt. De gebruiker van dit tool is volstrekt vrij in de volgorde waarin hij zijn keuzes maakt, en kan ook elk moment weer van gedachten veranderen.

Afbeelding 21. In deze Flash-toepassing heeft de bezoeker de vrijheid om de keuzes voor zijn droomauto in zijn eigen volgorde te maken. Hij kan op elk moment weer iets anders kiezen zonder alles opnieuw in te hoeven vullen. Dit is een voorbeeld van innovatief gebruik van Flash dat tegemoet komt aan de verschillende manieren waarop mensen met het uitkiezen van een auto omgaan. De komende jaren is het ontwerpen van dergelijke interfaces die de stapsgewijze formulieren vervangen een belangrijke uitdaging voor webontwerpers. Om zo’n innovatieve interface te ontwerpen moet je als ontwerper wel goed op de hoogte zijn van de verschillende wijzen waarop mensen over het betreffende onderwerp nadenken en hoe zij ermee omgaan. Dat vergt gedegen onderzoek vooraf, bijvoorbeeld naar hoe mensen een auto kiezen en kopen. Een terugkerende uitkomst van dergelijk onderzoek is dat mensen nu eenmaal verschillen en er nooit één beste manier is om iets te doen. Een goed ontwerp staat daarom verschillende vormen van gebruik toe en schrijft geen keurslijf voor.


19/22

Op naar meer innovatieve interfaces Een ander voorbeeld van een innovatieve interface die gebruikers vrijlaat in hun manier van werken is de Map of the Market van SmartMoney.com. Hierin komen een aantal eerder genoemde aspecten goed in samen: Het samenballen van een grote hoeveelheid informatie op een klein oppervlak, duidelijk overzicht, soepele navigatie, en toegang tot informatie en interactie in een zelfgekozen volgorde.

Afbeelding 22. De interface van Smartmoney’s Map of the Market geeft een live overzicht van de bewegingen van sectoren en individuele fondsen op de beurs. Een pop-up menu biedt toegang tot veel informatie over elk fonds. Op één scherm krijg je zowel een breed overzicht als toegang tot enorm veel gedetailleerde informatie. Elk vlakje staat voor een aandeel. De oppervlakte van het vlakje is gerelateerd aan de totale marktwaarde van het bedrijf. De kleur geeft aan of het aandeel stijgt of daalt. Een ‘N’ geeft aan dat er een nieuwsbericht over het bedrijf beschikbaar is. Bij een muisbeweging over de aandelen zie je welk aandeel het is en hoe het aandeel recent presteerde. Bij klikken op een bepaald aandeel komt een menu omhoog dat toegang geeft tot een hele reeks van informatie die van belang is voor aandeelhouders.


20/22

Afbeelding 23. In deze view van de Map of the Market zie je alle nieuwsberichten over beursfondsen in één keer. De scannende lezer ziet zo alle nieuws, gerelateerd aan de beurskoersen, en kan snel een keuze maken. Er is ook een andere view mogelijk waarin de koppen van de nieuwsberichten allemaal tegelijk zichtbaar zijn. En het is mogelijk om de Map of the Market te personaliseren door je eigen aandelenportefeuille er in te zetten. Vergelijk een dergelijke dichtheid van informatie eens met een vergelijkbaar gereedschap van een bank, die met alleen tekst probeert zoveel mogelijk informatie op één pagina te krijgen. De mate van overzicht, informatiedichtheid en vrijheid in de interactie zijn onvergelijkbaar.

Afbeelding 24. Een spreadsheet-achtige interface biedt bij beurskoersen veel minder overzicht dan een visuele en vergt bovendien veel meer klikken, bijvoorbeeld bij het relateren van nieuwsberichten aan beurskoersen.


21/22

Testen hoort bij innovatief ontwerpen Webontwerpers die graag experimenteren houden ook van testen omdat ze beseffen dat usability tests hen meer vrijheid geven. Als er getest wordt hoef je bij het ontwerpen minder op safe te spelen. En als je als ontwerper meekijkt tijdens het testen doe je ook nog inspiratie op. Testpersonen die onbevooroordeeld aan de slag gaan met het site ontwerp doen altijd dingen die je als ontwerper niet verwachtte. Dat levert vaak weer nieuwe ideeën op. Mits goed uitgevoerd, geeft een usability test met vijf personen die ieder enkele opdrachten uitvoeren duidelijk aan waar de grootste problemen liggen, en in welke richting naar oplossingen gezocht moet worden. Hoe de oplossing voor complexe problemen als een chaotische homepage, desoriëterende navigatie of verwarrende formulieren er precies uit ziet mag de ontwerper bedenken. Webontwerpers en usability onderzoekers kunnen samen nog veel experimenteren en ontdekken. Have fun!

Bas Raijmakers

Bronvermeldingen Afbeeldingen 1 en 15: www.google.nl Afbeelding 2: www.yahoo.com Afbeeldingen 3, 7, 13b, 20b: www.klm.com Afbeeldingen 4, 9, 13c, 16b, 20a: www.postbank.nl Afbeeldingen 5, 6, 8, 11, 12, 14, 17, 18, 19a-f, 21: www.volkswagen.nl Afebeelding 10: www.autokompas.nl Afbeelding 13a: infomes.magw.nl Afbeelding 16a: www.triodos.nl Afbeelding 20c: www.activehotels.com Afbeeldingen 22 en 23: www.smartmoney.com Afbeelding 24: www.ingbank.nl


22/22

Usability research als inspiratiebron voor webontwerpers

Recommend Documents