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

My work

Built an interactive Vue prototype, a PHP backend API, a dashboard with PHP and Chart.js, and conducted UX hypothesis testing to understand how design, cognitive load, and resource constraints affect users' initial decision tempo.

Customer

eget projekt

Links

Play Word Treat Read report (rough draft)

Hypothesis

Increased cognitive load leads to longer initial decision latency.
Resource constraints (number of guesses) affect decision behaviour.
Visual design can affect the tempo of decision-making.

Product implications

Cognitive complexity has a direct impact on how quickly users act.
Design decisions should be tested empirically -- perceived impact does not always match actual effect.
Small visual changes often have less effect than structural changes.
Initial latency can be used as a measure of cognitive processing in digital products.

Background and purpose

I developed an interactive word game in Vue to combine frontend architecture with experimental UX. The aim was to investigate how cognitive load, resource constraints, and AI-generated visual design affect users' decision tempo. The game was inspired by Wordle and the Swedish variant Ordel, but built from scratch with a focus on data collection and analysis.

The aim was to:

measure how word length affects initial deliberation time
investigate whether a limited number of guesses creates psychological pressure
test whether AI-generated visual themes can influence decision tempo
combine frontend experimentation with statistical analysis (mixed-effects models)

Game structure

The game randomised words between 4-6 letters as well as the number of allowed guesses (4-6). Before each round, a visual theme was generated via AI with three distinct expressions: "stiff", "calm", and "playful".

Experimental variables

Word length (4-6 letters)
Number of allowed guesses (4-6)
AI-generated visual theme

Outcome measure

Initial latency -- time to first key press -- was used as a proxy for deliberation before motor action. Latencies above 1.5 minutes were filtered out.

Technical implementation

The frontend was built in a component-based way in Vue (Keyboard, Key, and others), where App.vue orchestrated communication through emitted events. The backend was developed in PHP with MySQL. Game data and secret words were handled in sessions, and each guess was logged as a row in the database.

The game's themes, word lengths, and number of attempts

Before each game round, one of three themes (calm, playful, stiff) is randomised, as well as a word length of 4-6 letters and 4-6 attempts.

Three images from the game Word Treat with varied themes, word lengths, and numbers of guesses.

Data infrastructure

Session handling for game state
Persistence of each guess in the database
Word lists from Spr?kbanken's Saldo
Simple dashboard in PHP and Chart.js for overview

Simple dashboard in PHP and Chart.js

To verify that data was collected correctly, a dashboard with graphs and tables was created for the different relevant data points.

The dashboard made data quality testing easier

Method

A total of 667 guesses were collected from approximately 27 unique participants, recruited through my own channels. Since participants completed multiple game rounds, the data was analysed using a linear mixed-effects model with random intercepts for both participants and game rounds.

Results

Cognitive load (word length)

The effect was statistically significant. The coefficient for word_length = 0.125 (p ? 0.0066). When exponentiated, this means that each additional letter increased initial latency by approximately 13%. The result clearly shows that increased cognitive complexity affects decision tempo.

How initial response time (y) increases with word length (x)

Resource adaptation (number of guesses)

No significant effect of fewer allowed guesses on initial latency was found. However, latency increased slightly with each subsequent guess (?0.087 log-ms per guess), independent of max_guesses. This suggests gradually increasing deliberation rather than psychological pressure.

Show More on resource adaptation (number of guesses)

More on resource adaptation (number of guesses)

To investigate how the number of allowed guesses (max_guesses) affects initial latency per guess, a linear mixed model was built with log-transformed latency as the dependent variable. The model included random intercepts for participants and game rounds to account for individual differences and variation between games. The analysis was carried out both for all guesses and for the first guess in each game round. The effects of 5 and 6 allowed guesses were compared with a baseline of 4 guesses, and predicted means were visualised to illustrate possible differences in initial latency. Model used for the analysis: log_latency ~ word_length + max_guesses + theme + (1 | participant_id) + (1 | game_id).

The analysis shows that initial latency does not differ significantly between different max_guesses when we model latency across all guesses (guess_index). However, latency increases slightly with each guess (?0.087 log-ms per guess), which means that games with more allowed guesses have higher average latency. The interaction effects between max_guesses and guess_index were not significant, which means that latency increases roughly in parallel across guesses regardless of how many guesses are allowed.
Differences in latency between games with different numbers of guesses are primarily explained by the structure of the game: more guesses create more iterations where latency can increase. There does not seem to be any clear psychological "pressure" effect of fewer guesses on initial latency.

Theme effect (AI-generated design)

No statistically significant effect was found. The "stiff" theme showed a weak trend towards a faster start (?12%), but the variation was dominated by individual differences. Interaction effects between resource constraints and theme were not significant.

Interpretation and insights

Cognitive load has a clear and measurable effect on decision tempo.
Structural factors in the game's progression affect latency more than perceived resource pressure.
Subtle visual variation via AI is not necessarily enough to influence behaviour.
Individual differences account for a large proportion of the variance.

UX Engineering Takeaways

Vue is effective for building experimental interfaces with granular data collection.
Mixed-effects models are well suited for small, repeated user data sets.
AI can rapidly generate design variation, but effects should always be quantified.
Short, game-based experiments enable rapid recruitment and high data generation.

Next step

Test two more extreme visual themes instead of three to increase statistical power.
Increase the number of participants for greater statistical power.
Experiment with more radical design manipulations (colour contrast, sound, animation).
Integrate adaptive AI that influences the game experience during ongoing interaction.

Summary

The project demonstrates how interactive frontend development, AI-generated design variation, and quantitative analysis can be combined in a coherent UX experiment. The results suggest that initial deliberation time primarily reflects cognitive processing and game strategy rather than subtle visual influence. The case demonstrates a method for systematically testing design hypotheses in interfaces.