10 manieren om menu's te ontwerpen die niet zuigen
Er zijn duidelijke goede en foute manieren om navigatiemenu's te ontwerpen. Dit elementaire deel van een website wordt vaak over het hoofd gezien in het ontwerpproces en het toont in termen van bruikbaarheid.
Klungelige, overvolle of ontbrekende navigatie zijn de meest voorkomende problemen en eerlijk gezegd kunnen ze ervoor zorgen dat je website simpelweg slecht is. Wees niet die gast (of meisje). Gebruik deze tips om ervoor te zorgen dat u moderne navigatiepatronen in uw website-projecten gebruikt voor coole, creatieve navigatie-elementen die niet zuigen. (En zijn zeer bruikbaar.)
1. Sloot de megamenu's
Mega-menu's waren een design-trend waar klanten van hielden - zelfs als ontwerpers het haatten. De extra grote menustijl met "alles behalve de gootsteen in de keuken" is overweldigend voor gebruikers en biedt geen echte waarde.
Slechts een handvol grote retailers kunnen echt wegkomen met het gebruik van megamenu's en het doel is om de schaal van de voorraad te tonen. Het nut van het overbelaste navigatie-element is twijfelachtig.
Vaak wordt een megamenuoptie geselecteerd omdat het te moeilijk is om te beperken wat in de navigatie moet worden geplaatst. Maak de moeilijke keuzes. Graaf in analytics om te zien waar gebruikers naar op zoek zijn. Eerlijk gezegd zullen de meeste gebruikers die een heel specifiek ding willen, het toch via zoeken vinden.
2. Maak Search Prominent
En over zoeken: maak het prominent. Zoeken moet op elke pagina staan. Het hoort in de hoofdnavigatie. En het moet groot en gemakkelijk toegankelijk zijn.
Uitstekende zoekfunctionaliteit is de link die gebruikers op een website houdt. Als datgene waarnaar ze op zoek zijn niet direct beschikbaar is, zal de volgende optie ernaar zoeken. (U kunt Google bedanken voor dit zoekproces, eerst bedacht.)
Probeer het niet te bestrijden. Werk met gebruikers en voeg zoekopdrachten toe als onderdeel van de hoofdnavigatie. (En zorg ervoor dat de box groot genoeg is om te typen en volledig gemeenschappelijke zinnen te zien.)
3. Beperk het aantal navigatiemogelijkheden
Het is jouw taak om te anticiperen op welke inhoud gebruikers vervolgens toegang willen krijgen. Beperk navigatie-opties tot de meest populaire pagina's en informatie in het website-ontwerp.
Bijna elk navigatiemenu moet een zoek-, een over- of contactpagina bevatten en e-commercesites moeten altijd een winkelwagentje of een knop Nu kopen bevatten. Daarna moeten navigatie-elementen worden bestuurd door site-inhoud.
4. Ontwikkel Smart Navigation-menu's
Een goede navigatie helpt gebruikers om van het ene stukje inhoud naar het volgende logische punt te gaan. Deze inhoud is vaak verschillend op verschillende delen van de website.
Maak meerdere navigatieconfiguraties zodat gebruikers gemakkelijk toegang hebben tot de inhoud die de volgende logische stap is in hun pad rond het ontwerp. Hoewel sommige elementen elkaar kunnen overlappen, helpen anderen gebruikers en helpen ze dieper in het ontwerp te gaan.
We bevinden ons in een tijdperk waarin gebruikers bepaalde niveaus van personalisatie gaan verwachten. Amazon doet het uitstekend met navigatie-elementen die gebruikers zelfs bij naam noemen. Bekijk de navigatie de volgende keer dat je je aanmeldt om [Your Name Here] te bekijken op Amazon.com. De secundaire navigatie omvat informatie zoals de jaarlijkse gift van de gebruiker voor Smile-gebruikers, de recente bestelgeschiedenis en zelfs kredieten voor andere Amazon-services. (Alles daarna is ook behoorlijk gepersonaliseerd.)
5. Bestelfaciliteiten opzettelijk bestellen
De volgorde van navigatie-elementen is net zo belangrijk als de beslissing om ze te gebruiken. Items aan het begin en het einde van het navigatie-element zijn het meest effectief, het meest gezien en het meest aangeklikt. Gebruik deze posities zorgvuldig.
Er is zelfs wat wetenschap om dit te ondersteunen. De serieel positie-effect is de neiging van een persoon om de eerste en laatste items in een lijst met de meeste consistentie terug te roepen. Verder hebben gebruikers de neiging om de meest recente items het best te herinneren (recency-effect) en de eerste paar items in een lijst worden beter teruggehaald dan middelste elementen (primacy-effect).
Bekijk de gebruikersstroompatronen in uw websiteanalyses om te helpen bepalen welke pagina's en elementen precies vooraan en in het midden moeten staan. Voeg pagina's toe die gebruikers gaan bekijken vanaf de startpagina en de inhoud waarmee gebruikers verbinding willen maken. Elimineer navigatie-elementen die de gebruikersstroom niet stimuleren.
6. Gebruik plakkerige navigatie voor lang doorbladerende pagina's
Laat gebruikers de navigatie niet uit het oog verliezen. Of het nu boven of onder of opzij van het scherm blijft hangen, elke pagina met een lang scrollend formaat moet een plakkerig menu bevatten. De reden hiervoor is eenvoudig: laat gebruikers niet werken om interactie met uw website te houden.
Hoe eenvoudiger het is om te bewegen en inhoud te ervaren, hoe waarschijnlijker het is dat gebruikers dat precies doen. Hoe meer tijd een gebruiker op uw website besteedt aan uw ontwerp, des te groter de kans dat deze worden omgezet in een gewenste gebruikersactie.
7. Verberg de navigatie niet
Kleine menu-items, links weggestopt onder aan het scherm of alleen in het voettekstje, en pop-outnavigatie verborgen achter vreemde pictogrammen en gebrek aan navigatie op interieurpagina's zorgen ervoor dat gebruikers niet kunnen klikken. Verberg website navigatie niet. Het zou vooraan en centraal moeten zijn. Het zou op elke pagina moeten staan.
Gebruikers kunnen op verschillende manieren naar uw website gaan. Zorg ervoor dat er een navigatie-element is dat op hen wacht wanneer ze aankomen.
8. Gebruik beschrijvende labels
Van navigatiewoorden tot pictogrammen, elk element moet gebruikers precies vertellen wat er gebeurt met een klik. Gebruik algemeen geaccepteerde pictogrammen, zoals een winkelkaart om uit te checken of vergrootglas om te zoeken of zelfs een hamburgersymbool voor pop-outmenustijlen.
Ga vervolgens nog een stap verder en gebruik tekstlabels die de gebruiker precies vertellen welke informatie daarin is opgenomen. Probeer al te generieke labels te vermijden, zoals services of aanbiedingen, als er een woord is dat de inhoud beter verklaart.
9. Overweeg Full-pagina Nav
Soms is het ontwerp de navigatie. Als er enkele belangrijke elementen zijn die essentieel zijn voor gebruikers, kunt u ze presenteren met navigatie op volledig scherm.
Hoewel dit niet voor elk project geschikt is, kan het effectief zijn voor kleinere websites, portfolios of projectwerk.
10. Ga verticaal
Verticale navigatie is nu trendy , en met goede reden. Het is gemakkelijk te zien en trekt de aandacht omdat het iets anders is.
Zijwaartse, verticaal georiënteerde navigatie is een goede optie voor websites die wat meer ruimte nodig hebben voor het aantal navigatie-elementen. Met een dieper menu kan het ontwerp meer nav-elementen bevatten zonder dat het rommelig wordt en voldoende ruimte tussen elementen in stand houdt.
