Update: Mobiele trends 2019

Hou jij van hamburgers? De bezoekers van je website misschien niet. Je ziet ze tegenwoordig overal, drie horizontale streepjes als icoontje voor het menu bij mobile design. Eerst in apps. Daarna in mobiele sites en tegenwoordig ook in responsive sites.

De gedachte achter de 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 user tests 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 5 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.

opties mobiele menu mediaweb

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 je aan bepaalde voorwaarden voldoet.

Invoerveld

De meeste mensen herkennen wel het vergrootglas icoontje, maar uit user tests blijkt dat als je alleen het icoontje gebruikt, mensen het veel minder makkelijk kunnen vinden. 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. Als je in een responsive website bij de kleinste views er toch voor kiest om alleen het icoontje te tonen, zorg er dan wel voor dat je bij de grotere views alsnog het invoerveld weer toont.

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 je website onnodig moeilijk. Lees ook deze 11 aanbevelingen voor het ontwerpen met een vergrootglas icoontje.

Conventies

Het is sowieso een goed idee om je zoveel mogelijk aan conventies te houden. Zeker bij mobile design, 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. Dus denk goed na voordat je van een conventie afwijkt.

Voorbeelden conventies:

  • Logo linksboven en klikbaar naar homepage.
  • Searchbox rechtsboven.
  • Winkelwagentje rechtsboven.
  • Een link is blauw en onderstreept. Inmiddels vervangen door 'een link constrasteert 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'.

search-icon

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 de website van jouw organisatie te volgen. Dat hangt helemaal af van de mate waarin jouw bezoekers al zo ver zijn.

minimalistische navigatie op dekstop van Medium

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 op jouw website kan het toch anders zijn. Ons advies is dan ook om ermee te testen. Doe hetzelfde als James Foster met de website van jouw organisatie. En als je dat doet, deel je ervaringen dan met ons hieronder in de reacties. We zijn heel benieuwd.

Ons advies: test de verschillende oplossingen op je eigen website voor je iets definitief maakt.

Wil je graag op de hoogte blijven van de nieuwste ontwikkelingen op het gebied van web design? Schrijf je dan nu in voor onze nieuwsbrief.

Deze post delen?

e book online marketing checklist 2018

Meer inspiratie?

Wekelijks een e-mail notificatie ontvangen als onze nieuwste blog live staat?
Ja graag! →

0 reacties op “

Er zijn nog geen reacties.

Reageren niet meer mogelijk.