Handig voor webdesigners, dramatisch voor bezoekers
Toen eind jaren negentig Dynamic HTML (DHTML) zijn intrede deed, werden veel websites voorzien van een dropdown menu. Deze eerste generatie uitklapmenu’s werd snel als onhandig ervaren.
Juist door de uiteenlopende toepassingen, leverden de menu’s gebruiksproblemen op: er was geen standaard waaronder dropdownmenu’s moesten werken. Daarnaast waren zij een te gemakkelijke oplossing voor webdesigners om grote hoeveelheden subpagina’s in weg te stoppen. De bezoeker zocht zich rot.
.
.
De nadelen
.
- Meerdere niveau’s in het uitklapmenu. Met je muis naar dieper gelegen niveaus navigeren is vervelend.
afb. in de ‘Macintosh Human Interface Guidelines’ uit 1995 staat beschreven dat meer dan één subniveau een absolute ‘no go’ is
- Teveel breedte tussen de niveaus. Een lange strakke beweging maken met de muis is onhandig.
afb. op de website van 2Advanced Studios is het een uitdaging om bij het gewenste tweede niveau te komen. .
- Niet zien waar je bent wanneer het menu inklapt
- Lange lijsten menu-items
- Te complexe segmentatie
.
-
De mega dropdown
Met dank aan JavaScript-tools als jQuery, ontstond een groot uitklapmenu dat in één oogopslag toegang biedt tot de volledige subnavigatie van een categorie. Netjes verdeeld in groepen en ondersteund met goede vormgeving, typografie en iconen.
.
De voordelen:
- Een groot en breed uitklapveld
- Eén niveau diep
- Logische clusters
- Een overzicht van alle onderwerpen
- Een design dat ademt
- Een heldere opmaak
- De mogelijkheid om meerdere contentsegmentaties in één overzicht te plaatsen
- Gerelateerde content in het menu, zoals: nieuws, banners en andere call-to-actions
.
De toepassing
De mega dropdown is ideaal voor websites met veel content. Webshops bevatten vaak een groot productaanbod. Maar ook voor andere websites is de mega dropdown geschikt. Waar het ouderwetse dropdownmenu een makkelijke oplossing was voor webdesigners om ruimte te besparen, ondersteunt de mega dropdown juist de bezoeker.
.
Voorbeelden van de mega dropdown
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
afb. een indeling die minder diep gaat: per doelgroep (Mens, Womens) zie je een lijst van de meest populaire kleding (links) en accessoires (rechts)
.
..
.
.
.
.
.
.
.
.
.
.
.
.
.
.
afb. de locatie van de call-to-actions (rechts) is verstandig: bezoekers navigeren van links naar rechts over het uitklapmenu (het zogenaamde z-patroon) en worden niet door de call-to-action gestoord in hun primaire zoekproces
.
.
.
..
.
.
.
.
.
.
.
.
.
.
.
.
.
afb. het uitklapmenu ademt en is in hoogte niet te groot, zodat het nooit onder de vouwlijn verdwijnt
.
.
.
.
.
.
.
.
.
..
.
.
.
.
.
.
.
afb. aanbiedingen worden in de rechterkolom gepresenteert en onopvallend opgemaakt, waardoor rust en overzicht bewaard blijft
.
.
.
De inhoud bepaald het succes
Zorg daarom voor een heldere indeling op alfabet, tijd, type content, doelgroep, taak of onderwerp. De juiste indeling bepaal je samen met je doelgroep en tijdens en na de realisatie van het menu blijf je de effectiviteit testen.
.
Meerdere indelingen in één overzicht
In de voorbeelden werd al duidelijk dat de mega dropdown je in staat stelt om meerdere indelingen in één overzicht aan te bieden. En dat is één van de belangrijkste voordelen van dit menu. Zo zou een uitklapmenu ‘broeken’ van een webshop de volgende indelingen kunnen bevatten: .
- Soorten broek
- Nieuwe broeken
- Merken
- Populaire broeken
- Nieuws
- Aanbiedingen
.
Wanneer de indeling op het hoogste niveau niet te algemeen en abstract is, kun je de bezoeker een variateit aan indelingen aanbieden..
.
Belangrijke aandachtspunten voor het design
Wanneer je met de ontwikkeling van een mega dropdown aan de slag gaat, houdt dan de volgende valkuilen in de gaten: .
- Voorzie het uitklapmenu niet van teveel items en content
- Voorkom storende elementen
- Plaats geen dubbele items in het overzicht
- Vertraag de laadsnelheid van het menu: voorkom dat het ongewenst inklapt of te snel activeert
- Houdt rekening met bezoekers zonder JavaScript
- Houdt rekening met mobiele apparaten en touchscreens
.
De website binnen een menu?
Het mega dropdownmenu is populair en zal nog veel worden toegepast. Ook op intranetten. .
.
.
De vraag is hoever je kunt gaan. Blijft het bij overzichten en doorverwijzingen, of ga je zelfs de daadwerkelijke content direct aanbieden binnen je menu? Het menu moet een menu blijven en je bezoekers in staat stellen om zo snel mogelijk hun taak te voltooien.
.
bron: frankwatching.com
Discussion
No comments for “Het Dropdownmenu”