Designe en vinnende navigasjonsmeny ideer og inspirasjon
Navigasjonsmenyen på et nettsted er som et veiskilt på en gate eller et nivåkatalog i et kjøpesenter. Du kan ikke nå destinasjonen uten å først vite hvor du er. Som i virkeligheten er navigering i webdesign veldig viktig og spiller en viktig rolle i brukernes brukervennlighet, så vel som i brukeropplevelsen.
I dag kan du se mange forskjellige typer navigasjonsmenyer med interessante, kreative og uvanlige design. Men hva med effektiv navigering på et nettsted, hvordan ser det ut? hvordan skal det se ut?
I dag vil jeg gjerne dele mine observasjoner og kunnskaper om viktigheten av navigering i webdesign. Jeg vil avsløre noen enkle tips som du kan bruke til å forbedre nettstedet ditt navigasjon og brukervennlighet. Det vil også være noen eksempler på effektive navigasjonsmenyer for å gi deg en ide om hvordan du planlegger din neste design.
Informasjonsarkitektur
Navigasjonsplanlegging bør starte med informasjonsarkitektur. Det er viktig å sitte ned og brainstorm om et nettsteds informasjonsarkitektur. Du må finne ut hva slags funksjoner nettstedet tilbyr, hva som er viktigst og hva som kan plasseres i lavere nivåer i informasjonshierarkiet.
Informasjonsarkitektur inkluderer funksjoner, brukerbehov, sitemap, testing og wireframes. Du kan lese mer om informasjonsarkitektur i artikkelen av Cameron Chapman i Informasjonsarkitektur 101: Teknikker og Best Practices.
Bruke brukeraktiverte teknologier
Unngå å bruke Flash, JavaScript, jQuery eller noe annet som risikerer å hindre tilgang til navigering på nettstedet ditt ved å bygge navigeringslinjen, eller i det minste sørge for at de kan degradere grasiøst.
For flere referanser på grasiøs nedbryting av javascript, sjekk ut dette innlegget på 10 nyttige Fallback Methods for CSS og Javascript.
Bruk enkle, brukervennlige vilkår
Det er bedre å bruke enkelt, åpenbart og vilkår som er enkle å finne ut enn å holde seg til bransjens eneste vilkår for navigasjonsmenyen. Enhver lenke som tar brukere mer enn et sekund eller to for å finne ut er trolig uegnet til bruk.
Hvis en bruker må klikke på en kobling for å finne ut hva koblingen fører til, vil dette bidra til en dårlig brukeropplevelse for de besøkende.
eksempler
Vilkårene i navigasjonsmenyen på Larissa Ness nettsted er enkle å forstå og vanlige nok. Brukere vil ikke finne det forvirrende fordi de allerede har erfaring med menyer som dette.
Her er et annet godt eksempel på en ren og klar nettstednavigasjonsmeny med vanlige begreper brukt på csupport.
Kreativt byrå Eighty8Four bruker begrepet "showroom" som kan være forvirrende for besøkende. Denne termen kan bety portefølje eller arbeid, men det er ikke klart, og besøkende har ikke annet valg enn å klikke inn for å sjekke det ut.
Standardiser navigasjonsdesignet
Bruk samme navigasjonsmodell i alle sidene dine. Det er veldig viktig fordi uten bruk av konsistent design, kan en bruker faktisk tro at han er i en annen nettside. Pass på at du bruker samme navigasjonsmodell slik at brukerne enkelt kan gå om nettstedet ditt uten å gå tapt.
Bluegg, vist nedenfor, bruker et enkelt og rent navigasjonsdesign som forblir det samme på alle delsider. Den eneste forskjellen er fargen indikatoren, som viser siden besøkende er for tiden på.
Angi hvor du er
Det er viktig å la brukeren vite hvor han er til enhver tid. Du kan gjøre dette ved endring av lenkenes bakgrunn, fargen på sidenavnet eller Vri teksten med fet skrift i navigasjonsmenyen for å gjøre det annerledes enn andre.
Austin Eastciders bruker en annen farge og bakgrunn for å indikere siden brukeren er på. Denne indikatoren kan også fungere som en subtil designendring, for eksempel ved å bruke a annen navigasjonsbakgrunn som skaper følelsen av at andre menyelementer er i dybden.
Mediekirurgi bruker en mørkere farge som indikator for en åpnet underside. Enkelt men effektivt.
Bruk webkonvensjoner
Det handler om brukervennlig og intuitiv nettside navigasjon. Webkonvensjoner gjør det enklere for designere å jobbe rundt sine design. De fleste brukere vil klikke på nettstedets logo for å komme tilbake til hjemmesiden, så designe logoen din for å gjøre det.
Hvis du ikke gjør det, du får dem til å bruke tid til å lære noe nytt eller i noen tilfeller forstyrrer dem ved ikke å gi det de forventer å være aksepterte navigasjonsnormer.
Du kan lære mer om webkonvensjoner her:
- 10 Webdesign Konvensjoner
- Ikke gjenopprett webdesignhjulet
- Design med webkonvensjoner
Injiser design plasserer logoen øverst til venstre som passer til en av de mest brukte webkonvensjonene i dag.
Adams Creation bruker en av de vanligste webkonvensjonene - logoen er plassert på venstre øverste hjørne av nettstedet og linker til hjemmesiden.
Test det: Involver en tredje part
Test alltid navigasjonsdesignet ditt med alle som har brukt Internett før. Du vil kanskje ta med folk som ikke var relatert til designprosessen for å teste den. Vær oppmerksom på deres preferanser når de navigerer gjennom nettstedet ditt, og analyser tiden det tok for dem å finne sidene de var ute etter.
For bedre nøyaktighet, involvere flere mennesker, samle dataene, analysere og oppsummere det for bedre passform. Gjør en etterundersøkelse hvis det er nødvendig. Du kan få noen uventede ideer og innspill som ellers ville gå uoppdaget uten denne testkjøringen.
Gi sammenheng
For å være konsistent med innholdet og navigasjonen, gi en viss kontekst for nettstedbrukerne for å finne ting de trenger raskt. Du kan plassere små ikoner knyttet til innholdet du kobler til eller korte beskrivelser for å gi en oversikt over hva siden handler om.
Min egen sykkel bruker enkle ikoner for å gi brukerne mer informasjon om hva de kan finne i visse undersider.
Sarah Parmenter bruker korte og fine bildetekster under hovednavigasjonen for å gi litt informasjon om delsidene hovednavigasjonen knytter til.
SEO formål
Google liker konsekvent navigering. Det er godt å ha konsekvent navigering, ikke bare for brukere å forstå og få ideen om hvordan man navigerer gjennom nettstedet ditt, men også for søkemotorer for å indeksere nettstedet ditt.
Søkemotorroboter vil krype gjennom nettstedet ditt for å indeksere nettstedet ditt og legge linkene i søkeresultatsiden. Hvis du vil være synlig, vær oppmerksom på god navigasjonsdesign og få mer trafikk.
Gratis navigasjonsskript (CSS og jQuery)
Her er en kort liste over de nyeste navigasjonsmenyene du kan finne nyttige for dine prosjekter. Disse skriptene vil gjøre ditt produkts brukeropplevelse enda bedre ved å legge til noen fine funksjoner og gjøre det gledelig å bruke.
XML-drevet vertikal News Scroller Script ved hjelp av HTML og jQuery: vScroller
Filtrify
Side Scroller
Tidslinjes portefølje
HorizontalNav
CSS3 Minimalistisk Navigasjonsmeny
Sirkelnavigasjonseffekt med CSS3
Grid Navigation Effects med jQuery
Ascensor
Lag en elegant CSS3 navigasjonsmeny
Showcase av vakker, horisontal navigasjon
Og sist men ikke minst noen inspirerende horisontale navigasjonsmenyer. Sjekk disse fantastiske nettstedene og deres navigasjonsmenyløsninger for å finne nye ideer til dine prosjekter.
Ch3mical
Bloom Search Marketing Inc.
Alex Perez
Libor Zezulka
Hauska!
Golden Isles
Neil Carpenter
Marc Thomas
3D-polystyren
Liechtenecker
Eventyrverdenen
Arbutus Photography
OMDRL
4 pines øl
Hunters Wines
Forhåpentligvis finner du denne artikkelen nyttig og informativ. Hvis du har noen tanker eller hvis du er uenig, vennligst del din mening i kommentarfeltet.
