Home » Artikelen » 10 Usability tips voor iedere website

10 Usability tips voor iedere website

Geplaatst op 22-12-2009 in Usability

Hieronder volgen 10 onmisbare tips om de gebruiksvriendelijkheid van uw website te vergroten. Gesneden koek voor elke ervaren webdeveloper, maar lang niet vanzelfsprekend op alle websites.

1. Splash intro's

Een splash intro is de eerste pagina op een website zonder echte content. Veel van deze intro's zijn voorzien van allerlei bewegende beelden of teksten. Deze fimpjes zijn bedoeld om de bezoekers aandacht te trekken voor bijvoorbeeld nieuwe producten, bedrijfsinformatie of portfolio. Na of tijdens de intro krijgt de bezoeker de mogelijkheid, met een start knop, om de website te betreden.

Een splash intro wordt over het algemeen niet gewaardeerd, omdat het laden van deze intro's lang duurt en de gebruiker onvoldoende mogelijkheden heeft om snel op de pagina te komen waar hij voor komt (het navigeren over de website begint pas wanneer de bezoeker de intro voorbij is).

2. Link het logo naar de homepage

Een veel voorkomende fout die gemaakt wordt is het vergeten van het plaatsen van een linkje op het bedrijfslogo. Mensen met wat meer internet ervaring missen deze feature bijna dagelijks. Naast de welbekende 'home' button in het menu is het een gewoonte geworden om ook via het logo naar de homepage van een website terug te keren. Op de homepage zelf hoeft er natuurlijk geen linkje op het logo, je bent dan immers al op de homepage!

3. Navigatie

Een belangrijk onderdeel van een website is de navigatie. Naast de plaats van het menu zijn ook de functionaliteiten erg belangrijk.

Plaatsing

De beste plek om het menu te plaatsen is verticaal links naast of horizontaal boven de content. Dit zijn de natuurlijke plaatsen waar een bezoeker het menu verwacht. We kunnen in deze plaatsten ook onderscheid maken in primaire en secundaire navigatie. De navigatie boven de content wordt vooral gezien als primaire navigatie, het bevat de links naar verschillende hoofdsecties van de websites. De navigatie aan de linker kant bevat subsecties van de website en wordt daarom als secundaire navigatie beschouwd.

Naamgeving

Het menu bestaat uit een aantal vaste 'knoppen' als home en contact. Dit zijn de items die een bezoeker niet graag mist, omdat hij altijd de mogelijkheid wil om terug te keren naar de homepage en vaak op zoek is naar contactgegevens. Zet Home altijd op de eerste plaats en Contact altijd op de laatste plaats.

Maar ook over de overige menu-items moet goed nagedacht worden. Zorg ervoor dat de namen een goed beeld geven van de inhoud van de pagina waarnaar gelinkt wordt. Een veel voorkomende fout die we terug zien komen is het gebruik van een 'informatie' pagina in het menu. Uiteindelijk zijn alle pagina's informatief en daarom is het een verkeerde woordkeuze. De afbeelding hieronder toont een dergelijk menu, wat maakt de pagina 'Nieuws' minder informatief dan 'Info'?

De meeste bedrijven websites willen een informatie pagina over het bedrijf aanbieden, waar bedrijfsgeschiedenis en overige informatie te vinden is. Een mogelijke oplossing voor een betere paginanaam is dan 'bedrijfsinformatie' of 'over ons'.

Breadcrumb

Een 'breadcrumb' is de engelse vakterm voor kruimelpad. Een kruimelpad is een horizontale navigatiebalk waarin de structuur van het menu weergegeven wordt door de bovenliggende pagina's weer te geven. Een kruimelpad is een 'must-have' voor websites met dieper gelegen pagina's, op deze manier kan een gebruiker gemakkelijk terug naar een bovenliggende pagina. De meest logische plaats voor een kruimelpad is tussen de header en de content.

4. Zoeken

Wanneer een website meer dan 20 pagina's telt is het aan te raden om een zoekfunctie aan de website toe te voegen. Niet alle pagina's passen in het hoofdmenu waardoor de website in secties opgeknipt wordt. Om bepaalde informatie dan toch in 1 keer te vinden zijn bezoekers op zoek naar een manier van zoeken.

De ideale plaats voor een zoekfunctie is bovenaan de pagina aan de rechterkant, dit is de plek waar bezoekers hem verwachten en als eerste zullen kijken.

5. Teksten

De gebruiksvriendelijkheid van een website wordt niet alleen bepaald door het design, maar ook door de teksten. Bij een lange tekst leest de bezoeker vaak alleen de titel en een stuk van de eerste alinea. Een van de onderzoeksvormen om achter de aandacht van een lezer te komen is 'eye tracking'. Met een dergelijk onderzoek kan men erachter komen op welke punten van een pagina de focus van de lezer ligt.

Voorbeeld van een eye tracking onderzoek op de rode delen ligt de focus van de gebruiker

Afhankelijk van het publiek zijn er verschillende soorten lezers. Een deel leest bijvoorbeeld een artikel van boven naar onder zonder op zoek te zijn naar kernwoorden.

De andere groep leest structureel door een tekst. Deze groep is groter dan de groep lezers en noemt men 'scanners'. Deze groep is continue op zoek naar interessante of relevante informatie. Door de tekst te verdelen in kopjes en korte paragrafen en afbeeldingen zullen zij sneller vinden wat ze zoeken en daarmee wordt de kans vergroot dat de gebruiker terug keert naar de website.

6. Vermijd 'klik hier'

Wie kent het niet: "Klik hier voor een voorbeeld". Het is al een doorn in het oog sinds het onstaan van het internet. Het probleem van 'klik hier' zit hem in het feit dat de link in verband moet worden gebracht met de tekst. De lezer moet eerste de tekst er omheen lezen om te weten waarom hij op de link zou moeten klikken. Een voorbeeld met oplossing in context:

Fout: "Heeft u nog vragen? Klik hier om contact met ons op te nemen."
Goed: "Heeft u nog vragen? Neem dan gerust contact met ons op."

7. Media

Media is een breed begrip. Media bevat niet alleen audio en video maar ook verschillende bestandsformaten in documenten of afbeeldingen. De verschillende formaten kunnen we ordenen onder twee soorten standaarden: open standaarden en gesloten standaarden.

Onder gesloten standaarden vallen bestandsformaten die alleen geopend kunnen worden met software die aangeschaft dient te zijn. Een voorbeeld hiervan is .doc (Word document).

Een open standaard van eerder genoemd voorbeeld is .pdf (Portable Document Format). Het programma 'Adobe Reader' is gratis te downloaden.

De standaarden op een rijtje:

Type bestand	Gesloten standaard	Open standaard
Tekst	Microsoft Word, WordPerfect	HTML; plain text; PDF/A-1a
Afbeelding	GIF; BMP	PNG; JPEG
Video	RealVideo; WMV	Theora; H.264/AVC/MPEG-4 part 10; SWF; Quiktime

Voor een aantal formaten als SWF en Quicktime zijn er plugins nodig om de bestanden te kunnen gebruiken. Deze plugins zijn een uitbreiding op de browser en zijn gratis te downloaden via de website van de frabrikant van het formaat.

Houd er rekening mee dat niet iedereen over dezelfde hardware en software beschikt, maar ook dat niet iedereen weet waarover ze beschikken. Biedt daarom zoveel mogelijk media via open standaarden aan zodat de uitwisselbaarheid en bruikbaarheid van de bestanden maximaal is.

Ben je er niet zeker van dat een gebruiker over bijvoorbeeld een plugin beschikt dan is het handig voor de gebruiker dat hij de mogelijkheid heeft om de juiste plugin te downloaden. Naast een link naar de website van de fabrikant kun je ook kort in eigen woorden uitleggen hoe het downloaden/ installeren werkt.

Audio

Het automatisch afspelen van audio is een van de grootste irritaties bij het betreden van een onbekende website. Geef een gebruiker daarom zelf de mogelijkheid om audio of video te starten.

8. Formulieren

Het invullen van een formulier kan een hele klus zijn. Bij dit invullen kan er altijd iets misgaan. Het kan zijn dat de bezoeker iets vergeten is in te vullen maar ook dat de inhoud niet aan de eisen van het veld voldoet. Geef daarom altijd feedback, zodat de bezoeker niet alleen weet dat er iets niet goed gaat maar ook wat er niet goed gaat. Ook wanneer alle informatie goed ingvuld is, verwacht een bezoeker een bericht.

Naast het aangeven van fouten is het ook goed om positieve feedback te geven wanneer een formulier succesvol verstuurd is.

9. Sitemap

Een sitemap is een overzicht waarop alle pagina's van een website te vinden zijn. Bij grote websites of webshops worden niet alle producten en generieke pagina's getoond maar bijvoorbeeld categorieën. Een goed voorbeeld is de sitemap van Ikea.

Voorbeeld van de sitemap van Ikea

10. Pagina niet gevonden

Deze pagina kennen we allemaal. Hij komt tevoorschijn op het moment dat er iets niet gevonden kan worden. Ook binnen een website komt het geregeld voor dat een gebruiker een fout maakt bij het invoeren van een pagina naam, iets zoekt wat niet bestaat of een link aanklikt naar een pagina die verwijderd is.

Wanneer de pagina binnen een website niet gevonden kan worden is het aan te raden de bezoeker te ontvangen op een 'pagina niet gevonden' in een vertrouwde omgeving, die van de website zelf. Verstandig is om naast de foutmelding ook relevante informatie te geven. Dit kan in verschillende vormen, als:

• Een zoekformulier zodat de bezoeker opnieuw binnen de website een zoekopdracht kan uitvoeren;
• Een sitemap zodat de bezoeker zelf de richting kan kiezen waar hij de informatie verwacht te vinden;
• Een mogelijkheid om contact op te nemen.

Niet ingrijpend

Bovenstaande tips zijn open deuren voor iedere ervaren webdeveloper. De meeste tips zijn eenvoudig te implementeren en veel Content Management Systemen bieden standaard opties aan als een zoekfunctie, breadcrumbs, sitemap en aangepaste "pagina niet gevonden" meldingen. Toch zijn er nog schrikbarend veel websites die bovenstaande tips niet in acht nemen.

« Terug naar Usability