Senior Capstone
Researching and Designing Video Game UI
UX research about video game UI patterns, UI mockups
Jan. 2022 - Current
Solo UX designer
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.
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.
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
After concluding affinity diagramming, I felt better about my knowledge, but I knew I wanted to apply my understanding somehow.
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.
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.
Visualize the research I have gathered thus far to generate questions for further research and methods
Sketch!
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.
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.
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.
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.
14 responses were collected!
I affinity diagrammed the results and found key quotes from survey respondents that impacted my direction.
"Good UI is
invisible
and blends with the game perfectly."
"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."
"A good UI will definitely help immersion, such as having menus that
match the theme
of the game."
"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."
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.
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.
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.
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.
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.
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
Couldn't tell what I needed to do next! I needed mentorship and guidance, so I sought out my professor.
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:
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.
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.
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.
Visualize my first attempt on juxtaposing UI
Use screenshots from both games to recreate a menu for each game
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.
.png)
.png)
.png)
.png)
With this attempt, I recreated Dishonored's power and enhancements menu by using the layout and friendly app-shaped style from Animal Crossing: New Horizons and its Nook Miles menu.
I took the ACNH phone, the core UI component of the game, and inserted it into the Dishonored pause menu. I also altered the character's mask and made it more chibi-like to match the ACNH style.
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:
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.
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!
.png)
