3 viktiga regler för effektiv navigationsdesign
Att utforma din webbplatsnavigering är som att lägga grunden för ditt hus. Om du inte planerar din stiftelse på rätt sätt kan din byggnad riskera att kollapsa, oavsett hur bra det ser ut. Om du vill dra nytta av de bästa försäljningarna eller konverteringarna som är möjliga från din webbplats, måste du spendera tid för att planera hur publiken ska interagera med ditt innehåll och ta reda på det mest intuitiva sättet att organisera och representera det.
Kom alltid ihåg, om du får den här delen fel, riskerar du att alienera en stor del av din publik.
Vad är navigering?
Det finns mer än ett sätt att titta på navigering. Du kan säga att det är ett fokalelement på din webbplats som gör att dina kunder kan hitta vad de letar efter utan förvirring eller onödiga klick. På samma sätt kan du argumentera för att det är ett sätt att försiktigt leda dina kunder till den viktigaste informationen på din webbplats för att generera försäljning eller förfrågningar.
Chansen är, det är båda.
Navigationsdesign är som många andra saker i design: det finns inget universellt överenskommet "rätt sätt" att göra det. Varje hemsida presenterar sina egna utmaningar, som kan åtgärdas på ett antal sätt. Den goda nyheten är att det finns sätt att tänka på och organisera innehåll som minimerar risken för misslyckande.
70percentpures webbplats har enkel navigering som är både vertikal och horisontell.
1) Slutföra din IA först
Planering av innehållet för en stor webbplats är en viktig uppgift som måste fyllas i innan du utformar din navigering. Annars känd som IA (Information Architecture) Denna översikt, förståelse och manipulation av ditt innehåll är vad som utgör ryggraden för din webbplats användbarhet. Att utforma din navigering före - eller istället för - att utforma din IA korrekt skulle vara som att skapa ett bokindex innan du sätter ihop sidorna. Inte en bra idé.
En naturlig förmåga att se den stora bilden hjälper när man arbetar med IA. Viktigare är att du måste kunna se innehållet ur användarens perspektiv. Ibland innebär det att man går emot klientens eget sätt att kategorisera innehållet - så var beredd på motstånd om det är fallet.
Här är några saker du kan fråga dig själv för att hjälpa till att förbereda ditt system och motivera det till kunden:
- Vilka sidor behövs för den här sidan?
- Har varje sida en avsikt inom det bredare systemet, och är innehållet uppdelat i förnuftiga, relatable bitar?
- Vilka utsläppsrätter måste göras för att lägga till innehåll i framtiden?
- Vilka användargrupper arbetar du med? (t.ex. inloggad / ut, abonnemangstyper, annonsörer etc.)
- Vad är det primära målet för varje typ av användare?
Att svara på alla ovanstående och förstå hur innehållet är relaterat till dina användare är grundläggande för god navigationsdesign.
2) KISS: Håll det enkelt, ibland
Alla som någonsin har använt en webbplats kan förmodligen komma överens: ett navigationsområde ska vara så enkelt som möjligt. Överväldigande användaren med val och trängselnavigering med text är en dålig idé och kommer allvarligt att hindra din webbplatss övergripande användbarhet.
Bloombergs enkla navigering belyser komplexiteten av informationen på deras webbplats.
Och ändå kan enkelheten vara vilseledande. Gräva djupare och du kan upptäcka att det som faktiskt är ganska komplext har blivit smidigt förpackat på ett sätt som känns enkelt. Detta är IA i aktion.
Ta till exempel Microsofts hemsida till exempel. Deras huvudnavigering har bara fyra saker, vilket låter som inte tillräckligt nära, med tanke på deras sortiment. Men rullgardinsmena splittras mycket snyggt i sektioner och presenteras på ett sådant sätt att du kan hitta det du letar efter snabbt och enkelt.
Delsidor är som mini-sidor, som följer samma navigationsformat. Menyn känns och beter sig lika, men anpassar sig för att erbjuda mer detaljer, desto djupare kommer du in på webbplatsen.
Det är lätt att använda, förutsägbart och konsekvent. Med tanke på deras produktsortiment, och antalet sidor på deras hemsida, är detta inte en medelhög prestation, och är självklart en produkt av många timmars iterativ utveckling. Det känns inte bara som en av sina produkter - vilket är väldigt lugnande för besökaren - men det organiserar innehållet på ett sätt som är bra för både kunder och Microsoft själva.
3) Välj orientering noggrant
Med tanke på att en datorskärm traditionellt används i ett landskapsformat, gör horisontell navigering mycket mening. Så mycket av tiden känns det bara mer balanserat, mindre påträngande och lätt att placera ur ett designperspektiv.
Oculus, tillverkare av VR-headset skulle vara dumt om de inte pratade om sina virtuella landskap med en horisontell meny. Det bär inte bara en bra metafor men låter användaren dyka djupare in i innehållet genom att rulla ner sidan.
Men horisontella menyer lägger inte till värde i alla sammanhang. Därför ser du mycket vertikal navigering, särskilt i e-handel. Den bär echoes av de färgade flikarna som hjälper dig att hitta produkter i en fysisk katalog och undviker att störa en horisontell streck med för mycket text och för många alternativ.
En bra vertikal navigering är ingen enkel prestation, speciellt om du har många produkter. Det är därför jag gillar den här från Jack Jones.
Ikonerna bredvid texten hjälper verkligen läsbarheten. De enkla formerna är överraskande kommunikativa och hjälper till att hålla navigeringsområdet fokuserat och städat. Klicka på en kategori, och menyn expanderar för att avslöja delalternativ, igen på ett sätt som är mycket lätt på ögat.
En mer ovanlig användning av den vertikala menyn finns på Squarepushers webbplats. Här används navigeringen som en flik, utanför sidan av huvudinnehållet, som användaren enkelt kan bläddra och klicka igenom. Det är ett mycket mer linjärt tillvägagångssätt och ekar sekvensiell karaktär av ett Squarepusher-spår.
Reglerna ändras
Som med alla saker på webben tar nya tekniker, tekniker, enheter och trender sina egna utmaningar och innovationer till bordet. Responsiv webbdesign innebär att en traditionell horisontell nav nu också är en vertikal nav (på mindre skärmar). Parallax-tekniker ser navigationsområdena ebb och flöda som tidvatten, beroende på var du befinner dig på sidan.
Det finns inget enda sätt att skapa den perfekta webbplatsen nav. Men en iterativ metod att designa och testa, helst med tillgång till webbplatsens statistik och konverteringsdata, kommer troligen att ge de bästa resultaten.
Att vara motorn som driver din webbplats, din navigering ska vara förutsägbar, enkel, konsekvent och välplacerad.