Design Ui For Games Adbe Xd

Ask a UXpert: Best Practices for Prototyping and Testing Game UIs

Illustration: Justin Cheong

There are many factors to consider when prototyping game user interfaces. Lately, we've seen an influx of tools that make life significantly easier for the creators of video games. Adobe XD, for example, now supports gamepad triggers, and accessibility—which is getting a lot more coverage in web development—has finally reached the gaming industry, too.

In this article, seven leading game designers, developers, and accessibility advocates share their tips for a better prototyping and testing process, including best practices for defining gamepad controls.

Follow their lead and you'll be on your way to designing game UIs that get approval from stakeholders and players alike.

Start with the research

Philippe Chambon, interaction and interface designer at Behaviour Interactive, Canada's largest independent game developer, points out that you need to keep three main points in mind at all times when defining gamepad controls: coherency, affordance, and conventions.

"The UI needs to match, or at least approximate, the physicality of the gamepad," he explains. "It's always better to have recognition rather than recall. Players need to 'read' the inputs and not have to remember them. Their muscle memory will do the rest. If they have already played similar games, they already have that muscle memory."

Independent game developer Jarryd Huntley usually starts out by getting his hands on the physical device or controller the player will be using. "I'll play and study games with interfaces similar to what I'm interested in, or even watch a YouTube video and 'pretend' to play along to get a feel for things," he explains.

Tabby Rose, co-founder and creative director of interactive media company Axon Interactive, favours a similar approach:

"In my experience, the only way to end up with a good UI or HUD [Head-up Display] for a game is to research your genre, test on your audience, and refine," she advises. "When we needed to design new UI elements or game controls, our team's first step was always to go and play or watch videos of several games — within the game's genre is best but it also helps to check out anything on the target platform(s). What we're looking for are general conventions, because these will ease cognitive load for players who are coming to this game with lots of experience playing other, similar games."

From there the team can make decisions about which conventions to keep and which might not make sense on this occasion.

Tabby Rose and her team demo games at Gamma Space in Toronto.

Tabby Rose (on the left) and her team demo games at Gamma Space in Toronto.

Plan for accessibility

Accessibility is a critically important aspect of UI design, stresses game accessibility specialist and advocate Ian Hamilton, one of the core contributors to gameaccessibilityguidelines.com. Players may be impaired physically, temporarily (due to an injury or illness) or situationally (for example, when they play on a smaller screen or in direct sunlight). The player's environment is also likely to be very different to a designer's big screen.

"To ensure your vision reaches your audience intact, keep accessibility in mind from the outset — even before you start designing," Ian advises. "Think about people who have difficulty seeing, hearing, manipulating controllers, taking in/processing/actioning info, and how what you're designing could avoid barriers in those areas. Often the solutions overlap with designing for different platforms, screens and input devices."

Tabby Rose agrees and explains that, for game controls in particular, her team always begins with an open discussion that centers on accessibility. For this planning phase, she recommends striking a balance between accessibility for players with physical impairments such as low mobility or dexterity, poor eyesight or hearing, and genre conventions such as using the trigger versus face buttons for main actions on a gamepad, or the placement of HUD elements and text sizing.

The game accessibility guidelines are a collaborative effort between a group of studios, specialists and academics. Guidelines are categorized into levels of experience from basic to advanced.

The game accessibility guidelines are a collaborative effort between a group of studios, specialists and academics.

Jarryd Huntley also tries to integrate accessibility guidelines (another one is accessible.games) into the process as early as possible to ensure more people can play.

Aisha Gull, game design lead at mobile app development company TekRevol, meanwhile, finds that the most important thing to remember is the hand limitation users have:

"Assess which fingers — usually the index and the thumb — are the most usable and flexible," she advises. "Assign controls based on such an accessibility that allows users to carry out the most frequent tasks with the least amount of effort, allowing them to get a feel for the controls and develop muscle memory easily. It is also important to remember the control designs of trending games. Deviating from the trend may result in inconvenience for users and the quality of their experience will drastically decrease as a consequence."

Analyze the game's users

Tabby Rose also suggests taking into account the target demographic:

Will the players be experienced or new to games?
Are they grown adults or small children (who have smaller hands and less dexterity)?
Are they likely to play with a monitor close to their face or on the couch with a TV ten feet away?

Take some time to exercise empathetic design by imagining specific players and their needs. "Be their champion on your team," Tabby recommends. "Centering accessibility means more people will have a chance to experience your game, and that's never a bad thing."

Ian Hamilton also recommends consulting with experts and specialists, and learning from people with disabilities through user research, beta, and social media callouts. If a game includes communication functionality, the involvement of disabled gamers is even legally required.

Accessibility tools

Digital tools can also help. Ian suggests using Stark, an Adobe XD plugin to check for contrast and color issues, and external equivalents Accessible Colors and Color Oracle, while the Harding FPA suite of applications is used by many studios to check for seizure triggers.

"But again," Ian warns, "above all, consider it early and often. Accessibility by design is drastically easier and cheaper than refactoring, and UI accessibility often just means putting a bigger magnifying glass on usability issues, which makes your experience better for everyone."

The stark plugin for Adobe XD enables designers to check for contrast and color blindness in XD.

Tools like Stark help you check your designs for contrast and color blindness directly in Adobe XD.

The prototyping process

Once you've done your research and considered accessibility, the next step is to generate a demo with basic controls and UI elements. Behaviour Interactive's Philippe Chambon says that design stage needs to happen as soon as possible, so it can be iterated and revised. It's the best time to showcase a proposed solution, illustrate a potential issue and challenge the actual game design if necessary.

"Prototypes are one of the best ways to document a design," Philippe explains. "It's not just about the layout. It's all about interactivity, behaviors, even feelings and responsiveness. It's a doc that doesn't need to be 'read' but experienced and really improves the discussion with stakeholders."

Jarryd Huntley often kicks off the mock-up process by taking a screenshot of the game he's working on and overlaying dark and light rectangles to see how to block out things.

"I would often just stop there, and treat polish — or juice, as it's often referred to in games — as a last step," he says. "A talk titled The Nuance of Juice by a game designer friend of mine, Lisa Brown, really helped changed my perspective and showed me how important it is to iterate UIs early. I now approach improving the UIs throughout the process, since it's really integral to the entire experience of playing the game."

Building a UX flow

Once a game (and its scope) is forwarded by the project manager to the UI design team at TekRevol, the designers then build a flow to better understand the UI and UX and get a grasp of what the user journey will look like through different screens and scenarios. As Aisha Gull explains, the team then moves on to prototyping on an 'on-device interactive prototype' using Adobe XD, which helps understand limitations and weaknesses.

Video games UI/UX designer Anisa Sanusi agrees. She works very closely with a game designer when they have a specific feature of a mobile game to work on, and helps figure out the best UX flow by prototyping the wireframes.

"At this stage, it's meant to be fast iteration as we get a feel of the flow from start to finish," Anisa points out. "I use Adobe XD on my phone, access the prototype from the cloud and instantly test my work on the device. You can only assume so much when designing on the desktop, but once it's in my hands and I'm tapping through the screens on a mobile, I realize all the shortcomings of my prototype!"

TekRevol's most recent project prototype for an upcoming game review app called ButtonSmasher.

Getting stakeholders on board

An interactive prototype is also a great way to get everybody on board, as you have something to show:

"Having my designs update automatically in the app on my phone is especially handy during meetings," Anisa explains. "I love to present through XD directly, but I also load the prototype onto several devices, so I can hand them out to my team members — game designers, programmers, as well as stakeholders. They then have the opportunity to give feedback, and sometimes I can action those on the spot whilst on the computer, and it updates the prototype in the app. This agile way of discussing during meetings in turn benefits the overall implementation of the UI further down the line."

Anisa Sanusi prototyped mobile racing game MMX Hill Dash 2, released last year, in Adobe XD.

Iterate, test, and reiterate

Jarryd Huntley tries to get new revisions of the UI in front of new eyes and players to hear their thoughts as often as possible, while TekRevol's Aisha Gull swears by in-house play testing.

"It allows both the UI and UX to be put to the test through users playing an unfinished version of the game to assess how engaging the design is," she says. "This feedback is important to understand if the GUI is designed in a way that appeals to users and allows changes that enhance the overall quality of the UI."

And Tabby Rose finds that it's all about playtesting, refinement, and iteration, once a prototype has been built.

"Ideally, this happens in an environment that enables you to record players as well as the gameplay," she recommends. "Interviewing or surveying players after the session is also very helpful, but even taking notes at public demos will do. From here you can identify and remove pain points such as controls that are difficult for some players or clarify instructions. Ultimately, UI, control and game design are all intertwined, so it's quite possible that your overall gameplay may change as a result of feedback and iteration."

Custom mapping showing gamepad controls and their respective keycodes.

Custom mapping showing gamepad keys and their respective keycodes.

Defining game controls

Philippe Chambon used to prototype in Flash around 10 years ago, using a small tool called JoyToKey. He still uses it to prototype multiplayer interactions but now sets gamepad inputs in the same way as a keyboard input in Adobe XD, which he thinks is revolutionizing console game prototyping. He warns that prototypes shouldn't just be a series of screens with hotspot links.

Michael Flarup, designer, entrepreneur, and founder of entertainment design studio Northplay, meanwhile, tends to prototype straight in Unity. His team builds UI designs in Photoshop, which they then play around with inside the engine.

"One of the biggest controller-related iterations I have ever been part of was when we were bringing our game Conduct TOGETHER! to the Nintendo Switch," Michael remembers. "Controls that had once been exclusively touch now had to be translated into physical buttons. We spent many iterations on finding the right amount of complexity for the indicators that would follow around the trains and switches in the game. Unfortunately, all of our attempts added an additional layer and caused more friction. In the end, the simplest solution won. The road to a complicated game UI is paved with good intentions, but in our case it needed to shrink to the simplest form we could think of."

For their Switch game, Northplay iterated on more than 20 different button indicators before boiling it down to really simple shapes. Here are just a few of the variants they went through.

For Conduct TOGETHER! Northplay iterated on more than 20 different button indicators before boiling it down to really simple shapes. Here are just a few of the variants they went through.

Better games for everyone

In the end, creating effective game UIs requires taking accessibility into account from the start, researching your target audience as much as you can, and rapid prototyping and playtesting in order to reiterate and revise early and often and improve the gaming experience for as many players as possible.

Don't forget, accessibility doesn't just mean physical impairments. Your players may be on a small screen, affected by sunlight, or sitting on a sofa a lot further away from the screen than you are when you're designing the experience. Having to refactor or fixing issues in the UI can be time-consuming and costly, so planning for accessibility early and throughout the design process is key.

For more UX insights sent straight to your inbox, sign up for Adobe's experience design newsletter.