Beeld UX-design cath
Door

UX-design van mobiele menu’s

Als UX-designer gaat mijn werk verder dan het ontwerpen van aantrekkelijke pagina’s. Er zijn twee belangrijke extra dimensies ten opzichte van good ol’ drukwerk: interactie met de gebruiker (user experience; UX) en responsiveness (toegankelijk voor alle schermformaten). In deze blog zoom ik specifiek in op het UX design van mobiele menu’s voor websites.

Het was even graven… Hoe deden we het ook alweer in 2009? Toen websites opeens ook voor mobiel toegankelijk moesten worden bleek dat het menu van je desktop niet paste binnen die 320 pixels. De oplossing was simpel: bovenin naast het logo kwam een button ‘menu’. Dezelfde soort button die je ook gebruikte voor bijvoorbeeld het versturen van een formulier.

Die fase is gelukkig voorbij. We zijn nu aangekomen in het tijdperk van de hamburgers. Het icoon is strak gestyled en neemt weinig ruimte in. Je kunt fijne micro-animaties toepassen wanneer de hamburger naar een kruisje transformeert bij het openklappen. Dat draagt bij aan een positieve en soepele gebruikerservaring.

En nu? Waar gaat het heen? Tegenwoordig proberen we waar mogelijk al content te laten zien en niet alles te verstoppen achter een hamburgericoon. Deze ontwikkeling wordt gevoed door allerlei apps. Zo heeft de iStore app zijn menu bijvoorbeeld onderin staan. Niet als hamburger, maar als vijf losse knoppen waardoor je direct je keuze kunt maken.

Wil je toch een hamburgermenu gebruiken omdat je bijvoorbeeld veel menu-items hebt of een ingewikkeld gelaagde website bouwt? Bedenk dan of je het woordje ‘menu’ toevoegt of niet. Uit onderzoek is gebleken dat nog niet iedereen het icoon kent (jaja, anno 2017). Als juist die bezoekers jouw product willen afnemen loop je ze mis!

 

Ik vind het fantastisch om m’n hoofd te breken over dit soort vraagstukken.

Waar en wanneer zie je het menu?

Los van de vorm en de inhoud denk je na over de plaats (boven- of onderaan het beeldscherm) en de zichtbaarheid van het menu. Als je op een pagina naar beneden scrolt vind ik het fijn als je menu uit beeld scrolt. Daardoor krijgt de content van de pagina optimaal de ruimte. Als ik vervolgens een klein stukje omhoog scrol, mag het menu wel in beeld komen bovenaan mijn scherm. Zo hoef ik niet helemaal naar boven te scrollen op een pagina om bij het menu te kunnen.

Microcopy

Een open deur: bedenk goede termen voor de menu-items. Je bezoeker moet meteen weten waar hij naartoe gaat. In het menu van een ziekenhuis staan bijvoorbeeld de items home, ziekenhuis en over ons. Die laatste twee zouden inhoudelijk dezelfde informatie kunnen bevatten. Als je ziekenhuis verandert in bezoekersinformatie dekt de term de inhoud goed en heb je een duidelijk onderscheid.

Naast de juiste termen kun je gebruik maken van iconen bij je menu-items. Bedenk of het toegevoegde waarde heeft, of alle termen in iconen zijn te vertalen, of de doelgroep ermee geholpen wordt, etc.

Hoort ‘home’ in je menu?

Net als de onwetendheid over het hamburgermenu weet nog niet iedereen dat een logo  linkt naar de homepage. Speciaal voor die paar bezoekers adviseer ik je daarom om home in het menu op te nemen. Als een gebruiker de homepage niet kan vinden wordt een website meteen als minder gebruiksvriendelijk ervaren. Wil je home er toch graag uit laten? Doe een A/B-test en vergelijk de resultaten.

Hoe gaan wij hiermee om?

Zoals het bij de loodgieter lekt, blijven we bij onze eigen website ook voortdurend in ontwikkeling. Wat ik hierboven beschrijf vind je (inderdaad) niet allemaal terug op enof.nl. Wel kan ik je een aantal voorbeelden laten zien van websites die we hebben gemaakt voor onze klanten (bekijk ze dus op je mobiel!):

  • Het nieuwsgedeelte van Centraal beheer APF heeft een submenu met iconen dat je op mobiel kunt swipen om meer items te zien.
  • Het menu van belangrijkekeuzes.nl (zie afbeelding) is losgetrokken in een homeknop en een dropdown met de titel keuzes. Je ziet meteen welke opties je hebt, het scheelt één klik.

Vraag, test, onderzoek, lees, discussieer en probeer

Ik vind het fantastisch om m’n hoofd te breken over dit soort vraagstukken. Soms ontwerp ik 5 verschillende menu’s voordat het ‘klikt’. Jan (UX-expert) en ik werken veel samen, dat is feestje door het snelle schakelen en het uitwisselen van gedachtegangen; erg leerzaam. Ook met de developers heb ik een nauwe samenwerking; samen kijken of nieuwe oplossingen en inzichten uitvoerbaar zijn. En alle andere enoffers kan ik als testers gebruiken om te zien of ze hun weg kunnen vinden in mijn ontwerp.

Kortom, UX design is al een user experience tijdens de allereerste fase van het creëren van een website. En… blijf A/B-testen, want er verandert zo veel en dat gebeurt in een rap tempo!