Een gebruiksvriendelijk website ontwerp in 5 stappen - Interaction Design

Door PuurIDee

Onlangs heeft collega Yvonne de cursus Interaction Design in Utrecht gevolgd. Ze heeft dit als zeer interessant en erg leerzaam ervaren en deelt graag het een en ander met jullie!

We begonnen de eerste ochtend gelijk goed en doken de theorie van Interaction Design in! Veel mensen hebben er vast wel eens van gehoord: de heuristieken van Jakob Nielsen. Jakob Nielsen is een echte webdesign-goeroe en zijn heuristieken gaan in op tien onderdelen waarop een website getest kan worden:

  1. Is het duidelijk waar je je bevindt op de website?
  2. Is de website realistisch?
  3. Heeft de gebruiker vrijheid?
  4. Is er consistentie op de website?
  5. Zijn de stappen die de gebruiker moet doorlopen duidelijk?
  6. Geeft de website een foutmelding bij bijvoorbeeld het invoeren van een verkeerd wachtwoord?
  7. Werkt de website flexibel?
  8. Is de website minimalistisch en wordt je oog naar de juiste dingen getrokken?
  9. Als er een error is, weet de gebruiker dan wat hij of zij moet doen?
  10. Is er iets waar de gebruiker hulp kan krijgen? (bijvoorbeeld een hulp-pagina of een telefoonnummer voor hulp)

De truc is om je eigen webontwerp naast deze vragen te leggen en je website te controleren. Wat gaat er goed en wat gaat er fout? Hieruit blijken direct de verbeterpunten voor je eigen ontwerp!

De vijf elementen van user experience design
 

Stap 1: Strategy

Begin bij de basis!  Wat is de strategie en het doel van de website? Wie zijn de gebruikers? Waarvoor wordt de website ingezet? Als de strategie en de gebruikersdoelen van de website duidelijk zijn, kan je pas door met de volgende stap.

Stap 2: Scope

Aan de hand van de strategie worden persona’s gemaakt. Op welke doelgroep wordt de nadruk gelegd? Welke doelgroep wordt aangesproken? Dit onderdeel valt onder de scope. Aan de hand van persona’s worden de taken die de doelgroep uit wil voeren genoteerd. Hierdoor weet je gelijk welke mogelijkheden de website moet bevatten. Als je de grootste doelgroep wilt aanspreken, maar de iets kleinere doelgroep ook wilt meenemen kun je dit oplossen door een grote knop voor de grootste doelgroep te gebruiken en bijvoorbeeld tekstlinkjes te gebruiken voor de kleinere doelgroep.

Stap 3: Structure

Binnen de structuur wordt de opbouw van een website bepaald. Je bepaalt welke items er in het hoofdmenu horen en welke items in het submenu. Het is belangrijk om onderscheid te maken tussen belangrijke en minder belangrijke informatie. Hierdoor wordt de informatie gestructureerd en kan de nadruk later in het ontwerp op de belangrijkste informatie worden gelegd.

Stap 4: Skeleton

Je begint het ontwerpen in een schetsvorm: het skelet. Alle elementen die in de vorige fases zijn vastgesteld vallen samen in de schets. Wij noemen dit wireframes. Wireframes bevatten nog geen afbeeldingen en het is nog niet zichtbaar welke kleuren er gebruikt gaan worden. Ook lettertypes worden nog zo min mogelijk gebruikt.

Stap 5: Surface

Op dit moment is het heel goed om de wireframes te testen bij de klant of de doelgroep van de klant. Aangezien het nog een schets is letten de gebruikers op de functie van de website en niet op het ontwerp. Je verbetert het pad dat de doelgroep aflegt in plaats van de kleuren aan te passen. Pas als het hele skelet staat en goed werkt, worden er kleuren, lettertypes en afbeeldingen toegevoegd. Natuurlijk is het goed om het product hierna nogmaals te testen.

Het was een interessante en ontzettend leerzame cursus met kennis die wij zeker in gaan zetten bij het ontwerpen van nieuwe websites.

Stel je vraag of maak een afspraak