Webdesign navigatietips voor een betere gebruikersorientatie

zondag 24 mei 2009

Hoe vogels zich oriënteren
Gebruikers die op het internet surfen oriënteren zichzelf op een soortgelijke manier als trekvogels dat doen. Iedere vogelsoort heeft een eigen specifieke manier van oriënteren, door een interne map te gebruiken om te kijken waar ze zijn en waar ze naartoe willen. Sommige soorten, zoals bijvoorbeeld duiven, vertrouwen veel op magnetisch velden. Anderen, die ’s nachts vliegen, gebruiken de sterren. Vogels die overdag vliegen maken gebruik van de stand van de zon. Enkelen vertrouwen uitsluitend op één markeerpunt.

Maar wat als er zich een belemmering voordoet zoals wolken die het zicht op de zon of de sterren veminderen? Veel vogels hebben daarom ‘back-up navigatie’. Als de zon achter de wolken verdwijnt kunnen ze altijd nog terugvallen op magnetische velden die de juist richting aangeven, of fysieke kenmerken in het landschap herkennen.

Surfen als een vogel
Internetgebruikers zijn net zo! Ze zijn wellicht zoekende navigators of klikken willekeurig links aan, maar hebben wel allemaal een interne navigatie waarmee ze ‘onthouden’ waar ze zich in de sitemap bevinden. Mits je de juiste markeerpunten op de juiste plaats op een website plaatst! Zonder duidelijke markeerpunten waar gebruikers zich aan vast kunnen houden raken ze gedesoriënteerd en vliegen ze rechtstreeks in elektriciteitskabels – Met andere woorden ze verlaten de site.

Door onderstaande punten te implementeren stel je gebruikers in staat zich beter te kunnen oriënteren als ze ‘verdwalen’, en zijn ze zich bewust van andere omliggende zaken die in relatie staan met de sitestructuur. Onthoud dat je bezoekers altijd wil laten zien waar ze zijn geweest, waar ze zijn en waar ze naartoe kunnen.

Zorg voor een duidelijk gemarkeerde home-link op alle internet pagina’s
Je kunt hier ook een logo voor gebruiken. Gebruikers gaan er in de regel echter intuïtief vanuit dat deze zich in de linkerbovenhoek van de pagina bevindt.

Zorg voor een heldere omschrijvingen binnen de navigatie
Vertrouw niet op Mouseover effecten of iconen. Ook wel bekend als ‘mystery meat navigation’, een term geïntroduceerd door Vincent Flanders van Web Pages that Suck, en een meer gedetailleerde omschrijving van waarom dit soort navigatie niet volstaat is hier te vinden. Onthoud altijd dat navigatie in de eerste plaats bedoeld is om je bezoekers te helpen, en niet alleen om er mooi uit te zien. Er is altijd een manier om navigatie op een mooie manier vorm te geven zonder dat dit afdoet aan de gebruiksvriendelijkheid.

Houd interne en externe links gescheiden
Het is verwarrend wanneer een link waarvan je verwacht dat deze je naar een ander gedeelte in de website brengt in plaats daarvan een compleet andere website opent. Gebruikers worden niet graag op het verkeerde been gezet. Op bijvoorbeeld een persoonlijke site plaats je links naar je blog, twitter en andere social network sites onder een kopje ‘social network’ in plaats van in de hoofdnavigatie

• Overweeg externe links te elimineren of herstructureer je navigatie in twee onderdelen. Eén voor interne en één voor externe links.
• Geef gebruikers niet de indruk dat ze op een interne link gaan klikken terwijl deze hen naar een externe site loodst.

Markeer externe links
Wikipedia voegt een klein icoontje toe aan het einde van een link om de gebruiker te laten weten dat het hier om een externe link gaat. Gebruikers kunnen vervolgens zelf besluiten of ze deze link in een nieuw venster of tabblad willen openen.

Laat gebruikers een link openen hoe zij dat willen
De meeste gebruikers weten hoe ze een link in een nieuw tabblad moeten openen (of in ieder geval hoe de backbutton werkt). Laat javascript trucjes varen en gebruik geen target=”_blank” om links te forceren in een nieuw venster te worden geopend. Je zult er misschien huiverig voor zijn deze vorm van controle te moeten missen, maar stel je voor hoe irritant en frustrerend het is als een gebruiker een nieuw geopend venster moet sluiten terwijl hij misschien alleen even snel de link wilde ‘proberen’ en er verder geen serieuze bedoelingen mee had. Dit kan erg verwarrende zijn, zeker als er al meerdere vensters open stonden. De gebruiker moet het venster sluiten en zich opnieuw oriënteren. Dit kan een gebruiker er vervolgens van weerhouden meer links in je site aan te klikken.

Gebruik breadcrumbs (broodkruimel navigatie)
Breadcrumbs zijn kleine navigatielinks aan de bovenkant van een pagina die de gebruiker laten zien waar ze zich bevinden in de sitemap door een klein spoor van links te laten zien waar ze zijn geweest. Gebruikers kunnen zich dmv breadcrumbs optimaal navigeren door welke website dan ook.

Steven Krug gaf in zijn boek Don’t make me think een aantal perfecte tips voor optimale breadcrumbs navigatie:

• plaats breadcrumbs zo ver mogelijk bovenin de pagina zodat ze niet in de weg zitten
• gebruik een klein lettertype
• laat breadcrumbs beginnen met “Je bent hier:” (vetgedrukt)
• iedere ‘klikbare’ link moet onderstreept zijn en worden gevolgd door een “>”
• aan het eind komt de niet klikbare titel van de huidige pagina (vetgedrukt)
•  zie onderstaande afbeelding voor een voorbeeld van juis gebruik van breadcrumbs

Markeer binnen de navigatie de pagina waar de gebruiker zich bevindt
Gebruik CSS om de huidige positie binnen de navigatie te markeren. In bovenstaande afbeelding zie je een voorbeeld waarin de huidige pagina ‘Articles’ een zwarte achtergrond heeft.

Gebruik vorige en volgende buttons in formulieren die uit meerdere pagina’s bestaan
Bij het invullen van formulieren die uit meerdere stappen / pagina’s bestaand zijn gebruikers altijd bang dat alles wat ze ingevuld hebben verdwijnt wanneer ze de backbutton in de browser gebruiken. Stel gebruikers gerust door ze de mogelijkheid te bieden rustig door het formulier heen te bladeren.

Maak gebruik van een zoekfunctie
Veel gebruikers maken gebruik van een zoekfunctie om door een site te navigeren. Zie een zoekfunctie teven als een vangnet. Raakt een bezoeker verdwaalt dan kan hij altijd weer opzoek naar waar hij vandaan kwam.

Gebruik een sitemap
Sitemaps zijn een uitstekende manier om bezoekers een overzicht te geven van alle content op een site en de structuur hiervan. Daarnaast is de sitemap een van de plaatsen waar een bezoekers als eerste naartoe gaat als hij verdwaald is of iets niet kan vinden. Doe je bezoekers daarom een plezier en bied een sitemap aan.

Wees voorzichtig met dropdown menu’s en andere flyout objecten
Het is erg storend als er ineens een groot dropdown menu verschijnt wanneer een gebruiker per ongeluk met zijn muis ergens overheen gaat.

Geef kleine links extra padding
Door extra padding te geven aan kleine links, bijvoorbeeld cijfers of icoontjes, wordt het klikbare gebied groter. Niet iedereen heeft evenveel controle over de muis.

Over de schrijfster
Rachel Nabors is een front-end designer uit Raleigh, North Carolina. Voor meer artikelen en haar werk kijk je op haar website ThePinkCrow.com