3 grunnleggende regler for effektiv navigasjonsdesign
Utforming av ditt nettstednavigasjon er som å legge grunnlaget for huset ditt. Unnlatelse av å planlegge grunnlaget ditt på riktig måte kan føre til at din bygning risikerer å kollapse, uansett hvor fint det ser ut. Hvis du vil dra nytte av de beste salgene eller konverteringene som er mulige fra nettstedet ditt, må du bruke tid på å planlegge hvordan publikum vil samhandle med innholdet ditt, og finne ut den mest intuitive måten å organisere og representere på.
Husk alltid, hvis du får denne delen feil, risikerer du å fremmedgjøre en stor del av publikum.
Hva er navigasjon?
Det er mer enn én måte å se på navigasjonen. Du kan si at det er et fokuseringselement på nettstedet ditt som gjør det mulig for kundene å finne det de leter etter uten forvirring eller unødvendige klikk. Tilsvarende kan du hevde at det er en måte å forsiktig lede kundene dine til den viktigste informasjonen på nettstedet ditt for å generere salg eller henvendelser.
Sjansen er, det er begge.
Navigasjonsdesign er som mange andre ting i design: det er ingen universelt avtalt "riktig måte" å gjøre det. Hvert nettsted presenterer sine egne utfordringer, som kan benyttes på en rekke måter. Den gode nyheten er at det finnes måter å tenke på og organisere innhold som minimerer risikoen for fiasko.
70percentpures nettsted har enkel navigering som er både vertikal og horisontal.
1) Fullfør din IA først
Planlegging av innholdet for et stort nettsted er en viktig oppgave som må fylles ut før du designer navigasjonen. Ellers kjent som IA (Informasjonsarkitektur) er denne oversikten, forståelsen og manipuleringen av innholdet ditt hva som gjør ryggraden til nettstedet ditt brukbar. Å designe navigasjonen før - eller i stedet for - å designe din IA riktig, er som å lage en boksindeks før du setter inn sidene. Ikke en god ide.
En naturlig evne til å se det store bildet hjelper når du arbeider med IA. Enda viktigere, du må kunne se innholdet fra en brukerperspektiv. Noen ganger betyr dette at det går mot kundens egen måte å kategorisere innholdet på - så vær forberedt på motstand hvis det er tilfelle.
Her er noen ting du kan spørre deg selv om å bidra til å forberede ordningen, og rettferdiggjøre den til klienten:
- Hvilke sider trengs for dette nettstedet?
- Har hver side en hensikt i den bredere ordningen, og er innholdet brutt opp i fornuftige, relatable biter?
- Hvilke tillatelser må gjøres for å legge til innhold i fremtiden?
- Hvilke brukergrupper jobber du med? (f.eks. innlogget / ut, abonnementstyper, annonsører, etc.)
- Hva er det primære målet for hver type bruker?
Å svare på alt ovenfor, og forstå hvordan innholdet ditt relaterer seg til brukerne, er grunnleggende for god navigasjonsdesign.
2) KISS: Hold det enkelt, noen ganger
Alle som noen gang har brukt et nettsted, kan nok være enige: Et navigasjonsområde bør være så enkelt som mulig. Overveldende brukeren med valg og trengte navigasjonen med tekst er en dårlig ide, og vil alvorlig hindre nettstedets samlede brukervennlighet.
Bloombergs enkle navigasjon belyser kompleksiteten av informasjon på deres nettsted.
Og likevel kan enkelhet være villedende. Grav dypere og du kan oppdage at det som egentlig er ganske komplekst, har blitt smart pakket på en måte som føles enkelt. Dette er IA i aksjon.
Ta blant annet Microsofts hjemmeside. Deres hovednavigasjon har bare fire elementer, noe som høres ut som ikke nær nok, med tanke på deres produktsortiment. Men drop-downene er veldig splittet i seksjoner, og presenteres på en slik måte at du kan finne det du leter etter raskt og enkelt.
Delsider er som minisider, etter samme navigasjonsformat. Menyen føles og oppfører seg det samme, men tilpasser seg for å gi mer detaljert informasjon jo dypere du kommer inn på nettstedet.
Det er enkelt å bruke, forutsigbart og konsistent. Tatt i betraktning deres produktsortiment, og antall sider på deres nettsted, er dette ikke noe feat, og er åpenbart produktet av mange timer iterativ utvikling. Ikke bare føles det som en av sine produkter - som er veldig beroligende for den besøkende - men det organiserer innholdet på en måte som er bra for både kunden og Microsoft selv.
3) Velg orientering nøye
Gitt at en dataskjerm er tradisjonelt brukt i et landskapsformat, gir horisontal navigasjon mye mening. Så mye av tiden føles det bare mer balansert, mindre påtrengende, og lett å plassere fra et designperspektiv.
Oculus, produsenter av VR-headsets ville være dumme hvis de ikke snakket om deres virtuelle landskap med en horisontal meny. Ikke bare har den en fin metafor, men lar brukeren dype dypere inn i innholdet ved å bla nedover siden.
Men horisontale menyer legger ikke til verdi i alle sammenhenger, og derfor ser du mye vertikal navigasjon, spesielt i e-handel. Den bærer ekko av de fargede fanene som hjelper deg med å finne produkter i en fysisk katalog, og unngår å rotere en horisontal linje med for mye tekst og for mange alternativer.
En god vertikal navigering er ikke lett, spesielt hvis du har mange produkter. Det er derfor jeg liker denne fra Jack Jones.
Ikonene ved siden av teksten hjelper virkelig lesbarheten. De enkle figurene er overraskende kommunikative, og bidrar til å holde navigasjonsområdet fokusert og ryddig. Klikk på en kategori, og menyen ekspanderer for å avsløre delalternativer, igjen på en måte som er veldig lett på øyet.
En mer uvanlig bruk av vertikalmenyen finnes på Squarepushers nettsted. Her brukes navigasjonen som en flipp, utenfor siden av hovedinnholdet, som brukeren bare kan rulle og klikke gjennom. Det er en langt mer lineær tilnærming og ekko sekvensiell karakter av et Squarepusher-spor.
Reglene endrer seg
Som med alle ting på nettet, gir nye teknikker, teknologier, enheter og trender sine egne utfordringer og innovasjoner til bordet. Responsive webdesign betyr at en tradisjonell horisontal nav er nå også en vertikal nav (på mindre skjermer). Parallax teknikker se navigasjonsområder ebb og flyte som tidevannet, avhengig av hvor du er på siden.
Det er ingen enkel måte å skape det perfekte nettstedet til nav. Men en iterativ tilnærming til design og testing, helst med tilgang til nettstedets statistikk og konverteringsdata, vil trolig gi de beste resultatene.
Å være motoren som driver nettstedet ditt, bør navigasjonen være forutsigbar, enkel, konsekvent og godt plassert.