A brief guide to UX and UI design in videogames

This UX Crunch event was led by Mark Cunnah, UX Analyst at WebCredible. 

Mark’s feelings about gaming are so strong, they defeated The Hulk in a deathmatch. This reassured me – I’d be learning from someone who not only studies games, but is also part of the subculture.

The event was split into four parts:

1. Qualities of a good video game menu (and why designers/developers fail to achieve them)
2. Workshop: designing the information architecture of a game menu
3. 10-minute session of gaming and feedback collection
4. The four main types of gaming interfaces and qualities of a good UI

Let’s jump right in – like Mario going down a warp pipe. 16-bit star coins await! 

1. Qualities of a good video game menu

Mark explained the evolution of gaming – the consoles, controllers, accessories – and the accompanying problems. 

In the early days, development studios would finish designing and testing a game before release. But with increased market competition and urgency, companies are now more concerned with pushing games out of the door than they are with designing good experiences. 

That’s why today’s games need an update the moment you buy them, and many more times after. 

Mark contrasts the AAA gaming scene (games with the highest development and promotion budgets) with indie gaming.

“…with increased market competition and urgency, companies are now more concerned with pushing games out of the doorthan they are with designing good experiences.”

He notes that one of the biggest modern successes is a little-known game called Undertale. In spite of its crappy graphics, Undertale boasts a terrific user experience – that’s why it’s won several ‘Game of the Year’ awards. 

Perhaps there’s a greater need for these indie games to provide a great UX, as they can’t rely on huge budgets or flash graphics. Mark suggests non-indie developers waste time over-complicating things that are better left alone. 

For example, Sonic the Hedgehog used to have only 2 attacks – today he has 22. Not to mention the directionless evolution of game controllers, reminiscent of the diversity and awkwardness of a human centipede.

Finally, we explored how video game menus and pause screens have become a non-standardised mess. 

To combat this issue, Mark laid out the following… 

10 tips for creating a good video game menu

1. Allow players to skip splash screens – these usually become redundant once a player has seen them once
2. Make “Continue” the first option when players land in the main menu
3. Do not place a montage video before the main menu
4. Make sure settings are automatically saved when they’re changed by players
5. Let players know (with subtle hints) whenever an autosave is in progress
6. Keep the menu structure consistent throughout the game – design the entire information architecture
7. Let players choose how their characters move through the game – e.g. inverted vs. standard thumbstick controls
8. Use the standard controls of “A” button for advance and “B” button for going back – although an attendee pointed out that this convention is reversed in Japan
9. Make the in-game map easy to find
10. Allow players to quit to desktop (or the home screen on a console), without quitting the game altogether

2. Workshop: designing the information architecture of a game menu

We got our hands dirty when we were given a list of popular game menu items, then tasked with arranging them in a way that makes sense.

The most interesting thing about this stage was the question of where to put the “subtitles” menu item – some people put it under “visual settings” and others under “sound”. 

Both make sense. You’d hunt for the subtitles if you couldn’t or didn’t want to hear sound. But the process of reading subtitles is visual. This conundrum perfectly illustrated the kinds of complex issues game creators deal with – even with such minor details.

My only disappointment with this workshop (and the evening in general) is that the focus was more on UI than UX. 

That being said, Tom and I discussed what the UX of a video game actually is – the experiences leading up to and surrounding gameplay or the act of playing the game itself? 

We got all philosophical, stroking our chins and staring into space, but never settled on an answer. This question alone could be the basis of a Meetup, all on its own. Perhaps it was unfair to expect Mark to shoehorn it into a 2-hour event. 

3. Gaming and feedback collection session

Next we had a 10-minute interlude where we played different games and noted issues with their interfaces and UX.

One game, The Last of Us, took nearly the entire time just to load up. I don’t have much else to report on this except that lots of people played games and wrote down what they didn’t like. We were running out of time and needed to move on to the next part of the evening.

4. The four main types of gaming interfaces

Finally, Mark explained the four most commonly used in-game interfaces:

1. Diegetic

An interface that is included in the game world, and can be seen and heard by the game characters e.g. Pip-Boy from Fallout.

2. Non-diegetic  

An interface that’s rendered outside the game world, and can only be seen and heard by people in the real world (rather than in-game characters).

3. Spatial

Interface elements that are presented in the game’s 3D space, with or without being an entity of the actual game world e.g. mission directives flashing up on-screen in Splinter Cell.

4. Meta

Interface elements that exist in the game world, but aren’t necessarily visualised in the game’s 3D space for the player. For example, the blood splatter on your screen when your in-game character takes damage in Gears of War.

Mark then finally outlined…

Five tips for creating a good game UI

1. Use the interface to cue players about what’s happening in the moment – e.g. if a fight is about to happen, let a damage bar for the enemy pop onscreen.
2. Make sure players can use the interface without having to refer to further instructions.
3. Be unobtrusive – don’t let your interface distract players from actual gameplay.
4. Use minimal screen space – your UI is the red carpet, not the main event.
5. Think about the input device players will be using – e.g. design interfaces that are easy to navigate using thumbsticks, if you’re designing for a console game.

Mark suggested we can make sure we meet these standards by creating wireframes at the early stages of design, and regularly testing with users.