U bent hier

Tips voor het ontwikkelen van een goede User Interface!

Wanneer je een nieuwe app of website bouwt, moet je ook goed nadenken over de User Interface (UI). Via de user interface kan de gebruiker gegevens invoeren in een apparaat (zoals een smartphone of computer) met behulp van bijvoorbeeld een touchscreen of een muis. Ook kan de computer gegevens en informatie tonen, bijvoorbeeld via een beeldscherm. De vraag bij user interface is eigenlijk altijd: Kan een gebruiker de app of website goed bedienen? Of: Weet de gebruiker wat hij of zij moet doen, hoe ze dit moeten doen, en wat er gebeurt wanneer ze dit doen? Dit goed aanpakken is zo makkelijk nog niet. Van Javed Khan (PhD'er en kenner in Human-Computer Interaction en docent aan de NHTV) kreeg ik een korte masterclass waarin ik een kleine ‘sneak peek’ kreeg in de wereld van Mobile Interaction Design Guidelines. In dit blog vind je de rode draad in zijn verhaal.

7 Stages of Interaction

Javed is fan van Don Norman, een geleerde op het gebied van cognitieve wetenschap, design en usability engineering, en auteur van het boek 'The design of Everyday Things'. Norman heeft de ‘7 stages of Interaction’ ontwikkeld. In dit model geeft hij aan waar je rekening mee moet houden wanneer je een interface aan het ontwikkelen bent, waarbij je vooral rekening houdt met de gebruiker.

Er zijn 7 stadia die je doorloopt wanneer je een actie uit voert. Eerst formuleer je jouw doel (stap 1), dan ga je bedenken hoe je tot je doel komt (stap 2 & 3), om vervolgens de actie uit te voeren (stap 4) en daarna te bekijken of het daadwerkelijk gelukt is (stap 5, 6 en 7).

Een simpel alledaags voorbeeld: je wilt jouw smartphone gebruiken waarvan momenteel de batterij leeg is (Form the Goal). Dan zul jij je eerst bedenken dat je jouw telefoon op moet laden (Form the intention & Specify the action). Dan zul je dat ook doen (Execute the Action). Daarna kun je bekijken of dit gelukt is en of je nu jouw telefoon kunt gebruiken (Perceive & Interpret the System State Evaluate).

Dit model kan daarom in twee delen worden opgesplitst:

  • The Gulf of Execution: Uitvoeren van je actie om tot je doel te komen (stap 1 - 4)
  • The Gulf of Evaluation: Hierin bekijk je of je het goed gedaan hebt (stap 5 - 7)

 

Gulf of execution

Bij de ‘Gulf of Interaction’ uit het bovenstaande model zijn er twee stadia waar designers een begeleidende rol op zich moeten nemen als het gaat om interactie met gebruikers:

  1. Feedforward: geef de gebruiker aan wat deze moet doen
  2. Signifier of Perceived Affordance: geef de gebruiker aan hoe deze het moet doen.

 

In ons dagelijks leven komen we veel dingen tegen waar hard over na is gedacht, zonder dat we dat door hebben. Op websites, je smartphone en in apps is dat niet anders. Heb je er bijvoorbeeld al eens over nagedacht hoe bijzonder het is dat kleine kinderen direct weten hoe ze jouw telefoon moeten unlocken met de slider, zonder dat ze ook maar een woord kunnen lezen?

De tekst die er staat is de feedforward, het geeft letterlijk aan wat je moet doen. Dat het verschuivende licht naar rechts gaat, is de signifier: het geeft precies aan welke kant je op moet sliden. Een kind kan de was doen!

Perceived affordances

Het kan ook zijn dat bepaalde acties al zo ‘normaal’ zijn, dat je precies weet wat je moet doen. Je weet dat een stoel er is om op te zitten. En wat doe je met het volgende?

Juist, je drukt er op! Omdat je dat al vaker in je leven hebt gedaan, associeer je de button met een actie: erop drukken.

Als we even teruggaan naar onze smartphone, dan weten we vast ook allemaal waar het omcirkelde tekentje voor staat:

Het is opvallend dat alle apps een soortgelijk teken gebruiken voor 'nieuw'. Dit is een perceived affordance: er hoeft dan ook niet bij te staan wat je er mee kunt, omdat je dit al weet uit eerdere ervaringen.

Valkuilen

Soms moet de gebruiker even geholpen worden in de goede richting, want ook al herkent de gebruiker het object, het is niet direct duidelijk hoe hij of zij deze moet gebruiken:

Weet jij hoe je deze deur open zou moeten maken? Moet je duwen, trekken, of misschien sliden ze wel open?! Met een kleine feedforward haal je dit stukje twijfelachtigheid gemakkelijk weg:

Kortom: Mensen vertellen wat ze kunnen doen en aangeven wat er dan waarschijnlijk zal gebeuren als ze het doen is het eerste teken van een goede interface.

Gulf of evaluation

Wat is er in het volgende voorbeeld niet handig?:

Je moet op de knop drukken om over te steken, zover is het heel duidelijk, je weet waar de knop zit en kunt er prima op drukken. Echter, wanneer je hebt gedrukt, weet je niet of het systeem jouw actie heeft ontvangen, of dat je eigenlijk nog eens had moeten drukken.

Qua user interface is dit dan een slimmer systeem:

Het geeft de gebruiker duidelijk weer dat hij of zij de knop goed heeft ingedrukt, en dat zijn wachten staat geregistreerd. Of het licht dan ook daadwerkelijk sneller groen wordt, dat is een andere discussie.

Ook op onze smartphone krijgen we regelmatig te zien of dat waarvoor we de intentie hadden ook daadwerkelijk is gebeurd:

Feedback

Feedback overbrugt de kloof van de ‘Gulf of Evaluation’ in het model van Norman. Het is namelijk heel belangrijk om de gebruikers te helpen bij het evalueren van de toestand van het systeem. Feedback geeft gebruikers een bericht of dat wat ze hebben gedaan ook goed hebben gedaan.

Als feedback goed wordt ingezet, laat het gebruikers zien:

  • wat de actuele toestand is van het systeem
  • dat hun actie is geregistreerd
  • wat er vervolgens gaan gebeuren.

 

Basis design guidelines

Als gevolg op het bovenstaande zou een (app)designer altijd rekening moeten houden met:

  • Feedforward
  • Affordances
  • Feedback

Reactie toevoegen

You must have Javascript enabled to use this form.

Neem direct contact met ons op

You must have Javascript enabled to use this form.