Gebruikersvriendelijk webdesign
149
De gordiaanse E webknoop die de bezoeker moet ontwarren. Dit scenario moet men zien te voorkomen.
HCI of Human Computer Interaction is de leer die de relatie tussen de computer en zijn gebruikers, de mens, beschrijft. Een goede webdesigner wordt vanzelf een HCI-expert, aangezien hij te maken krijgt met alle aspecten die bij een gebruiks- én gebruikersvriendelijke website ter sprake komen. Inclusief de toegankelijkheid voor de minder bedeelden in onze moderne maatschappij.
Gebruikersvriendelijk webdesign Het web kenmerkt zich als een erg democratisch medium; sterker nog op het web is de gebruiker aan de macht. De klant is hier niet alleen koning, maar ook keizer en admiraal tegelijk. Over een tijd zal deze machtsverschuiving van producent naar consument grote maatschappelijke gevolgen hebben. Tegelijkertijd groeit het aanbod van websites sneller dan het aantal surfers, zodat de aanbieders van webcontent nog afhankelijker van het gebruikersoordeel worden. Om het bezoek aan de site ook voor de lange termijn te garanderen, dient de siteopbouw en -presentatie zo veel mogelijk op de wensen en gedragingen van de gebruiker afgestemd te worden. De gebruiker neigt er meer en meer naar om zo efficiënt mogelijk te surfen. De ontwerper moet daar op inspelen.
150
Webdesign in de praktijk
E Wat wil de gebruiker?
Dat betekent in de praktijk dat er goed geluisterd dient te worden naar wat de gebruiker wil en verlangt. Een heldere navigatie is belangrijk, maar de surfer is niet op zoek naar een fraaie navigatie, maar naar waardevolle en betekenisvolle content. Een goed doordachte navigatie is voorwaarde, geen luxe! De vraagt rijst natuurlijk hoe de sitebouwer het de gebruiker zo naar de zinkan maken, dat deze langere tijd doorbrengt op de site. En, als hoogste goed, dat de surfer later weer terugkeert naar dezelfde site omdat de ervaring zo goed bevallen is. Om dit niveau te bereiken dient men zich de vraag te stellen wat de gebruiker eigenlijk wil of zoekt? Om hier een bruikbaar antwoord op te kunnen geven, dient men onderzoek te verrichten. Bijvoorbeeld in de vorm van deskresearch waarbij de statistieken van de eventuele bestaande site van grote waarde zijn voor kwalitatieve input. Ook op het web is een schat aan ‘usability’ informatie voorhanden. De website van de usability goeroe Jacob Nielsen, www.useit.com, is echt een must. Zijn provocerende uitgangspunten zijn even omstreden als leerzaam.
G
De lancering van de nieuwste top level domain site van IBM (www.ibm.com) werd vergezeld van een aparte uitlegpagina om de nieuwe indeling te onderwijzen.
G
Keep It Simple Stupid ofwel KISS design. Op basis van een strakke navigatie en van Yahoo geleende buttons, heeft Oracle zijn populairste site (www.oracle.com) heringericht.
E Wat de gebruiker echt wil
De tweede methode om input van de gebruiker te krijgen is door deze daadwerkelijk naar zijn mening te vragen. Een zogeheten Usertesting is bij uitstek een beproefde manier om precies te weten te komen of een nieuwe vormgevingstijl of navigatiestructuur bij de doelgroep in de smaak valt. Een gebruikerstest kan uiteraard ook benut worden om vooraf te weten te komen aan welke criteria de site moet voldoen om voldoende in de smaak te vallen. De praktijk heeft ons uiteraard ook het een en ander geleerd over wat de gebruiker echt wil. Deze minimale uitgangspunten blijken vaak een verrassing voor veel webontwikkelaars. Zeker als de sites van ondernemingen met deze criteria in het achterhoofd worden bekeken. De voornaamste factoren die een bezoeker doen terugkeren zijn:
Gebruikersvriendelijk webdesign
151
F
Een search-engine is een voorwaarde voor een grotere website.
K kwalitatieve en unieke content, K bijdetijdse inhoud die vaak ververst wordt, K minimale downloadtijd door lichte web-
pagina’s en een goede serververbinding,
Als de site gebruikt kan worden als vervanger voor traditionele informatiemiddelen als helpdesks, kan de investering ook nog eens snel terugverdiend worden.
K optimaal gebruiksgemak afgestemd op
de representatieve bezoeker. E Het web is een non-lineair medium
Toegegeven, een aantal van deze criteria is ‘zacht’, ofwel niet in harde aanwijzingen uit te drukken. Maar dat neemt niet weg dat ze van groot belang zijn voor het welslagen van de site. Het simpelweg vertalen van bestaande informatie naar het web is al lang niet meer afdoende. Nog afgezien van de waarde die deze content heeft, ze is gemaakt voor media die ‘lineair’ ingesteld zijn. Een brochure leest van voren naar achteren, een continue, lineaire stroom van informatie. Het web daarentegen is niet-lineair ingesteld; de hyperlinks zorgen voor een sprongsgewijze, associatieve opname van de data. Bij de vertaling van bestaande content zit de toegevoegde waarde in het aanleggen van de onderlinge relaties in en tussen de documenten. Dat vergt uiteraard een redactionele inzet, maar de investering zal door de bezoeker op prijs worden gesteld.
G
Een ‘splash-pagina’ moet altijd functioneel zijn. Bijvoorbeeld om een plug-in keuze aan te geven of om informatie te geven.
E Een-op-een communicatie
Het onderscheidende verschil ten opzichte van de andere media is de interactieve mogelijkheden van het web. Dankzij de site kan een dialoog met de gebruiker op gang komen, een-op-een zelfs. Deze directe vorm van communicatie tussen de aanbieder en de consument van de informatie levert een schat aan gegevens op: over de voorkeuren van de consument, zijn gedragingen op het web en indien aanwezig zijn aankoopgedrag. Al deze informatie kan in de verdere ontwikkeling van de site gebruikt worden. Als men niet op deze ontwikkelingen inspeelt en eenrichtingscommunicatie blijft plegen, worden de voordelen die de dialoog biedt, gemist. Een heldere website is dan ook een voorwaarde om een betekenisvolle relatie met de gebruiker te kunnen opbouwen. De kwaliteit van de navigatie bepaalt grotendeels het succes!
G
Een goede site map hoeft niet ingewikkeld te zijn om een ‘verdwaalde’ bezoeker weer op weg helpen.
152
Webdesign in de praktijk
G Vertrouwen opbouwen zit ook in de details. Een behulpzame en vriendelijk opgestelde foutpagina doet ook wonderen.
G
Uit een onderzoek van Knowlegde Systems blijkt dat de gebruikers andere accenten te leggen dan de sitebouwers.
E Ontwerp voor vertrouwen
Voor het bereiken van een optimaal gebruiksgemak van de site kunnen concrete aanwijzingen gegeven worden. In de bovenstaande grafiek blijkt dat de gebruiker andere prioriteiten legt dan men zou vermoeden. De lay-out van de homepage komt pas op de achtste plaats in een grootschalig Amerikaans onderzoek van Knowledge Systems uit 2001. Ook bleek dat 83 procent van de gebruikers de site snel zal verlaten als de bezoeker denkt dat hij te vaak moet ‘klikken’ om zijn doel te bereiken. Ook de negatieve factoren zijn onderzocht: waarom laat de bezoeker een site na één poging links liggen? Met name de downloadsnelheid – een combinatie van de paginagrootte in kilobytes en de kwaliteit van de serververbinding van de site – is cruciaal. Een andere reden die een negatieve perceptie oplevert, is de vaak slechte leesbaarheid van de tekst. In het hoofdstuk typografie leest u meer over dat onderwerp.
De rol van de website zal voor een zakelijke onderneming in belang toenemen. Het uitgangspunt verschuift tegelijkertijd van een meer communicatiegerichte informatie naar meer relatiemarketing en verkoopgeoriënteerde content. De juiste balans tussen een professionele grafische verzorging en een heldere en consistente structuur geeft de bezoeker het vertrouwen in het merk achter de site. In de post-Amazon commerciële wereld, ook wel bekend als E-commerce, zal vertrouwen de allerbelangrijkste eigenschap worden. Niet zozeer in het merk zelf, maar in de reputatie ervan. De site wordt de belichaming van het merk – uitgedrukt in pixels – aangezien de webpresentatie het eerste en directe contactpunt met de consument wordt.
G
In de Microsoft Shop wordt de klant visueel duidelijk gemaakt hoeveel stappen het aankoop- en registratieproces nog vergt en waar hij zich in dat proces bevindt.
Gebruikersvriendelijk webdesign
E Locatie, locatie. locatie
Een belangrijk uitgangspunt voor een succesvolle navigatie is de vraag: “Kan ik op elke pagina zien waar ik ben, waar ik vandaan ben gekomen en waar ik heen kan gaan?” Dit lijkt basaal, maar probeer het maar eens uit als u op het web surft. Een techniek die veel toegepast wordt, is het toevoegen van
G
Aan een focusgroep zijn verschillende oplossingen gepresenteerd van de homepage van www.ilse.nl.
153
zogeheten ‘crumbtrails’. Dit voert terug op het sprookje van Hans en Grietje die hun weg feilloos door het donkere bos konden vinden door een kruimelspoor achter te laten. In webdesign komt deze techniek ook goed van pas; door stapsgewijs het gevolgde pad te tonen aan de bovenzijde van de pagina weet de bezoeker waar hij zich bevindt.
G H
De testpersonen konden kiezen uit diverse varianten qua indeling en ‘weging’ van de verschillende secties.
H
154
Webdesign in de praktijk
E Consistente paginastructuur
Als u veel surft, zult u ongemerkt een patroon herkennen waar commerciële websites gebruik van maken. Deze sites maken gebruik van een vaste indeling waar een heldere scheiding is aangebracht tussen de ‘site-navigatie’ en de ‘lokale navigatie’. De site navigatie biedt de mogelijkheid om naar de (hoofd)rubrieken van de site te surfen. De locale navigatie maakt het mogelijk
G
G
G
Een veelgebruikte standaardlay-out.
om binnen de (hoofd)rubriek of subsectie te kunnen navigeren. Bij het opzetten van de sitemap is het zaak dat u de navigatiestructuur daar op aanpast. Dus als u de site in een zestal hoofdrubrieken indeelt, kunt u gebruik maken van dit model. Aangezien elke hoofdrubriek weer onderverdeeld wordt in een zestal onderdelen, resulteert dit in een duidelijke navigatiestructuur. Let wel, dit systeem levert problemen op als u een groter aantal hoofdrubrieken kwijt moet of als het aantal variabel is en dus qua aantal kan groeien.
De Personify website is ook gebaseerd op het principe...
...van een scheiding van de lokale en de site-navigatie. Door de positie van de gebruiker ook te verhelderen, door deze vet te maken, ontstaat een overzichtelijk geheel.
H
Ook de sites van IBM.com en Submarine.nl gebruiken de horizontale (site-navigatie) en verticale (subrubriek) indeling.
Gebruikersvriendelijk webdesign
155
G
E Tabstructuren, voor- en nadelen
Meer en meer sites maken gebruik van tabjes in de navigatie. De redenen waarom men hiervoor kiest zijn logisch. Elke Internetter en dus de gemiddelde gebruiker van de websites is bekend met het fenomeen door de boekleggers en multomappen. De erg directe vertaling van dit gebruik vanuit de fysieke naar de virtuele wereld werkt wonderbaar. De site-bezoeker ziet letterlijk in één oogopslag waar hij zich bevindt en waar hij heen kan gaan. Zeker als dit wordt gecombineerd met zogenaamde ‘rollovers’ die direct reageren en daarmee de gebruiker de indruk geven dat een andere tab wordt geselecteerd. In combinatie met de eerder besproken ‘crumbtrails’, levert dat een bijzonder sterke navigatie op. Maar elk voordeel heeft ook zijn nadeel, zoals Johan Cruyff ons heeft geleerd. In dit geval is het nadeel dat veel tabjesbalken uit een veelvoud van kleine bestanden worden opgebouwd. En dat is niet bevordelijk voor de laadsnelheid van de site. De onderstaande opbouw van het ‘beeld’ komt niet erg professioneel over. Het is daarom van belang dat u eerst onderzoekt of u de tabjesbalk in stukken opdeelt, of dat u rollovers maakt die
G Een in kleine gifjes opgedeelde navigatiebalk zal de eerste keer met horten en stoten ingelezen worden. Voor de vervolgpagina’s komen de afbeeldingen uit de cache van de browser. En, belangrijk, maak altijd gebruik van een ‘Preload script’. E
De positie in de site wordt helder gecommuniceerd door de tabstructuur in de navigatiebalk.
G De toevoeging van een tekstuele positiebepaling wordt op prijs gesteld door gebruikers die een tekstbrowser toepassen.
G
Met behulp van Macromedia Dreamweaver zijn complexe rollovers inclusief preloads eenvoudig aan te brengen.
156
Webdesign in de praktijk
E Navigatie altijd en consistent in beeld
G
Amazon hanteert al jaren een consistente navigatiestijl.
Het vinden van de informatie is net zo belangrijk als de informatie zelf! Dat betekent dat hoe minder klikken het bereiken van de content vergt, des te effectiever de navigatie is. De informatiearchitectuur van de site bepaalt de organisatie van de content en de relatie tussen de diverse onderdelen van de website. De navigatiebalk is dus een belangrijk onderdeel van de site. Deze kan zowel horizontaal als verticaal worden toegepast. Op zich maakt dat niet zoveel uit, maar een consistente positie op alle relevante pagina’s is wel van groot belang. De gebruiker moet namelijk altijd eerst vertrouwd raken met de navigatie(middelen). Deze moet(en) dus eenvoudig aan te leren zijn en alternatieve oplossingen bieden als de gebruiker vastloopt. De beruchte ‘Back’ knop moet vermeden worden en dus is het zaak om uitwegen in te bouwen in de site- en paginanavigatie. Let wel, voor veel gebruikers zijn de site map en het zoekveld de meest logische opties als ze dreigen te verdwalen. Deze hebben dus prioriteit bij grotere, en dus complexere, websites. F
Een nadeel van de ‘fixed tabs’ is de beperkte uitbreidbaarheid ervan, zoals dat in dit humoristisch bedoelde voorbeeld duidelijk zichtbaar is gemaakt.
