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.
Wij maken voor onze smartphone sites (dat zijn er inmiddles een kleine 50) gebruik van een CMS dat optimaal rekening houdt met de ergonomie van de smartphone gebruiker. Voor ons is dat essentieel omdat onze sites vooralsnog per definitie worden getriggerd door QR-codes. Het succes van QR hangt sterk samen met de relevantie van de applicatie of de smartphone site die erachter zit. Check de projecten- en de bedrijvenpagina’s op onze www site maar eens. Daar zie je in de smartphone screens de voorbeelden van alle door Greencode gefaciliteerde smartphone sites.
Onderzoek door Morgan Stanley Research laat zien dat rond 2012 mobiel internet wereldwijd het vast internetten hard voorbij groeit. De stelling dat je eerst aan je mobiele site moet denken en daarna pas aan je desktop site lijkt aanvankelijk misschien wat vreemd, maar is dus zo gek nog niet. Dat zal – een beetje afhankelijk van de business waar je in zit – steeds meer waar worden.
Oh, en by the way hier nog de linkjes waar je de voorbeelden kan bekijken.
Http://www.greencode.nl/ projecten
Http://www.greencode.nl/bedrijven
Op dit moment is het nog van belang dat websites worden geoptimaliseerd voor mobiele apparaten, maar ik verwacht dat dit belang steeds meer zal afnemen naarmate smartphones en tablets zich ontwikkelen. Je ziet nu al dat moderne Android-toestellen een vlotte browser hebben die qua functionaliteit en ondersteuning niet onderdoet voor een desktopvariant.
Gijs, het punt is niet dat mobieltjes niet vlot genoeg zijn of niet genoeg ondersteunen, maar juist dat je scherm van je mobiel nu eenmaal veel kleiner is dan van een desktop. En natuurlijk kun je websites bekijken die niet zijn geoptimaliseerd, maar dan moet je wel telkens inzoomen bij elke nieuwe pagina. Dit is iets wat je niet wilt, want dit komt niet ten goede aan de gebruikerservaring. Dat is de kern van dit verhaal, dat je een gebruiker die via zijn mobiel kijkt een goede ervaring geeft.
@ Gijs
Ergens halverwege de pagina via deze link zie je het verschil tussen een mobiele site en een standaard site van (in dit geval) Domino’s Pizza.
http://www.localviralbuzz.co.uk/mobile-website-marketing/
Dat illustreert vrij aardig wat Bernhard zegt.
Spraakherkenning is de ultieme manier om te navigeren bij complexe menu structuren, mits goed geimplementeerd…
Bart, Interessant artikel echter vraag ik me af wat de best manier is voor complexe menu structuren met meerdere niveau’s (submenu). Zijn hier ook ervaring/ideeën over om de gebruiker zo snel en goed mogelijk van dienst te zijn.
Bart,
Je hebt een aantal goede punten. Ik zou nog willen aanvullen dat de best-practices die we nu ontdekken in de context van mobile gebruik heel vaak natuurlijk ook gelden voor ‘standaard’ desktop gebruik. De ‘beperkingen’ van Mobile wijzen ons (heel fijn) op de noodzaak voor een gebruiksvriendelijke website.
Grotere tekst en grotere hit-area’s (knoppen) zijn ook op een groter scherm fijn. Ook op grotere schermen is het belangrijk dat de gebruiker van je site snel vindt wat zij nodig heeft en niet eerst door een ‘sitemap’ moet worstelen. Dat je website snel laadt en niet Megabytes aan afbeeldingen laadt is belangrijk voor elke site. Enzovoorts.
Een belangrijk punt dat ik nog mis is natuurlijk dat je op een mobiel (touch) apparaat niet meer kunt rekenen op ‘hover’ feedback of -functionaliteit. Naast *grotere* buttons/links is het dus belangrijk dat deze, net als je hele menu, functioneren en feedback geven zonder afhankelijk te zijn van :hover.
Een ander goed, Engelstalig, overzicht van verschillende navigatie patronen is te vinden op http://bradfrostweb.com/blog/web/responsive-nav-patterns/ Maar dat had je vast al gezien
@Willem
Uitgebreide menu’s met meer niveau’s is zeker een interessant onderwerp. Afhankelijk van de (verwachte) complexiteit zijn er verschillende methodes. Mooi onderwerp voor komend blog.
@David Hund
Zeker. Je wordt geforceerd om op een andere manier te ontwerpen. Niet alleen jij maar ook de klant moet veel beter de prioriteiten bepalen. Wat een goed iets is.
Je bedoelt dat de ‘active’ state niet vergeten mag worden?
@Greencode: “Onderzoek door Morgan Stanley Research laat zien dat rond 2012 mobiel internet wereldwijd het vast internetten hard voorbij groeit.”
Zijn tablets daar al vanaf gehaald? Die groeien namelijk nog explosiever, maar dat is toch echt anders dan een smartphone.
Dat is exclusief tablets. Het gaat echt om smartphones, waarvan het gebruik inderdaad anders is dan dat van tablets.