Hoe werkt een header op mobiel?
Een header op mobiel krimpt tot het minimum: je logo, een menuknop en hooguit één actie zoals bellen of het winkelmandje.
Het volledige menu klapt open over het scherm zodra iemand op de knop drukt.
Daar zitten een paar valkuilen in die je op je eigen scherm nooit ziet.
De menuknop
Drie streepjes is inmiddels universeel herkenbaar. Zet er bij twijfel het woord Menu naast; dat kost niets en helpt een deel van je bezoekers.
Maak hem groot genoeg om te raken: minstens vierenveertig bij vierenveertig pixels. Meer daarover lees je bij accessibility.
Het uitklapmenu
Zorg dat het te sluiten is met een duidelijke knop, en dat de achtergrond niet meescrollt terwijl het openstaat.
Dat laatste is de meest gemaakte fout en het voelt meteen kapot.
Wat je overhoudt in de balk
Je logo en één actie. Bij een dienstverlener een belknop, bij een webshop het winkelmandje.
Meer past er niet zonder dat het gedrongen oogt. Meer daarover lees je bij conversie.
Mijn vuistregels
- Raakvlakken minstens vierenveertig bij vierenveertig pixels.
- Menu sluitbaar met een duidelijke knop.
- Achtergrond niet laten meescrollen bij een open menu.
- Test met één hand, met je duim.
Die laatste legt bloot wat op een muis prima werkt en op een telefoon niet.
De onderkant van het scherm
Bij grote toestellen is de bovenkant lastig te bereiken met één hand. Een balk onderaan met je belangrijkste acties werkt daar beter.
Dat is bij webshops steeds gebruikelijker. Meer daarover lees je bij above the fold.
Wat je controleert
Of het menu opengaat, of het te sluiten is, of alles raakbaar is, en of het werkt met een grotere lettergrootte ingesteld.
Meer daarover lees je bij of je header moet meescrollen.