Headers (webwinkel)

Bewustzijn en keus lijken vaak in het leven samen te gaan. Ontwerpen van een webwinkel, lijkt geen uitzondering te zijn. In het begin lijkt het zo simpel en lijken alle keuzes voor de hand te liggen. Naarmate je je bewust wordt van de vele keuzes, kan dit lastiger worden.

Een impressie van een handjevol bestaande webwinkels:

Algemeen

Een header bevat doorgaans drie categorieën van controls:

• Primaire menu - Tekstmenu voor productselectie
• Secundaire menu - Belangrijkste dingen die niet in het primare menu passen, bv. account, inloggen, etc. Minder belangrijke dingen verhuizen meestal naar de footer of zijn alleen indirect bereikbaar
• Selling point menu - Al of niet inclusief links.

Amazon.de

Juli 2020:

• Twee lagen én een hamburgermenu (ook op desktop)
• Secundaire menu » Nog een secundair menu (oa. aanbiedingen)
• Het hamburgermenu bevat het primaire menu + handjevol secundaire items
• Er is geen selling point-menu
• De twee balken hebben een licht verschillende achtergrondkleur.

Ideeën waarom de header va Amazon zo'n afwijkende vormgeving zou kunnen hebben:

• Ze zijn dermate bekend en dominant, dat een selling point-balk niet nodig is - Dat blijft vreemd
• Het primaire menu is in een verticaal menu ondergebracht. Dat geeft veel meer ruimte voor items
• De reden om het primaire menu achter een hamburgmenu te verbergen: Om de zoekbalk (die heel groot is) te benadrukken. Amazon heeft zo'n uitgebreid assortiment, dat dat toch niet goed te doen is met een primair menu.

Bol.com

Juli 2020:

• Balken hebben verschillende achtergrondkleuren

Bol.com heeft maar liefst vier balken:

1. Selling points
2. Secundaire menu
3. Primaire menu + secundair menu
4. Additioneel primair menu, maar voor aanbiedingen

Het komt rommelig op me over.

Coolbue.nl

Juli 2020:

• Het zijn visueel drie balken, want ze hebben verschillende achtergrondkleuren
• Van boven naar beneden: Secundair » Primair » Selling points
• Een deel van het secundaire menu is opgenomen in het selling point-menu - Prima gedaan

Groenhart.nl

Juli 2020:

• Selling points » Secundair » Primair
• Verschillende achtergrondkleuren

Walmart.com

Juli 2020:

• Er zijn twee balken, die alletwee een secundair menu bevatten. De bovenste balk heeft de dubbele hoogte, maar bevat slechts een paar verloren onderdelen
• Het hamburgermenu bevat flink wat secundaire items en daarna pas het primaire menu, gevolgd door weer een aantal secundaire items
• Interessant: Het secundaire menu werkt met submenu's. Dat lijkt goed te werken op desktop
• Mobiel werkt dat menu ook goed: Als je een item kiest dat een submenu heeft, 'scrollt' het scherm naar rechts, en zie je dat menu in beeld. Als je klikt op Alle items, krijg je een pagina met tekstuele opmaak. Het is geen menu meer, maar ook geen grafische interface - Mooi gedaan.