In navolging van Netflix, gaat ook Blue 2 Blond de navigatiebalk onderaan plaatsen. Dit raakt logischerwijs de smartphone/touchscreen versie van responsive websites.
Blue 2 Blond doet dit onder meer in navolging van Netflix. Alhoewel Netflix dit heeft doorgevoerd voor hun (Android) app, heeft de verplaatsing ook voor websites toegevoegde waarde.
Netflix plaatst hamburger menu onderaan
Volgens het artikel zijn meerdere grote apps afgestapt van het hamburgermenu linksbovenin. De twee hoofdredenen:
- belangrijkste schermen veel beter zichtbaar bij een menubalk aan de onderkant. Bruikbaarheidsonderzoeken hebben laten zien dat gebruikers hierdoor langer gebruik maken van een app;
- De steeds groter wordende en langwerpigere telefoonschermen zorgen er voor dat het lastiger wordt om het icoontje in de linker bovenhoek te bereiken, wanneer de de telefoon met één hand wordt bediend.
Hamburgermenu onderaan op mobiele websites
Vooral laatstgenoemde reden, is ook voor ons de beweegreden geweest om navigaties onderaan te plaatsen. Dit geldt natuurlijk enkel wanneer we hierin de vrijheid krijgen van de opdrachtgever en/of stijlgids.
Smartphones worden namelijk inderdaad steeds groter. Dusdanig dat ze steeds vaker van een te kleine broekzak naar een handtas of binnenzak verhuizen. Ander gevolg is dat wanneer een telefoon in één hand ligt, niet meer het gehele scherm te bereiken is met de vingers van dezelfde hand.
Reponsive website en navigatie bedienen met één hand
Steeds vaker zal men met de telefoon in de hand gaan multi-tasken of slechts één hand gebruiken, bijvoorbeeld:
- tijdens het fietsen (dit betreft uiteraard een slechte ontwikkeling);
- tijdens het lunchen of koffie drinken;
- bij het wakker worden of tijdens bankhangen;
- in het geval van een lichamelijke handicap.
Ook het gegeven of je linkshandig of rechtshandig bent, wordt hiermee in het kader van gebruiksvriendelijkheid weggenomen. Wanneer de menuknop linksbovenin staat kun je er met de duim minder goed bij als je de telefoon in de rechterhand hanteert.
Bewegende navigatiebalk bij het scrollen
Wat voor een hamburger menu bovenin geldt, geldt ook voor een hamburger menu onderaan; een balk die altijd blijft staan, snoept beelschermruimte af. Dit zorgt er voor dat er minder content op hetzelfde moment zichtbaar is.
Een best-practice is dan ook om de navigatie te laten verdwijnen wanneer men scrolt. Ook op desktop versies van websites is dit verschijnsel steeds vaker te zien; secundaire navigaties verdwijnen bij het scrollen, waardoor meer ruimte vrij komt voor de uiting van bijvoorbeeld een product binnen een webshop.
Dit effect is ook toepasbaar voor de smartphone versie van responsive websites. Beide zie je op deze website als ook toekomstige websites die door ons opgeleverd zullen worden, in actie. Om aan te tonen hoe we dit hebben gedaan, heb ik een demo opgetuigd:
