Menu’s voor mobiele apparaten: een lesje optimalisatie

Steeds meer klanten met een mobiele telefoon komen via social media, zoals Facebook, op jouw website terecht. Heel slecht is dan je marktbereik met een website die niet optimaal is voor hun mobiele apparaat. Zelf heb ik het ook. Ik baal er elke keer weer van wanneer ik een link volg en vervolgens een desktopversie op m’n mobiele telefoon krijg. De (ongeschikte) navigatiemenu’s vormen een belangrijke reden voor deze ergernis. Hoe voorkom je dit als vormgever?

Online succes boek je op mobiele apparaten en al lang niet meer alleen op desktopcomputers. Luke Wroblewski schrijft in zijn boek ‘Mobile First’ dat je eerst je mobiele website moet ontwerpen en daarna pas kunt denken aan de website voor desktopcomputers. Een compleet ander ontwerpproces. Ook Facebook geeft aan dat alles om mobiel draait. Hun mobiele website en app hebben nu de hoogste prioriteit.

Door de enorme groei in het gebruik van internet op smartphones maken we steeds vaker adaptieve websites voor klanten. Reden te over om uitvoerig stil te staan bij de best practices voor user interface design op mobiele apparaten. Dit artikel gaat over de weergave van navigatiemenu’s op mobiele apparaten. Dit is een van de eerste onderwerpen waar je tegenaan loopt als vormgever. Brad Frost geeft een reeks van voorbeelden, maar helaas beschrijft hij voor mij nog niet de optimale variant. Hoe moet ik mijn mobiele menu vormgeven?

Content gaat voor navigatie

Het ontwerpen van een webpagina is een kwestie van het stellen van prioriteiten: Wat moet waar komen te staan en waarom? Op een desktopcomputer is er royaal ruimte voor zowel content als de complete navigatie, maar op een mobiele telefoon is dat niet zo. Navigatie en content eisen hier al snel, elk voor zich, het hele beeldscherm op. Dus je zult een bewuste keuze moeten maken. De keuze ligt voor de hand: content is belangrijker dan de navigatie. Gebruikers komen voor de content en daarna beslissen ze of ze verder willen rondkijken. Gebruik het scherm dus vooral voor de content en verberg navigatie achter een menu-knop.

“As a general rule, content takes precedence over navigation on mobile. Whether people are checking on frequently updated data like stocks, news, or scores; looking up local information; or finding their way to articles through search or communication tools — they want immediate answers to their needs and not your site map.”

Luke Wroblewski, 2011, Mobile First, p52.

Laat content niet meescrollen

Het valt me op dat er mobiele websites zijn die het menu op een desktopmanier tonen: je klikt op ‘menu’ en de website toont het menu over de content heen. Ga je dan scrollen, dan scrolt ook de onderliggende content mee, zonder dat je dat door hebt. Je bent gedesoriënteerd zodra je door het menu gelopen bent en dat menu aan de onderkant sluit. De website toon opeens andere content dan je in je herinnering hebt van het moment waarop het menu opende.

Een oplossing hiervoor is dat de website, tijdens het openen van het menu, de content mee naar beneden schuift, onder het menu. Zo kan de gebruiker na het bekijken van het menu weer verder waar hij in eerste instantie mee bezig was, en zelfs zonder het menu te moeten sluiten.

Klap menu naar boven of opzij uit

Bij het ontwerpen van user interfaces voor aanraakschermen moet je rekening houden met het afschermen door de hand van de gebruiker. Deze dekt een groot deel van het beeldscherm, alles onder het aanraakpunt, af tijdens interactie. Belangrijk is het begrijpelijk maken van wat er na die interactie gebeurt, daarom moet de website nieuwe informatie juist naast of boven de knop tonen. Ruimte die de gebruiker direct ziet zonder een extra handbeweging.

Het vervelende van de menuknop is dat deze altijd uiterst boven in de webpagina zit en je lastig daarboven alsnog het menu kan tonen. Het best kan je de menuknop naar beneden laten schuiven om op die manier zoveel mogelijk zichtbaarheid te geven aan het menu. Niet optimaal helaas, maar je zal merken dat dit beter werkt dan het alternatief: menu onder de menuknop tonen. Tevens geeft deze oplossing een logisch vervolg: zodra je door het menu gelopen bent kan je deze met de menuknop onderaan weer sluiten.

De regel geldt uiteraard ook voor andere user interface-elementen zoals de navigatie van carrousels. Het is beter om de pijlen van een carrousel onder de carrousel te plaatsen zodat gebruikers direct de gevolgen van de interactie zien.

Herhaal compleet menu in de footer

Gebruikers komen vaak vanaf Twitter of Facebook op je website om jouw content te lezen. Zodra ze beneden zijn moet je ze verder helpen en informeren over waar ze in de website zitten. Herhaal daarom de complete navigatiestructuur in de footer van je webpagina.

Verberg menu niet zomaar

Het verbergen van een menu is niet optimaal voor de zichtbaarheid. Zoals ik al eerder aangaf, is zichtbaarheid een kwestie van prioriteit, maar als dat niet nodig is, omdat je genoeg ruimte hebt voor zowel de content als navigatie, is het geen enkele zichtbaarheidsbelemmering. Dus toon direct het menu want zichtbaarheid hiervan is na die van de content essentieel voor de gebruiksvriendelijkheid van je website.

Ontwerp knoppen van tussen de 41 punten en 122 punten hoog

Veel artikelen schrijven al over de grootte van knoppen voor aanraakschermen, toch wil ik dit onderwerp ook de revue laten passeren om m’n artikel compleet te maken. Zo geeft Apple aan dat knoppen minimaal een hoogte (en breedte) moeten hebben van 44 punten. Dat is ongeveer 6,9 mm op een iPhone scherm. Omdat de scherpte van veel beeldschermen anders is en punten of pixels eigenlijk niet leidend meer zijn, benoem ik maten ook in mm’s. Microsoft adviseert 9 mm (58 punten op iPhone scherm), Nokia 10 mm (64 punten op iPhone scherm) en ISO standaard geeft aan dat 19 mm toch wel het meest optimaal is (122 punten op iPhone scherm). De performance daalt volgens de ISO standaard sterk zodra de interface knoppen kleiner worden dan 6,4 mm (41 punten op iPhone scherm).

De grote van knoppen (het actieve gedeelte) moet dus liggen tussen 41 punten (6,4 mm) en 122 punten (19 mm) voor op een iPhone. Kleiner, maar ook groter, vermindert de performance aanzienlijk.

Creëer geschikt menu ook voor gebruikers zonder Javascript

Sommige mobiele webbrowsers ondersteunen geen Javascript, met als gevolg dat de hierboven beschreven interactie niet goed mogelijk is. Voor deze groep gebruikers moet men teruggrijpen naar de meest basale HTML- en CSS-code.

Een goede oplossing in dit geval is om de menu-knop als een anchor te laten verwijzen naar het menu in de footer. Op die manier hoef je het menu niet bovenin te tonen en geef je prioriteit aan content terwijl het menu nog steeds direct toegankelijk is.

Het is helaas niet optimaal omdat je van boven helemaal naar beneden in de pagina zal springen, iets dat op een klein scherm desoriënterend werkt. Een gebrek dat gebruikers zonder Javascript helaas zullen moeten aanvaarden.