Navigationsmönster för tio vanliga typer av webbplatser
Navigering är en av de viktigaste aspekterna av en webbplats. Utan god navigering blir en webbplats värdelös för besökare. De kan inte hitta den information de behöver, och sedan leta efter konkurrerande webbplatser istället. Det är viktigt att dina webbplatser är lätta att navigera om du vill bli en framgångsrik designer.
i men det finns inga lösningar för en storlek som passar alla. Det som fungerar bra på en nyhetssajt kanske inte fungerar bra för en personlig sida. Någonting som är otroligt användarvänligt på en blogg kan vara frustrerande på en e-handelsplats.
Nedan finns tio vanliga typer av webbplatser, med förslag på vilka navigationsmönster som fungerar bra för var och en.
Det finns också exempel, för att ge dig en bättre uppfattning om vad vi pratar om. Gärna dela fler bra exempel i kommentarerna!
Alla platser
Det finns vissa navigeringsmönster som fungerar på praktiskt taget alla webbplatser. I stället för att återhämta samma information i var och en av kategorierna nedan kommer jag bara att inkludera dem här.
Det första mönstret är fliknavigering. Flikar passar perfekt för navigering, eftersom de på ett psykologiskt sätt påminner besökare om pappersflikar och navigerar till en ny del av en anteckningsbok eller bindemedel, något som knapparna eller rena textlänkar inte gör. Flikar är nästan alltid den föredragna metoden att ställa in dina huvudnavigationslänkar, men de fungerar naturligtvis bäst när det finns ett begränsat antal länkar i en meny.
Det andra mönstret är navigeringsnavigering. Om din webbplats har en rubrik (och de flesta webbplatser gör), är sidnavigering en bra idé. Besökare är vana vid att titta på rubriken för navigeringslänkar. Detta förutbestämda beteende gör det enkelt för dig att göra din webbplats mer användarvänlig genom att lokalisera din navigering i eller nära rubriken.
Det slutliga mönstret som gäller för praktiskt taget alla webbplatser är sidfotnavigering. Många användare (men inte alla) ser till sidfoten för en länk om de inte kan hitta vad de letar efter i din andra navigering. Många grundläggande sidor är ofta länkade från en sidfot, bland annat "om", "kontakt" och "sitemap" -länkar, oavsett om de är länkade någon annanstans i navigeringen eller inte.
1. Bloggar
Bloggar har i allmänhet en stor volym innehåll, i omvänd kronologisk ordning. Detta presenterar både en logisk ram för din navigering, liksom några unika utmaningar, beroende på vilken typ av blogg som helst.
De flesta bloggar kommer att använda en kombination av pagination (eller kontinuerlig rullning), en arkivsida, sidebarnavigering för kategorier och / eller taggar, och möjligen även sidhuvud och sidfot. Det är viktigt att tänka igenom exakt hur dina besökare sannolikt vill komma åt innehållet på din blogg.
Till exempel kan en personlig blogg inte behöva kategori- eller taggnavigering utanför länkar i metinformationen för varje inlägg. I dessa fall vill du att besökare ska få tillgång till innehåll i omvänd kronologisk ordning, istället för att hoppa runt efter ämne. En ämnesblogg måste å andra sidan ha kategori- och tagnavigering, eftersom besökare sannolikt söker information om specifika ämnen inom det övergripande ämnet.
På ett minimalt minimum bör bloggar inkludera navigering för att flytta kronologiskt genom innehållet (antingen paginering, nästa / föregående länkar eller kontinuerlig rullning), såväl som sidhuvudnavigering eller sidofältnavigering för specifika sidor utanför huvudblogsidan.
Ämne (och ibland företagets) bloggar bör också inkludera kategori- eller taggmenyer i deras navigering, antingen i sidhuvudet eller sidofältet. Särskilt stora bloggar bör också överväga att implementera en sökfunktion, för att underlätta för användarna att snabbt hitta exakt vad de letar efter. Se bara till att sökfunktionen fungerar som den ska, och ger verkligen alla relevanta resultat.
Ecoki , nedan, inkluderar toppnivåkategorier i navigeringsnavigering, med navigering till viktiga sidor i en navigeringsfält i sekundärrubriken. Det är en effektiv layout som tydligt lägger tonvikten på de mest använda länkarna.
2. Nyheter webbplatser
Nyhetssajter liknar bloggar, eftersom de generellt presenterar historier i omvänd kronologisk ordning. Nyhetssidor är ofta mycket kategoriserade och har mer komplicerad informationsarkitektur än många andra typer av webbplatser. På grund av detta är deras navigeringsmönster ofta mer komplexa.
Nyckeln gör inte navigationen mer komplicerad än den behöver vara. Nedrullnings-och utflyttningsmenyer är båda bra sätt att hantera större menyer utan att röra upp sidan. Om du tittar på de större nyhetssidorna (till exempel Google Nyheter, till exempel nedan), bryter de ner nyheterna till stora kategorier som Politik, Lokal, Värld, Sport, Underhållning etc. Vilka kategorier du använder beror på om webbplatsen är en allmän nyhetssida eller en aktuell nyhetssida.
Taggar kan också förbättra navigationen väsentligt. Genom att märka varje historia gör det det lätt för användarna att hitta relaterade historier, utan att skapa en komplicerad eller uppblåst kategoristruktur. Det är en bra idé att inte bara inkludera taglänkar i varje artikel, utan också att inkludera en lista med taggar eller ett taggmoln någonstans (endast inklusive populära taggar kan vara en bra idé för webbplatser med hundratals taggar).
Linking inline inom artiklar förbättrar användarupplevelsen mycket. Många av de större nyhetssidorna gör det här, så att användarna omedelbart får tillgång till alla artiklar om ett ämne. Det ligner mycket på att inkludera taggar, men snarare än en lista i början eller slutet av artikeln finns länkarna i själva texten.
3. E-handelswebbplatser
E-handelswebbplatser är ibland otroligt komplexa och har hundratals (eller tusentals) enskilda sidor för produkter och annan information. Av detta skäl är det sättet att navigering hanteras viktigt för både användarupplevelse och bottenlinjen. Utan utmärkt navigationsstruktur kommer besökare på en e-handelsplats att ha svårare att hitta de produkter de letar efter, vilket innebär att det finns en bra chans att de kommer att vända sig till konkurrenterna frustrerande.
Det viktigaste varje e-handelsplats med mer än en handfull produktbehov är ett bra söksystem. Assisterad sökning är nyckeln, där användarna inte bara kan söka efter nyckelord, men också förfina sina resultat baserat på saker som pris, storlek, kategori eller andra mätvärden (beroende på dina specifika produkter).
Kategorinavigering är också ett måste för användare som vill bläddra. Beroende på huruvida du använder underkategorier, kan brödcrumbnavigering också vara en bra idé (om din webbplats är mer än två eller tre nivåer djup kan brödsmulor förbättra användbarheten).
Att ge dina besökare flera sätt att hitta de produkter de vill ha är ett bra sätt att öka försäljningen, men se till att varje metod visar alla relevanta produkter. Om besökare finner att sökningen returnerar en uppsättning produkter medan du surfar returnerar en annan uppsättning, kommer det bara att leda till frustration.
De Blik webbplats, nedan, är ett bra exempel på en webbplats som använder ett sidofält med filter för att förbättra produktresultatet. Det är det guidade sökmönstret, utan att sökningen ser ut.
4. Informations- och referenswebbplatser
Referenswebbplatser har i allmänhet en sak gemensamt: massor av information på många sidor. Det gör det svårt att skapa någon form av standardmeny. Kategorier kan vara till hjälp för webbläsning, men när du börjar komma fram till att ha tusentals, tiotusentals eller till och med miljontals sidor (som Wikipedia), bryter kategorisystemet ner. Dessutom går de flesta till referenswebbplatser för ett visst syfte, och inte bläddrar, vilket gör kategorierna inte särskilt användbara.
Det är viktigt att referenswebbplatser har utmärkta sökfunktioner. Guidad sökning, som de som används på e-handelswebbplatser, kan också vara användbara, särskilt om de används tillsammans med en bra taggnings- och kategoriorganisation.
Det är uppenbart att Reference.com , nedan, vill att besökare ska använda sökningen för att hitta vad de letar efter, eftersom den placeras framträdande högst upp på skärmen.
Sidor på en referenssida bör också använda inlinskoppling till relaterad information. Detta gör det enkelt för besökare att hitta allt material de behöver för att förstå vad de läser, utan att behöva utföra flera sökningar. Behovet av inline-koppling är varför wiki-plattformar i allmänhet har ett standardsyntax för att länka i texten i en artikel så att innehållsskapare inte behöver spendera tid för att leta upp relevanta länkar.
Wikipedia , nedan och andra wiki-sidor gör bra användning av inline-länk för att lägga till kontext till artiklar.
5. Företagssidor
Det finns ett stort utbud i företagsstrukturer och storlekar. Vissa är helt enkelt att locka nya kunder. Andra är skapade för att hålla nuvarande kunder informerade. Ytterligare andra måste vara både en enticement för nya kunder, en nyhetsportal för befintliga kunder och fronten för ett företags intranät.
Oavsett syftet med företagswebbplatsen är klar navigering en nyckel. Du vill inte att användarna måste spendera tid på att leta efter din navigering eller försöka ta reda på vilken länk som ska klicka på för att komma dit de behöver gå. Se till att länkarna är ordnade logiskt, att de alla har en lättförståelig mening, och att de ligger på logiska platser (sidhuvudet och sidofältet är dina vänner här).
Alla webbplatser nedan visar att bara för att navigering finns på de vanligaste ställena, betyder det inte att det inte kan vara kreativt. Så länge den är användbar och lätt att hitta, var god att skapa något unikt.
På webbplatser som är större än ett dussin sidor är det en bra idé att inkludera sökfunktioner. Det är också en bra idé att inkludera en webbplatskarta för att göra det enkelt för användare som har problem med din vanliga navigering för att hitta exakt vad de letar efter.
6. Gemenskaps eller sociala nätverk
Vanligtvis med stora sociala nätverk, är sökning det primära sättet att navigera. Det är vettigt när det finns miljontals (eller till och med miljarder) sidor på webbplatsen. Standard menybaserad navigering är ganska meningslöst när man hanterar den informationsvolymen.
Så sökning tar hand om övergripande sidnavigering. Men det lämnar fortfarande medlemsprofilsidor. Här är det viktigt att det finns konsistens över hela webbplatsen. Oavsett om din webbplats tillåter medlemmar att anpassa sina profiler eller inte, är det absolut nödvändigt att länkar finns på samma plats över alla sidor.
Ta Facebook, till exempel: varje medlemsprofil och varje sida har länkar till saker som bilder och info på vänster sida. Meddelanden, meddelanden och vänförfrågningar är alltid länkade högst upp, liksom länkar till kontoinställningar och att logga ut. En vanlig toppnavigationsfält som så länge som länkar till besökarens konto och information har blivit en grundval för väl utformade sociala nätverk.
Inline länkar bör också vara konsekventa. Till exempel, när ett användarnamn visas som en länk, borde det länka till användarens profil, oavsett vilket innehåll det är associerat med. Tänk igenom vilken information som ska loggligt kopplas till vilka sidor, och se till att det är konsekvent oavsett var de här länkarna dyker upp.
7. Eventwebbplatser
Händelseplatser är vanligtvis enkla och har inte ett stort antal sidor. Men det är viktigt att tänka på hur dina besökare kommer att använda webbplatsen. Det är troligt att de vill göra något av följande: anmäla sig till händelsen, se vem som är närvarande eller talar, få information om att delta (inklusive kostnader och saker som plats och hotell) och se schema för evenemanget.
Anmälan till evenemanget, även om det är en fri händelse, bör ses som en e-handelstransaktion. Av den anledningen vill du ha ett framträdande anrop till åtgärdsknappen för registreringar.
Standardrubrik och / eller sidoregistrering är ett utmärkt val för länkar till andra sidor. Lokal navigering kan också vara nödvändig om du ska inkludera enskilda sidor för saker som specifika verkstäder eller högtalare. Nedrullningsbara menyer kan bara fungera om du har ett begränsat antal dellänkar. Annars är det bättre att använda undernavigering i sidofältet eller på en huvudsida.
De Hull Digital Live 10 Webbplatsen har en kortfattad, lättanvänd huvudnavigering som gör det enkelt att hitta exakt vad en besökare kan leta efter.
Tips: Om din evenemangssida kommer att innehålla ett deltagarområde eller intranät, se till förslaget till navigering på ett socialt nätverk eller en gemensam webbplats för navigationsriktlinjer.
8. Granska webbplatser
Granskningswebbplatser används vanligtvis på två sätt. Det första är när användarna är intresserade av en viss produkt och vill se recensioner för den aktuella produkten. I detta fall är en utmärkt sökfunktion den bästa navigationen. Det låter användarna snabbt få tillgång till exakt den produkt de letar efter.
Den andra användningen är att undersöka vissa typer av produkter. För denna användning är sökningen fortfarande en värdefull navigationsmetod. Men kategorier och guidad sökning är lika viktiga. Att tillåta användare att bläddra igenom recensioner efter kategori och underkategori låter dem hitta en mängd olika produkter som passar deras behov. Genom att ytterligare låta dem förbättra de resultat som bygger på saker som pris eller varumärke möjliggör ännu bättre användarupplevelse.
Blippr , nedan, innehåller både kategorinavigering (med rullgardinsmenyer för undernavigering) och en framstående sökfält.
9. Personliga webbplatser
Personliga webbplatser är verkligen vildkorten i webbdesignvärlden. Du kan använda ganska mycket vilket slags navigationsmönster du vill ha. Huvudstöd som sidhuvudnavigering och navigeringsnavigering är fortfarande det mest användbara, men det är inget fel att göra något helt annat.
Personliga sidor bör vara en återspegling av webbplatsägaren. Om något oväntat passar in i personligheten på webbplatsen, då för all del: gå för det. Det kan dock vara en bra idé att inkludera en webbplatskarta någonstans, men om du använder icke-standardiserad navigering, gör det enkelt för besökare som inte "hämtar" för att hitta det de söker.
Daniel Mall s portföljsidan har ett av de mest unika navigationsmönster jag har sett. Det är lätt att använda medan det fortfarande är väldigt annorlunda än normen.
10. Gallerier
Bildgallerier och portföljsidor bör generellt använda en kombination av standardrubrik eller sidofältnavigering, märkning och kategorier. Att tillåta besökare att begränsa bilderna som visas baserat på en tagg eller kategori är viktiga för en bra användarupplevelse, särskilt när bildvolymen växer.
Pagination kommer också att vara avgörande för större platser. Kontinuerlig rullning kan verka som en bra idé, men eftersom gallerier och portföljplatser, av sin natur, är fyllda med media, kan kontinuerlig scroll sluta använda många systemresurser. Jag skulle rekommendera det mot någon webbplats med mer än ett par dussin bilder (men på mindre galleri och portföljplatser kan det vara en riktigt fin touch).
Minimal utställning använder kategorier, sökning och pagination.
Take-away
Om det finns ett navigeringskoncept som är ett absolut måste oavsett vilken typ av webbplats du designar är det här: konsistens!
Du kan komma undan med de flesta logiska navigeringsval så länge det är konsekvent över hela din webbplats. Börja inte med sidabarnavigering för hälften av din webbplats, och rubriknavigering för den andra hälften, utan någon logisk orsak för att göra det. Om hemlänken alltid finns längst upp till vänster, se till att den ligger kvar till vänster. Detta gäller för alla delar av din navigering och blir exponentiellt viktigare eftersom webbplatsens storlek ökar.
Annat än konsistens är det viktigaste att göra när du utformar dina navigeringsmönster att tänka på hur besökare faktiskt kommer att använda din webbplats. Var inte rädd för A / B eller multivariatprovning för att ta reda på om dina navigeringsmönster faktiskt fungerar som de ska.
Oavsett hur cool eller ny din navigering är, om den inte utför det, är det grundläggande funktionen att tillåta besökare att flytta från ett område på din webbplats till en annan på det sätt som de vill ha din navigering misslyckats.
Gärna dela exempel på stora navigationsmönster i åtgärd i kommentarerna nedan! Låt oss också veta om du har några andra tips för lämpliga navigeringsmönster för specifika typer av webbplatser.