Mobiele website: do’s & don’ts voor uw categoriemenu

Bij een mobiele website staat u voor de uitdaging om veel content op een klein oppervlak te plaatsen, maar waarbij de site wel op zo’n manier gepresenteerd moet worden dat die intuïtief is voor een gebruiker om doorheen te navigeren.

Een opkomende trend bij mobiele webshops is het gebruik van een ‘3-bar icon’ voor het presenteren van een categoriemenu dat uitklapbaar is. Handig, maar het is hierbij wel belangrijk dat u het icoon op een juiste manier presenteert en toepast op uw site, stelt Linda Bustos op Getelastic.com.

Do: vertel de bezoeker waar te beginnen
Buckle identificeert nieuwe bezoekers en vestigt de aandacht op de menuknop. Zelfs als bezoekers geen idee hebben waar het icoontje met de drie balkjes voor is, weten ze wel dat het de juiste plek is om te starten en zullen ze snel ontdekken dat het icoon de categorienavigatie voorstelt.


Don’t: het icoontje verwarren met uw logo
Ondanks de groeiende populariteit van mobiel zijn internetgebruikers zo getraind met en door desktopsites dat ze ervan uitgaan dat linksboven het ‘logogrondgebied’ is. Het tonen van een 3 balken icoontje aan de linkerkant van uw logo is daarom af te raden. Hoe moeten nieuwe bezoekers op Discount DanceSupply immers weten dat het icoontje niet bij het logo hoort maar dat het als navigatie dient?

De navigatiebuttons aan de rechterkant van het logo van Forever 21 zijn eenvoudig te begrijpen, maar het 3 balken icoontje aan de linkerkant van het logo is een niet duidelijk klikbaar element.


Hetzelfde geldt , tot slot, voor Spanx:


Don’t: het icoontje helemaal los laten staan
Eye-tracking-onderzoeken tonen veelal aan dat consumenten zich vooral richten op afbeeldingen bij het scannen van een website, het mysterieuze icoontje met de drie balkjes bij het voorbeeld hieronder zal minder opvallen. Het plaatsen van dit icoontje helemaal rechts en los van andere elementen kan dus net zo nadelig werken als het plaatsen van het icoontje aan de linkerkant van een logo.


Do: groepeer uw categorie-icoon met andere navigatie-elementen
Het icoontje van Softchoice wordt getoond als onderdeel van het navigatiemenu, waardoor het eenvoudig te identificeren is en actiegericht werkt.


Alternatief: Lowe’s koppelt het 3 balken icoontje aan het zoekicoontje.


Onthoud de ‘desktop web conventions’ bij het bepalen van de volgorde van uw pictogrammen. eBags toont het icoon met de drie balkjes rechtsboven, waar meestal het pictogram om in te loggen en het winkelwagentje worden getoond. Het kan daarom handiger zijn het icoontje aan de linkerkant van de account- en winkelwagenpictogrammen te plaatsen of te groeperen met het zoekbalkje.


Green Mountain heeft het icoontje gekoppeld aan de zoekbalk, maar het is gebruikelijker - en het kan daardoor intuïtiever werken - om het icoontje aan de linkerkant te plaatsen.

Do: label uw icoon
Het benoemen van uw pictogrammen verduidelijkt de werking ervan helemaal voor de gebruiker. Zo heeft CVS het icoon met de drie balkjes betiteld met: ‘Menu’.


Als u dit te druk vindt, kunt u de drie balken – totdat consumenten er beter bekend mee zijn - ook helemaal weglaten en de button enkel benoemen met ‘Menu’.


Het plustekentje op de menubutton bij Ross Simons toont aan dat het icoontje uitklapt door erop te klikken:


Het pictogram met het winkelmandje van Ross Simons kan overigens wel worden verward met het logo, aangezien het pictogram te veel opgaat in het logo. Zo ziet u maar: iedere navigatiebutton kan over het hoofd worden gezien als die niet goed is vormgegeven. A/B-testen kunnen u vertellen welk ontwerp wel en welk ontwerp niet werkt.

Bron: Getelastic.com