Ik zie grafisch ontwerpers aan het werk die een website met wat kleine ingrepen visueel veel aantrekkelijker maken. Ze denken, schuiven en kijken naar de boodschap die moet worden overgebracht. De ontwerper maakt daar ruimte voor. Er wordt rekening gehouden met het imago van de opdrachtgever en het verwachtingspatroon van de bezoeker. Elegant ontwerpen, ik ben er vaak jaloers op. Een elegant ontwerp is effectief, waardevol en gebruiksvriendelijk. De bezoeker staat centraal en wordt verleid om met de site aan het werk te gaan.

Dankzij mensen als Jakob Nielsen roept gebruiksvriendelijk ontwerp direct associaties op met blauw onderstreepte links, grote letters en geen of weinig vormgeving. Laat staan het gebruik van plaatjes en bewegende beelden. Dit type usability consultant stelde regels op na (wetenschappelijk) onderzoek, maar vergat dat iedere site anders is en dat tijden veranderen. Gebruiksvriendelijkheid en schoonheid gaan namelijk prima samen.

Iedereen herinnert zich nog wel die saaie leraar op school waar het onmogelijk was om een heel lesuur op te letten. Je had al geen zin in de les en je wilde zo snel mogelijk weg. Hierdoor leerde je minder dan je had kunnen doen. Ik hoop dat iedereen ook wel eens een leraar heeft gehad die zó goed was dat je een heel lesuur geboeid was en de tijd voorbij vloog. Deze leraar wist wat zijn boodschap was, wist wanneer er gebruik gemaakt moest worden van visuele hulpmiddelen, wist dat saaie lessen af en toe nodig zijn, maar wisselde ze af met spannende lessen. Die leraar moet je voor ogen hebben als je een effectieve website wilt. Die leraar maakte ook gebruik van kleine trucjes om de les soepel te laten verlopen. Hetzelfde kun je doe met een website. Kleine trucjes die er voor zorgen dat je bezoeker makkelijker met je site kan werken.

Stel je voor dat we aan het werk moeten voor de niet-bestaande opdrachtgever “DVD online”. Zij verkopen DVD’s via internet en zijn al twee maal bekroond door de consumentenbond. Laten we bovenaan beginnen...

Titelbalk

Veel websites tonen hier slechts de naam van de site en geven verder geen informatie. De titelbalk is echter zeer belangrijk bij het gevonden worden via zoekmachines. Kies een manier om de titelbalk nuttig te maken. Bijvoorbeeld:

<title>DVD online - Al tweemaal bekroond tot beste internetwinkel door de Consumentenbond</title>

De titel vertelt nu meer over de betrouwbaarheid van de DVD winkel. Er zijn meer aanbieders in de markt, maar er zullen er maar weinig zijn die tweemaal bekroond zijn.

Je kunt je titelbalk ook gebruiken als hulp bij de navigatie, voorbeeld:

<title>DVD online | Science Fiction & Fantasy | Lord of the Rings | Bestellen</title>

Hier geeft de titelbalk een duidelijke indicatie waar de bezoeker zich bevindt in de site. Er zijn voorbeelden te over te verzinnen van effectief gebruik van de titelbalk. Kies er één die voor jouw site het meest geschikt is.

URL’s, URL’s, URL’s

Soms is het niet anders en zit je vast aan een niet te configureren systeem dat je pagina’s dynamisch opbouwt. Dan heb je te maken met onleesbare url’s zoals:
http://www.dvd-online.nv/0,235_43268_145691,2600.html
Dit vertelt helemaal niets over de inhoud van de pagina. Als hier bijvoorbeeld zou staan:
http://www.dvd-online.nv/sf-fantasy/lordoftherings/bestellen.html
weet je een stuk meer. De ruimte waar deze informatie getoond wordt heet niet voor niets de locatiebalk!

Broodkruimels

Veel sites maken er al effectief gebruik van, de broodkruimels die de bezoeker moeten vertellen waar hij of zij zich in de site bevindt. Bijvoorbeeld:
U bent hier: home > science fiction & fantasy > lord of the rings > bestellen
Hier valt onderscheid te maken in de volgende zaken: de tekst, de opbouw, het scheidingsteken en de volgorde.

Allereerst de tekst. “U bent hier:” voldoet in de meeste gevallen het best. Soms zie ik: “Terug naar:” en dat is vreemd. Immers, de broodkruimels zullen er ook staan als ik via een zoekmachine op de site terecht kom (en dan eens niet via de homepage). Op zo’n moment slaat “Terug naar” nergens op. Sterker nog, het schept verwarring en daar is niemand bij gebaat. Soms staat er niets voor en dat kan in sommige gevallen uitstekend, maar ik zie geen reden om de woorden “U bent hier:” niet te gebruiken.

De opbouw van de kruimels is ook belangrijk. Er is een aantal sites die het pad van de bezoeker door middel van een cookie vastleggen en tonen als broodkruimels. Het is een keurige vertaling van de term, alleen de bezoeker heeft er niet veel aan. Het geeft geen enkele indicatie van de opbouw van je site en dat is precies de bedoeling van de kruimels. Je kunt het zo stellen: waarom je verdwaald bent is niet relevant, maar hoe je weer thuis komt wel!

Je ziet soms als scheidingsteken bij de broodkruimels ook wel de “rechte streep” | of de “dubbele punt” : Je pakt je bezoeker toch net iets meer bij de hand door het “groter dan” teken te gebruiken. Dit geeft namelijk een soort van richting aan. Daarmee geef je de meeste informatie, dus is het meest effectief. De tekst “U bent hier:” en de pagina waar je bent zijn, als je het netjes wilt doen, niet voorzien van een link en de andere items zijn dit wel.

Helemaal uit den boze is natuurlijk het van rechts naar links weergeven van de tekst. De bezoeker moet wel heel hard nadenken over wat je bedoelt met:
bestellen < lord of the rings < science fiction & fantasy < home
Het zou echter weer uitstekend kunnen bij een Arabische site.

Leesbaarheid

Eén van de usability-regels is dat alle linkjes onderlijnd moeten worden weergegeven. En verander vooral niets aan de blauwe kleur van die linkjes. Ik zal je laten zien dat dit niet altijd in dienst is van de bezoeker, en dat het soms beter is om er van af te wijken. Als er veel links bij elkaar staan bijvoorbeeld.

Hier is gemakkelijk te zien wat het overzichtelijkst, makkelijkst leesbaar en dus het meest effectief is: voorbeeld 3. Of denk je echt dat er nog mensen te vinden zijn die niet weten dat dit menu ook klikbaar is? Natuurlijk zorg je er voor dat bij ieder menu-item zowel het voorloopteken als de tekst klikbaar is.

Opbouw

Een andere usability-regel is die van de “drie klikken”. Sommige webbouwers of consultants verklaren deze regel heilig. Alle informatie moet binnen drie klikken te vinden zijn. Wat ik ook zoek, ik moet er binnen drie klikken bij kunnen komen. Onzin! Het is helemaal niet erg als je soms wel vijf of zes keer moet klikken voor je de informatie kunt vinden. Als het pad dat je volgt logisch is en je voor iedere klik precies weet wat er gaat gebeuren is er geen enkele reden tot zorg. Drie klikken waarbij je over iedere klik moet nadenken (als ik hier klik, kom ik dan wel bij de pagina die ik zoek?) zijn hinderlijker dan zes klikken die je moeiteloos doet. Als je niet hoeft na te denken bij de stappen die je maakt, maak je ze zonder inspanning en heb je het niet door dat je ze maakt. Het is beter om je site vloeiend te laten doorlopen dan alles te proppen binnen die heilige drie klikken.

Label

Bij het invullen van een formulier komt het er echt op aan. Hier heb je de bezoeker zo ver gekregen dat hij of zij bereid is om echt iets met je site te gaan doen. Het zou zonde zijn als je hier je bezoeker nog een strobreed in de weg legt. Een heel klein dingetje dat veel kan opleveren is het gebruik van labels in het formulier. Door het gebruik van labels wordt de tekst naast de checkbox en radiobutton ook klikbaar. Voorbeeld:

Betaling:

creditcard
acceptgiro

Handig, want er zijn voldoende mensen die moeite hebben om precies met hun muis in dat kleine vakje te komen. De de code ziet er als volgt uit:

<form action="..." method="...">
<fieldset>
<legend style="font-weight:bold">Betaling:</legend>
<input type="radio" name="betaling" id="credit" value="a" /> <label for="credit">creditcard</label><br />
<input type="radio" name="betaling" id="accept" value="b" /> <label for="accept">acceptgiro</label>
</fieldset>
</form>

Feedback

Geef na iedere actie van de bezoeker feedback of het wel of niet goed is gegaan. Is het formulier verstuurd? Is de bestelling gedaan? Ben ik op de juiste pagina gekomen? Iedere vraag die na een klik zou kunnen opdoemen zou beantwoord moeten worden. De informatie die je hiermee geeft zal als prettig en waardevol worden ervaren, je bouwt vertrouwen op en dit komt de effectiviteit van je site ten goede.

Tenslotte

Dit waren een aantal kleine dingen die het bezoek aan een site kunnen veraangenamen. Ik zal niet zeggen dat dit alles is en dat je hiermee perfecte en waardevolle sites maakt, of dat het keiharde regels zijn. Bedenk bij iedere toevoeging, techniek of functie die je op je site gebruikt of het beter is voor je site en voor je bezoeker. De bezoeker moet het op zijn minst leuk vinden om je site te bezoeken alvorens tot enige actie over te gaan. Pas dan zul je een effectieve en waardevolle website bouwen. Als je je bezoekers niet weet te verleiden, heb je ook niets aan blauw onderlijnde hyperlinks.

• Home
• Artikelen
• Colofon