# UX - Gedrag
# Interaction Design (IxD)
IxD (Ned. interactieontwerp) houdt zich bezig met de interactie tussen de gebruiker en de website:
- Structuur opzetten.
- Gedrag uitlokken en faciliteren.
- Omgang van de gebruiker met het product bestuderen.
- Uitgaan van verwachtingspatronen van de gebruiker.
- De gebruiker staat centraal.
Job/functie: Onderzoeker, Interaction Designer, Usability Specialist
Stappen: Analyse, Sitemap, Wireframes, Wireflow, Prototype, Testing
# Interactie met de gebruiker
- Muis
- Toetsenbord
- Stylus (pen)
- Multi-touch: trackpad, touchscreen
- Motion Tracking / Motion Control
- Gebaren (Eng. Gestures)
- Spraaktechnologie (vaak gecombineerd met zoekfuncties en AI):
- AR (toegevoegde realiteit)
- QR-codescan
- Biometrie:
- vingerafdruk,
- iris,
- hartslag,
- tred (Eng. gait),
- stem,
- …
# Focus op doelen
- Hoe kan de persona een bepaalde actie tot een goed einde brengen?
- Hoe snel?
- Welke foutenmarge is er?
- Waar zitten knelpunten?
- Hoe voorkom je frustratie bij de eindgebruiker?
# Dimensies van IxD
# Woorden (Eng. Words)
De omschrijving van de knoppen, links, procedures waar de gebruiker interactie mee heeft moet zo correct mogelijk zijn.
Dit sluit aan bij labeling.
Hoe beter de actie omschreven is, hoe beter de gebruiker kan anticiperen op wat zal komen.
Voorbeelden
- “aanmelden met eID” i.p.v. “toegang”
- “bestel nu, morgen geleverd” i.p.v. “koop”
- ”maak je eigen profiel aan” i.p.v. “registreer hier”
# Vergelijk onderstaande schermen met dezelfde functie
# Visualisatie (Eng. Visual Representation)
De visuele weergave van een woord of actie door een beeld. Dit kan door middel van typografie, iconen, afbeeldingen … Hou rekening met de voorkennis van de persona in kwestie. Niet alle visuele metaforen zijn door iedereen gekend (idem voor vakjargon) Ook geur en geluid kunnen van toepassing zijn.
Voorbeelden
- In bovenstaand voorbeeld van macOS X werd de term land vervangen door een afbeelding
- Icoontje van een huis voor de startpagina (Eng. home).
- Icoontje van een tandwiel voor gebruikersinstellingen (Eng. configuration).
- Icoontje voor play op een afbeelding wil zeggen dat het een video is.
- Logo van eID toevoegen op navigatieknop.
- Alarmsignaal bij sluiten van treindeuren.
# Tastbare objecten / ruimte (Eng. Physical Objects or Space)
De tastbare objecten en ruimte waarin de gebruiker interactie heeft met het product.
Hou ook rekening met de plaats en moment waarop de applicatie gebruikt wordt.
Voorbeelden
- Smartphone toont een softwarematig toetsenbord met AZERTY.
- PlayStation controller vibreert bij het botsen tegen een virtuele muur (Dit is een vorm van een Haptische Gebruikersinterface.)
- Bankterminal is toegankelijk voor mensen in een rolstoel.
- Infokiosk staat met rug in de zon, zodat er geen lichtreflectie is.
- Auto navigatiesysteem maakt geluid bij te snel rijden en het schermkleur verandert zodanig dat dit opvalt zonder ernaar te kijken :::
# Tijd (Eng. Time)
Een extreem belangrijke factor! Zowel de tijdsduur van de interactie als de reactietijd na een gestelde actie.
Voorbeeld**
- Toon een voortgangsbalk (Eng. progress bar) bij wachten indien mogelijk, probeer een roterende cursor te vermijden.
- Optimaliseren van technologie om snel resultaten te tonen, bijv. Ajax-technieken toepassen (inladen op de achtergrond).
- Geluid laten veranderen naargelang tijd verstrijkt.
- Evaluatieformulier sturen na aantal dagen/weken/maanden.
Een snelle reactietijd is belangrijk voor de gebruiker
# Reactietijd (Eng. Response Time) in seconden:
| Tijd | Gevoel bij de gebruiker |
|---|---|
| Voelt ogenblikkelijk aan. | |
| Limiet om de gedachtengang niet te storen. | |
| Limiet om de aandacht te houden. Langer dan dit en de gebruiker zal beginnen multitasken (bijv. sociale media checken tijdens het wachten). |
# Gedrag (Eng. Behaviour)
Dit is het resultaat van alle voorgaande items. Zij bepalen wanneer, hoe en op welke manier een gebruiker een bepaalde actie kan uitvoeren en hoe de gebruiker hierop reageert.
Voorbeelden
- Computer besturen na opstarten.
- Plaat afspelen wanneer de naald geplaatst wordt.
- Een bestelling afronden en een melding tonen.
# Evil Webdesign / Dark patterns
Als je het gedrag van gebruikers kan voorspellen, dan kan je dit ook opzettelijk verkeerd toepassen. Dit om een bepaalde actie / reactie uit te lokken bij de bezoeker.
Een ‘goed’ voorbeeld hiervan is Ryanair dat je liet geloven je je land van herkomst moet selecteren terwijl je eigenlijk een extra verzekering aan het afsluiten was. Hiervoor werden ze ook veroordeeld en hebben ze dit moeten aanpassen.
Meer voorbeelden kan je vinden op: Dark Patterns (opens new window)
# Belangrijke principes
# Meten is weten
Ontwerpen is een iteratief proces. Men doorloop een aantal iteraties (herhalingen). Bij elke iteratie gaat men meten om zo tot nieuwe inzichten te komen die bruikbaar zijn in een volgende iteratie.
# Eye-Tracking
Een proces dat:
- Een aantal dingen registreert:
- Oogbewegingen: Met een (speciale) videocamera voor Optical Eye-Tracking.
- Beeldscherm van het toestel (screen recording, cf. schermopname).
- Gebruikersinput (muis, touch, spraak …).
- Eventueel ook videobeelden van de testopstelling.
- De geregistreerde gegevens samenvoegt en analyseert.
# Wat zijn de factoren in een eye-tracking-onderzoek?
- Onderzoeker/begeleider geeft een opdracht.
- Testpersoon voert die uit op de website.
- Alles wordt geregistreerd.
- Kan achteraf afgespeeld worden voor ontwerpers en andere belanghebbenden.
# Resultaten in de vorm van:
- Areas of Interest (AOI)
- Heatmaps (aandachtsvlakken)
- Gaze Clusters
- Gaze Plot (blikverloop)
- Gaze Replays
- Fixation Plots
- Opacity Map
- Retrospective Think Aloud (RTA)
Wordt niet enkel voor websites gebruikt, maar ook voor video, film, affiches, advertenties, winkelrekken …
# Toepassingsgebieden
- Psychologisch onderzoek
- Onderzoek naar gebruiksvriendelijkheid
- Marketingonderzoek
# Waarom Eye-Tracking?
- Toont gedrag waarvan de gebruiker zich zelf niet altijd van bewust is.
- Levert extra inzichten op.
- Visualiseert waar er problemen met gebruiksvriendelijkheid zijn.
# Nadelen van Eye-Tracking?
Eye-Tracking is heel erg duur!
- Arbeidsintensief:
- Testscenario’s opstellen.
- Testpersonen zoeken.
- Testpersonen briefen, tests uitvoeren en debriefen.
- Resultaten analyseren en rapporteren.
- (Zeer) dure hardware en software
# Alternatieven
Voor een beperkt budget:
- Attention & Attraction Analysis
- Voorspelling maken op basis van afbeeldingen.
- Feng-GUI (opens new window)
- Mouse Tracking
- Registreren van muisinteractie (+ touch).
# Website Analytics
De meeste websites houden gedetailleerde statistieken bij over hun bezoekers.
Tools
# A/B Testing
Men test een wijziging aan een website
- Versie A: controleversie
- Versie B: variant met de wijziging
Men kijkt daarna of Versie B de gewenste invloed heeft op de bezoekers, door de Website Analytics te bestuderen voor elke versie.
de Saint-Exupéry, A. (1939). Terre des hommes (p. 59). Paris: Le Livre de Poche. ↩︎