Oude situatie

Stel je de volgende situatie eens voor:

• Eén van je werknemers is per dag gemiddeld vijf uur kwijt aan de klantenservice (het beantwoorden van vragen via de e-mail of telefoon). De rest van de tijd doet deze werknemer andere werkzaamheden.
• Je betaalt deze werknemer €10 p/u.
• Deze werknemer werkt fulltime (46 weken per jaar).

Het aantal uur dat je per jaar kwijt bent aan de klantenservice is: 5 * 5 * 46 = 1150 uur. Tegen een uurprijs van €10 p/u betekent dat de klantenservice je €11500 per jaar kost.

Deze kosten kunnen worden gereduceerd, door de usability van de website te optimaliseren. Daarbij moet je bijvoorbeeld denken aan een goede informatievoorziening, zodat mensen zelf antwoorden op vragen kunnen vinden.

Nieuwe situatie

Stel je nu de nieuwe situatie eens voor:

• Je hebt besloten om te investeren in je website wat €3000 heeft gekost.
• Je werknemer is 50% minder tijd kwijt aan de klantenservice.

In de nieuwe situatie ben je nu 575 uur per jaar kwijt aan de klantenservice. Omgerekend in geld is dat €5750. De investering van €3000 tellen we hierbij op, wat betekent dat je in het jaar van investeren €8750 kwijt bent aan de klantenservice. De besparing is: €11500 – €8750 = €2750 (24%).

Zoals je kan zien is dat een flinke kostenbesparing, welke in het tweede jaar alleen maar hoger zal zijn (je hoeft immers niet ieder jaar zoveel geld te investeren in je website). Een vraag die je jezelf moet stellen is: kan ik (potentiële) klanten zelfstandiger maken, door te investeren in de usability van mijn website? Ik help je graag met deze vraag.

Zo’n mentaal model hebben we voor veel zaken, zo ook voor websites of softwaresystemen. In dit artikel wil ik hier dieper op in gaan.

Definitie

De definitie van een mentaal model, toegespitst op softwaresystemen, kan het best omschreven worden als: “een reeks verwachtingen over welke menselijke acties nodig zijn om bepaalde stappen te voltooien en welke computer acties hieruit zullen voortvloeien”. Een effectief mentaal model is er dus één die compleet en accuraat is en de benodigde taken en subtaken bevat. Dit zorgt ervoor de gebruiker een goede voorspelling kan doen over acties die hij uitvoert. Indien de gebruiker een accuraat mentaal model bezit, zal zijn prestatie toenemen en het aantal fouten afnemen.

Stel je hebt een webshop en bent toe aan een redesign. Een goede ontwerper, die zich bewust is van mentale modellen, zou door een goed ontwerp er voor kunnen zorgen dat er meer omzet wordt gegenereerd. Dit zal bereikt worden, doordat er minder ‘fouten’ gemaakt zullen worden door de gebruiker (zoals bijvoorbeeld het niet snappen van het betaalsysteem).

Conceptueel model

Een manier om een accuraat mentaal model bij mensen te vormen is door het ontwikkelen van een conceptueel model. De definitie van een conceptueel model is als volgt: “het algemene conceptuele kader waarbinnen de functionaliteit wordt gepresenteerd” (Mayhew, 1992). Dit conceptueel model moet duidelijk worden gemaakt aan de gebruiker. Dat kan op de volgende manieren (Mayhew, 1992):

• Onzichtbare gedeelten en handelingen zichtbaar maken aan de gebruiker: Neem bijvoorbeeld een ‘drag and drop’ systeem om een winkelwagen in een webshop te vullen. De onzichtbare handeling (een product toevoegen aan de winkelwagen) wordt op deze manier (visueel) zichtbaar voor de gebruiker. Dit wil echter niet zeggen dat je dit ook moet toepassen, aangezien ‘drag and drop’ voor frustraties kan zorgen.
• Feedback geven: wanneer de gebruiker input geeft, moet deze te zien krijgen wat er gebeurt. Bij het invullen van contactgegevens kan bijvoorbeeld direct feedback gegeven worden of dit correct is ingevuld of niet.
• Consistentie: mensen zijn gewend om kennis via bepaalde patronen en ‘regels’ te structureren. Wanneer je bepaalde patronen of ‘regels’ terug laat komen in de interface, heeft dat een positief effect op het conceptueel model. Zorg er bijvoorbeeld voor dat op iedere pagina de navigatie op dezelfde plaats staat. Uiteraard erg basic en voor de hand liggend, maar wel cruciaal.
• Gebruik van metaforen: als ontwerper zijnde kan je een interface laten lijken en functioneren als een systeem waarmee de gebruiker al bekend is (in de echte wereld). Neem bijvoorbeeld de knip-en-plak functie: in de echte wereld kan je ook ‘knippen en plakken’ om bepaalde teksten of afbeeldingen bij elkaar te zetten. Hiermee is de gebruiker al bekend en bezit dus al een bepaald mentaal model.

Metaforen

Vooral het gebruik van metaforen is een krachtig middel om gebruikers te helpen een effectief mentaal model te creëren. Een metafoor is: “een relatie tussen objecten en gebeurtenissen in een softwaresysteem en die genomen uit een niet-computer domein” (Wozny, 1989). Het gebruik van metaforen draagt bij aan de overdracht van kennis vanuit het ene domein naar het andere domein. Concreet houdt dit in dat je bepaalde relaties tussen objecten en gebeurtenissen in een niet-computer domein vertaalt naar een softwaresysteem. Omdat men al bekend is met de relatie in dat andere domein, zal men makkelijker een mentaal model kunnen vormen van het softwaresysteem.

Als voorbeeld kunnen we een chatroom nemen. Het is een ‘ruimte’ op het internet, waar mensen naartoe ‘gaan’ om te ‘praten’. Het gebruik van dit simpele concept zorgt ervoor dat men de chatroom snel begrijpt. Ze hebben namelijk al een mentaal model en hoeven dit alleen iets bij te schaven om het ook te laten gelden voor chatrooms.

Uiteraard kan je niet altijd metaforen gebruiken: met computers kan je (veel) meer dan in de echte wereld. Puur focussen op fysieke metaforen kan dus je creativiteit beperken. Daarnaast blijven er altijd verschillen bestaan tussen de echte wereld en softwaresystemen, dit is onvermijdelijk.

Conclusie

Ontwerpers moeten zich ervan bewust zijn dat de gebruiker bepaalde mentale modellen bezit die zijn gedrag beïnvloeden. Hierdoor heeft hij bepaalde verwachtingspatronen waaraan je website moet voldoen. Als je nieuwe functionaliteiten toe wilt voegen, kan je (indien mogelijk) het best metaforen gebruiken. Dit zorgt ervoor dat je gebruiker snel een effectief mentaal model kan vormen, wat ten goede komt van de usability van je website of softwaresysteem.

Bron
An introduction to human factors engineering (2de editie, 2004) door: Wickens, Lee Yili Liu & Gordon Becker

Definitie

Laten we beginnen bij het begin. Wat is conformeren eigenlijk? Simpel gezegd is dit het kopiëren van gedrag en overtuigingen van andere mensen. Neem bijvoorbeeld kleding: hetgeen wat wij dragen, wordt vaak bepaald door wat andere mensen dragen. Als iedereen op een gegeven moment dat ene bepaalde shirt draagt, waarom zou jij dat dan niet kopen? Kortom: we passen ons aan aan onze omgeving (vrienden, familie, maar ook wildvreemde mensen die we niet kennen).

Collectief conformeren

Ik hoor je al afvragen: wat heeft dit met webdesign en usability te maken? Best veel. Tegenwoordig merk je dat veel websites een bepaalde manier van opbouw hebben; een vaste indeling waar menig webdesigner zich aan houdt. Oftewel: wij, webdesigners, conformeren collectief. We wijken niet af van gebruikelijke ontwerppatronen en als je alle websites ontdoet van hun opmaak, heb je (grotendeels) identieke websites. Ontwerpers die de ‘ongeschreven regels’ op een verkeerde manier breken, kunnen (forse) kritiek verwachten. Waarschijnlijk een rede waarom wij ons houden aan de algemene norm.

Is dit collectieve conformisme een probleem? Enerzijds niet. Als alle websites (nagenoeg) identiek zijn, is dit op het gebied van usability natuurlijk ideaal. Men weet dan namelijk precies te vinden wat men zoekt. Het schept vertrouwen. Anderzijds is het natuurlijk erg zonde: door ons te houden aan vaste gewoonten, beperken we onze ontwikkeling en ‘evolutie’. Daarnaast wordt het steeds lastiger om iets unieks neer te zetten, dus krijg je veel ’13 in een dozijn’ websites.

Anders, maar goed

Hoewel het onze evolutie wellicht beperkt, is het wel een enorme uitdaging om de heersende norm (lichtelijk) te doorbreken. Ik denk dat je als ontwerper op zoek moet gaan naar een goede balans: enerzijds moet de website uniek zijn, maar anderzijds moet dit niet ten koste gaan van de usability. Kijk of lichte wijzigingen van de huidige ‘regels’ door te voeren zijn, zonder dat de gebruikers hiervan de dupe worden. Dit zal leiden tot een meer divers en rijker internet. De voorwaarde is wel dat iedereen ervoor open staat en de nieuwe ‘regels’ een kans gunt. Anders is het bij voorbaat al een verloren zaak.

Moraal van dit verhaal: Wees anders, maar val niet op door een slechte usability.

Bron: Social psychology (4de editie, 2006) door: Franzoi

Wat is usability

Laten we beginnen bij het begin. Wat is nu eigenlijk usability? Hoewel ik deze term vertaal als ‘gebruiksvriendelijkheid’, moet ik toegeven dat ik de term ‘usability’ hiermee tekort doe. Het is meer: het gaat om de algehele user experience. Hoe ervaart de mens een product (in dit geval een website)?

Deze ervaring wil je uiteraard zo goed mogelijk laten verlopen. De mens (gebruiker) moet weten hoe hij bijvoorbeeld zijn of haar weg kan vinden op je website. Waar kan ik gegevens over de diensten vinden? Waar staan de contactgegevens? Allemaal vragen waarvoor mensen naar een website kunnen gaan. De kunst is dus om dit op een goede en gebruiksvriendelijke manier te presenteren.

Een aantal van mijn visies (en dat van mijn bedrijf) uitgedrukt in beelden:

Zet de mens centraal

Het meest belangrijke is dat de mens centraal komt te staan. Er vindt namelijk interactie plaats tussen een levend individu en een website. Deze interactie moet zo goed mogelijk verlopen, om zo het individu ‘te bevredigen’ (in de zin van: het niet frustreren van een persoon).

Indien je de website vanuit jezelf gaat ontwerpen, “ik wil dat daar hebben en dat daaronder”, focus je alleen maar op jezelf. Vertegenwoordig jij al je bezoekers? Neen. De kunst is dus om je in te leven in de gemiddelde bezoeker en je af te vragen wat ze precies komen doen op je website. Kortom: zet jezelf opzij.

Het inleven in andere personen wordt vergemakkelijkt met onderzoek naar usability en websites. De kennis die uit deze (wetenschappelijke) onderzoeken komen, zullen als basis moeten dienen van je ontwerp. Je moet goed kunnen onderbouwen waarom je iets ‘precies daar’ neerzet. En dus niet, zoals veel ‘webdesigners’ doen, iets klakkeloos ergens neerzetten met als argument: “dat ziet er toch leuk uit?”.

Belangrijkste taken

Hiermee komen we op het volgende punt: wat wil je precies dat men op de website komt doen? Oftewel: wat zijn de belangrijkste doelen die men op de website kan voltooien? Indien deze vraag is beantwoord, moet je het gaan vertalen naar een passend ontwerp. Belangrijke taken die men kan vervullen, zullen bijvoorbeeld een prominentere plaats innemen in het ontwerp. Daarnaast moet het uiteraard ook aantrekkelijk worden verpakt, maar in eerste instantie gaat het puur om het ‘gebruiksgemak’.

Vertrouwd en vertrouwen

Een belangrijk aspect van usability is het scheppen van een vertrouwde omgeving en vertrouwen. We willen graag op een logische en consistentie manier door de website kunnen navigeren, zonder dat we er teveel bij hoeven na te denken. Indien dit het geval is, schept dit een vertrouwde omgeving en dus ook vertrouwen. Wanneer de mensen een fijne ervaring beleven, zullen ze geneigd zijn om terug te komen. Er is immers geen reden om naar de website van een concurrent te gaan, tenzij je concurrent een betere website heeft… Uiteraard onder de voorwaarde dat de prijzen gelijk zijn.

Omzet

Voor ondernemers is omzet uiteraard erg belangrijk. Je wilt via (of met) je website omzet genereren. Indien je website dus niet lekker werkt, zal je omzet mis kunnen lopen. Anders gezegd: als je je huidige website optimaliseert qua usability, zal je een omzet stijging kunnen verwachten. Puur omdat men kan vinden wat men zoekt en een goede ervaring met de site heeft. In dat geval is het dus zeker de moeite (en het geld) waard om eens een evaluatie aan te vragen van je website. Hoe kan ik mijn bestaande website verbeteren?

Usability begint bij het begin

Vanaf het allereerste moment dat je gaat beginnen met het ontwikkelen van een website moet je al rekening houden met de mens. Denk hierbij aan de informatiestructuur van de website en de indeling ervan. Waar ga ik iets neerzetten en waarom?

Onthoud dat alle aanpassingen die je maakt nadat de site online is, veel duurder zijn dan aanpassingen die je maakt tijdens het ontwerp proces. Besteed dus veel tijd en aandacht aan optimalisatie van de usability, vóórdat de site online gaat. Houd bijvoorbeeld een gebruikersonderzoek in de ontwerpfase, om te kijken wat er verbeterd kan worden (en pas het ontwerp dan aan).

Usability zit ook in je bedrijf

Echter, met een goede website alleen red je het niet. Het focussen op de mens zal ook terug moeten komen in je bedrijf of organisatie. Denk bijvoorbeeld aan klachtafhandeling. Indien men klachten of vragen heeft, moet men bijvoorbeeld telefonisch makkelijk en snel toegang kunnen hebben tot antwoorden (die niet staan vermeld op de website). Ga dus serieus en adequaat om met je klanten. Emoties spelen namelijk ook een grote rol bij vertrouwen.

Hopelijk heb ik met dit artikel het belang van usability aan kunnen tonen. Kort gezegd gaat het om: de mens, de website en het vertrouwen. Als bedrijfzijnde heb je een website met één doel: je wilt er (direct of indirect) omzet mee genereren. Hiervoor heb je echter wel een website nodig die dit kan realiseren. Oftewel: de usability van de website moet goed zijn. Ik help u er graag mee.

De vraag die een tijdje geleden in mijzelf opkwam was: kan je een logo eigenlijk ‘gebruiksvriendelijk’ maken? Volgens Wikipedia “is iets gebruiksvriendelijk wanneer een beoogde eindgebruiker van een product, het effectief, efficiënt en naar tevredenheid kan gebruiken”. Per definitie kan een logo dus eigenlijk niet gebruiksvriendelijk zijn, aangezien er geen fysieke interactie plaatsvindt. Interactie is toch een belangrijke, al dan niet meest belangrijke, voorwaarde voor gebruiksvriendelijkheid (usability).

Praktijk voorbeelden

Of gaan we hier te kort door de bocht? Graag wil ik een aantal voorbeelden laten zien, waarbij usability naar mijn mening terugkomt in het logo.

Wat hebben deze afbeeldingen allemaal gemeen? Precies! Ze beelden allemaal (redelijk expliciet) hetgeen uit waar het bedrijf zich mee bezig houdt (of in welke branche het zich bevindt). Ik denk dat dit ook een bepaalde vorm van usability is. Hoewel men niet fysiek interacteert met een logo, vinden er wel bepaalde (cognitieve) processen plaats in de hersenen. Anders gezegd: het logo wordt op een bepaald niveau verwerkt. Wanneer de bedrijfsactiviteit wordt uitgebeeld in het logo, zal het logo denk ik veel meer zeggen (en dieper worden verwerkt in de hersenen). De kans bestaat dat men door het logo wordt ‘gepakt’ en er het bedrijf in gaat herkennen (oftewel: een sterke link leggen tussen bedrijfsnaam en bedrijfsactiviteit).

Voor en nadelen

Zoals bij alles in het leven zijn er voordelen en nadelen. De meest relevante voor- en nadelen van het gebruik van zo’n ‘gebruiksvriendelijk’ logo heb ik op een rijtje gezet.

Voordelen

• Duidelijkheid: geen slogan of tagline meer nodig om duidelijk te maken wat het bedrijf doet (of in welke branche het zit).
• Sneller link leggen: de bedrijfsactiviteit en de naam zullen sterker aan elkaar worden gekoppeld, doordat het dieper wordt verwerkt.
• Herkenning: een creatief en goed gevonden manier om de bedrijfsactiviteit uit te beelden in het logo, zal eerder bij mensen blijven hangen. Uiteraard cruciaal. Kom dus wel met iets unieks!

Nadelen

• Beperking: wanneer de bedrijfsactiviteiten uitgebreid worden, moet je je natuurlijk gaan afvragen in hoeverre het logo aangepast moet worden. Het aanpassen zal uiteraard geld kosten.
• Uniek zijn: zoals hierboven al is vermeld, moet het logo (uiteraard) uniek zijn, maar ook onderscheidend. Iets wat al 30 keer eerder is gebruikt, zal eerder verwarring dan duidelijkheid scheppen. Dit is dus een grote uitdaging voor de ontwerper.

Conclusie

Ik ben van mening dat een logo tot op een bepaalde hoogte ‘gebruiksvriendelijk’ kan zijn. Niet in de zin van fysieke interactie, maar meer in de zin van mentale interactie. Een aantal voordelen zijn: duidelijkheid, sterke link tussen bedrijfsnaam en bedrijfsactiviteit en herkenning. Nadelen zijn de beperkingen die het met zich meebrengt en de grote uitdaging om iets unieks neer te zetten (als ontwerper).

Moraal van dit verhaal: usability is meer dan alleen maar fysieke interactie.

Bron
Wikipedia

Wat zijn iconen?

Volgens Wikipedia is de definitie van een icoon: “Een teken dat in zijn vorm overeenkomt met zijn betekenis, datgene waarnaar het verwijst”. Simpel gezegd is het dus een afbeelding dat een woord vervangt. Tijdens het rijden maken we bijvoorbeeld gebruik van verkeersborden. Al deze borden hebben een bepaalde betekenis, wat je in principe ook in woorden zou kunnen uitdrukken.

Wat zijn de problemen

Het allergrootste probleem is uiteraard de interpretatie van het icoon. Veel voor de hand liggende iconen voor websites zijn er niet echt. Uiteraard kan je de knop ‘home’ vervangen door een icoon van een huis of een vergrootglas voor de zoekfunctie.

Een oorzaak waardoor interpretatie lastiger wordt, is het feit dat elke ontwerper zijn eigen iconen kan ontwerpen. Hierdoor wordt de algehele consistentie van icoongebruik op het internet verlaagd, wat tevens het tweede probleem is. Stel je voor wat voor chaos het wordt als elke gemeente haar eigen verkeersborden mag ontwerpen. Hetzelfde gebeurt nu eigenlijk op het internet. Elke ontwerper heeft namelijk zijn eigen mening en visie, waarbij de gebruiker soms vergeten wordt.

Hoe kan je ze oplossen

De meest voor de handliggende oplossing is uiteraard het vermijden van iconen. Gebruik woorden om zo duidelijk te maken wat er gebeurt als iemand erop klikt. Taal is iets universeels en staat, indien goed geformuleerd, niet open voor interpretatie. Doe hier je voordeel mee. Waarom zou je nog een keer het wiel uitvinden op het gebied van communicatie?

Ben je toch een liefhebber van iconen? Dan kan je ze ondersteunen door middel van een representatief woord. Je kan dit doen door een hover-state aan het icoon toe te voegen (indien het een menu-item is). Wanneer men dan met de muis over het icoon beweegt, komt er een woord tevoorschijn. Het nadeel is dat men dan wel eerst over het icoon heen moet gaan, voordat men weet waar deze naartoe linkt.

De website van Design For Fun heeft een unieke navigatie op de portfolio pagina. Door bovenin over de iconen te bewegen, verschijnt er links bovenin de categorie waarmee het correspondeert. Naar mijn mening niet gebruiksvriendelijk, maar wel creatief.

Een andere manier is het permanent zichtbaar maken van een representatief woord. Echter neemt dan de relevantie van het icoon af, omdat men toch geneigd is het woord te lezen. De website van DX Solutions maakt hier gebruik van. Persoonlijk vind ik het erg druk en vrij overbodig.

Conclusie

Als ik kort het bovenstaande samenvat, kunnen we het volgende concluderen: iconen hebben (vaak) een negatieve invloed op de usability van een website, omdat deze inconsistent over het internet worden gebruikt en dus erg open staan voor interpretatie. Voor gebruikers is het dan niet duidelijk wat er precies met het icoon wordt bedoelt.

De volgende oplossingen zijn mogelijk:

• Vervang het icoon door tekst;
• Voeg een hover-state aan het icoon toe, zodat duidelijk wordt wat ermee wordt bedoeld;
• Voeg permanent een representatief woord toe.

Moraal van dit verhaal: laat mensen niet denken over de betekenis van iets. Schep duidelijkheid.

Bron

• Wikipedia

Vandaar dat ik in dit artikel tips ga geven over het maken van een goede navigatie. Ik zal een aantal verschillende aspecten behandelen die meteen toepasbaar zijn in de praktijk.

Primaire en secundaire navigatie

Elke (goede) website bevat een primaire navigatie (een hoofdmenu). De primaire navigatie is, zoals de naam al doet vermoeden, de basis navigatie van je website. Via deze navigatie kan je elke pagina bereiken die er is. Denk bijvoorbeeld aan de homepage, de productenpagina, de ‘over ons’ pagina, de contactpagina enz.

De secundaire navigatie is eigenlijk een submenu. Via de secundaire navigatie kan je bij specifieke pagina’s terechtkomen. Denk bijvoorbeeld aan een pagina over de medewerkers van een bedrijf. Dit soort specifieke pagina’s zijn vaak te bereiken via het hoofdmenu-item ‘over ons’ en submenu-item ‘ons team’. De secundaire navigatie is dus een aanvulling op de primaire navigatie.

Het is uiteraard niet altijd nodig om naast de primaire navigatie ook een secundaire navigatie te hebben. De hoeveelheid informatiebepaalt de behoefte naar een secundaire navigatie.

Informatiestructuur

Voordat je begint met het maken van een website (en dus ook de navigatie) moet je bepalen wat er allemaal op de website moet komen. Zoals hierboven staat, hebben websites met een grote hoeveelheid informatie behoefte aan een secundaire navigatie. De reden hiervan is overzichtelijkheid en structuur. Wij, als menszijnde, vinden dit erg prettig.

Als we uitgaan van een grote website met veel informatie, moeten we de content gaan indelen in bepaalde hoofdcategorieën. De hoofdcategorieën moeten worden weergegeven in de primaire navigatie. Twee belangrijke punten:

• De benaming van een hoofdcategorie in de primaire navigatie moet representatief zijn voor de onderliggende pagina’s;
• De onderliggende pagina’s moeten ook daadwerkelijk allemaal in dezelfde hoofdcategorie thuishoren.

De beste manier om een degelijke informatiestructuur op te bouwen, is door een ‘cardsorting test’ te doen. Kort gezegd komt het hier op neer: je laat een aantal mensen de verschillende onderwerpen (die op kaartjes staan) indelen in van te voren vast gestelde hoofdcategorieën, of je laat een aantal mensen zelf hoofdcategorieën bij bepaalde onderwerpen verzinnen.

Deze manier van testen is zeer eenvoudig, goedkoop en levert belangrijke informatie: je komt te weten hoe andere mensen denken. Met deze kennis kan je dus inspelen op de verwachtingen van je bezoekers.

Visuele weergave

Wanneer je een erg uitgebreide informatiestructuur hebt, kan je ervoor kiezen om deze te visualiseren. Maak bijvoorbeeld een hiërarchische boomstructuur waarin je alle pagina’s neerzet. Hoofdcategorieën staan uiteraard bovenaan en subcategorieën eronder. Je kan dan meteen de onderlinge links tussen pagina’s weergeven door middel van verbindingslijnen. Zie hiernaast een simpel voorbeeld van een hiërarchische boomstructuur.

Plaatsing navigatie

Nadat je de informatiestructuur van de website hebt bepaald, moet je dit gaan verwerken in de website. Het belangrijkste is de plaatsing van het hoofdmenu en / of submenu.

Wij zijn gewend om het hoofdmenu bovenaan de pagina te vinden. Vaak staan de menu-items horizontaal weergegeven en rechts van (of onder) het logo. Neem als voorbeeld de site van Apple:

Een andere manier is een verticaal hoofdmenu. Je zet dan de menu-items onder elkaar aan de linkerkant van de website, aangezien wij van links naar rechts lezen. De website van Shell bevat een verticaal hoofdmenu:

Naast de primaire navigatie moet je uiteraard ook je secundaire navigatie ergens kwijt. Bij grote sites zie je veelal een verticaal submenu aan de linkerkant van de website. Zoals hierboven al is vermeld, lezen wij van links naar rechts (en bekijken wij websites dus ook van links naar rechts). Dit zorgt ervoor dat de navigatie meteen in het oog springt. Zie de website van BP:

Je kan ook kiezen voor een horizontaal submenu onder het horizontale hoofdmenu. Dit wordt bijvoorbeeld toegepast op de site van de Rabobank:

 Met deze verwachtingspatronen zul je rekening moeten houden (indien je een gebruiksvriendelijke website wilt). Wanneer men namelijk iets vindt waar men het verwacht, voldoe je aan het verwachtingspatroon. Dit heeft een positieve invloed op de ervaring van de gebruiker tijdens het bezoeken van je website. De bezoekers zijn dan meer tevreden (of minder gefrustreerd).

Volgorde van navigatie-items

De navigatie-items (vooral van een submenu) kan je op veel verschillende volgorden weergeven. Het kan alfabetisch, maar ook op volgorde van belangrijkheid. Kortom: er is niet echt een duidelijke ‘regel’ die bepaalt wat je moet doen.

De, naar mijn mening, enige consensus die er bestaat, is over de plaatsing van menu-items ‘home’, ‘contact’ en ‘over ons’ in de primaire navigatie. Meestal kom je ze op deze posities tegen:

• ‘Home’ is het eerste item;
• ‘Contact’ is het laatste item;
• ‘Over ons’ is meestal het tweede item (indien van toepassing).

Vooral aan de posities van de items ‘home’ en ‘contact’ is men min of meer gewend. Daarnaast is het gebruikelijk dat ook het logo naar de homepage linkt.

Conclusie

Wanneer we alles onder elkaar zetten, krijg je deze lijst met tips en advies:

• Maak een informatiestructuur met hoofdcategorieën, waarin je bepaalde onderwerpen kan onderverdelen;
• Zorg dat de benaming van hoofdcategorieën duidelijk en inhoudelijk representatief zijn;
• Maak eventueel een visualisatie van de informatiestructuur;
• Zorg ervoor dat je de primaire en secundaire navigatie plaatst op plekken waar men ze verwacht;
• Houd rekening met de volgorde van de navigatie-items: in de primaire navigatie is het gebruikelijk om ‘Home’ en ‘Contact’ respectievelijk als eerst en als laatst te plaatsen;
• Link het logo naar de homepage.

Hopelijk hebben jullie wat aan de tips. Als je zelf nog andere tips hebt, hoor ik het graag!

Wat is aandacht

Wat is de definitie van aandacht? Dat is lastig te zeggen, aangezien wij de term ‘aandacht’ voor erg veel dingen gebruiken. Hieronder een lijst met een zestal ‘soorten’ aandacht:

• Alertheid of opwinding
• Reflex of respons
• ‘Spotlight’ aandacht en zoeken
• Selectieve aandacht
• Mentale bron en bewuste verwerking
• Toeziend aandachtssysteem

De meest omvattende definitie is: aandacht is een mentale energie of bron die nodig is voor het voltooien van mentale processen en het wordt verondersteld dat de hoeveelheid beperkt is en onder controle staat van een executief controle mechanisme.

Concreet houdt dit in dat wij onze aandacht niet op teveel dingen tegelijk kunnen richten. We kunnen onze aandacht echter wel verdelen, maar dat gaat dan ten koste van de individuele prestaties. Probeer maar eens te rijden en te sms’en: je zal merken dat én je rijvaardigheden én je smsvaardigheden eronder lijden, simpelweg omdat je je aandacht moet verdelen. Overigens heb ik het zelf nog nooit geprobeerd en ben dat ook niet van plan.

Aandacht trekken of aandacht richten

Er bestaan twee verschillende manieren van het verwerken van informatie (waarbij aandacht een cruciale rol speelt). De eerste manier is bottom-up processing, waarbij onze aandacht door iets getrokken wordt. Een voorbeeld: je loopt op straat en hoort een harde knal rechts van je. Als reflex kijk je naar rechts en richt je daar dus je aandacht. Een andere manier is top-down processing, waarbij je zelf bepaalt waar je je aandacht op richt. Bijvoorbeeld: een bekende wijst naar iets en jij besluit ernaar te kijken.

Zicht

Wanneer wij naar een object kijken, vallen de lichtstralen van dat object precies op het gedeelte van ons oog waar wij scherp mee kunnen zien (waar veel kegeltjes zitten). De rest van ons gezichtsveld is niet scherp (het perifere zicht). Dit komt omdat hier weinig tot geen kegeltjes zitten, maar wel erg veel staafjes. Met deze staafjes detecteren wij vooral beweging.

Vanuit een evolutionair standpunt is dit goed te verklaren. We kunnen namelijk snel reageren op bijvoorbeeld een bewegende schim in onze ooghoeken. Tegenwoordig is dat waarschijnlijk geen roofdier, maar vroeger wellicht wel. We zijn dus onbewust alert en verspillen daar amper energie aan. Daarnaast wordt beweging ook nog sneller in onze hersenen verwerkt dan (bijvoorbeeld) kleur.

De praktijk

Een advertentiebanner is gemaakt om aandacht te trekken. Vaak staan deze banners op plaatsen waar men niet focust. Denk bijvoorbeeld aan advertenties naast content. Toch moeten ze aandacht trekken, maar hoe?

Het aller belangrijkste is beweging. Aangezien beweging vooral wordt waargenomen in ons perifere zicht zal een banner naast de content snel worden opgemerkt. Wanneer iemand eenmaal de aandacht erop heeft gevestigd, zal de bottom-up processing omgezet moeten worden in top-down processing. Men moet geboeid worden door de banner en er het liefst mee kunnen interacteren. In dit artikel door Serge Fenenko (Novocortex) staan nog een aantal andere goede tips met betrekking tot het maken van banners.

Hieronder een samenvatting van de meest praktische tips:

• Zorg dat de banner beweegt
• Zorg dat de banner interactief is
• Plaats de banner op relevante websites waar je doelgroep komt
• Zorg dat het adres van de website duidelijk zichtbaar is
• Laat je niet beperken op creatief en interactief gebied

Hopelijk hebben jullie wat aan de lijst en is het ook duidelijk waarom een goede banner beweegt. Ik weet dat mensen er (soms) gek van worden, maar daar zijn banners (helaas) voor gemaakt. Laten we het maar zo zeggen: een goede banner trekt aandacht wat irritant kan zijn, een slechte banner wordt niet opgemerkt en irriteert dus niet.

Bronnen

• 5 regels voor effectieve banner campagnes (2008) door: Serge Fenenko
• Cognition (4de editie, 2006) door: Ashcraft
• Physiology of Behavior (10de editie, 2009) door: Carlson

Aanleiding voor dit artikel zijn mijn persoonlijke ervaringen met websites van twee verschillende banken (privé en zakelijk heb ik bij verschillende banken ondergebracht). In dit artikel zal ik de websites van vier grote banken bespreken met betrekking tot internet bankieren. Aangezien ik niet op elke website kan inloggen, beperk ik mij tot de route naar het inloggedeelte.

Fortis

Een behoorlijke tijd geleden is de website van Fortis aangepast tot wat het nu is. Toen ik op een gegeven moment ‘even snel’ mijn rekening wilde bekijken, kwam ik erachter dat de link naar de inlogpagina voor internet bankieren verplaatst was. Ik heb een ruime tijd zitten zoeken, totdat ik uiteindelijk de link ‘Online Banking’ rechts in een blok zag staan.

Uiteindelijk toch gevonden en toen was het weer als vanouds. Je bent er namelijk nog niet! Je moet weer op zoek naar een link om nu definitief in te loggen. Is dit wel zo handig?

Rabobank

Toen ik voor het eerst op de Rabobank website kwam om te gaan internet bankieren, was ik positief verrast. Ik zette mij schrap op een zoektocht naar de inlogpagina, echter staat de link gewoon in het menu!

Naar mijn mening een enorm goede zet. Men is toch geneigd om eerst de primaire navigatie af te gaan, voordat men ergens anders gaat kijken. Wanneer je eenmaal op de link ‘Internetbankieren’ klikt, kan je direct beginnen met inloggen.

ING

Met deze website heb ik nog geen ervaring. Wanneer ik de website afspeur naar het inloggedeelte voor internet bankieren, kom ik erachter dat er helemaal geen link bestaat met de naam ‘Internet bankieren’. Na wat rond klikken, kom ik erachter dat ik de link ‘Inloggen Mijn ING’ moet hebben.

De positie van de link is niet verkeerd, echter had ik niet verwacht dat het ‘Inloggen Mijn ING’ zou heten. Ik associeer dit niet meteen met internet bankieren, maar eerder met een persoonlijke pagina waarop ik ‘van alles en nog wat’ kan doen. Eenmaal erop geklikt, kan je wel meteen beginnen met inloggen.

ABN Amro

Ook met deze website heb ik nog geen ervaring. Als ik het voor het eerst open, speur ik wederom de primaire navigatie af. Wederom vind ik hier niet hetgeen wat ik zou willen vinden. Wanneer ik naar de rechterbovenhoek kijk, zie ik als eerste ‘Inloggen Internet Bankieren’ staan. Als ik mijn ogen verder beweeg naar rechts, staat daaronder een blok met een grote knop ‘Inloggen’.

Het feit dat ik niet meteen deze inlogknop heb gevonden, heeft mede te maken met de breedte van mijn scherm. Als ik mijn scherm smaller maak, valt er een blok tussenuit, waardoor de knop ‘inloggen’ dichterbij de primaire navigatie terechtkomt. Kijk maar:

Wanneer mijn venster dus kleiner zou zijn geweest, zou de inlogknop meer zijn opgevallen.

Oordeel

Deze conclusie kan ik uiteraard niet geheel objectief geven, aangezien ik bekend ben met twee van de vier websites. Als ik echter objectieve afwegingen probeer te maken, kom ik op het volgende resultaat.

1. Rabobank
+ Link naar Inloggedeelte staat waar je het eerst zoekt

2. ABN Amro
+ Link naar inloggedeelte is niet geplaatst waar je het eerst zoekt, echter heeft het wel een afgebakende en onderscheidende positie gekregen (en nog een alternatieve link helemaal bovenaan de pagina)
- Bij bredere schermen valt de knop minder op, omdat de layout wordt gewijzigd

3. ING
+ Plaatsing inloggedeelte is niet verkeerd
- Naam van de link associeer ik alleen niet direct met internet bankieren

4. Fortis
- Link naar inloggedeelte staat niet waar je het verwacht en onderscheidt zich niet goed genoeg van de andere links
- Wanneer je erop klikt, moet je nogmaals op zoek naar een knop om daadwerkelijk te gaan inloggen.

Ik moet uiteraard vermelden dat je gewend raakt aan een website die je regelmatig bezoekt. Dat geldt dus ook voor deze websites. Het bovenstaande resultaat is dus meer gebaseerd op een ‘eerste indruk’. Waar verwacht ik iets te vinden als ik de website open?

Conclusie

De website van de Rabobank vind ik er met kop en schouders bovenuit steken (wat betreft internet bankieren). De tweede en derde plaatsen zijn lastiger toe te kennen. Toch vind ik dat de website van ABN Amro net iets duidelijker is waar ik op moet klikken als ik wil inloggen. ING verwoordt het naar mijn mening minder duidelijk. Fortis vind ik de minste van de vier. Naar mijn mening maakt Fortis het onnnodig ingewikkeld.

Moraal van dit verhaal: houd het simpel en zorg ervoor dat gebruikers snel en makkelijk toegang hebben tot veelbezochte pagina’s.

Op deze manier ga ik bekrachtigingschema’s behandelen. We beginnen met wat objectieve theorie en zullen het langzaamaan interpreteren en naar de praktijk vertalen. Als laatste zal ik in de conclusie kort mijn eigen mening over het onderwerp geven.

Conditioneren

Mensen en dieren kunnen worden geconditioneerd. Simpel gezegd is dat het aanleren (of afleren) van bepaald gedrag. Dit kan op twee manieren: klassiek conditioneren of operant conditioneren (ook wel instrumenteel conditioneren genoemd). Aangezien de theorie van klassiek conditioneren niet heel erg relevant is, zal ik dit niet verder uitwerken. Het operant conditioneren is meer van toepassing, vandaar dat ik dit kort zal toelichten.

Operant conditioneren

Er worden veel experimenten gedaan met dieren, waarin deze beloond worden voor het vertonen van bepaald gedrag. Neem als voorbeeld een kooi met een muis, een knop en een drinkbak. Wanneer de muis op de knop drukt (de respons), loopt er een beetje suikerwater in de drinkbak (de bekrachtiger). Naarmate de muis dit vaker doet, leert zij dat drukken op de knop leidt tot het krijgen van suikerwater. Dit is eigenlijk de essentie van operant conditioneren: het aanleren (of afleren) van bepaald gedrag door middel van belonen (of straffen).

Met deze opgedane kennis over operant conditioneren, zijn we in staat om een stap verder te gaan. We kennen in de psychologie namelijk vier soorten schema’s om bepaald gedrag te bekrachtigen. Ik zal ze aan de hand van voorbeelden uitleggen (de termen zal ik niet compleet vertalen naar het Nederlands, aangezien ik dat niet lekker vind klinken).

Fixed-ratio schema

Je kan het experiment met de muis zo aanpassen, dat de muis pas een beloning krijgt, wanneer ze drie keer op de knop heeft gedrukt. Als de muis dit eenmaal doorheeft, kan je je voorstellen dat de muis nu vaak op die knop gaat drukken. Simpelweg omdat zij niet meteen na de eerste druk een beloning krijgt. We noemen dit een fixed-ratio schema.

Variable-ratio schema

Bij een variable ratio schema komt de beloning pas na een willekeurig aantal responsen van de muis. Oftewel: de ene keer krijgt de muis een beloning als zij twee keer op de knop heeft gedrukt en de andere keer krijgt de muis een beloning als zij vijf keer op de knop heeft gedrukt. Dit betekent dat de muis vaker dan bij een fixed-ratio schema op de knop zal drukken, omdat ze niet weet wanneer ze een beloning krijgt.

Een wat minder abstract voorbeeld is een gokautomaat. Je weet nooit wanneer je wat wint, maar je weet dat het ooit zal gebeuren (waardoor je toch geld in de automaat blijft gooien).

Fixed-interval schema

De voorgaande twee schema’s zijn gebaseerd op het aantal responsen van de muis. Een fixed-interval schema is gebaseerd op tijd en dus niet op het aantal responsen. We gaan weer even terug naar de muis. Als we het fixed-interval schema toepassen, houdt dit in dat de eerste respons van de muis na een bepaald tijdsinterval (bijvoorbeeld twee minuten) beloond wordt. De responsen die gegeven worden tijdens het tijdsinterval, worden dus niet beloond.

Variable-interval schema

Als laatste hebben we de variable-interval schema. Dit schema werkt eigenlijk hetzelfde als een fixed-interval schema, echter is het tijdsinterval variabel (en dus elke keer anders).

De praktijk

Het is tijd om deze theorie naar de praktijk te vertalen. Ik, als bezoekerzijnde van een blog, kan geen invloed uitoefenen op het tijdstip waarop een artikel wordt gepubliceerd. Dit houdt in dat de eerste twee bekrachtigingschema’s niet meer relevant zijn. Immers, of ik nou één keer per dag de site bezoek of 20 keer, een artikel zal er niet sneller door worden gepubliceerd.

Met dit gezegd te hebben, houden we dus nog twee bekrachtigingschema’s over. Wanneer je een blog bezit, kan je ervoor kiezen om op vaste dagen en tijdstippen een artikel te publiceren (fixed-interval schema).

Voordelen fixed-interval schema:

• Mensen weten waar ze aan toe zijn en wanneer ze je website moeten bezoeken;
• Het creëert een soort structuur, waardoor het geheel als ‘geordend’ kan worden opgevat.

Nadelen fixed-interval schema:

• Mensen weten ook wanneer ze de website juist niet moeten bezoeken, aangezien dat toch niet tot bekrachtiging leidt. Hierdoor kan je eventuele advertentie-inkomsten mislopen;
• Als beheerder van het blog moet je blijven voldoen aan een verwachtingspatroon dat (wellicht onbewust) is ontstaan;
• Wanneer iets niet op tijd is gepubliceerd, heeft men iets om over te klagen (en je weet hoe Nederlanders zijn).

Als eigenaar van een blog kan je er ook voor kiezen om een variable-interval schema te hanteren. Je publiceert artikelen dan op willekeurige momenten.

Voordelen variable-interval schema:

• Mensen zullen vaker je site bezoeken om te kijken of er al iets nieuws op staat;
• Meer bezoekers betekent meer kans dat men op een advertentie klikt of iets anders interessants tegenkomt (en dus wellicht onbedoeld blijft ‘hangen’);
• Mensen worden meer verrast wanneer er daadwerkelijk iets nieuws is gepubliceerd.

Nadelen variable-interval schema:

• Aangezien er geen verwachtingspatroon is, kan het als gebruikerzijnde ongestructureerd overkomen (en mensen prefereren toch structuur boven chaos);
• Als schrijverzijnde heb je wellicht discipline en motivatie nodig om iets te publiceren. Wanneer er geen druk achter zit, kan het een hele tijd duren voordat iets af is en gepubliceerd kan worden;
• Wanneer er teveel tijd tussen publicaties zit, kunnen mensen het vertrouwen opgeven. Ze worden niet vaak genoeg beloond, waardoor ze kunnen afhaken en je site dus niet meer regelmatig bezoeken;

Volgens mij heb ik de meest belangrijke voor- en nadelen opgesomd. Met veel dingen kan je niet zeggen dat het één beter is dan het ander. Ook hier kan dat denk ik niet.

Het beste is volgens mij een combinatie van de twee bekrachtigingschema’s. Hoewel dit theoretisch wellicht niet kan, kan het wel prima worden ingevoerd in de praktijk. Publiceer bijvoorbeeld op vaste dagen artikelen over vaste thema’s. Op deze manier creëer je structuur. De andere dagen kan je gebruiken om je bezoekers te verrassen met niet-aangekondigde artikelen. Zo creëer je denk ik de beste balans. Heb jij een andere visie? Plaats het in een reactie hieronder!

Bron: Psychology (7de editie, 2007) door: Gleitman, Reisberg & Gross