Hoe videogames inspireren tot geweldige UX

"Perspectief is 80 IQ-punten waard." — Alan Kay

Dit citaat is betekenisvol voor mij, omdat ik vaak worstelde met een probleem totdat een inzicht uit een gebruikertest mijn "perspectief veranderde".

Ik had de intuïtie dat videogames mijn perspectief ook zouden kunnen veranderen. Ze leken veel gedurfder, met diepere en experimentelere UX-technieken. Ik wilde veel verder gaan dan klassieke "gamification". Dat was een decennium geleden erg populair, waarbij apps elementen als "achievements" gebruikten om app-gebruik te stimuleren. Gezien wat we de afgelopen jaren hebben geleerd over het overmatige gebruik van smartphones en sociale media, lijkt het bovendien onverantwoord om onze apps "sticky" of "verslavend" te maken. Ik zocht naar iets diepers. Games voelden visceraler en ik wilde ze beter begrijpen om te zien waar dat me zou brengen.

Hoewel ik een fervent gamer ben, voelden games als UX-designer aanvankelijk vreemd voor me. Een van de eerste gametermen die ik leerde was "juicy", wat verwijst naar de hoeveelheid visuele effecten die je krijgt bij elke actie. Juicy games voelen bijna overweldigend, maar op een goede manier. Voor een app zou dit leuk kunnen zijn, maar waarschijnlijk is het contraproductief; ik wilde de gebruiker niet overweldigen.

Mijn andere zorg was dat games spanning creëren. Wanneer je een gevecht aangaat in een game, moet je een reeks vaardigheden beheersen, anders verliest je personage. Als je een competente UX-designer zou vragen om de perfecte flow te ontwerpen om een monster te verslaan, zouden ze simpelweg één knop maken: "Versla Monster".

Dat was de paradox waar ik voor stond. Games leken te draaien om effecten en spanning. Geweldige app-UX draait om minimalisme en eenvoud. Gelukkig vond ik Raph Koster, de auteur van A Theory of Fun. Raph staat bekend als een "Game Grammarian" en deconstrueert diepgaand hoe games worden gemaakt. Zijn boek is een game-achtige verkenning van hoe games werken, vergelijkbaar met hoe Understanding Comics een strip is over hoe strips werken.

Ik heb Raph gedurende acht weken meerdere keren ontmoet, waarbij we zijn boek hebben ontleed en toegepast op mijn wereld van UX-design. Hij was energiek en enthousiast om een parallelle wereld te vinden die van zijn werk kon profiteren. Ik werk al meer dan 30 jaar in UX-design en was, nou ja, een beetje vastgeroest in mijn gewoonten. Raph was geduldig en genoot er op een goedbedoelde manier van om mijn misvattingen onderuit te halen. Dit artikel is mijn reis door deze misvattingen.

Drie misvattingen over games en UX

Misvatting 1: Gewoon coole trucjes kopiëren

De game Horizon: Zero Dawn heeft een fantastische heads-up-display UI. Voor mij leek het logisch dat daar potentieel in lag voor mobiele apps. Raph’s punt was dat videogames voortdurend nieuwe UI's creëren. Als ik simpelweg zou kopiëren wat games op dit moment doen, zou dat een eindeloze lijst worden. Zijn advies was om dieper te gaan en eerst te begrijpen hoe games dit soort UI's creëren.

Misvatting 2: Games zijn lineair en plotgedreven

Games hebben het vermogen om situaties te forceren, zoals het binnenlopen van een ravijn waar je geen andere kant op kunt dan omhoog via een ladder. Apps daarentegen bieden meestal het tegenovergestelde: een breed instrumentarium aan keuzes. Ik dacht dat games het narratief gebruikten om situaties te forceren, wat hun leven makkelijker maakte.

Raph gaf toe dat games plot gebruiken (het zijn immers vormen van entertainment), maar zijn punt was dat geweldige games veel dieper gaan dan alleen plot; ze werken meestal eerst aan low-level mechanics. Je hoeft alleen maar te kijken naar de twaalf manieren om te springen in Super Mario Odyssey om zijn punt te begrijpen.

Misvatting 3: Gamers oefenen keer op keer; games maken het makkelijk

Raph lachte toen ik dit zei. "Besef je," zei hij geduldig, "dat de meeste games falen?" Dit was direct duidelijk. Natuurlijk belonen alleen de beste games oefening. Je moet een geweldige game ontwerpen om mensen het vertrouwen te geven dat oefenen de moeite waard is.

De conclusie is dat Raph me overtuigde om elke snelle "kookboek-benadering van trucjes" los te laten en dieper te graven in hoe games van onderop zijn gebouwd. We kwamen tot zes "lenzen" die de vertaling van zijn boek naar UX-design vormen.

Ik wil duidelijk maken dat videogames niet exact hetzelfde zijn als applicaties. Het doel is niet om games te kopiëren, maar om erdoor geïnspireerd te worden. Veel UX-designers lezen de boeken van Edward Tufte over informatie-ontwerp, niet omdat ze verwachten zelf complexe datasets te visualiseren, maar vanwege het intellectuele inzicht dat voortkomt uit het begrijpen van datapatronen.

---

Lens 1: Verhaal (Story) versus Narratief (Narrative)

Het eerste punt dat Raph maakte, was het verschil tussen de woorden "Story" en "Narrative". Voor mij leken ze hetzelfde, maar zijn punt was dat een Story door de auteur wordt gegenereerd, terwijl een Narrative door de gebruiker wordt gegenereerd. Game-designers creëren een reeks gebeurtenissen (A-B-C) waar je doorheen moet, maar wat gebruikers daadwerkelijk doen is vaak een verrassend patroon:

• Ze blijven heel lang hangen bij stap A.
• Ze slaan stap B volledig over.
• Ze cirkelen meerdere keren rond stap C.

In eerste instantie dacht ik dat hij gewoon klassieke gebruikertests beschreef. Elke ervaren UX-designer weet dat gebruikers door een ontwerp gaan op manieren die je niet verwacht. Maar zijn punt was dieper: het gaat niet om de reis, maar om hoe gebruikers de ervaring herinneren. Gebruikers zullen altijd een narratief creëren. Het is menselijke natuur: ze gaan door een ervaring en onthouden deze door een narratief te construeren. Dit is wat game-designers diep begrijpen. Als je verhaal grote gaten vertoont en de gebruiker niet zorgvuldig leidt, zullen gebruikers onbewust hun eigen narratief creëren om die gaten te vullen.

De meeste apps van vandaag "gooien" vijf nieuwe functies in een app met weinig verbinding tussen hen. Gebruikers zullen echter een narratief creëren om te begrijpen wat ze zien, zelfs als er geen verbinding is. Ze verzinnen waarschijnlijk verhalen die je als ontwerper zouden beangstigen. Gebruikers "verbinden de stippen" op manieren die verbazen en vaak mythologieën creëren die nooit bedoeld waren.

APPS	GAMES
Gooien een verzameling functies in één pot.	Begrijpen dat alles een reis is. Werken hard om alles te maken tot een nauw verbonden boog van gebeurtenissen die de gebruiker helpen een narratief te creëren dat overeenkomt met het overkoepelende verhaal.

Voorbeeld 1: De Macintosh boot-sequentie (1984)

De beste voorbeelden hiervan is de boot-sequentie van de originele Macintosh uit 1984. Elke pc uit die tijd had een eenvoudige aan/uit-schakelaar die een 'piep' gaf, gevolgd door een reeks verwarrende tekstregels. De Mac bootte op met een startscherm dat alleen een patroon toonde met een glimlachende Mac. Niets meer, geen tekst, geen wartaal. Uiteindelijk verscheen het bureaublad, maar dit was slechts een kleine variatie: hetzelfde beeld, maar dan met een menubalk, een schijfpictogram en een prullenbak. De boot-sequentie begon met een belofte die oploste in een werkend bureaublad.

Ook de hoeken van het scherm waren afgerond, waardoor het meer leek op een fysieke bureau-onderlegger (blotter), die destijds populair waren. Bovendien voegde de prullenbak diepte toe aan de illusie door 'vol' te raken wanneer je er iets in gooide. De Mac nam een hardware-gedreven concept (het aanzetten van je computer) en maakte er theater van. De toewijding om mensen mee te nemen in een zorgvuldig geconstrueerd verhaal, waardoor gebruikers een compatibel narratief konden vormen, is de kern van de toewijding aan de Mac.

Voorbeeld 2: PayPal landingspagina

Een moderner voorbeeld is de landingspagina van PayPal. De pagina nodigt je duidelijk uit om te kiezen: ben je een "Personal" of een "Business" gebruiker? Terwijl je over elke sectie beweegt, ontvouwt het verhaal zich, worden je keuzes uitgebreid en worden zaken aangeboden die je gemakkelijk kunt begrijpen en herkennen. Elke vertakking heeft een duidelijke call-to-action. Dit is een prachtige storytelling-sequentie die je naar binnen trekt en je een actief onderdeel maakt van het on-boarding proces.

---

Lens 2: Games zijn fractaal

Raph gebruikt het spel Frogger om uit te leggen wat hij bedoelt met "Games zijn fractaal". Eén enkel scherm bestaat uit verschillende niveaus:

1. Een veilige startzone onderaan waar je risicoloos heen en weer kunt bewegen.
2. De straat, waar je voor auto's moet uitwijken.
3. De rivier, die lastiger is omdat zowel de weg als de 'auto's' bewegen.
4. De 'parkeerzone', waar het makkelijk is om in de eerste plek te komen, maar progressief moeilijker naarmate ze volraken.

Hij bedoelt met 'fractaal' dat het spel niet simpelweg een lineaire "steek de weg over, steek de rivier over en parkeer je kikker"-sequentie is. Op het oppervlak is dat waar, maar zijn punt is dat het een geneste cascade van ontdekkingen is. Om het niveau te winnen moet je eerst de straat oversteken. Om de straat over te steken moet je de kikker bewegen. Om de kikker te bewegen moet je de timing van de joystick begrijpen. Elk van deze sub-niveaus heeft eigen feedback-overwegingen:

• Straat: de beweging van de auto's.
• Kikker: hoe hij beweegt, hoe ver hij elke keer springt.
• Joystick: richting en snelheid van beweging (die overigens vrij traag is).

Games begrijpen dat elk van deze niveaus een eigen set feedback, motivatie en leren vereist. Vergelijk dit met app-ontwerpen. Om goede redenen proberen we ons strikt aan richtlijnen te houden; we willen het wiel niet opnieuw uitvinden. Maar we kunnen niet eeuwig terugvallen op richtlijnen. We zullen de huidige phone UI-designs over 30 jaar niet meer gebruiken.

Hoe evolueren we en creëren we nieuwe UX-patronen? Wat inspirerend is aan games, is dat ze continu proberen te evolueren. Hoewel dit bij commerciële software chaotisch zou zijn, is het inspirerend dat games gebouwd zijn op het geloof dat elke actie rigoureus moet worden ontleed. Alles wat je doet is gelaagd en moet worden uitgepakt, verbeterd en, belangrijker nog, aan de gebruiker worden geleerd. We kunnen leren van hun diepe toewijding aan detail.

APPS	GAMES
Volg je richtlijnen, wees consistent, breng de boel niet in beweging.	Ontleed alles rigoureus; maak je geen zorgen als je de boot doet zinken.

Voorbeeld: Desktopmenu's

Een voorbeeld hiervan zijn desktopmenu's. "Een menu-item selecteren" is eigenlijk een fractale cascade van vaardigheden: je begint met horizontaal browsen over de menubalk, met een klik schakel je over naar een verticale modus maar behoud je dezelfde highlight-methode. Voor hiërarchische menu's moet je de grafische hint begrijpen dat er iets diepers is, eroverheen navigeren om het te onthullen en het vervolgens selecteren. Het kost oefening om hiërarchische menu's te vinden, te onthullen en te volgen. Er is een fractale cascade van vereiste vaardigheden.

---

Lens 3: De leerlus (Learning Loop)

De Learning Loop is een basisconcept uit de psychologie voor het verwerven van vaardigheden. Je begint met een intentie (bijv. "schiet met de laser"), je voert een actie uit (een knop indrukken) en je ziet het resultaat (de kanon wordt opgeladen en schiet een energiestraal). Deze lus is fundamenteel voor leren: je hebt een model van hoe dingen werken, je interageert met de affordance en de resulterende feedback update je mentale model.

Raph stelt in zijn boek: "Plezier is gewoon een ander woord voor leren." Om plezier te hebben, moet je leren. App-design wil dat gebruikers leren, maar we beseffen zelden dat dit leuk kan zijn. Games begrijpen dat je om te leren in lagen moet denken. Begin met een basisvaardigheid en voeg langzaam meer toe. Het sleutelinzicht is dat deze lagen op elkaar worden gebouwd.

In Super Mario Bros. begin je in een veilige zone. Hier leer je de eerste basis-loop: springen. Vervolgens verschijnt er een laag plafond; als je springt, raak je een "?" blok en valt er een prijs uit. Je hebt de tweede variatie van de loop geleerd: raken. Wanneer je je eerste monster tegenkomt, is het een kleine stap om te concluderen dat je erop kunt springen. Tada! Je hebt je eerste monster verslagen. Loop 3 is aanvallen. Er zijn hier drie verschillende versies van springen:

1. Initiële sprong: eenvoudige knopdruk.
2. Lange sprong: lange knopdruk.
3. Landingssprong: getimede sprong.

Het interessante is dat je maar één 'ding' leert: springen. Maar door subtiele aspecten van het springen te benadrukken, bouwt het spel variaties op. Een saaie app-designer zou aannemen dat je drie verschillende knoppen nodig hebt, maar Super Mario doet dit met één actie.

Nintendo is de meester hiervan. Shigeru Miyamoto, de gerespecteerde regisseur van Nintendo-games, zegt hierover:

"Zo maken we games bij Nintendo: we zorgen eerst dat de fundamenten solide zijn, en doen vervolgens zoveel mogelijk met dat kernconcept als onze tijd en ambitie toelaten. Wat betreft de levels en vijanden: die kwamen pas aan het einde. Die werden in één energieke burst in elkaar gezet, bijna zomaar."

Dit laat zien hoe sterk Nintendo focust op de kernbouwstenen. Voor UX-designers is dit een enorme les.

APPS	GAMES
Elke functie staat op zich; hoe iets gedaan wordt heeft meestal weinig relatie met andere functies (behalve via een styleguide).	Bouwen een spel rond één mechaniek die in expressieve kracht groeit door modifiers toe te voegen zoals tijd, speciale toetsen of timing.

Voorbeeld 1: Macintosh-introductie (1984)

Ironisch genoeg gebruikte de Mac bij de lancering in 1984 games om gebruikers te leren hoe ze moesten beginnen. Het doel was simpel: de eerste loop leren (de muis bewegen). Daarna volgden klikken, menu's, slepen en zelfs shift-klikken. Dit rijke inputmodel maakt geavanceerde positionering van de cursor en betere tekstselectie mogelijk. Mobile UX kan veel leren van deze desktop-loops.

Voorbeeld 2: Mobiele gebaren (Google Maps)

Mobiele apps hebben ook enkele trucs. Mensen denken vaak dat "tikken" en "knijpen" (pinch) aparte gebaren zijn, maar het zijn variaties op dezelfde loop. In Google Maps kun je, terwijl je inzoomt met een pinch-beweging, de kaart nog steeds verslepen zoals je dat doet met een enkele tik. Pinch is simpelweg een high-order loop bovenop de drag-loop.

---

Lens 4: Affordances

Affordances hebben een klassieke definitie in UX (gepopulariseerd door Don Norman). Games geven hier een subtiele draai aan: affordances stimuleren dingen die je al weet.

In Breath of the Wild krijg je een duidelijke prompt "Pak op" wanneer je naast een voorwerp staat. Je leert snel hoe je items oppakt, maar de prompt geeft ook een duidelijke indicator wanneer je dat kunt doen. Subtieler is het gevecht met robots: de robot zwaait altijd wijd voordat hij van opzij aanvalt, wat een signaal is om te ontwijken. Eenmaal geleerd, is dit een betrouwbaar patroon.

Het beste voorbeeld is de stamina wheel: een eenvoudige cirkelvormige meter die aangeeft hoeveel uithoudingsvermogen je hebt. Tijdens het klimmen raakt de meter leeg. Als de meter op is voordat je boven bent, val je. De implementatie is echter slinkser dan een simpele meter:

• Het personage leunt naar voren bij het klimmen.
• Bij stilstand leunen ze naar achteren en stopt de meter.
• Bij een steil stuk verschijnen er zweetdruppels en raakt de stamina sneller leeg; het personage leunt verder naar voren en lijkt "harder te proberen".

Door deze details leert het spel je om de minder steile route te kiezen, zonder dat je doorhebt dat je aan het leren bent. Dit is "Jedi mind trickery".

Er zijn vijf soorten affordance-feedback die toepasbaar zijn op app-UX:

1. Multi-variant: Veel feedback verstoppen in de actie (bijv. zanddeeltjes die wegvliegen als Mario rent). Gebruikers pikken zo onbewust meerdere aspecten van de interactie op.
2. Reality: De juiste acties koppelen aan de juiste controller-onderdelen. Mobiele apparaten zijn hier beperkt ("gevangenen van een platte glasplaat"), wat blijkt uit het feit dat we "long-press" hebben moeten uitvinden om expressieproblemen op te lossen.
3. Multiples: Gebruik van visuele, audio en haptische feedback. Apps zijn vaak te zwaar aangezet; we moeten subtieler en genuanceerder zijn.
4. Mixed Styles: Het mixen van grafische stijlen om onderscheid te maken (bijv. ronde vormen voor goede figuren, scherpe voor slechte). In apps kan dit worden gebruikt om navigatie van content te scheiden (bijv. verschillende tinten blauw voor de menubalk en de zijbalk).
5. Grace-notes: Kleine, speelse momenten die sfeer toevoegen en leren stimuleren (bijv. het kunnen doorspoelen van toiletten in Half Life). Dit creëert een gevoel van interactie, waardoor gebruikers eerder geneigd zijn andere dingen (zoals een deur openen) te proberen.

APPS	GAMES
Zo min mogelijk prompts geven.	Constant prompten (maar zeer subtiel en slinks).

---

Lens 5: Hintiness

Hintiness is uniek voor games. In tegenstelling tot affordances (die de huidige leerlus versterken), is het doel van hintiness om je naar nieuwe lussen te bewegen. Het niet overgaan naar nieuwe lussen wordt in games "Bottom Feeding" genoemd.

In World of Warcraft kan een speler van level 3 heel goed zijn in het doden van spinnen. Als hij echter een krokodil probeert te doden en direct sterft, is de voorspelbare reactie: teruggaan naar de spinnen. Dit is bottom feeding: de makkelijke route kiezen en nooit progressie boeken. Dit is comfortabel, maar saai en dodelijk voor de game.

Game-designers gebruiken diverse methoden om dit te voorkomen:

• Moon Chains in Super Mario Odyssey: zodra je een Moon-object verzamelt, zie je er altijd direct een andere, wat hint naar waar je heen moet.
• In Breath of the Wild is een muur met een gebroken patroon een teken dat er iets interessants achter zit.

In app-UX zijn hints vaak het tegenovergestelde: dialoogvensters die midden in je scherm verschijnen en je volledig stopzetten. Games zijn subtiel en herhalen hints totdat je het begrijpt.

Veel app-gebruikers zijn "bottom feeders": ze blijven steken in een simpel niveau van gebruik. Sommigen schrijven kritieke stappen op post-its omdat ze de leerlus niet begrijpen. Hoe kunnen we hintiness gebruiken om dit te voorkomen?

APPS	GAMES
Ervan uitgaan dat gebruikers een constant vaardigheidsniveau hebben.	Constant en geduldig hints gebruiken om gebruikers naar het volgende niveau te tillen.

Voorbeeld: Hulplijnen in een tekenapp

Stel je voor dat je in Photoshop of Figma een hulplijn (guide) wilt maken. De beginner gebruikt een menu en dialoogvenster. Power-users slepen de lijn simpelweg uit de liniaal. Om beginners te helpen dit te ontdekken, zou je een subtiele animatie ("sparkle") kunnen toevoegen in de liniaal-area wanneer ze de dialoogbox gebruiken. Na een paar keer te hebben gezien hoe de lijn uit de liniaal "verschijnt", zal de gebruiker nieuwsgierig worden en het zelf proberen.

---

Lens 6: Pacing

Pacing is cruciaal voor het verhaal. In app-UX gaat dit vooral over de vraag: "Waar begin ik?". Games weten dat een reis van 1000 mijl begint met de eerste stap. Het is essentieel dat gebruikers weten hoe ze moeten starten en in de flow komen, nog voordat ze alles begrijpen.

World of Warcraft is complex, maar je begint met slechts één aanvalsspreuk. Naarmate je in level stijgt, worden er geleidelijk dingen toegevoegd, zodat je in de interface groeit.

Wat doen de meeste apps? Ze tonen je alles aan het begin in de hoop dat je het in één keer begrijpt, waarna de gebruiker op "skip, skip, skip" klikt. Een collega bij Google, Luke Wroblewski, besprak een finance-app die in plaats van een help-overlay slechts één enkele aanwijzing gaf: hoe je een uitgave aanmaakt. Zodra de gebruiker dat wist, was hij op weg.

APPS	GAMES
Bieden gebruikers een grote gereedschapskist en laten hen uitzoeken hoe ze moeten beginnen.	Hebben een duidelijk begrip van de reis en zeggen: "Begin hier eerst".

---

Samenvatting

De zes lenzen kunnen als volgt worden gegroepeerd:

Deconstructie (het opdelen van je app/game):

1. Story vs Narrative: Denk in termen van verhaalbogen.
2. Games are fractal: Deel de reis op van groot naar klein naar piepklein.
3. Learning loop: Bepaal je kernmechaniek.

Constructie (het opbouwen van de ervaring):

1. Affordances: Prompt voor bekende lussen.
2. Hintiness: Beweeg naar nieuwe lussen.
3. Pacing: Zorg dat de gebruiker weet waar hij moet beginnen.

Deze lenzen hebben mijn kijk op UX-design fundamenteel veranderd. Ik bouw geen games, maar ik laat me erdoor inspireren om complexe interacties fractaal te ontleden, lussen te zoeken en manieren te vinden om naar nieuwe lussen te hinten.