Senior Capstone
Researching and Designing Video Game UI

#UXtesting #UXanalysis #UIdesign #GameDesign


UX research about video game UI patterns, UI mockups


Jan. 2022 - Current



Solo UX designer

Design Challenge

The presence of UX in video games is proving to be a key component in game design. My capstone is focused on research into the theoretical and applied knowledge of creating video game UI to create and retain immersion. My approach is exploratory with a heavier hand in research as I am using my capstone to gain more knowledge in UI design and putting my newfound knowledge into action by creating my mockups.


  1. Exploring current video game UI (collecting and analyzing examples)
  2. Narrowed to a specific game or genre to focus research
  3. Deeper analysis of UX patterns and executing my own exploratory attempts at UI design for video games

Milestone 1: Exploring Current Video Game UI

In the UX program at Purdue, we focus mainly on the methodology and theoretical design information. We do not have dedicated projects focused solely on UI Design unless we are lucky enough to get a student-sponsored project in our Experience Studio.

With that in mind, I wanted to finally try my hand at creating video game UI, but with a heavy hand in research since that is where most of my experience lies. This milestone focused on the surface-level information I was looking for in terms of the theoretical and applied knowledge that goes into video game UI work.

Watching and Reading about Video Game UI


Develop an understanding about theoretical and applied knowledge about video game UI like non-diegetic and diegetic UI.


Read academic papers about non-diegetic and diegetic UI

Watched Game Design Convention conferences and educational Youtube videos

Affinity diagrammed information

Affinity Diagramming Key Findings

Non-Diegetic UI

  • Not part of the character's world
  • Player's accept non-diegetic UI elements as long as the information and usability is good
  • Straight forward and easy to navigate and requires less cognitive load. They do not need to know about the genre to understand the visuals and key signs.
  • Some believe non-diegetic UI can ruin player immersion

Diegetic UI

  • Part of the character's world; can be seen and/or interacted with by the character, like a map held by the character
  • Players view diegetic UI as "elegant" and thematic
  • The more diegetic a UI component is, the more cognitive processing is required for both players and developers
  • Diegetic UI needs to be equally accessible for all


  • Diegetic UI ≠ More immersive
  • Simple UI can be more immersive than cumbersome UI because the important details are easy to pick up
  • Immersive UI can be difficult for usability
  • Players seeks to enter a state of flow where they are sucked into a game
  • There is a belief that non-diegetic UI is more usable but diegetic UI is more immersive.

Usability and Legibility First

  • Players should be able to make choices in the game based on their real-world understanding like navigating from the top left to bottom right of the screen
  • Prioritize clear, specific, and consistent info before adding aesthetically pleasing designs
  • The more overlap between the UI's mechanics and the game world, the easier it is to create someone overly complex
Adapted from Kandelin, M. (1970)'s scale in Creating immersive menu systems in video games: Menu Systems in an Early Access game.

UI and UX Best Practices for UI Game Design

  • Prioritize information in the UI properly
  • Have a systems thinking approach: create an ecosystem and theme for the game and determine the flow and rules for colors and positions
  • Minimal UI is aesthetically pleasing but you need to design UI to five relevant and sufficient information to easily and meaningfully interact with the game


  • Attention is a spotlight; design around that because of inattentional blindness
  • Reduce information to a minimum
  • Divided attention leads to more mistakes
  • Remember Gestalt Principles like proximity and similarity when designing UI
  • If one task is very demanding, it becomes harder to give attention to another task

After concluding affinity diagramming, I felt better about my knowledge, but I knew I wanted to apply my understanding somehow.

Starting the Annotated UI Portfolio


Apply my newfound understanding by collecting UI examples and annotating them.


Collect UI examples from various video games from different genres and analyze them on Miro

Note down inspiration or cool details

I brainstormed a few games and sifted through my Steam library to collect some games that I could find screenshots for. I looked at menus from Valorant, League of Legends, and Pokémon Legends: Arceus.


League of Legends

After finishing these three annotations, I realized I didn't know what genre I wanted to focus on. FPS UI is clearly different from RPG/Action UI. Valorant is more minimal and the layout of information had some serious thought behind it.

Sketching my Thoughts


Visualize the research I have gathered thus far to generate questions for further research and methods



After taking a look at different UI examples, I wanted to try my hand at some diegetic and non-diegetic UI. However, I soon realized I didn't want to focus on non-diegetic UI for quick sketches because they can feel limiting when trying to ideate. Additionally, the current trends in layout exist for a reason; trying to try something fresh can cause more issues since players are used to similar UI and UX patterns from one game to another. Trying something new might cause more usability issues than intended.

Breaking Down Pokémon Legends: Arceus

I broke down Pokémon Legends: Arceus's Pokédex layout. I enjoyed the combination of diegetic and non-diegetic UI and thought it would be a good blend of using the two types.

If I needed to design UI for a game, I would want to do a combination or lean to diegetic UI, if appropriate.

Breaking Down Valorant

I then broke down Valorant to its bare bones. This is where I realized I didn't understand what my end goal was... I needed to re-center my next steps.

My next steps needed to recenter my information. I wanted to talk to actual players to understand their experiences interacting with both good and bad UI. In order to get a broad understanding from them, I determined a survey would get me back on the right path.

Milestone 2: Narrowed to a Specific Genre or Game

Utilizing a Survey to Re-center My Focus


Re-center myself to understand what I want my end goal to be

Gain a broad understanding of how players feel about both good and bad UI since previous research did not include much about actual players' thoughts and feelings


Created a survey and send it out on Reddit, group chats, Slack channels, and Discord servers

Analyzed findings to find themes

In my next steps, I wanted to recenter my information. I wanted to talk to actual players to understand their experiences interacting with both good and bad UI. In order to get a broad understanding from them, I determined a survey would get me back on the right path.

My survey was more qualitatively focused as almost all questions were open-ended. This was a big risk, but I felt the task of gathering opinions and feelings needed to be elaborate and not constrained by adjectives that cannot encompass their full experiences. I also planned for interviews after the conclusion of the survey analysis.

Some Questions I asked

Survey Findings: Players' Thoughts and Opinions

14 responses were collected!

I affinity diagrammed the results and found key quotes from survey respondents that impacted my direction.

Good UI

"Good UI is
and blends with the game perfectly."
  • Doesn't feel intrusive
  • Minimal and invisible
  • Easy to navigate and the flow feels natural
  • Matches the theme of the game
  • Enables players to focus on the game rather than criticizing or struggling with the UI

Bad UI

"Bad UI is very obtuse and unthematic to the setting. it feels like you're playing a game, when you should feel like you're
part of the game, not a spectator."
  • Makes you feel like a spectator rather than a player
  • Not seamless and requires too many clicks
  • Overwhelming and frustrating as they can be vague and unassisted
  • Occasionally makes players want to uninstall the game

Building or Breaking Immersion

"A good UI will definitely help immersion, such as having menus that
match the theme
of the game."
  • Good UI gives life to the story
  • Unmatched UI themes breaks immersion everytime it is seen
  • Gaming is an escape; bad UI breaks flow and immersion

Non-Diegetic or Diegetic UI?

"I think I'm in the minority here, because I tend to have a harder time with at least [diegetic] maps when they're like in Firewatch. I felt
more lost
when I tried to use it for some reason."
  • Non-diegetic UI should be used for fast-paced moments
  • Diegetic UI feels more realistic and immersive
  • Both can be fine if they're usable, diegetic UI has a higher chance of being too frustrating

After completing my survey, I determined I no longer need to do interviews due to the great findings I had from my survey. Although I only had 14 results, the quality of responses were better than I expected.

Empathy Mapping the Results


Visualize main findings to keep track of players' key thoughts and emotions about video game UI


Review findings and map them under "thoughts and feelings", "say", and "do".

Originally, I planned to do an experience map. However, since all of the survey takers were reflecting on vastly different games and experiences, the experience map was not the best idea. I sifted through the book Universal Methods of Design to find a new method that would help better and I found the empathy map.

Think and Feel

Since the majority of the survey respondents focused on reflecting on their thoughts and feelings, the main focal point for this empathy map was the think and feel section.

With the empathy map finished as my reference material, I needed to start narrowing down my genres so I could focus a little further.

Narrowing the Genres


Narrow down to a specific genre to focus future ideation and research


List major video game genres and reference research and reflect on personal interests. Eliminate genres if not references or liked.

Major Genres from Wikipedia

  1. Adventure
  2. Role Playing Game
  3. Puzzle
  4. Massively Multiplayer Online
  5. Action
  6. Strategy
  7. Simulation
  8. Sports
  9. Multiplayer Online Battle Area (MOBA)

Removed because of Lack of Research + Interest

  1. Adventure
  2. Role Playing Game
  3. Puzzle
  4. Massively Multiplayer Online
  5. Action
  6. Strategy
  7. Simulation
  8. Sports
  9. Multiplayer Online Battle Area (MOBA)

Remaining Genres

  1. Adventure
  2. Role Playing Game
  3. Massively Multiplayer Online
  4. Action
  5. Multiplayer Online Battle Area (MOBA)

I needed to narrow to a genre because I needed to have more focused research. Additionally, I spoke with my professor and we talked about potential solutions; I wanted to understand what genres I can work with.

Continuing the Annotated UI Portfolio


Continue analysis of different game's UI and gain inspiration


Collect UI examples from various video games from different genres and analyze them on Miro

Note down inspiration or cool details

Persona 5

Dead Space


Couldn't tell what I needed to do next! I needed mentorship and guidance, so I sought out my professor.

Taking a Risk; Brainstorming Juxtaposing Games


Brainstorm different games to design juxtaposing UI for video games


Received mentorship from professor

Brainstorm verbs and games with distinctly different styles

When I spoke to my professor, he had an idea that I wanted explore more about:

"What if you did something where the Resident Evil designers designed the UI for Animal Crossing: New Horizons and vice versa?"

Which was such an odd idea!

I had never thought about that approach and it was so interesting. The problem was, it didn't feel like my research was aligning with my work anymore, which was disappointing. I learned from my survey that immersion is crucial and themes that don't align destroy that immersion. However, it was a fresh take I wanted to travel down. So I took a risk and went for it.

Brainstorming Adjectives

To brainstorm games with juxtaposing themes, I explored the thesaurus and explored words and antonyms.

This was done to inspire my brain to think about games that foiled each other in concept or UI style.

Brainstorming Juxtaposing Games

I listed games like Cristales, Ori and the Blind Forest, Tem Tem, Hades, Animal Crossing, Final Fantasy, Resident Evil, Dishonored, Dark Souls, Pokémon, and Stardew Valley, to start. I chose Animal Crossing: New Horizons and Dishonored to test out how these sketches would go and receive feedback on my attempt.

Juxtaposing Dishonored and Animal Crossing: New Horizons


Visualize my first attempt on juxtaposing UI


Use screenshots from both games to recreate a menu for each game

Dishonored's Quick Menu into Animal Crossing: New Horizons's inventory

I sketched the Dishonored quick wheel inventory menu into Animal Crossing: New Horizons (ACNH). Within this new menu, the ACNH tools are contained in the 10 slots styled in Dishonored's art style.

Animal Crossing: New Horizons phone in Dishonored's Power and Enhancements Screen

What Should My Final Product Be?


Figure out what my end product is going to be


Brainstorm, reflect, and analyze potential "solutions"

Although I had fun sketching different ways to juxtapose UI, things didn't feel UX enough for the class. When talking to my professor, he gave some suggestions when I presented these three ideas:


Redesigning UI

Making something new

Deciding on my Direction

What if Dishonored revolved around accessing a phone,
like Animal Crossing?

When I explained these routes to my professor and explained my disdain for redesigning due to the risks of a bad portfolio piece, he asked if I thought about understanding the UX patterns of a core component of a game and seeing how it translates into another game. He referenced the Animal Crossing and Dishonored sketch and asked "what if Dishonored revolved around accessing a phone, like Animal Crossing?".

While that doesn't fit well in the Dishonored universe, the concept of taking a core component of a game and transferring it into another was an interesting concept. I would need to find games with core components and see how I can transfer them from one game to another.

Next Steps

Milestone 3: Deeper Analysis of UX Patterns + Early Mockups

In this milestone, I will be picking a few games and learning more about the patterns of interactions the players have for that component in order to transfer it from game to game. Additionally, early visuals will be made.

Stay tuned!