Designa en vinnande Navigation Meny Idéer och Inspirationer
Navigationsmenyn på en webbplats är som ett vägskylt på en gata eller en nivåkatalog i ett köpcentrum. Du kan inte nå din destination utan att först veta var du är. Precis som i det verkliga livet är navigering i webbdesign mycket viktig och spelar en viktig roll i användarnas användbarhet och användarupplevelse.
Idag kan du se många olika typer av navigationsmenyer med intressanta, kreativa och ovanliga mönster. Men vad sägs om effektiv navigering på en webbplats, hur skulle det se ut; hur ska det se ut?
Idag vill jag dela med mig av mina observationer och kunskaper om vikten av navigering i webbdesign. Jag kommer att avslöja några enkla tips som du kan använda för att förbättra din webbplatsnavigation och användbarhet. Det kommer också att finnas några exempel på effektiva navigeringsmenyer för att ge dig en uppfattning om hur du planerar din nästa design.
Informationsarkitektur
Navigationsplanering bör börja med informationsarkitektur. Det är viktigt att sitta ner och brainstorm om en webbplats informationsarkitektur. Du måste ta reda på vilken typ av funktioner webbplatsen erbjuder, vad som är viktigast och vad som kan placeras i lägre nivåer i informationshierarkin.
Informationsarkitekturen omfattar funktioner, användarbehov, sitemap, testning och wireframes. Du kan läsa mer om informationsarkitekturen i artikeln av Cameron Chapman i Information Architecture 101: Techniques and Best Practices.
Använda användaraktiverad teknik
Undvik att använda Flash, JavaScript, jQuery eller något annat som riskerar att hämma åtkomst till din webbplatsnavigering när du bygger din navigeringsfält, eller åtminstone se till att de kan försämras graciöst.
För mer referenser på graciös nedbrytning av javascript, kolla in det här inlägget på 10 användbara fallbackmetoder för CSS och Javascript.
Använd enkla, användarvänliga termer
Det är bättre att använda enkelt, uppenbart och villkor som är lätta att räkna ut än att behålla branschens enda villkor för din navigationsmeny. Varje länk som tar användare mer än en sekund eller två för att räkna ut är förmodligen olämplig för användning.
Om en användare behöver klicka på en länk för att ta reda på vad länken leder till kommer det att bidra till en dålig användarupplevelse för dina besökare.
exempel
Villkoren i navigationsmenyn på Larissa Ness hemsida är lätt att förstå och vanliga nog. Användare kommer inte att hitta det förvirrande eftersom de redan har erfarenhet av menyer så här.
Här är ett annat bra exempel på en ren och tydlig webbplatsnavigationsmeny med vanliga termer som används på csupport.
Creative Agency Eighty8Four använder termen "showroom" som kan vara förvirrande för besökare. Denna term kan betyda portfölj eller arbete men det är inte klart och besökare har inget annat val än att klicka in för att kolla in det.
Standardisera navigationsdesignen
Använd samma navigeringsmodell på alla dina sidor. Det är väldigt viktigt, för en konsekvent design kan en användare faktiskt tro att han är på en annan webbplats. Se till att du använder samma navigeringsmodell så att användare enkelt kan gå till din webbplats utan att gå vilse.
Bluegg, visas nedan, använder en enkel och ren navigationsdesign som förblir densamma i alla delsidor. Den enda skillnaden är färgindikatorn, som visar den sida besökaren är närvarande på.
Ange var du är
Det är viktigt att låta användaren veta var han är hela tiden. Du kan göra det här genom ändra länkens bakgrund, färg på sidnamnet eller vrid texten med fetstil i navigeringsmenyn för att göra det annorlunda än andra.
Austin Eastciders använder en annan färg och bakgrund för att ange vilken sida användaren är på. Denna indikator kan också fungera som en subtil designändring, till exempel genom att använda a olika navigeringsbakgrund vilket skapar en känsla av att andra menyalternativ är djupgående.
Mediekirurgi använder en mörkare färg som en indikator för en öppen undersida. Enkel men effektiv.
Använd webbkonventioner
Det handlar om lättanvänd och intuitiv webbplatsnavigering. Webkonventioner gör det mycket enklare för designers att arbeta runt sina mönster. De flesta användare skulle klicka på hemsidan för att komma tillbaka till hemsidan, så designa din logotyp för att göra det.
Om du inte gör det, du gör dem tillbringa tid att lära sig något nytt eller i vissa fall stör dem genom att inte ge vad de förväntar sig att vara allmänt accepterade navigeringsnormer.
Du kan lära dig mer om webbkonventioner här:
- 10 webbdesignkonventioner
- Förbättra inte webdesignhjulet
- Design med webbkonventioner
Injektionsdesign placerar logotypen längst upp till vänster som passar till en av de mest använda webbkonventionerna idag.
Adams Creation använder ett av de vanligaste webbkonventionerna - logotypen placeras på vänstra högra hörnet av webbplatsen och länkar till hemsidan.
Testa det: Involvera en tredje part
Testa alltid din navigationsdesign med någon som har använt Internet tidigare. Du kanske vill ta med personer som inte var relaterade till designprocessen för att testa den. Observera deras preferenser när de navigerar genom din webbplats och analysera den tid det tog för dem att hitta de sidor som de letade efter.
För bättre noggrannhet, involvera fler människor, samla in data, analysera och sammanfatta det för bättre passform. Gör en eftertestundersökning om det är nödvändigt. Du kan få några oväntade idéer och inmatningar som annars skulle bli oupptäckta utan denna testkörning.
Ge sammanhang
För att vara konsekvent med ditt innehåll och navigering ge något kontext för webbplatsanvändare att hitta saker de behöver snabbt. Du kan placera små ikoner relaterade till innehållet du länkar till eller korta beskrivningar för att ge en översikt över vad sidan handlar om.
Min egen cykel använder enkla ikoner för att ge användarna mer information om vad de kan hitta på vissa undersidor.
Sarah Parmenter använder korta och trevliga bildtexter under huvudnavigering för att ge viss information om delsidorna som huvudnavigeringen länkar till.
SEO ändamål
Google gillar konsekvent navigering. Det är bra att ha konsekvent navigering, inte bara för att användarna ska förstå och få tanken på hur man navigerar via din webbplats men också för sökmotorer att indexera din webbplats.
Sökrobotar kommer att krypa igenom din webbplats för att indexera din webbplats och placera länkarna i sökmotorns resultatsida. Om du vill vara synlig, var uppmärksam på god navigationsdesign och få mer trafik.
Gratis navigationsskript (CSS och jQuery)
Här är en kort lista över de senaste navigationsmenyerna som du kan hitta användbara för dina projekt. Dessa skript kommer att göra din produkts användarexperience ännu bättre genom att lägga till några fina funktioner och göra det glädjande att använda.
XML-driven vertikal News Scroller Script med HTML och jQuery: vScroller
Filtrify
Page Scroller
Tidslinjesportfölj
HorizontalNav
CSS3 Minimalistisk Navigationsmeny
Cirkelnavigeringseffekt med CSS3
Grid Navigation Effects med jQuery
Ascensor
Skapa en elegant CSS3 navigationsmeny
Utställning av vacker horisontell navigering
Och sist men inte minst några inspirerande horisontella navigeringsmenyer. Kolla på dessa fantastiska webbplatser och deras navigationsmenylösningar för att hitta nya idéer för dina projekt.
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ägare Viner
Förhoppningsvis hittar du den här artikeln användbar och informativ. Om du har några tankar eller om du är oense, vänligen dela din åsikt i kommentarfältet.
