Navigationsmønstre for ti almindelige typer af hjemmesider
Navigation er et af de vigtigste aspekter af enhver hjemmeside. Uden god navigation bliver et websted ubrugeligt for besøgende. De kan ikke finde de oplysninger, de har brug for, og i stedet søge konkurrerende websteder. Det er vigtigt, at dine websteder er lette at navigere, hvis du vil være en succesfuld designer.
i men der er ingen one-size-fits-alle løsninger til navigation. Det, der fungerer godt på et nyhedswebsted, fungerer måske ikke godt for et personligt websted. Noget, der er utroligt brugervenligt på en blog, kan være frustrerende på et e-handelssite.
Nedenfor er der ti almindelige typer af websteder med forslag til de forskellige navigationsmønstre, der fungerer godt for hver enkelt.
Der er også eksempler, for at give dig en bedre ide om, hvad vi taler om. Du er velkommen til at dele flere gode eksempler i kommentarerne!
Alle steder
Der er visse navigationsmønstre, der fungerer på stort set alle websteder. I stedet for at hylse de samme oplysninger i hver af nedenstående kategorier, vil jeg blot inkludere dem her.
Det første mønster er faneblad navigation. Faneblade passer perfekt til navigation, fordi de psykologisk minder om besøgende på papirklip og navigerer til en ny del af en notesbog eller et bindemiddel, noget som knapper eller almindelige tekstforbindelser ikke gør. Faner er næsten altid den foretrukne metode til styling af dine hovednavigationsforbindelser, selvom de selvfølgelig fungerer bedst, når der er et begrænset antal links i en menu.
Det andet mønster er header navigation. Hvis dit websted har en header (og de fleste websteder gør), så er headernavigation en god ide. Besøgende er vant til at se på overskriften for navigationslinks. Denne forudbestemte adfærd gør det nemt for dig at gøre dit websted mere brugervenligt ved at finde din navigation i eller nær overskriften.
Det endelige mønster, der gælder for stort set alle websteder, er footer navigation. Mange brugere (men ikke alle) vil se til sidefoden for et link, hvis de ikke kan finde det, de leder efter i din anden navigation. Mange grundlæggende sider er ofte forbundet fra en sidefod, herunder "om", "kontakt" og "sitemap" -links, uanset om de er knyttet andetsteds i navigationen eller ej.
1. Blogs
Blogs har generelt et stort indhold af indhold i omvendt kronologisk rækkefølge. Dette giver både en logisk ramme for din navigation samt nogle unikke udfordringer, afhængigt af typen af blog.
De fleste blogs vil bruge en kombination af pagination (eller kontinuerlig rulning), en arkivside, sidebarnavigering for kategorier og / eller tags, og muligvis også header og sidefod navigation. Det er vigtigt at tænke igennem, hvordan dine besøgende sandsynligvis vil have adgang til indholdet på din blog.
For eksempel kan en personlig blog muligvis ikke have kategori- eller tagnavigering uden for links i meta-oplysningerne for hvert indlæg. I disse tilfælde vil du have besøgende adgang til indhold i omvendt kronologisk rækkefølge, snarere end at hoppe rundt efter emne. En emneblog skal derimod have kategori- og tagnavigation, fordi besøgende sandsynligvis søger information om specifikke emner inden for det overordnede emne.
På et minimum skal blogs indeholde navigation for at flytte kronologisk gennem indholdet (enten paginering, næste / forrige links eller kontinuerlig rulning) samt navigation eller sidebarnavigering til bestemte sider uden for hovedblogsiden.
Emner (og undertiden corporate) blogs skal også indeholde kategori- eller tagmenuer i deres navigation, enten i overskriften eller sidebjælken. Særligt store blogs bør også overveje at implementere en søgefunktion for at gøre det lettere for brugerne hurtigt at finde præcis, hvad de leder efter. Bare sørg for, at søgefunktionen virker som den skal, og virkelig opgør alle relevante resultater.
EcoKI , herunder, omfatter topniveau kategorier i deres header navigation, med navigation til vigtige sider i en sekundær overskrifts navigationslinje. Det er et effektivt layout, der tydeligt lægger vægt på de mest brugte links.
2. Nyhedswebsteder
Nyhedswebsteder ligner blogs, idet de generelt præsenterer historier i omvendt kronologisk rækkefølge. Nyhedswebsteder er ofte kategoriseret højt og har mere kompleks informationsarkitektur end mange andre typer websteder. På grund af dette er deres navigationsmønstre ofte mere komplekse.
Nøglen gør ikke navigationen mere kompliceret end den skal være. Drop-down og fly-out menuer er begge gode måder at håndtere større menuer uden at cluttering op siden. Hvis du kigger på de større nyhedswebsteder (som f.eks. Google Nyheder, f.eks. Nedenfor), bryder de nyhederne op i brede kategorier som Politik, Lokal, Verden, Sport, Underholdning osv. Hvilke kategorier du bruger, afhænger af om webstedet er et generelt nyhedswebsted eller et aktuelt nyhedswebsted.
Etiketter kan også forbedre navigationen betydeligt. Ved at mærke hver historie gør det nemt for brugerne at finde relaterede historier uden at skabe en kompliceret eller opustet kategoristruktur. Det er en god ide at ikke kun indeholde taglænker i hver artikel, men også at inkludere en liste over tags eller en tag-sky et eller andet sted (kun inklusive populære tags kan være en god ide for websteder med hundredvis af tags).
Kobling af inline inden for artikler forbedrer brugeroplevelsen meget. Mange af de større nyhedswebsteder gør dette, så brugerne straks får adgang til alle artikler om et emne. Det ligner meget på at indeholde tags, men snarere end en liste i begyndelsen eller slutningen af artiklen, er linkene indeholdt i selve teksten.
3. E-handelswebsteder
E-handelswebsteder er nogle gange utroligt komplekse og har hundredvis af tusindvis af individuelle sider for produkter og andre oplysninger. Af den grund er den måde, navigationen håndteres på, afgørende for både brugeroplevelsen og bundlinjen. Uden en fremragende navigationsstruktur vil besøgende på et e-handelssted have en vanskeligere tid at finde de produkter, de søger efter, hvilket betyder, at der er en god chance for, at de bliver til konkurrenter ude af frustration.
Den vigtigste ting hver e-handel site med mere end en håndfuld af produkter behov er et godt søgesystem. Assisteret søgning er nøglen, hvor brugerne ikke kun kan søge efter søgeord, men også forbedre deres resultater baseret på ting som pris, størrelse, kategori eller andre beregninger (afhængigt af dine specifikke produkter).
Kategori navigation er også et must, for brugere, der ønsker at gennemse. Afhængig af om du bruger underkategorier, kan breadcrumb navigation også være en god ide (hvis dit websted er mere end to eller tre niveauer dybt, kan brødkrummer forbedre brugervenligheden).
At give dine besøgende flere måder at finde de produkter, de ønsker, er en fantastisk måde at øge salget på, men sørg for, at hver metode viser alle relevante produkter. Hvis besøgende finder, at søgning giver et sæt produkter, mens du surfer returnerer et andet sæt, vil det kun føre til frustration.
Det Blik Webstedet nedenfor er et godt eksempel på et websted, der bruger et sidebjælke med filtre til at forbedre produktresultaterne. Det er det guidede søgemønster uden søgning.
4. Informations- og referencesteder
Referencesteder har generelt én ting til fælles: et ton af oplysninger på tværs af mange sider. Dette gør det svært at oprette nogen form for standardmenu. Kategorier kan være nyttige til browsing, men når du begynder at komme til det punkt, at du har tusinder, titusinder eller endda millioner af sider (som Wikipedia), bryder kategorisystemet. Plus, de fleste mennesker går til reference sites til et bestemt formål, og ikke at gennemse, hvilket gør kategorier ikke særlig nyttige.
Det er vigtigt, at referencewebsites har fremragende søgemuligheder. Guidet søgning, ligesom de, der bruges på e-handelswebsteder, kan også være nyttige, især hvis de bruges i forbindelse med en god tagging og kategorisering.
Det er indlysende, at Reference.com , nedenfor, ønsker besøgende at bruge søgning for at finde hvad de leder efter, da det er placeret fremtrædende øverst på skærmen.
Sider på et referencested bør også gøre brug af inline-link til relaterede oplysninger. Dette gør det nemt for besøgende at finde alt det materiale, de har brug for til at forstå, hvad de læser, uden at skulle udføre flere søgninger. Behovet for inline-linking er derfor, at wiki-platforme generelt har en standard syntaks for at forbinde i teksten i en artikel, så indholdsskabere ikke behøver at bruge tid til at slå op på de relevante links.
Wikipedia , nedenfor, og andre wiki-sider gør god brug af inline-linking for at tilføje kontekst til artikler.
5. Virksomhedssider
Der er et stort udvalg i strukturen og størrelsen af virksomhedernes websteder. Nogle er simpelthen at lokke nye kunder. Andre er oprettet for at holde de nuværende kunder informeret. Endnu andre skal tjene som både en enticement til nye kunder, en nyhedsportal for eksisterende kunder og fronten til et virksomhedsintranet.
Uanset formålet med virksomhedswebstedet er klare navigation nøglen. Du vil ikke have, at brugerne skal bruge tid på at lede efter din navigation eller forsøge at finde ud af, hvilket link der skal klikkes for at få, hvor de skal hen. Sørg for, at links er arrangeret logisk, at de hver har en letforståelig mening, og at de er placeret på logiske steder (overskriften og sidebjælken er dine venner her).
Alle nedenstående websteder viser, at bare fordi navigation er placeret på de mest almindelige steder, betyder det ikke, at det ikke kan være kreativt. Så længe det er brugbart og let at finde, er du velkommen til at oprette noget unikt.
På steder, der er større end et dusin eller så sider, er det en god idé at inkludere søgefunktionalitet. Det er også en god idé at medtage et sitemap, der gør det nemt for brugere, der har problemer med din regelmæssige navigation for at finde præcis, hvad de leder efter.
6. Fællesskabs- eller sociale netsteder
Generelt med store sociale netværkssider er søgning det primære middel til navigation. Det giver mening, når der er millioner (eller endda milliarder) af sider på webstedet. Standard menubaseret navigation er stort set meningsløs, når man beskæftiger sig med det pågældende informationsvolumen.
Så søgning tager sig af overordnet site navigation. Men det forlader stadig medlems profilsider. Her er det vigtigt, at der er konsistens på tværs af hele webstedet. Uanset om dit websted tillader medlemmer at tilpasse deres profiler eller ej, er det afgørende, at links er placeret på samme sted på tværs af hver side.
Tag Facebook, for eksempel: Hver medlems profil og hver side har links til ting som billeder og info på venstre side. Meddelelser, meddelelser og venneanmodninger er altid forbundet øverst, ligesom der er links til kontoindstillinger og til at logge ud. En standard øverste navigationslinje som den, der altid linker til den besøgendes konto og information er blevet en grundpille i veludformede sociale netværk.
Inline links bør også være konsistente. For eksempel, når et brugernavn vises som et link, skal det linkes til brugerens profil, uanset hvilket indhold det er forbundet med. Tænk gennem hvilke oplysninger, der logisk skal linke til hvilke sider, og så sørg for at det er konsekvent uanset hvor disse links vises.
7. Event sites
Hændelseswebsteder er generelt enkle og har ikke et stort antal sider. Men det er vigtigt at tænke på, hvordan dine besøgende vil bruge webstedet. Det er højst sandsynligt, at de vil gøre et af følgende: tilmelde sig arrangementet, se, hvem der er til stede eller taler, få oplysninger om at deltage (herunder omkostninger og ting som sted og områdehoteller) og se planen for arrangementet.
Tilmelding til arrangementet, selv om det er en gratis begivenhed, bør ses som en e-handelstransaktion. Af den grund vil du have en fremtrædende opfordring til handlingsknap til tilmeldinger.
Standard header og / eller sidebar navigation er et glimrende valg for links til andre sider. Lokal navigation kan også være nødvendigt, hvis du vil medtage enkelte sider for ting som specifikke workshops eller højttalere. Drop-down eller fly-out menuer kan kun fungere i dette tilfælde, hvis du har et begrænset antal under-links. Ellers er det bedre at bruge undernavigation i et sidebjælke eller på en hovedside.
Det Hull Digital Live 10 Webstedet har en kortfattet, brugervenlig headernavigation, der gør det nemt at finde præcis, hvad en besøgende måske søger.
Tip: Hvis dit eventsite skal indeholde et deltagerområde eller intranet, skal du se forslagene til navigation på et socialt netværk eller et fællesskabsside for navigationsretningslinjer.
8. Gennemse websteder
Gennemgangssider bruges generelt på to måder. Den første er, når brugerne er interesserede i et bestemt produkt og ønsker at se anmeldelser for den pågældende vare. I dette tilfælde er en fremragende søgefunktion den bedste navigation. Det giver brugerne hurtigt adgang til præcis det produkt, de leder efter.
Den anden anvendelse er at undersøge visse typer produkter. Til denne brug er søgning stadig en værdifuld navigationsmetode. Men kategorier og guidet søgning er lige så vigtige. Tillader brugere at gennemse anmeldelser efter kategori og underkategori lader dem finde en bred vifte af produkter, der passer til deres behov. Ved yderligere at lade dem forfine, giver resultaterne baseret på ting som pris eller mærke mulighed for endnu bedre brugeroplevelse.
Blippr , herunder, inkluderer både kategori navigation (med drop-downs for undernavigation) og en fremtrædende søgefelt.
9. Personlige websteder
Personlige websteder er virkelig vildt kortene i webdesign verden. Du kan bruge stort set enhver form for navigationsmønster, du vil have. Mainstays som header og sidebar navigation er stadigvæk den mest anvendelige, men der er ikke noget galt med at gøre noget helt anderledes.
Personlige websteder skal være en afspejling af ejeren af hjemmesiden. Hvis noget uventet passer inden for personlighed på webstedet, så med alle midler: gå til det. Det kan dog stadig være en god idé at medtage et sitemap-link et sted, men hvis du bruger ikke-standard navigation, gør det nemt for besøgende, der ikke "får det" for at finde det, de leder efter.
Daniel Mall's porteføljesiden har et af de mest unikke navigationsmønstre jeg har set. Det er nemt at bruge, mens det stadig er meget forskelligt fra normen.
10. Gallerier
Billedgallerier og porteføljesider skal generelt bruge en kombination af standard header eller sidebar navigation, tagging og kategorier. At give besøgende mulighed for at indsnævre billederne, der vises baseret på et tag eller en kategori, er vigtig for en god brugeroplevelse, især da mængden af billeder vokser.
Pagination vil også være afgørende for større websteder. Kontinuerlig rulle kan virke som en god ide, men da gallerier og porteføljesider i sig selv er fyldt med medier, kan kontinuerlig scroll ende med at bruge mange systemressourcer. Jeg vil anbefale imod det for ethvert websted med mere end et par dusin billeder (selvom det er mindre galleri og porteføljesider, kan det være et rigtig godt strejf).
Minimal udstilling bruger kategorier, søgning og pagination.
Take-away
Hvis der er et navigationsbegreb, der er et absolut must, uanset hvilken slags websted du designer, er det sådan: konsistens!
Du kan komme væk med de fleste logiske navigationsvalg, så længe det er ensartet på hele dit websted. Start ikke med sidebarnavigering for halvdelen af dit websted, og headernavigation for den anden halvdel, uden nogen logisk grund til at gøre det. Hvis hjemmeforbindelsen altid er øverst til venstre, så sørg for at den forbliver øverst til venstre. Dette gælder for alle elementer i din navigation, og bliver eksponentielt vigtigere, da webstedets størrelse stiger.
Ud over konsistens er det vigtigste ved at designe dine navigationsmønstre at tænke på, hvordan besøgende rent faktisk vil bruge dit websted. Vær ikke bange for A / B eller multivariate test for at finde ud af, om dine navigationsmønstre rent faktisk fungerer som de skal.
Uanset hvor cool eller ny din navigation er, hvis den ikke udfører den grundlæggende funktion, så det tillader besøgende at flytte fra et område af dit websted til et andet på den måde, de vil have, har din navigation mislykkedes.
Du er velkommen til at dele eksempler på flotte navigationsmønstre i aktion i kommentarerne nedenfor! Lad os også vide, om du har andre tips til egnede navigationsmønstre for bestemte typer websteder.