Mobiel design: navigatie-icoontjes, handig of niet?

Je ziet ze tegenwoordig overal, drie horizontale streepjes als icoontje voor het menu bij mobiel design. Eerst in apps. Daarna in mobiele sites en tegenwoordig ook in responsive sites. De gedachte achter dit icoontje met de bijnaam ‘hamburger’ is, zoals bij de meeste icoontjes, ruimtebesparing. ‘A picture tells a thousand words’, niet waar? Om dezelfde reden verstoppen we het zoekveld achter een vergrootglas icoontje en de locatie achter een omgekeerde traan. Maar is dit wel verstandig?

Lees ook deze interessante discussie via Twitter tussen een aantal bekende mobiele ontwerpers over het hamburger icoontje.

User tests

Toen wij ongeveer een jaar geleden onze site responsive maakten, hadden we in het eerste ontwerp van de smartphone view ook een hamburger geplaatst. Uit testen bleek echter dat veel gebruikers het menu helemaal over het hoofd zagen. Daarom hebben we het woord ‘menu’ ernaast gezet en het probleem was opgelost. Visueel minder fraai, maar wel veel effectiever.

Onderzoek

Nu moeten we zelfs overwegen om de hamburger met het woord menu helemaal te vervangen door het woord ‘menu’ met een kader eromheen die een knop suggereert. Althans, dat blijkt uit dit interessante onderzoek van James Foster. Hij deed gedurende vijf dagen een test met in totaal zo’n 50.000 mobiele bezoekers. En daaruit kwam naar voren dat het knopje met het woord ‘menu’ erin het beste converteert.

Vergrootglas

Blijkbaar duurt het langer dan veel ontwerpers denken voordat de meeste mensen een icoontje snappen. Een ander voorbeeld is het vergrootglas icoontje dat op veel mobiele en responsive websites de traditionele search box vervangt. Dit icoontje is al veel beter ingeburgerd dan de hambuger. Zo blijkt uit een onderzoek van de Nielsen Norman Group dat het vergrootglas icoontje voor de zoekfunctie wel goed werkt, mits het aan bepaalde voorwaarden voldoet.

Invoerveld

De meeste mensen herkennen wel het vergrootglas icoontje, maar uit tests blijkt dat een icoontje zonder invoerveld veel minder makkelijk wordt gevonden. Zeker als het direct naast een heel rijtje andere icoontjes staat, bijvoorbeeld social media-icoontjes. Combineer het vergrootglas-icoontje daarom als het even kan met een invoerveld. Bij een responsive design is bij de kleinste views wellicht geen ruimte voor een invoerveld. Dan is het wel zaak dat deze bij de grotere views alsnog wordt getoond.

Klikbaar

Veel mensen klikken op het vergrootglas icoontje om hun zoekopdracht te verzenden. Zorg er daarom voor dat wanneer de bezoeker op het icoontje klikt, de zoekopdracht ook daadwerkelijk wordt verzonden.

Overige aanbevelingen

Plaats het icoontje en het invoerveld rechts bovenin. Dat is waar bezoekers het verwachten. Van deze conventie afwijken maakt het gebruik van een website onnodig moeilijk. Lees ook deze 11 aanbevelingen voor het ontwerpen met een vergrootglas icoontje.

Conventies

Het is sowieso een goed idee om zoveel mogelijk conventies aan te houden. Zeker bij mobiele ontwerpen, omdat dit voor veel gebruikers al snel te ingewikkeld wordt. Conventies ontstaan doordat de meeste ontwerpers bepaalde elementen herkenbaar maken en op een vaste plek zetten, waar iedereen het vervolgens verwacht. Om van dergelijke conventies af te wijken komt wel eigenzinnig over, maar het kost vrijwel altijd conversies.

Voorbeelden conventies:

• Logo linksboven en klikbaar naar homepage.
• Zoekscherm rechtsboven.
• Winkelwagentje rechtsboven.
• Een link is blauw en onderstreept. Inmiddels vervangen door ‘een link contrasteert sterk met de overige tekst’. Tekst dat geen link is onderstrepen blijft wel ‘fout’.
• ‘Bread crumbs’ staan bovenaan de content van een pagina, vaak in een kleiner font met en soort pijltje tussen de ‘lagen’.

Links of rechts?

Voor het hamburger-icoontje is de conventie nog niet helemaal duidelijk. Een deel van de ontwerpers zweert bij linksboven. Een ander deel juist bij rechtsboven. Wel lijken hier conventies te ontstaan op het niveau van operating systeem: iOS linksboven, Android rechtsboven. Wat is nu wijsheid?

Clean desktop

De laatste tijd zien we ook steeds meer dat responsive websites ook in de desktop view scherm zo rustig mogelijk te maken. Maar dat is nog geen reden om dit voorbeeld voor elke website te volgen. Dat hangt helemaal af van de mate waarin de bezoekers van een website al zo ver zijn.

En nu?

Wat heb ik aan deze informatie voor de website van mijn organisatie? Dat vraag je je wellicht af. Iets om over na te denken en vooral iets om mee te testen. Want al kun je uit de hierboven beschreven onderzoeken best concluderen dat je bepaalde icoontjes zus of zo het beste kunt gebruiken, voor het mobile design van een bepaalde website kan het toch anders zijn. Ons advies is dan ook om ermee te testen. Doe hetzelfde als James Foster en experimenteer met verschillende opties.