Design af en vindende Navigation Menu Idéer og inspiration
Navigationsmenuen på et websted er som et vejskilt på en gade eller et niveau bibliotek i et indkøbscenter. Du kan ikke nå din destination uden først at vide, hvor du er. Ligesom i det virkelige liv er navigation i webdesign meget vigtig og spiller en stor rolle i en brugers brugervenlighed såvel som i brugeroplevelse.
I dag kan du se mange forskellige typer navigationsmenuer med interessante, kreative og usædvanlige designs. Men hvad med effektiv navigation på en hjemmeside, hvordan ser det ud; hvordan skal det se ud?
I dag vil jeg gerne dele mine observationer og viden om vigtigheden af navigation i webdesign. Jeg vil afsløre nogle få enkle tips, som du kan bruge til at forbedre din hjemmeside navigation og brugervenlighed. Der vil også være nogle eksempler på effektive navigationsmenuer, der giver dig en ide om, hvordan du planlægger dit næste design.
Information Arkitektur
Navigationsplanlægning skal starte med informationsarkitektur. Det er vigtigt at sætte sig ned og brainstorm om en hjemmeside informationsarkitektur. Du skal finde ud af, hvilke slags funktioner hjemmesiden tilbyder, hvad der er vigtigst, og hvad der kunne placeres i lavere niveauer i informationshierarkiet.
Information arkitektur omfatter funktioner, brugerbehov, sitemap, test og wireframes. Du kan læse mere om informationsarkitektur i artiklen af Cameron Chapman i Information Architecture 101: Techniques and Best Practices.
Brug af brugeraktiverede teknologier
Undgå at bruge Flash, JavaScript, jQuery eller noget andet, der risikerer at hæmme adgangen til dit website navigation i opbygningen af din navigationslinje eller i det mindste sørge for at de kan nedbryde yndefuldt.
For flere referencer på yndefulde nedbrydning af javascript, Tjek dette indlæg på 10 Nyttige Fallback Metoder til CSS og Javascript.
Brug enkle, brugervenlige udtryk
Det er bedre at bruge Enkelt, indlysende og vilkår, der er lette at regne ud end at holde sig til branchens eneste vilkår for din navigationsmenu. Ethvert link, der tager brugerne mere end et sekund eller to for at finde ud af, er sandsynligvis uegnet til brug.
Hvis en bruger skal klikke på et link for at finde ud af, hvad linket fører til, vil dette bidrage til en dårlig brugeroplevelse for dine besøgende.
eksempler
Vilkår i navigationsmenuen på Larissa Ness 'hjemmeside er nemme at forstå og fælles nok. Brugere finder det ikke forvirrende, fordi de allerede har erfaring med menuer som denne.
Her er et andet godt eksempel på en ren og klar hjemmesidenavigationsmenu med de anvendte fælles udtryk på csupport.
Kreativt agentur Eighty8Four bruger udtrykket "showroom", som kan være forvirrende for besøgende. Dette udtryk kan betyde portefølje eller arbejde, men det er ikke klart, og besøgende har intet andet valg end at klikke på for at tjekke det ud.
Standardiser navigationsdesignet
Brug samme navigationsmodel på alle dine sider. Det er meget vigtigt, fordi uden brug af et ensartet design kan en bruger faktisk tro, at han er på en anden hjemmeside. Sørg for, at du bruger den samme navigeringsmodel, så brugerne nemt kan omgå din hjemmeside uden at gå tabt.
Bluegg, vist nedenfor, bruger et simpelt og rent navigationsdesign, der forbliver det samme i alle delsider. Den eneste forskel er farveindikatoren, som viser den side, den besøgende er i øjeblikket på.
Angiv hvor du er
Det er afgørende at lade brugeren vide, hvor han er til enhver tid. Du kan gøre dette ved ændre linkets baggrund, farve på sidenavnet eller drej teksten fed i navigationsmenuen for at gøre det anderledes end andre.
Austin Eastciders bruger en anden farve og baggrund for at angive den side brugeren er på. Denne indikator kan også fungere som en subtil designændring, for eksempel ved at bruge a anden navigation baggrund hvilket skaber følelsen af at andre menupunkter er dybtgående.
Mediekirurgi bruger en mørkere farve som indikator for en åbnet underside. Simpelt men effektivt.
Brug webkonventioner
Det handler om brugervenlig og intuitiv website navigation. Webkonventioner gør det meget lettere for designere at arbejde rundt om deres design. De fleste brugere vil klikke på hjemmesiden logo for at komme tilbage til hjemmesiden, så design dit logo til at gøre det.
Hvis du ikke gør det, du får dem til at bruge tid til at lære noget nyt eller i nogle tilfælde forstyrrer dem ved ikke at give det, de forventer at være almindeligt accepterede navigationsnormer.
Du kan lære mere om webkonventioner her:
- 10 Webdesign Konventioner
- Genopfind ikke webdesignhjulet
- Design med webkonventioner
Injektionsdesign placerer logoet øverst til venstre som passer til en af de mest anvendte webkonventioner i dag.
Adams Creation bruger et af de mest almindelige webkonventioner - logoet er placeret på venstre øverste hjørne af hjemmesiden og links til hjemmesiden.
Test det: Involver en 3. part
Test altid dit navigationsdesign med enhver person, der tidligere har brugt internettet. Du kan måske medbringe mennesker, der ikke var relateret til designprocessen for at teste den. Overhold deres præferencer, når de navigerer gennem dit websted og analysere den tid det tog for dem at finde de sider, de var lookign for.
For bedre nøjagtighed, involvere flere mennesker, indsamle dataene, analysere og opsummere det for bedre pasform. Lav en efterprøveundersøgelse, hvis det er nødvendigt. Du kan få nogle uventede ideer og input, som ellers ville gå uden opdagelse uden denne testkørsel.
Giv kontekst
For at være i overensstemmelse med dit indhold og navigation giver nogle kontekst til web-brugere at finde de ting, de har brug for hurtigt. Du kan placere små ikoner relateret til det indhold, du linker til eller korte beskrivelser for at give et overblik over, hvad siden handler om.
Min egen cykel bruger enkle ikoner til at give brugerne flere oplysninger om, hvad de kan finde i visse undersider.
Sarah Parmenter bruger korte og flotte billedtekster under hovednavigation til at give nogle oplysninger om delsiderne, som hovednavigationen linker til.
SEO formål
Google kan lide konsekvent navigation. Det er godt at have konsekvent navigation ikke kun for brugerne at forstå og få ideen om, hvordan man navigerer gennem dit websted, men også for søgemaskiner til at indeksere dit websted.
Søgemaskine robotter vil gennemgå din hjemmeside for at indeksere dit websted og sætte linkene på søgeresultatsiden. Hvis du vil være synlig, skal du være opmærksom på god navigationsdesign og få mere trafik.
Gratis navigationsskripter (CSS og jQuery)
Her er en kort liste over de nyeste navigationsmenuer, du måske finder nyttige til dine projekter. Disse scripts vil gøre din produkts brugervidenskab endnu bedre ved at tilføje nogle fine funktioner og gøre det nemmere at bruge.
XML-drevet Lodret Nyheds Scroller Script ved hjælp af HTML og jQuery: vScroller
Filtrify
Page Scroller
Timeline Portfolio
HorizontalNav
CSS3 Minimalistisk Navigation Menu
Cirkelnavigationseffekt med CSS3
Gitternavigationseffekter med jQuery
Ascensor
Opret en elegant CSS3 Navigation Menu
Fremvisning af smuk vandret navigation
Og sidst men ikke mindst nogle inspirerende vandrette navigationsmenuer. Tjek disse fantastiske hjemmesider og deres navigationsmenu løsninger for at finde nye ideer til dine projekter.
Ch3mical
Bloom Search Marketing Inc.
Alex Perez
Libor Zezulka
Hauska!
Golden Isles
Neil Carpenter
Marc Thomas
3D-polystyren
Liechtenecker
Adventure World
Arbutus Photography
OMDRL
4 Pines Øl
Jægere Vine
Forhåbentlig finder du denne artikel nyttig og informativ. Hvis du har nogle tanker, eller hvis du er uenig, kan du dele din mening i kommentarfeltet.
