Navigatiepatronen voor tien veel voorkomende soorten websites
Navigatie is een van de belangrijkste aspecten van elke website. Zonder goede navigatie wordt een site onbruikbaar voor bezoekers. Ze kunnen de informatie die ze nodig hebben niet vinden en zoeken in plaats daarvan naar concurrerende sites. Het is van vitaal belang dat uw sites gemakkelijk te navigeren zijn als u een succesvolle ontwerper wilt zijn.
iBut zijn er geen one-size-fits-all oplossingen voor navigatie. Wat geweldig werkt op een nieuwssite werkt mogelijk niet goed voor een persoonlijke site. Iets dat ongelooflijk gebruiksvriendelijk is op een blog kan frustrerend zijn op een e-commercesite.
Hieronder staan tien veelvoorkomende soorten sites, met suggesties voor de soorten navigatiepatronen die goed werken voor elke site.
Er zijn ook voorbeelden om u een beter idee te geven van waar we het over hebben. Aarzel niet om meer geweldige voorbeelden in de comments te delen!
Alle sites
Er zijn bepaalde navigatiepatronen die op vrijwel alle sites werken. In plaats van dezelfde informatie opnieuw te hashen in de onderstaande categorieën, neem ik ze hier gewoon op.
Het eerste patroon is navigatie met tabbladen. Tabbladen zijn perfect geschikt voor navigatie, omdat ze bezoekers psychologisch herinneren aan papieren tabbladen en navigeren naar een nieuw gedeelte van een notitieblok of map, iets dat knoppen of platte tekstlinks niet doen. Tabs zijn bijna altijd de voorkeursmethode voor het stylen van uw belangrijkste navigatielinks, hoewel ze natuurlijk het beste werken wanneer er een beperkt aantal links in een menu is.
Het tweede patroon is kopnavigatie. Als uw website een header heeft (en de meeste websites doen dit), is koptekstnavigatie een goed idee. Bezoekers zijn gewend om naar de header te kijken voor navigatielinks. Dit vooraf vastgestelde gedrag maakt het gemakkelijk voor u om uw website gebruiksvriendelijker te maken door uw navigatie in of bij de header te lokaliseren.
Het laatste patroon dat van toepassing is op vrijwel alle sites is footer-navigatie. Veel gebruikers (maar niet alle) zullen naar het voetgedeelte kijken voor een link als ze niet kunnen vinden wat ze zoeken in uw andere navigatie. Veel basispagina's zijn vaak gekoppeld via een voettekst, inclusief 'over', 'contactpersoon' en 'sitemap'-koppelingen, ongeacht of ze elders in de navigatie zijn gelinkt of niet.
1. Blogs
Blogs hebben over het algemeen een grote hoeveelheid inhoud, in omgekeerde chronologische volgorde. Dit biedt zowel een logisch kader voor uw navigatie, als een aantal unieke uitdagingen, afhankelijk van het type blog.
De meeste blogs gebruiken een combinatie van paginering (of continu scrollen), een archiefpagina, zijbalknavigatie voor categorieën en / of tags, en mogelijk ook kop- en voettekstnavigatie. Het is belangrijk om precies te bedenken hoe uw bezoekers waarschijnlijk toegang willen krijgen tot de inhoud van uw blog.
Een persoonlijke blog heeft bijvoorbeeld geen categorie- of tagnavigatie nodig buiten de links in de meta-informatie voor elk bericht. In deze gevallen wilt u dat bezoekers toegang hebben tot inhoud in omgekeerd chronologische volgorde, in plaats van rond te springen door het onderwerp. Een topicblog daarentegen moet categorie- en tagnavigatie hebben, omdat bezoekers waarschijnlijk op zoek zijn naar informatie over specifieke onderwerpen binnen het algemene onderwerp.
Blogs moeten op zijn minst navigatie bevatten voor het chronologisch doorlopen van de inhoud (paginering, volgende / vorige links of continu bladeren), evenals navigatie in de kop- of zijbalk voor specifieke pagina's buiten de hoofdblogpagina.
Onderwerp (en soms zakelijke) blogs moeten ook categorie- of tag-menu's bevatten in hun navigatie, hetzij in de koptekst of in de zijbalk. Vooral grote blogs zouden ook moeten overwegen om een zoekfunctie te implementeren, om het voor gebruikers gemakkelijker te maken om snel te vinden wat ze zoeken. Zorg er gewoon voor dat de zoekfunctie werkt zoals bedoeld, en werpt echt alle relevante resultaten op.
Ecoki , hieronder, bevat categorieën op het hoogste niveau in hun kopnavigatie, met navigatie naar belangrijke pagina's in een secundaire kopnavigatiebalk. Het is een effectieve lay-out die duidelijk de nadruk legt op de meest gebruikte links.
2. Nieuwssites
Nieuwssites zijn vergelijkbaar met blogs, omdat ze over het algemeen verhalen in omgekeerd chronologische volgorde presenteren. Nieuwssites zijn vaak sterk gecategoriseerd en hebben een complexere informatiearchitectuur dan veel andere soorten sites. Daarom zijn hun navigatiepatronen vaak complexer.
De sleutel maakt de navigatie niet ingewikkelder dan nodig is. Vervolgkeuzemenu's en fly-outmenu's zijn beide goede manieren om met grotere menu's om te gaan zonder de pagina te vervelen. Als u naar de grotere nieuwssites kijkt (zoals Google Nieuws, bijvoorbeeld hieronder), wordt het nieuws onderverdeeld in brede categorieën zoals Politiek, Lokaal, Wereld, Sport, Entertainment, enzovoort. Welke categorieën u gebruikt, is afhankelijk van de vraag of de site is een algemene nieuwssite of een actuele nieuwssite.
Tags kunnen ook de navigatie aanzienlijk verbeteren. Door elk verhaal te taggen, kunnen gebruikers gemakkelijk gerelateerde verhalen vinden, zonder een gecompliceerde of opgeblazen categoriestructuur te creëren. Het is een goed idee om niet alleen taglinks in elk artikel op te nemen, maar ook om een lijst met tags of een tagwolk ergens op te nemen (alleen populaire tags kunnen een goed idee zijn voor sites met honderden tags).
Het inline koppelen van artikelen verbetert de gebruikerservaring aanzienlijk. Veel van de grotere nieuwssites doen dit, waardoor gebruikers onmiddellijk toegang krijgen tot alle artikelen over een onderwerp. Het lijkt veel op het opnemen van tags, maar in plaats van een lijst aan het begin of het einde van het artikel, bevinden de links zich in de tekst zelf.
3. E-commercesites
E-commercesites zijn soms ongelooflijk complex en bevatten honderden (of duizenden) afzonderlijke pagina's voor producten en andere informatie. Om deze reden is de manier waarop de navigatie wordt afgehandeld van vitaal belang voor zowel de gebruikerservaring als de bottom-line. Zonder een uitstekende navigatiestructuur zullen bezoekers van een e-commerce site het moeilijker vinden om de producten te vinden waarnaar ze op zoek zijn, wat betekent dat er een goede kans is dat ze zich uit frustratie wenden tot concurrenten.
Het belangrijkste dat elke e-commercesite met meer dan een handvol producten nodig heeft, is een goed zoeksysteem. Ondersteund zoeken is de sleutel, waarbij gebruikers niet alleen op trefwoord kunnen zoeken, maar ook hun resultaten kunnen verfijnen op basis van zaken als prijs, grootte, categorie of andere statistieken (afhankelijk van uw specifieke producten).
Categorie navigatie is ook een must voor gebruikers die willen bladeren. Afhankelijk van het feit of u subcategorieën gebruikt, kan broodkruimernavigatie ook een goed idee zijn (als uw site meer dan twee of drie niveaus diep is, kunnen broodkruimels de bruikbaarheid verbeteren).
Uw bezoekers meerdere manieren geven om de gewenste producten te vinden, is een geweldige manier om de verkoop te verhogen, maar zorg ervoor dat elke methode alle relevante producten weergeeft. Als bezoekers vinden dat het doorzoeken van een set producten tijdens het browsen een andere set retourneert, leidt dit alleen maar tot frustratie.
De Blik onderstaande website is een geweldig voorbeeld van een site die een zijbalk met filters gebruikt om productresultaten te verfijnen. Het is het geleide zoekpatroon, zonder dat het lijkt op zoeken.
4. Informatie- en referentiesites
Referentiesites hebben over het algemeen één ding gemeen: een heleboel informatie op veel pagina's. Dit maakt het moeilijk om een standaardmenu te maken. Categorieën kunnen handig zijn om te bladeren, maar als je duizenden, tienduizenden of zelfs miljoenen pagina's (zoals Wikipedia) tegenkomt, valt het categoriesysteem stuk. Bovendien gaan de meeste mensen naar verwijzingssites voor een specifiek doel en niet om te bladeren, waardoor categorieën niet bijzonder nuttig zijn.
Het is van vitaal belang dat referentiesites uitstekende zoekmogelijkheden hebben. Begeleide zoekopdrachten, net zoals die op e-commercesites kunnen ook nuttig zijn, vooral als ze worden gebruikt in combinatie met een goede tagging en categorie-indeling.
Het is duidelijk dat Reference.com , hieronder, wil dat bezoekers zoeken gebruiken om te vinden waarnaar ze op zoek zijn, omdat het prominent boven aan het scherm is geplaatst.
Pagina's op een referentiesite moeten ook gebruik maken van inline linking naar gerelateerde informatie. Dit maakt het gemakkelijk voor bezoekers om al het materiaal te vinden dat ze nodig hebben om te begrijpen wat ze lezen, zonder dat ze meerdere zoekopdrachten hoeven uit te voeren. De behoefte aan inline-linking is waarom wiki-platforms over het algemeen een standaardsyntaxis hebben voor koppeling binnen de tekst van een artikel, zodat makers van inhoud geen tijd hoeven te besteden aan het opzoeken van de relevante links.
Wikipedia , hieronder en andere wikisites maken goed gebruik van inline linking voor het toevoegen van context aan artikelen.
5. Bedrijfsterreinen
Er is een enorme variëteit in de structuur en de grootte van bedrijfssites. Sommige zijn gewoon om nieuwe klanten te verleiden. Andere zijn gemaakt om de huidige klanten op de hoogte te houden. Weer anderen moeten dienen als een aansporing voor nieuwe klanten, een nieuwsportaal voor bestaande klanten en de front-end voor een bedrijfsintranet.
Ongeacht het doel van de bedrijfssite is duidelijke navigatie de sleutel. U wilt niet dat gebruikers tijd moeten besteden aan het zoeken naar uw navigatie of proberen uit te zoeken op welke koppeling ze moeten klikken om te vinden waar ze naartoe moeten gaan. Zorg ervoor dat links logisch zijn gerangschikt, dat ze elk een gemakkelijk te begrijpen betekenis hebben en dat ze zich op logische plaatsen bevinden (de koptekst en zijbalk zijn je vrienden hier).
Alle onderstaande sites laten zien dat navigatie alleen op de meest voorkomende plaatsen mogelijk is, maar dat betekent niet dat het niet creatief kan zijn. Zolang het bruikbaar en gemakkelijk te vinden is, kun je iets unieks creëren.
Op sites die groter zijn dan een tiental pagina's, is het een goed idee om zoekfunctionaliteit op te nemen. Het is ook een goed idee om een sitemap op te nemen om het voor gebruikers die moeite hebben met uw normale navigatie gemakkelijk te maken om precies te vinden waarnaar ze op zoek zijn.
6. Community- of sociale netwerksites
Over het algemeen is zoeken, met grote sociale netwerksites, het belangrijkste navigatiemiddel. Het is logisch als er miljoenen (of zelfs miljarden) pagina's op de site staan. Standaard menu-gebaseerde navigatie is vrijwel zinloos als het gaat om die hoeveelheid informatie.
Dus zoeken zorgt voor de algemene navigatie van de site. Maar dat laat nog steeds profielpagina's van leden over. Hier is het belangrijk dat er consistentie is op de hele site. Ongeacht of uw site leden toestaat hun profielen aan te passen of niet, het is noodzakelijk dat links zich op elke pagina op dezelfde plaats bevinden.
Neem bijvoorbeeld Facebook: elk ledenprofiel en elke pagina bevat links naar dingen zoals foto's en info aan de linkerkant. Meldingen, berichten en vriendschapsverzoeken worden altijd bovenaan gekoppeld, evenals koppelingen naar accountinstellingen en om uit te loggen. Een standaard navigatiebalk bovenaan, die altijd linkt naar het account van de bezoeker en informatie is een steunpilaar geworden van goed ontworpen sociale netwerken.
Inline-links moeten ook consistent zijn. Wanneer een gebruikersnaam bijvoorbeeld als link wordt weergegeven, moet deze een koppeling bevatten naar het profiel van die gebruiker, ongeacht de inhoud waarmee deze is geassocieerd. Bedenk welke informatie logisch moet linken naar welke pagina's en zorg ervoor dat deze consistent is, ongeacht waar die links worden weergegeven.
7. Evenementensites
Evenementsites zijn over het algemeen eenvoudig en hebben geen enorm aantal pagina's. Maar het is belangrijk om na te denken over hoe uw bezoekers de site zullen gebruiken. Het is zeer waarschijnlijk dat ze een van de volgende dingen willen doen: meld je aan voor het evenement, kijk wie er aanwezig is of spreekt, krijg informatie over het bijwonen van het evenement (inclusief kosten en dingen zoals locatie- en gebiedshotels) en bekijk het schema voor het evenement.
Inschrijven voor het evenement, zelfs als het een gratis evenement is, moet worden gezien als een e-commercetransactie. Om die reden wilt u een prominente call-to-action knop voor aanmeldingen.
Standaard kop- en / of zijbalknavigatie is een uitstekende keuze voor koppelingen naar andere pagina's. Lokale navigatie kan ook nodig zijn als u afzonderlijke pagina's wilt opnemen voor zaken als specifieke workshops of sprekers. Vervolgkeuzemenu's of fly-outmenu's kunnen in dit geval alleen werken als u een beperkt aantal sublinks hebt. Anders is het beter om subnavigatie in een zijbalk of op een hoofdpagina te gebruiken.
De Hull Digital Live 10 website heeft een beknopte, gemakkelijk te gebruiken header-navigatie die het gemakkelijk maakt om precies te vinden waar een bezoeker naar op zoek is.
Tip: als uw evenementsite een deelnemersgebied of intranet bevat, kijkt u naar de suggesties voor navigatie op een sociaal netwerk of een community-site voor navigatie-richtlijnen.
8. Beoordeel sites
Beoordelingssites worden over het algemeen op twee manieren gebruikt. De eerste is wanneer gebruikers geïnteresseerd zijn in een specifiek product en recensies voor dat item willen zien. In dit geval is een uitstekende zoekfunctie de beste navigatie. Hiermee kunnen gebruikers snel toegang krijgen tot precies het product waarnaar ze op zoek zijn.
Het tweede gebruik is het onderzoeken van bepaalde soorten producten. Voor dit gebruik is zoeken nog steeds een waardevolle navigatiemethode. Maar categorieën en begeleide zoekopdrachten zijn net zo belangrijk. Door gebruikers toe te staan om recensies te doorzoeken op categorie en subcategorie, kunnen ze een verscheidenheid aan producten vinden die aan hun behoeften voldoen. Door ze verder te laten verfijnen, gebaseerd op zaken als prijs of merk zorgt voor een nog betere gebruikerservaring.
Blippr , hieronder, bevat zowel categorie-navigatie (met vervolgkeuzemenu's voor subnavigatie) als een prominente zoekbalk.
9. Persoonlijke sites
Persoonlijke sites zijn echt de wilde kaarten van de webontwerpwereld. U kunt vrijwel elk gewenst navigatiepatroon gebruiken. Mainstays zoals navigatie op de kop en zijbalk zijn nog steeds de meest bruikbare, maar er is niets mis mee om iets heel anders te doen.
Persoonlijke sites moeten een weerspiegeling zijn van de site-eigenaar. Als er iets onverwachts in de persoonlijkheid van de site past, doe het dan in elk geval: ga ervoor. Het kan toch een goed idee zijn om ergens een sitemaplink op te nemen, als je niet-standaard navigatie gebruikt, om het voor bezoekers die het niet "krijgen" gemakkelijk te maken om te vinden wat ze zoeken.
Daniel Mall's portfoliopagina heeft een van de meest unieke navigatiepatronen die ik heb gezien. Het is gemakkelijk te gebruiken en toch erg verschillend van de norm.
10. Galerijen
Afbeeldingengalerijen en portfoliosites moeten over het algemeen een combinatie van standaard kop- of zijbalknavigatie, tagging en categorieën gebruiken. Het is belangrijk voor bezoekers om de afbeeldingen te verkleinen die worden weergegeven op basis van een tag of categorie, voor een goede gebruikerservaring, vooral omdat het aantal afbeeldingen groeit.
Paginering is ook van vitaal belang voor grotere sites. Continu bladeren lijkt een goed idee, maar omdat galerijen en portfolio-sites van nature vol met media zijn, kan het continu bladeren met behulp van veel systeembronnen. Ik zou het ten zeerste aanbevelen voor elke site met meer dan enkele tientallen afbeeldingen (hoewel op kleinere galerij- en portfoliosites het een echt leuke touch kan zijn).
Minimale tentoonstelling maakt gebruik van categorieën, zoeken en paginering.
De take-away
Als er één navigatieconcept is dat een absolute must is, ongeacht wat voor soort site u ontwerpt, is dit het volgende: consistentie!
U kunt wegkomen met de meeste logische navigatiekeuzes, op voorwaarde dat deze consistent zijn op uw gehele site. Begin niet met zijbalk navigatie voor de helft van uw site, en kop navigatie voor de andere helft, zonder een logische reden om dit te doen. Als de startlink altijd linksboven staat, zorg er dan voor dat deze linksboven in de link blijft staan. Dit is van toepassing op elk element van uw navigatie en wordt exponentieel belangrijker naarmate de grootte van de site toeneemt.
Afgezien van consistentie, is het belangrijkste om te doen bij het ontwerpen van uw navigatiepatronen te bedenken hoe bezoekers uw site daadwerkelijk gaan gebruiken. Wees niet bang voor A / B- of multivariate tests om uit te vinden of uw navigatiepatronen echt werken zoals ze zouden moeten.
Ongeacht hoe cool of nieuw uw navigatie is, uw navigatie is mislukt als het niet de basisfunctie heeft om bezoekers toe te staan van het ene gebied van uw site naar het andere te gaan zoals zij dat willen.
Voel je vrij om voorbeelden van geweldige navigatiepatronen in actie te delen in de reacties hieronder! Laat ons ook weten of u nog andere tips voor geschikte navigatiepatronen voor specifieke typen sites heeft.