De afgelopen jaren is de telefoon gegroeid, van een gemiddelde beeldschermdiagonaal van 4,1 inch in 2013, naar 5,6 inch of groter in 2018. Waar je vroeger met je duim gemakkelijk alle hoeken van het scherm kon raken, is dat nu allang niet meer mogelijk. Dit vraagt om een duimvriendelijke navigatie met de belangrijkste knoppen altijd binnen bereik. Een manier om dit te doen is door het navigatiemenu en andere belangrijke knoppen onderin het scherm weer te geven. Belangrijke aandachtspunten hierbij zijn: het oplossen van key pain points, blijvende herkenbaarheid van het menu en het voorkomen van overlap met andere knoppen onderin beeld.
Hoe ver komt jouw duim?
Volgens het CBS heeft 90,2% van de Nederlanders (van 12 jaar of ouder) toegang tot het internet via een smartphone. Uit onderzoek van GFK blijkt dat 56% van eigenaars hun smartphone voornamelijk buitenshuis gebruikt. Meer dan eens is dit onderweg, met de mobiel in de ene hand, terwijl de andere hand wordt gebruikt om tassen te dragen of de lus in de bus vast te houden. Gebruikers willen websites en applicaties kunnen bedienen, zonder dat hun andere hand daaraan te pas hoeft te komen. Zolang alle onderdelen en knoppen met een hand te bereiken zijn, is dat geen probleem.Maar, heb je je wel eens afgevraagd hoe groot een gemiddelde hand is? Of specifieker, hoe ver de gemiddelde duim reikt op een gemiddelde telefoon?
Vroeger, toen onze telefoons nog klein waren, kon je met je duim gemakkelijk bij alle hoeken van het scherm. De telefoon is echter gegroeid, zowel in functionaliteit als in formaat. In 2013 was de gemiddelde beeldschermdiagonaal nog 4,1 inch, nu valt dit in de categorie ‘klein’ en zijn er telefoons van 5,6 inch of groter. Hierdoor is het voor de meeste gebruikers bij lange na niet meer mogelijk om met hun duim links- of rechtsboven in het scherm te komen.
Is dat dan echt een probleem, vraag je je misschien af. Het antwoord is ja, vaak wel. Bijvoorbeeld als je iets op wil zoeken op een website, maar niet kunt navigeren doordat het menu buiten bereik ligt. Of als je een product aan wil schaffen, maar niet bij de knop kunt om het in je winkelwagentje te plaatsen.
Een nieuw ontwerp
De groei van de gemiddelde beeldschermdiagonaal geeft een nieuwe uitdaging voor het mobiele gebruik van websites en applicaties. Om mobile-friendly te blijven, moet het ontwerp van jouw website of app hierop ingespeeld zijn. Dat is makkelijker gezegd dan gedaan. Wanneer je kijkt naar bijvoorbeeld de menu-knop (de hamburger-knop), dan zie je dat die op websites vaak bovenin het scherm te vinden is. Op de computer is dit een prima plek. Op een telefoon is dit niet meer haalbaar, letterlijk. Natuurlijk moet je ernaar streven om belangrijke knoppen op een herkenbaar punt te plaatsen, gebruikers willen snel vinden wat ze zoeken. Het is echter minstens zo belangrijk om te onderzoeken waar jouw gebruikers echt last van hebben, de zogenaamde ‘key pain points’. Want wat heb je eraan als de hamburger-knop gemakkelijk te vinden is, maar bijna onmogelijk om aan te klikken? Uit onderzoek blijkt dat knoppen die binnen het bereik van de duim liggen, als snel en comfortabel worden beoordeeld. Het besef dat hier een nieuw ontwerp voor nodig is, begint te groeien bij steeds meer ontwerpers en bedrijven. Je ziet dat deze bedrijven er bijvoorbeeld voor kiezen om het navigatiemenu naar de onderkant van het scherm te verplaatsen. Hieronder zie je een aantal voorbeelden van het menu onderin het scherm.
Belangrijke aandachtspunten
Het simpelweg naar beneden schuiven van het menu is niet waar het om draait. Wanneer je aan de slag wil met een duimvriendelijke navigatie, zijn er een aantal aandachtspunten.
Definieer de Key Pain points
Bepaal wat de wensen, verwachtingen en ‘key pain points’ zijn van jouw gebruikers. Wat willen ze graag en wat frustreert ze enorm? En hoe kun jij daar met een goed ontwerp en een goede navigatie op inspelen?
Herkenbaarheid
Het navigatiemenu moet herkenbaar blijven. Het gebruik van een universeel icoon (de hamburger-knop) kan hierbij helpen. Dat zie je aan het winkelwagentje. De gebruiker verwacht het winkelwagentje waarschijnlijk rechts bovenin, maar op een andere plek weet hij ook precies wat hij eraan heeft.
Hoe werkt de browser?
Wanneer je het navigatiemenu verplaatst naar de onderkant van het scherm, brengt dit nieuwe uitdagingen met zich mee. Wanneer het een web-based applicatie betreft kan er overlap ontstaan met bijvoorbeeld de browser. Houd hier rekening mee in het ontwerp.
Storend bij lange stukken tekst
Naast dat het voor de gebruiker even wennen is, kan het menu onderin beeld ook storend zijn wanneer hij langere stukken tekst wil lezen. In dat geval is het een overweging om de weergave zo in te stellen dat het menu verdwijnt wanneer de gebruiker naar beneden scrollt. Scrollt hij omhoog? Dan komt het menu weer in beeld.
Conclusie
We vinden het erg interessant om de ontwikkelingen op het gebied van duimvriendelijke navigatie bij te houden. Het is duidelijk dat deze nieuwe ontwikkelingen zowel voor ontwerpers als voor bedrijven en gebruikers even wennen zijn. Toch zie je dat er meer navigatiemenu’s ‘nieuwe stijl’ opkomen. Het verlichten van de ‘key pain points‘ speelt hierin een grote rol. Zelfs nu je bij sommige menu’s nog per ongeluk met bijvoorbeeld de browser interfereert, of een dubbelklik moet toepassen, worden ze toch als minder vervelend ervaren dan wanneer je überhaupt niet bij de knop kunt komen.
Wil je aan de slag met een duimvriendelijke navigatie in jouw app of website? Laat het ons weten, we denken graag met je mee.
