Een winnende navigatie-ideeën en inspiratie ontwerpen

Het navigatiemenu op een website is als een verkeersbord op een straat of een niveaumap in een winkelcentrum. Je kunt je bestemming niet bereiken zonder eerst te weten waar je bent. Net als in het echte leven is navigatie in webdesign erg belangrijk en speelt het een grote rol in de bruikbaarheid van een website en in gebruikerservaring.

Tegenwoordig ziet u tal van verschillende soorten navigatiemenu's met interessante, creatieve en ongebruikelijke ontwerpen. Maar hoe zit het met effectieve navigatie in een website, hoe zou het eruit zien; hoe zou het eruit moeten zien?

Vandaag wil ik mijn observaties en kennis over het belang van navigatie in webdesign delen. Ik zal een paar eenvoudige tips onthullen die je kunt gebruiken om de navigatie en bruikbaarheid van je website te verbeteren. Er zullen ook enkele voorbeelden zijn van effectieve navigatiemenu's om u een idee te geven van hoe u uw volgende ontwerp moet plannen.

Informatie-architectuur

Navigatieplanning zou moeten beginnen met informatiearchitectuur. Het is essentieel om te gaan zitten en brainstormen over de informatie-architectuur van een website. Je moet uitzoeken wat voor soort functies de website biedt, wat het belangrijkste is en wat er op lagere niveaus in de informatiehiërarchie kan worden geplaatst.

Informatie-architectuur omvat functies, gebruikersbehoeften, sitemap, testen en wireframes. U leest meer over informatie-architectuur in het artikel van Cameron Chapman in Information Architecture 101: Techniques and Best Practices.

Gebruik maken van door de gebruiker mogelijk gemaakte technologieën

Vermijd het gebruik van Flash, JavaScript, jQuery of iets anders dat de toegang tot uw websitenavigatie belemmert bij het bouwen van uw navigatiebalk, of zorg er in elk geval voor dat ze gracieus kunnen degraderen.

Voor meer referenties over sierlijke degradatie van javascript, bekijk dit bericht op 10 nuttige fallback-methoden voor CSS en Javascript.

Gebruik eenvoudige, gebruiksvriendelijke voorwaarden

Het is beter om te gebruiken eenvoudig, duidelijk en termen die gemakkelijk te achterhalen zijn dan zich te houden aan de branchevrije voorwaarden voor uw navigatiemenu. Elke link die gebruikers meer dan een seconde of twee nodig heeft om erachter te komen, is waarschijnlijk niet geschikt voor gebruik.

Als een gebruiker op een link moet klikken om erachter te komen waar de link naar toe leidt, draagt dit bij aan een slechte gebruikerservaring voor uw bezoekers.

Voorbeelden

Termen in het navigatiemenu op de website van Larissa Ness zijn gemakkelijk te begrijpen en gemeenschappelijk genoeg. Gebruikers zullen het niet verwarrend vinden omdat ze al ervaring hebben met menu's zoals deze.

Hier is nog een goed voorbeeld van een schoon en duidelijk websitenavigatiemenu met veelgebruikte termen, bij csupport.

Creative agency Eighty8Four gebruikt de term 'showroom', wat verwarrend kan zijn voor bezoekers. Deze term kan een portfolio of werk betekenen, maar het is niet duidelijk en bezoekers hebben geen andere keus dan erop te klikken om het uit te zoeken.

Standaardiseer het navigatieontwerp

Gebruik hetzelfde navigatiemodel op al uw pagina's. Het is erg belangrijk omdat een gebruiker zonder een consistent ontwerp kan denken dat hij zich op een andere website bevindt. Zorg ervoor dat u hetzelfde navigatiemodel gebruikt, zodat gebruikers gemakkelijk uw website kunnen bezoeken zonder verloren te zijn.

Bluegg, hieronder weergegeven, maakt gebruik van een eenvoudig en schoon navigatieontwerp dat in alle subpagina's hetzelfde blijft. Het enige verschil is de kleurindicator, die aangeeft op welke pagina de bezoeker zich bevindt.

Geef aan waar je bent

Het is van cruciaal belang om de gebruiker te allen tijde te laten weten waar hij zich bevindt. U kunt dit doen door de achtergrond van de link wijzigen, de kleur van de paginanaam of draai de tekst vetgedrukt in het navigatiemenu om het anders te maken dan anderen.

Austin Eastciders gebruikt een andere kleur en achtergrond om aan te geven op welke pagina de gebruiker zich bevindt. Deze indicator kan ook werken als een subtiele ontwerpwijziging, bijvoorbeeld door a te gebruiken verschillende navigatie-achtergrond waardoor het gevoel ontstaat dat andere menu-items diepgaand zijn.

Media Chirurgie gebruikt een donkerdere kleur als indicator voor een geopende subpagina. Simpel maar effectief.

Gebruik webconventies

Het draait allemaal om eenvoudig te gebruiken en intuïtieve navigatie op de website. Webconventies maken het een stuk eenvoudiger voor ontwerpers om hun ontwerpen te omzeilen. De meeste gebruikers klikten op het logo van de website om terug te gaan naar de startpagina, dus ontwerp uw logo om dat te doen.

Als je dat niet doet, je zorgt ervoor dat ze tijd doorbrengen om iets nieuws te leren of in sommige gevallen ongemakkelijk maken door niet te bieden wat zij verwachten dat algemeen aanvaarde navigatienormen zijn.

U kunt hier meer informatie vinden over webconventies:

10 Webdesign-conventies
Het webdesignwiel niet opnieuw uitvinden
Ontwerp met webconventies

Ontwerp injecteren plaatst het logo in de linkerbovenhoek, die vandaag past in een van de meest gebruikte webconventies.

Adams Creation gebruikt een van de meest voorkomende webconventies: het logo wordt in de linkerbovenhoek van de website en links naar de startpagina geplaatst.

Test het: betrek een derde partij

Test uw navigatieontwerp altijd met iemand die al eerder internet heeft gebruikt. Misschien wil je mensen binnenhalen die niet gerelateerd zijn aan het ontwerpproces om het te testen. Let op hun voorkeuren wanneer ze navigeren via uw site en analyseer de tijd die het duurde voordat ze de pagina's vonden waar ze op leken.

Voor betere nauwkeurigheid, meer mensen betrekken, de gegevens verzamelen, analyseren en samenvatten voor een betere pasvorm. Voer een naonderzoek uit als dit nodig is. Mogelijk krijgt u onverwachte ideeën en invoer die anders onopgemerkt zouden blijven zonder deze testrun.

Geef context

Om consistent te zijn met uw inhoud en navigatie, bieden websitegebruikers een context om dingen te vinden die ze snel nodig hebben. U kunt kleine pictogrammen plaatsen met betrekking tot de inhoud waarnaar u linkt of korte beschrijvingen om een overzicht te geven van waar de pagina over gaat.

Mijn eigen fiets gebruikt eenvoudige pictogrammen om gebruikers meer informatie te geven over wat ze in een bepaalde subpagina kunnen vinden.

Sarah Parmenter gebruikt korte en mooie bijschriften onder de hoofdnavigatie om wat informatie te geven over de subpagina's waarnaar de hoofdnavigatie verwijst.

SEO-doeleinden

Google houdt van consistente navigatie. Het is goed om een consistente navigatie te hebben, niet alleen voor gebruikers om te begrijpen en het idee te krijgen van hoe te navigeren door uw website maar ook voor zoekmachines om uw website te indexeren.

Zoekrobot robots kruipen door uw website om uw website te indexeren en de links in de resultatenpagina van de zoekmachine te plaatsen. Als je zichtbaar wilt zijn, let dan op een goed navigatieontwerp en krijg meer verkeer.

Gratis navigatiescripts (CSS en jQuery)

Hier is een korte lijst met de nieuwste navigatiemenu's die u mogelijk handig vindt voor uw projecten. Deze scripts zullen de gebruikerservaring van uw product nog beter maken door enkele leuke functies toe te voegen en het plezierig te maken om te gebruiken.

XML-driven verticaal nieuws-scrollerscript met HTML en jQuery: vScroller

Filtrify

Pagina-scroller

Tijdlijnportfolio

HorizontalNav

CSS3 Minimalistisch navigatiemenu

Cirkel navigatie-effect met CSS3

Net Navigatie-effecten met jQuery

Ascensor

Creëer een elegant CSS3 navigatiemenu

Showcase van mooie horizontale navigatie

En last but not least enkele inspirerende horizontale navigatiemenu's. Bekijk deze geweldige websites en hun navigatie-menu-oplossingen om nieuwe ideeën voor uw projecten te vinden.

Ch3mical