Mätbar UX i ett ordspel: Vue, AI-genererade teman och beslutstempo

Vad jag gjort

Byggde en interaktiv Vue-prototyp, PHP backend API, Dashboard med PHP och chart.js och utförde UX-hypotestestning för att förstå hur design, kognitiv belastning och resursbegränsningar påverkar användarnas initiala beslutstempo.

Kund

eget projekt

Länkar

Spela ordgodis Läs rapport (rough draft)

Hypotes

Ökad kognitiv belastning leder till längre initial beslutslatens.
Resursbegränsningar (antal gissningar) påverkar beslutsbeteende.
Visuell design kan påverka tempo i beslutsfattande.

Produktimplikationer

Kognitiv komplexitet har direkt påverkan på hur snabbt användare agerar.
Designbeslut bör testas empiriskt – upplevd påverkan stämmer inte alltid med faktisk effekt.
Små visuella förändringar har ofta mindre effekt än strukturella förändringar.
Initial latens kan användas som ett mått på kognitiv bearbetning i digitala produkter.

Bakgrund och syfte

Jag utvecklade ett interaktivt ordspel i Vue för att kombinera frontend-arkitektur med experimentell UX. Målet var att undersöka hur kognitiv belastning, resursbegränsning och AI-genererad visuell design påverkar användares beslutstempo. Spelet inspirerades av Wordle och den svenska varianten Ordel, men byggdes från grunden med fokus på datainsamling och analys.

Syftet var att:

mäta hur ordlängd påverkar initial betänketid
undersöka om begränsat antal gissningar skapar psykologiskt tryck
testa om AI-genererade visuella teman kan påverka beslutstempo
kombinera frontend-experiment med statistisk analys (mixed-effects-modeller)

Spelupplägg

Spelet slumpade ord mellan 4–6 bokstäver samt antal tillåtna gissningar (4–6). Inför varje omgång genererades ett visuellt tema via AI med tre distinkta uttryck: “stiff”, “calm” och “playful”.

Experimentella variabler

Ordlängd (4–6 bokstäver)
Antal tillåtna gissningar (4–6)
AI-genererat visuellt tema

Mätvariabel

Initial latency – tid till första tangenttryck – användes som proxy för deliberation före motorisk handling. Latens över 1.5 minut filtrerades bort.

Teknisk implementation

Frontend byggdes komponentbaserat i Vue (Keyboard, Key m.fl.) där App.vue orkestrerade kommunikation via emitterade events. Backend utvecklades i PHP med MySQL. Speldata och hemliga ord hanterades i sessioner och varje gissning loggades som en rad i databasen.

Spelets teman, ordlängder och antal försök

Inför varje spelomgång slumpas bland tre teman (lugn, rolig, stel), samt mellan ordlängd 4-6 bokstäver och antal försök 4-6st.

Tre bilder från spelet ordgodis med varierade teman, ordlängder och antal gissningar.

Datainfrastruktur

Sessionshantering för spelstatus
Persistens av varje gissning i databas
Ordlistor från Språkbankens Saldo
Enkel dashboard i PHP och Chart.js för översikt

Enkel dashboard i PHP och Chart.js

För att testa att data samlades in korrekt skapades en dashboard med grafer och tabeller för de olika relevanta datapunkterna.

Dashboard underlättade kvalitetstestning av data

Metod

Totalt samlades 667 gissningar från cirka 27 unika deltagare, rekryterade via egna kanaler. Eftersom deltagare genomförde flera spelomgångar analyserades datan med en linjär mixed-effects-modell med random intercepts för både deltagare och spelomgångar.

Resultat

Kognitiv belastning (ordlängd)

Effekten var statistiskt signifikant. Koefficienten för word_length = 0.125 (p ≈ 0.0066). Exponentierat innebär detta att varje extra bokstav ökade initial latens med cirka 13 %. Resultatet visar tydligt att ökad kognitiv komplexitet påverkar beslutstempo.

Hur starttiden (y) ökar med ordlängden (x)

Resursanpassning (antal gissningar)

Ingen signifikant effekt av färre tillåtna gissningar på initial latens. Däremot ökade latensen något med varje påföljande gissning (≈0.087 log-ms per gissning), oberoende av max_guesses. Detta tyder på gradvis ökad deliberation snarare än psykologiskt tryck.

Visa Mer om resursanpassning (antal gissningar)

Mer om resursanpassning (antal gissningar)

För att undersöka hur antalet tillåtna gissningar (max_guesses) påverkar initial latens per gissning byggdes en linjär blandad modell med log-transformerad latency som beroende variabel. Modellen inkluderade random intercepts för deltagare och spelomgångar för att ta hänsyn till individuella skillnader och variation mellan spel. Analysen gjordes både för alla gissningar och för första gissningen i varje spelomgång. Effekterna av 5 respektive 6 tillåtna gissningar jämfördes med baseline på 4 gissningar, och predikterade medelvärden visualiserades för att illustrera eventuella skillnader i initial latens. Modell som användes för analys: log_latency ~ word_length + max_guesses + theme + (1 | participant_id) + (1 | game_id).

Analysen visar att initial latens inte skiljer sig signifikant mellan olika max_guesses när vi modellerar latens över alla gissningar (guess_index). Däremot ökar latensen något med varje gissning (≈0.087 log-ms per gissning), vilket gör att spel med fler tillåtna gissningar i snitt har högre latency. Interaktionseffekterna mellan max_guesses och guess_index var inte signifikanta, vilket innebär att latensen ökar ungefär parallellt över gissningarna oavsett hur många gissningar som är tillåtna.
Skillnaderna i latency mellan spel med olika antal gissningar förklaras i första hand av spelets struktur: fler gissningar ger fler iterationer där latensen kan öka. Det verkar inte finnas någon tydlig psykologisk “pressure”-effekt av färre gissningar på den initiala latensen.

Temaeffekt (AI-genererad design)

Ingen statistiskt säkerställd effekt. Det “strikta” temat visade en svag trend mot snabbare start (≈12 %), men variationen dominerades av individuella skillnader. Interaktionseffekter mellan resurser och tema var inte signifikanta.

Tolkning och insikter

Kognitiv belastning har en tydlig och mätbar effekt på beslutstempo.
Strukturella faktorer i spelets progression påverkar latens mer än upplevt resurs-tryck.
Subtil visuell variation via AI räcker inte nödvändigtvis för att påverka beteende.
Individuella skillnader står för en stor del av variansen.

UX-engineering takeaways

Vue är effektivt för att bygga experimentella gränssnitt med granulär datainsamling.
Mixed-effects-modeller är väl lämpade för små, upprepade användardata.
AI kan snabbt generera designvariation, men effekter bör alltid kvantifieras.
Korta, spelbaserade experiment möjliggör snabb rekrytering och hög dataproduktion.

Nästa steg

Testa två mer extrema visuella teman istället för tre för ökad statistisk styrka.
Öka deltagarantalet för bättre power.
Experimentera med mer radikala designmanipulationer (färgkontrast, ljud, animation).
Integrera adaptiv AI som påverkar spelupplevelsen under pågående interaktion.

Sammanfattning

Projektet visar hur interaktiv frontend, AI-genererad designvariation och kvantitativ analys kan kombineras i ett sammanhållet UX-experiment. Resultaten pekar på att initial betänketid främst reflekterar kognitiv bearbetning och spelstrategi snarare än subtil visuell påverkan. Caset demonstrerar en metod för att systematiskt testa designhypoteser i gränssnitt.