Ergonomie en bruikbaarheid

Wist je dat je website slechts tien seconden heeft om zich tegenover de surfer te bewijzen? Indien hij op die tijd niet vindt wat hij nodig heeft, zal hij je website verlaten.

Om een bezoeker op je website te houden, moet die ergonomisch en bruikbaar zijn. Een website is ergonomisch indien hij gebruiksvriendelijk en intuïtief is en gebaseerd op de verwachtingen van de surfer. De site is bruikbaar indien hij efficiënt en prestatiegericht is. Beide beginselen zorgen samen voor een geslaagd project. Daarom behandelen we ze tegelijk.

Tip: vergeet niet steeds rekening te houden met de surfer. Zijn logica, taal en verwachtingen verschillen mogelijk van die van je instelling.

Volg de onderstaande twaalf regels zodat je site voldoet aan de verwachtingen van de internetgebruikers.

  1. Architectuur
  2. Visuele organisatie
  3. Samenhang
  4. Afspraken
  5. Informatie
  6. Begrijpelijkheid
  7. Bijstand
  8. Error handling
  9. Snelheid
  10. Vrijheid tot handelen
  11. Toegankelijkheid
  12. Tevredenheid van de surfer

1. Architectuur

De website is overzichtelijk.

  • De indeling is logisch.
  • De structuur zet de sleutelelementen in de verf.
  • De menu’s helpen de surfer om gemakkelijk door de inhoud te browsen. 

Tip: creëer je architectuur in twee stappen:

  • Sorteer eerst a.d.h.v. kaarten (elke kaart stelt een deel van de inhoud voor). Daardoor kan de exacte inhoud van de site worden bepaald en kunnen er hergroeperingen per grote thema’s worden gecreëerd.
  • Bepaal vervolgens de structuur, het boomdiagram. 

Sortering a.d.h.v. kaarten

© Cegos, Paris, 2011.

Informatiearchitectuur

  • Sorteermethode a.d.h.v. kaarten.
  • Een kaart opstellen voor elke informatiecategorie op de website:
    • titel van de kaart: 1 of 2 sleutelwoorden;
    • een zin die de inhoud op de kaart beschrijft.
  • Opmerking: zorg ervoor dat je niet groepeert in de titel of de gebruikte beschrijving.

Protocol

  • Alle kaarten (max. 50) aan de gebruiker voorstellen.
  • De gebruiker groepeert de kaarten die hij als gelijksoortig beschouwt (vanuit zijn perspectief).
  • Hij geeft elke groep kaarten een naam.
  • Hij kan de groepen over elkaar leggen en ‘bovengroepen’ creëren.

De structuur van de website opbouwen op basis van de meest frequente groeperingen.

Maar ook:

  • De ontbrekende thema’s identificeren.
  • De begrijpelijkheid van de labels controleren.
  • Begrijpen op welke manier de gebruiker de inhoud van de website interpreteert.

Boomdiagram

© Cegos, Paris, 2011.

  • De voorkeur geven aan een regelmatig boomdiagram
  • De website eerst in de breedte structureren
    • Diepte: max. 3-4 niveaus
    • Breedte: max. 8 rubrieken
    • Max. 8 subrubrieken 3-4 max.

2. Visuele organisatie

De pagina is overzichtelijk

  • Niet te veel informatie op een pagina (visuele overbelasting).
  • Geef enkel de belangrijkste browse- en interactie-elementen weer.
  • Plaats enkel het essentiële op de pagina.
  • Voor je homepage kan je meerdere elementen op de voorgrond plaatsen, zelfs als ze zich redelijk laag in de navigatie bevinden. Sorteer daarvoor opnieuw de kaarten speciaal voor je homepage.
  • Respecteer de visuele hiërarchie van de pagina.

© Cegos, Paris, 2011.

Visuele hiërarchie

Het centrum van de pagina is het eerste wat de surfer leest

Daarna gaat de gebruiker op zoek naar informatie aan de zijkant, dan bovenaan.

De analyse van het gedrag van de gebruikers tijdens de proeven wordt door de registratie van de oogbewegingen bevestigd.

Percentage bezoekers die minstens één maal de zone hebben gezien (Web Tracking Eye, Ipsos 01)

3. Samenhang

De pagina’s zijn volgens hetzelfde model ingedeeld.

De samenhang bestaat erin een goed geordende en stabiele ruimte te bieden gedurende heel het bezoek van de gebruiker. Een leidraad (of broodkruimelnavigatie) wijst de gebruiker zijn positie op de website aan. Elementen als menu’s, contactknoppen of andere belangrijke onderdelen mogen niet van plaats veranderen. Je moet je bezoeker helpen zo snel mogelijk te vinden wat hij zoekt.

De grafische vormgeving mag niet tegenstrijdig zijn met de ergonomie. Een knop moet een knop blijven, zodat je bezoeker snel door heeft dat een klik op dat element een actie zal veroorzaken. De grafische wijziging van ervan moet dus absoluut gemakkelijk te identificeren zijn en geen ruimte voor twijfel laten.

4. Afspraken

De surfers hebben tijdens hun bezoek op de websites reflexen verworven, alsook automatismen die men niet mag verstoren. Door deze afspraken na te leven, kan de gebruiker gemakkelijker en aangenamer surfen.

Voorbeelden van afspraken:

  • Plaats je logo linksboven en maak het klikbaar om naar de homepage te gaan.
  • Noem de homepage “home”, maar niet “eerste pagina”.
  • Behoud een “handcursor” voor de klikbare zones.
  • Etc.

5. Informatie

De site informeert de surfer en voorziet hem van antwoorden

De website moet met de bezoekers kunnen interageren en hen informeren.

Voorbeelden:

  • De site biedt een minimum aan algemene informatie aan (doel van de site).
  • De site biedt informatie uit de eerste hand.
  • Er wordt feedback gegeven over de handelingen van de surfer (op de formulieren, de interacties).
  • Etc.

6. Begrijpelijkheid

De woorden en symbolen zijn zeer zorgvuldig uitgekozen.

  • De woordenschat is begrijpelijk, duidelijk en de teksten zijn beknopt.
  • De woordenschat is aan de surfer aangepast: vermijd over het algemeen jargon, behalve als je bezoekers het gebruiken (bv.: een website voor artsen zal hun woordenschat hanteren).
  • De woordenschat is conventioneel (schrijf ‘afdrukken’ om af te drukken etc.).
  • De symbolen moeten begrijpelijk zijn in de context.

Voor meer info daarover: copywriting.

7. Bijstand

De site helpt en begeleidt de surfer.

De bijstand bestaat erin je gebruikers volgens hun behoeften en verwachtingen te begeleiden.

Die bijstand kan op verschillende manieren worden geboden:

  • Een tekst, een afbeelding.
  • De organisatie van de pagina of de website in het algemeen.
  • De affordances (bv.:  je e-mailadres is al ingevuld op een formulier).
  • Het gemakkelijk vinden van de klikbare elementen.

8. Error handling

De website voorziet de mogelijke fouten van de surfer.

Voorzie bij het ontwerpen van je website een beheer van de fouten die je gebruiker zou kunnen tegenkomen. Er ontstaan veel fouten bij het invullen van de formulieren. Daarom moeten ondersteuning en een expliciet en nauwkeurig antwoord van de site de gebruiker op de hoogte brengen van zijn fout en hem begeleiden bij de nodige handelingen om dit recht te zetten.

Voor meer info daarover: formulieren (link)

Wat de 404-pagina betreft, kunnen de federale instellingen de Child Alert-pagina gebruiken (dat is aanbevolen).

9. Snelheid

De site moet de surfers helpen om hun informatie zo snel mogelijk te vinden.

Je bezoekers hebben niet allemaal dezelfde ervaring. Het bieden van meerdere manieren om toegang te krijgen tot dezelfde inhoud, kan een goede manier zijn om te beantwoorden aan het snelheidscriterium .

Voorbeelden:

  • Vermeerder de toegangssleutels tot eenzelfde pagina (interne links).
  • Maak de klikbare elementen meteen zichtbaar (grootte, plaats).
  • Vraag geen nutteloze zaken.
  • Vraag niet tweemaal hetzelfde.
  • Bied verschillende interactievormen aan (deskundige modus: geavanceerd zoeken, beginnersmodus: eenvoudig zoeken).

10. Vrijheid tot handelen

De gebruiker moet steeds het gevoel hebben dat hij zijn omgeving beheerst.

Laat hem vrij in het uitvoeren van bepaalde handelingen. Verander zijn gewoonten niet. Zo kan hij gemakkelijk door je site browsen.

Behoud onder andere de volgende opties:

  • Copy-paste, backtracking van de browser ...
  • Een animatie stoppen, het volume verminderen ...
  • Een waarschuwing geven als de site een externe applicatie moet opstarten (bv.: een link naar een mp3-bestand start automatisch de standaard ingestelde speler op).

11. Toegankelijkheid

De site moet zo zijn ontworpen dat hij een maximale toegankelijkheid biedt.

Idealiter moet de website de vastgelegde afspraken van het W3C (World Wide Web Consortium) respecteren.

De toegankelijkheid van een website kan de volgende vormen aannemen:

  • Fysiek: houd rekening met de browsernormen voor de gebruikers met een zichtbeperking (W3C of Anysurfer).
  • Technologisch: de afwezigheid of desactivering van bepaalde plug-ins mag het goed functioneren van de website niet in de weg staan.
  • Visueel: beoog een schermresolutie die een optimaal gebruik mogelijk maakt. Indien men gebruikmaakt van andere resoluties, moet de site evenwel gemakkelijk toegankelijk zijn.

12. Tevredenheid van de surfer

De tevredenheid van je gebruiker is afhankelijk van zijn globale ervaring op je website.

Om aan dat criterium te voldoen, zijn er bepaalde parameters nodig: bruikbaarheid, lay-out, technische performantie, kwaliteit van de dienstverlening etc. Focus niet op één enkel punt: onderschat het belang van de ergonomie niet ten opzichte van dat van de techniek of vormgeving. Dat geldt ook voor de andere punten. Voor een gunstig resultaat moet je een evenwicht bereiken.

Contact

Sylvie Baeyens

sylvie.baeyens@premier.fed.be

Voornaamste bron: opleiding Ergonomie des sites web, Cegos, Parijs, 2011.