Naar inhoudNieuwsbrief maart 2010
Op 18 mei wordt de Usability Award voor de tiende keer uitgereikt aan de meest gebruiksvriendelijke website. Een vakjury met usability experts beoordeelt de ingezonden websites en nomineert er 5. Vervolgens kan het publiek van 16 april tot en met 13 mei stemmen op de genomineerde websites, door ze op vier criteria te beoordelen: Navigatie, Inhoud, Content en Algehele Gebruiksvriendelijkheid. In de komende nieuwsbrieven behandelen we steeds één van de criteria. In deze nieuwsbrief: navigatie.
Allereerst moeten de navigatiemogelijkheden goed zichtbaar zijn. Het contrast van de letters van het menu ten opzichte van de menu-balk moet goed zijn. Het hoofdmenu is belangrijk op een website: het is belangrijk dat het menu de aandacht trekt om het gebruikers mogelijk te maken informatie op je website te vinden. Ook moet er een duidelijke hiërarchie zijn in het hoofd- en submenu. Dit kan bijvoorbeeld gedaan worden door het hoofdmenu groter te maken dan het submenu, of de letters in het hoofdmenu dikgedrukt weer te geven.
Tabbladen gebruiken op websites is immens populair. Tabbladen worden niet altijd herkend door gebruikers, omdat deze niet als tabbladen vormgegeven zijn. Let er daarom op dat de tabbladen helemaal omlijnd zijn en er uit zien als ‘echte’ tabbladen. Het is goed wanneer het actieve tabblad en het niet actieve tabblad verschillen van kleur, zodat duidelijk is welk tabblad actief is. Geef de niet actieve tabbladen niet een grijze achtergrondkleur, omdat hierdoor gebruikers verwachten dat het tabblad niet aan te klikken is. Het actieve tabblad kan het beste in dezelfde kleur als het aangrenzende contentveld getoond worden, omdat dit het idee van een “fysiek” tabblad versterkt.
Een menu gebruiken levert regelmatig grote frustraties op bij gebruikers. Wie kent niet de menu’s waarmee je precies met je muis een menu-item moet aanwijzen, waarbij vervolgens een menu uitklapt en als je vervolgens naar een submenu-item beweegt, verandert per ongeluk ook het hoofdmenu-item. Dergelijke uitklapmenu’s kunnen ontzettend frustrerend zijn. Met name gebruikers die nog niet heel vloeiend met de muis bewegen, denk aan ouderen of kinderen, hebben vaak moeite om dergelijke menu’s te gebruiken. Gelukkig zien we dergelijke menu’s steeds minder op nieuwe websites.
De technische werking van het menu is belangrijk. Een navigatiemenu dat over de hele breedte uitvouwt, een zogenaamd mega dropdown menu wordt door gebruikers gewaardeerd, omdat gebruikers meteen kunnen zien wat er te vinden is onder de hoofditems zonder dat zij hoeven te klikken.
Wanneer de techniek echter niet goed werkt, kan een dergelijk menu ook een bron van ergernis zijn: Bijvoorbeeld wanneer het menu te snel verschijnt of te snel weer verdwijnt. Het menu moet niet bij elke beweging van de muis in- of uitklappen, maar het menu moet ook niet onnodig in beeld blijven staan. Uit onderzoek van Jakob Nielsen blijkt dat een dergelijk menu de beste gebruikerservaring geeft, wanneer er een vertraging van 0.5 seconden zit tussen de actie van de gebruiker en de actie van het menu.
Een enkele keer komen wij bij het testen websites tegen, waarop het menu verandert wanneer een item is aangeklikt. Bijvoorbeeld de naamgeving van items verandert, of de volgorde van de items wordt anders wanneer je ergens op geklikt hebt. Dit is uitermate verwarrend voor gebruikers: het menu geeft houvast wanneer je op een website surft. Wanneer het menu verandert, raken gebruikers de weg kwijt omdat de herkenningspunten veranderd zijn.
Gebruikers vinden het prettig wanneer zij al direct op de homepage kunnen zien welke informatie op de website aangeboden wordt. Een uitklapmenu is hiervoor ideaal: je kunt, voordat je ergens op geklikt hebt, al zien welke subitems mogelijk zijn.
Er is een regel, Miller’s Law, die stelt dat een gemiddelde persoon 7 plus of min 2 objecten in zijn werkgeheugen kan houden. Dit houdt in dat de hoofdnavigatie op een website, wanneer een standaardnavigatie gebruikt wordt in de vorm van een menu balk met items daarin, uit niet meer dan 7 plus 2 items moet bestaan. Wanneer je meer menu-items aanbiedt, zo zegt Miller’s Law, kunnen gebruikers niet onthouden welke andere menu-items er op de website zijn wanneer je een item hebt aangeklikt.
De 7±2 regel geldt niet voor een mega dropdown menu: hierin kun je namelijk gemakkelijker items vergelijken omdat deze zichtbaar zijn, je hoeft ze niet in je werkgeheugen te houden. Ook mag een menu-item gerust meer dan 9 subitems hebben, als deze een bepaalde logica volgen. Het zou bijvoorbeeld onzinnig zijn om de provincies van Nederland in verschillende menu-items te plaatsen alleen omdat een menu item niet meer dan 9 items mag bevatten.
Een link naar ‘Home’ als eerste item in de menubalk, wordt steeds vaker niet meer op websites opgenomen. Klikken op het logo leidt de gebruiker terug naar de homepage, dus een link naar ‘Home’ zou dan niet nodig zijn, redeneren de websitebouwers. Dit gaat echter niet altijd op, de gemiddelde internetter weet namelijk niet dat een logo ook terugleidt naar de homepage. Het niet hebben van een menu-item ‘Home’ is een veelgehoorde klacht.
De naamgeving van menu-items is bepalend voor of gebruikers er op klikken of niet. Het is belangrijk dat de naamgeving van de items voldoende onderscheidend zijn ten opzichte van elkaar: een menu-item ‘Contact’ en ‘Adresgegevens’ lijken bijvoorbeeld te veel op elkaar en hoeven dus niet beide in het menu opgenomen te worden.
Het is belangrijk dat de titel van de pagina gelijk is aan de titel van het menu-item. Gebruikers raken verward wanneer dit niet het geval is en zullen vaker op het menu-item klikken, omdat ze verwachten dat er andere informatie te vinden zal zijn.
Met ondersteunende navigatie bedoelen we de items die veelal aan de rechterkant, boven aan de pagina worden aangeboden. Op deze plek verwachten gebruikers links naar bijvoorbeeld ‘Contact’, ‘Over [naam bedrijf]’ en een inlogmogelijkheid. Wanneer een gebruiker ingelogd is, is het ook een geschikte plaats om weer te geven dat de gebruiker ingelogd is, door bijvoorbeeld de tekst ‘Welkom [naam gebruiker]’.
In de footer zien wij steeds vaker sitemaps terug. Dit is vooral handig, wanneer een website veel inhoud bevat, verdeeld over verschillende onderwerpen (menu-items en submenu-items). Sommige gebruikers vinden dergelijke footers er niet mooi uit zien, omdat zij het idee hebben dat hierdoor de pagina veel langer is en zij meer moeten scrollen. Een mogelijkheid om de sitemap in te klappen (en dus te verbergen) is hier een goede oplossing voor. Tijdens onderzoeken blijkt echter wel dat dergelijke sitemaps veel gebruikt worden, ook door de gebruikers die in eerste instantie vinden dat door de sitemap de pagina te lang wordt.
Een hiërarchisch pad – ook wel kruimelnavigatie - op een website werkt het beste wanneer deze aan een aantal specifieke eisen voldoet. De plaats van het hiërarchisch pad is idealiter aan de linkerkant, onder de hoofdnavigatie en boven de content van de pagina. Het hiërarchisch pad begint met een link naar home. Het teken ‘>’ om de verschillende stappen te scheiden spreekt het meest voor zich. De laatste stap in het pad is de pagina waarop de gebruiker zich bevindt. De titel van deze stap en de pagina zijn gelijk. Met uitzondering van de laatste stap zijn alle stappen klikbaar, wat idealiter wordt weergegeven door de stappen te onderstrepen.
Het is tegenwoordig vrij gangbaar om in de tekst zelf een link aan te bieden, door een woord in de tekst klikbaar te maken. Veelal wordt verwezen naar een andere pagina binnen dezelfde website, soms naar een andere website. Hyperlinks in de tekst zelf worden nog altijd het beste herkend, wanneer deze een andere kleur hebben dan de gewone tekst (bij voorkeur blauwe links t.o.v. zwarte tekst). Ook onderstrepen maakt de hyperlink herkenbaar voor de gebruiker.
Soms komen we websites tegen, die duidelijk meer de voorkeur hebben gegeven aan het design van de website in plaats van de gebruiksvriendelijkheid van de website. Een voorbeeld van een dergelijke website is www.bxlab.com: die navigatie verschijnt pas wanneer je een rechthoek hebt getrokken. De navigatie wordt weergegeven in de vorm van kleine rondjes die heen en weer bewegen. Hoewel een dergelijke navigatie er leuk uitziet, het is in het gebruik niet handig.
In de volgende nieuwsbrief aflevering twee in de serie ‘Wat te doen om de Usability Award te winnen’, waarin het volgende criteria wordt besproken. Wilt u meer weten over de Usability Award van 2010 en de winnaars van voorgaande jaren? Ga dan naar www.usabilityaward.nl.
Inhoud:
