Verdieping

Waarom een megamenu op je website averechts werkt

0

Op dit moment zit ik midden in een SCRUM-project met een grote klant van ons. We gaan een belangrijk onderdeel compleet anders aanpakken: de megamenu’s. Die verwijderen we. Een megamenu is een zeer groot menu en verwijst naar verschillende niveau’s in de website­structuur.

Je ziet ze zo nu en dan als je de navigatiebalk van een website gebruikt. Webshops als de Bijenkorf en Zalando gebruiken het. Een aantal klanten en ontwerpers vinden het geweldig: Kan ik lekker snel naar dieper gelegen webpagina’s komen. En dat is nou precies de verkeerde gedachte, het is namelijk niet de gedachte van de gebruiker. De gebruiker wil in de eerste plaats zekerheid, daarna pas snelheid.

Megamenu is inflexibel

Een megamenu beperkt de gebruiker om tot een keuze te komen, want content heeft namelijk meerdere dimensies. Zo heeft een product bijvoorbeeld een prijs, een merk en een onderwerp. Omdat een megamenu maar één dimensie kent en in het uiterste geval twee, ben je als gebruiker verplicht een keuze te maken tussen zaken die de website belangrijk vindt.

Bol.com forceert de gebruiker eerst een taal te kiezen. Helaas interesseert de gebruiker die taal helemaal niet. Ik wil een nieuw boek over usability vinden en of dat nou Engels of Nederlands is, dat maakt me niet uit. Het gevolg is dat ik bij Bol.com niet verder kan en vertrek ik naar een andere website om er achter te komen wat de nieuwste boeken over usability zijn.

Megamenu van Bol.com

Megamenu van Bol.com

Ondersteun keuzes waar de gebruiker op dat moment behoefte aan heeft. In het geval van Bol.com zou het veel beter zijn om de gebruiker direct naar een pagina te leiden waar hij zelf kan kiezen waarop hij boeken filtert. Het beperken van dimensies is in dit geval valse eenvoud.

Megamenu creëert onzekerheid

Usabilityonderzoek van User Interface Engineering laat zien dat gebruikers onzeker worden zodra de website hun beslissing, de keuze van menu-item, niet direct accepteert maar verder uitbreidt met een menu. De respons van de website komt niet overeen met het gedachtepatroon van de gebruiker.

Designers use interactive design elements, such as fly outs, rollovers, and dropdowns, to conserve space, make the screen less cluttered, and enhance the users’ experience. We were surprised when users succeeded more often when they didn’t encounter these design elements than when they did. […]

In our studies, we observed that once users realized there was more information available to them, they stopped and re-evaluated the screen. Users seemed disoriented by this disruption in activity and they lost confidence that they were clicking in the right places. The users now questioned a choice that seemed to be a good one earlier. Erik Ojakaar, 2001, User Decide First; Move second

Uit onderzoek van IBM blijkt zelfs dat het gebruik van een onderdeel binnen een website met maar liefst 219% toeneemt zodra de megamenu’s zijn vervangen met overzichten op onderliggende ‘landingspagina’s’.

Te weinig ruimte voor aanraakschermen

Een ontwerper plaatst het liefst zoveel mogelijk keuzes in een megamenu, met het idee dat het zonde zou zijn als de gebruiker de juiste keuze mist en vertrekt. Megamenu’s zullen veel groter worden als je je realiseert dat knoppen in megamenu’s nu vaak 20 of 25 punten hoog zijn en dat dit naar 40 punten hoog gaat voor aanraak­schermen. Megamenu’s worden dan al snel onhandelbare reuzen.

Megamenu’s werken niet in adaptieve user interfaces

Op een klein scherm van een mobiel gaat content altijd voor navigatie. Zodra een bezoeker een pagina op zijn mobiel bekijkt, heeft hij geen zin om eerst de navigatie weg te scrollen voordat hij de content mag lezen.

As a general rule, content takes precedence over navigation on mobile. Whether people are checking on frequently updated data like stocks, news, or scores; looking up local information; or finding their way to articles through search or communication tools — they want immediate answers to their needs and not your site map. Luke Wroblewski, 2011, Mobile First, p52.

Met als gevolg dat het complete menu verborgen is achter een knop ‘menu’. Door de structuur als content op een landingspagina te plaatsen, creëer je directe zichtbaarheid van je categorieën en hoef je er niet meer bang voor te zijn dat bezoekers de menu-knop, rechtsboven, vergeten te gebruiken. Die knop is nu niet meer nodig voor de hoofdcategorieën in je website.

Toch megamenu’s? Activeer het menu met een klik

Een goede landingspagina is verstandiger dan megamenu’s. Ligt het inzetten van een goede landingspagina buiten je macht en wil je toch megamenu’s gebruiken? Zorg er dan voor dat de website megamenu’s pas activeert zodra de gebruiker er op klikt en niet met een hover: dus niet wanneer de muis enkel eroverheen gaat.

De gebruiker navigeert het liefst in één lijn naar zijn doel. In die beweging komt de muis zoveel verschillende elementen tegen. De gebruiker zou er gek van worden als er elke keer iets gebeurt zodra hij met zijn muis beweegt. Niet alleen dat, er bestaat ook de kans dat een element, dat tevoorschijn komt, zijn oorspronkelijke doel overlapt. Met als gevolg dat de gebruiker misklikt en geïrriteerd raakt. De website forceert de gebruiker om met zijn muis rare capriolen uit te voeren. Maar de gebruiker heeft helemaal geen zin in het ‘wire‑loop spel‘.

Als ontwerper kan je het effect van een hover moeilijk inschatten. De oplossing is om een nieuwe functionaliteit pas te tonen zodra de gebruiker er op klikt. Een alternatief is een vertraging inbouwen van 0,5 seconden. De gebruiker moet dan met zijn muis iets langer boven een element staan voordat er iets gebeurt.

Voor submenu’s is er ook nog andere oplossing, namelijk het analyseren van de hoek waaronder de gebruiker zijn muis beweegt en waarop andere hovers dan niet mogen reageren.

Submenu in OS X.

Submenu in OS X.

Het blijft een lapmiddel. Het is veel gebruiks­vriendelijker om geen megamenu’s in te zetten voor je belangrijke navigatie.