User Experience (UX) Design – Het hoofdmenu
De Ervaring van de Gebruiker – User Experience Design – als leidraad voor je website.
Je kent vast het spreekwoord wel ‘You have Only Once Chance to make a first impression’. En eerlijk gezegd, dat is stierenpoep. De gemiddelde online consument heeft het geheugen van een goudvis. Wanneer je vandaag faalt om een goede indruk te maken, en je klant komt morgen op een website die totaal ‘redesigned or realigned’ is, dan merkt hij het verschil niet. Het voordeel van het niet maken van indruk met je website, is dat je ook zo weer vergeten bent.
Een website waar je wel indruk mee maakt, wordt echter niet zo snel vergeten. Zolang jij maar niet vergeet, dat er twee manieren zijn om een indruk te maken. Een goede en een slechte. Alles wat daar tussenin zit, telt niet echt mee.
Hoe het kan, moet, en altijd zou moeten gebeuren
In een serie van artikelen in mijn blog, wil ik eens samen met je kijken welke elementen deel uitmaken van en goede ‘User Experience’. En per blogartikel gaan we kijken naar één heel specifiek element. En vandaag nemen we het meest geklikte onderdeel onderhanden: Het hoofdmenu.
Op het moment, dat een gebruiker heeft gekeken naar je website is hij in ieder geval al geconfronteerd met in ieder geval één element van je ontwerp. De kleurstelling. En geloof mij of niet… Nog voor een letter gelezen te hebben, heeft jouw bezoeker al een (voor)oordeel over jouw website. Zorg er in ieder geval voor, dat jouw kleurstelling past bij de boodschap die je uit wilt dragen. Maar uitgaand van de ‘juiste kleuren’ voor je doelgroep nemen we even aan, dat jouw bezoeker blij verrast is met jouw website. Hoera! De klaant is klaar voor communicatie. Het enige wat we nu nog nodig hebben is het juiste gespreksonderwerp.
De letter F
De letter F is in het Engels het begin van zowel de ‘Frequently Asked Questions’ als van een tweetal woorden, wat je liever niet hoort, wanneer mensen je site bezoeken. Toch is de letter ‘F’ belangrijker dan je direct zou vermoeden, omdat onderzoeken hebben bewezen, dat de meeste mensen (culturen met een ‘rechts naar links’ schrift vormen een uitzondering) een webpagina bekijken in de vorm van een letter ‘F’. Twee scans van links naar rechts, en één van beneden naar boven.
Dat is een reden, dat ik in mijn e-boek uit 2011 (Verleid je Klant) aangeeft, dat je belangrijkste content links op de pagina moet staan. Dat is wat je bezoeker het eerst op zou vallen. Helaas was ik toen nog niet op de hoogte van een onderzoek uit 2012 (tijdreizen is niet één van mijn vaardigheden) waaruit zou blijken, dat de content links zo belangrijk is, dat het ook afleidt.
Deze letter ‘F’ was bij IBM al bekend in de 80-er jaren van de vorige eeuw. Dat was één van de redenen, dat IBM samen met een onbetekenend bedrijfje (Microsoft) in zee ging om een nieuwe grafische user interface te ontwikkelen. In 1987 besloot IBM zelfs om hier onder de naam ‘Common User Access’ (CUA) een standaard over te publiceren. Eén van de revolutionaire onderdelen van deze user interface was een menu ‘boven aan het scherm’ met uitklapbare ‘boxen’. IBM en Microsoft hadden afgesproken, dat IBM dit zou ontwikkelen voor hun eigen hardware platform onder de naam OS/2… en Microsoft mocht dit gebruiken op alle andere hardware platforms onder de naam ‘Windows’. Wanneer je ouder dan 45 bent ken je waarschijnlijk beide namen. Ben je jonger, komt de naam ‘Windows’ je wellicht bekend voor.
HTML – ‘Nog niet’
Toen in de 90-er jaren van de vorige eeuw HTML populair begon te worden en het World Wide Web letterlijk explodeerde, ondersteunde HTML de CUA standaards ‘half’. De interface elementen voor formulieren waren exact geïmplementeerd volgens de CUA standaarden, maar het belangrijkste onderdeel, het ’top menu’ was technisch (nog) onmogelijk in HTML.
Rond de eeuwwisseling kwam er ineens ‘DHTML’, ofwel ‘Dynamic HTML’. Dit was helaas een modekreet en geen standaard. DHTML was de laatste poging van Microsoft om een leidende rol te kunnen spelen op het gebied van web development. Een dappere poging overigens, omdat DHTML de enige ‘standaard’ (die alleen werkte met Internet Explorer 3+ en Windows) was, die de ’top menu’s’ ondersteunde.
HTML… van 4 tot X
HTML heeft heel wat standaarden gehad. In het begin van de 90-er jaren ‘stapte ik in’ met de 2.01 standaard. Je wilt niet weten hoe -letterlijk- grijs je pagina’s er toen uit zouden hebben gezien. Maar tot en met de XHTML 1.0 standaard (die kwam na de 4.x standaard) is HTML helaas totaal ongeschikt gebleken voor een ’top menu’. Er waren JavaScript implementaties, die dit mogelijk maakten, maar standaardisatie hierin was ver te zoeken. Tot HTML 5.
HTML 5
‘In den Beginne sprak de Schepper: ‘Laat er licht zijn’. En er was licht.
Allereerst mijn excuses ten aanzien van al die mensen die geloven binnen de Joods-Christelijke traditie… en ten aanzien van iedereen die dat niet doet. Maar soms in je leven is er een moment, waarop je het gevoel hebt dat alles op een bepaald gebied samen komt. En voor mij was dit het moment dat HTML5 en CSS3 serieus genomen werden. En eindelijk een moment, waarop ook het ’top menu’ serieus werd genomen. Laten we hier eens verder naar kijken.
Sinds HTML5…
Sinds HTML5 tot een standaard is verheven, moet je wel een geweldige reputatie, of een enorm bord voor je kop hebben, wanneer je niet je belangrijkste menu boven aan de pagina wilt plaatsen. Vanaf 2012 weten we al, dat een menu ‘links’ er voor zorgt, dat de bezoekers minder aandacht hebben voor onze belangrijkste content en dat een menu ‘rechts’ mogelijk niet eens op zal vallen.
Mensen proberen alles te plaatsen in de voor hen meest bekende context. En zowel de gebruikers van Windows, MacOS en grafische versies van Linux zijn gewend hun belangrijkste menu’s boven aan de pagina’s te zien. Waarom zouden we ons webmenu daar dan ook niet plaatsen?. Waarschijnlijk is dit ook voor jou de meest logische plaats waar je het zou zoeken.
Het is echter niet alleen zo, dat we het menu boven in de pagina verwachten, we verwachten ook bepaalde zaken in dit menu op bepaalde plaatsen. Waar verwacht jij het? Ik daag je uit om onderstaande mini-enquête in te vullen voor je verder leest.
Waar zou jij als eerste op een pagina kijken, wanneer je op zoek bent naar één van de onderstaande pagina’s?
[gravityforms id=78 title=”false” description=”false”]
We zijn gewend het meest belangrijke links en het minder belangrijke rechts te zoeken. Dat is bijvoorbeeld de reden, dat vrijwel iedere website met ‘Home’ begint, we willen vaak terug naar ons vertrekpunt. Maar waarom staat dan bijvoorbeeld ‘Blog’ rechts? Vinden we de blog dan onbelangrijk?
Dit heeft vooral een historische reden. We vonden vroeger de blog inderdaad minder belangrijk. Het was bovendien vaak iets wat later ‘nog even’ aan de site werd toegevoegd. Omdat in het begin ‘Blog’ altijd ver naar rechts stond, is dat nu de plaats waar we het meestal verwachten.
Zaken als ‘Privacy’, ‘Cookie’ statements en ‘Algemene voorwaarden’ zetten we onder aan de pagina. Om een tweetal redenen. De eerste reden, is dat we het hoofdmenu niet willen overladen. De tweede reden is, omdat onze bezoekers dit vaak ook werkelijk minder belangrijk vinden.
Door goed stil te staan bij hoe de bezoeker zoekt naar zaken op de site, kunnen we zijn ervaring met onze websites verbeteren.
In toekomstige artikelen ga ik in op andere delen van het User Experience Design.
Op zoek naar een website met intuitive navigatie? Neem dan eens contact op over een WordPress XPress website.
Nog niet uitgelezen?
Vind je dit artikel interessant? Mooi! Want ik heb nog veel meer te bieden. Op deze site vind je letterlijke honderden artikelen over WordPress, marketing, e-commers, e-learning en nog veel meer onderwerpen. Op zoek naar meer informatie? Kies één van de trefwoorden hieronder of tik een zoekopdracht in.
