In an excerpt from the upcoming e-book, User interface design and implementation, veteran game designer Christo Nobbs examines the interplay between UI and game design.
Our upcoming e-book, User interface design and implementation, illustrates how UI artists and designers can build better interfaces in Unity. The guide covers workflows for the two UI systems available in Unity, but the primary focus is on Unity UI Toolkit for Unity 2021 LTS and beyond. Christo Nobbs, the game designer who was also a major contributor to The Unity game designer playbook, shares a section that he provided for this latest guide on how UI and game design can create rich immersion to keep your players captivated.
Successful games are immersive. Whether it’s a VR simulation or mobile role-playing game (RPG), a great game transports us to a different world.
Immersion requires a delicate balance of UI and game design. The UI needs to be functional – but within the confines of the game’s art direction and overall identity. The trick is using the right UI for the right situation.
Should you show an onscreen icon when a player picks up an item or defeats an enemy, or is that too distracting? Could a misplaced pop-up take the viewer out of the action? These are the kinds of questions you’ll need to consider as a UI designer and artist in the larger context of your game.
One current trend is diegetic UI. Today’s game players inherently recognize traditional extra-diegetic UIs, such as health bars or menu screens, as conventions of the medium. They’re artificial devices plastered on the “fourth wall” to communicate with the user. But diegetic UIs, conversely, embed themselves into the story and narrative. They make parts of the game world function as a user interface.
Imagine a game character that pulls out an empty weapon magazine in a scripted Timeline sequence. That animation can replace a head-up display (HUD)-based ammo counter.
The Dead Space series is often cited as a prime example of diegetic interface. Here, the player dons a sci-fi survival suit, which motivates the game’s UI. The suit’s holographic display projects in-game statistics and inventory, as well as colored lights on its spine that double as a health indicator. The result is a built-in UI seamlessly integrated into the story.
In iRacing by iRacing.com Motorsport Simulations, realistic in-car dashboard indicators show damage, which also affects the car’s handling. The player understands there’s something wrong with the vehicle through audio and visual cues, rather than an explicitly flashing vignette or HUD icon.
On the flip side, if a game is too immersive, the designer can build an “out.” A horror game can give the player a “safe word” with a pause button. This intentionally breaks immersion if scenes become too intense.
Experienced designers understand that the UI must fit with the game’s identity. The interface needs to be clean, readable, and appropriate for the situation. With today’s hardware, you can realize advanced UIs that support the story you are trying to tell.
At the other end of the spectrum, competitive games like Counter-Strike: Global Offensive, or CS:GO, Overwatch, and League of Legends depend on UIs that gather information. They use HUDs that must be efficient and assist in gameplay. Diegetic interfaces are less appropriate here. Breaking that fourth wall can actually make for a better game.
Since the players have a keen awareness that they are participating in a planned experience, the interface helps them assess the “playing field” – remaining time, team rosters, vitals, minimaps, etc. In some ways, this reflects a sporting event, where the broadcast UI updates its spectators.
Whether they’re showing team positions or illuminating players through walls, these UIs have the effect of enhancing strategy and tactics. They can also build suspense for the player and heighten the experience. Thanks to the UI, being a spectator after losing an online match can sometimes be as entertaining as playing.
In World of Tanks, the spatial UI elements appear above each player’s tank to relay information about teammates and enemies; things like their name, tier, health, and tank icon. The HUD point bar, navigation elements, and minimap all share a clean and direct visual language.
By working with your designer, you can better understand the game’s UI needs. Gameplay is a balance between challenging your players and sharpening their skills. Ideally, this will pass through the Flow channel (see the chart below).
Tilt too far to one side and you risk boring your players. To alleviate that, reduce UI elements and increase the challenge level. Then you can force the player to puzzle through the gameplay without too much assistance.
Making the game too difficult, on the other hand, can result in anxiety. In this case, adding UIs can lessen gameplay confusion and get your target complexity back on track.
Think of UI as a design device meant to steer your game into this Flow channel. An interface shouldn’t waste the viewer’s time. It should clearly communicate its content (e.g., load out, health, etc.), but nothing else. Your designer will likely go through numerous iterations as the product evolves into its shippable form. Let the players – and the gameplay – work out the rest.
|Tip: UI text|
You might want to use less text in your interfaces to improve their focus. Small adjustments to icons, fonts, and layout can all impact game pacing. Less text, where appropriate, can also make it easier to localize your game.
For more UI text tips, see Joseph Humfrey’s 2018 GDC talk, Designing text UX for effortless reading.
Interface designers today have a vast library of game applications to learn from. You can explore them through the Game UI Database. This massive, searchable site allows you to filter by HUD element, type, style, and feature, among other categories. Use it to pore over hundreds of published games and study their in-game menus and screens.
Another great resource is Interface in Game. It features video clips of UI elements you can browse. Use this database to search a wide range of titles by platform and genre. Need to polish up some visual effects or UI details? You’re likely to find a reference here.
As you examine more game interfaces, you’ll begin to perceive patterns, especially by genre. In a first-person shooter (FPS), for example, we expect to see the health stats at the bottom of the screen. It’s almost an established convention, since so many applications have done it this way.
When designing a UI, it’s important to capture the genre’s visual language. If you’re building an RPG, look at how other RPGs handle inventories, skill trees, leveling up, etc. Make something that players are already familiar with, so they can jump right into the gameplay with an understanding of the established style.
UI design patterns aren’t random. They’ve evolved over time through a sort of collaborative effort. Designers have already figured out what works, and new designs are simply building on an existing game canon. Learn from these past design decisions. You’ll not only save yourself time, but appease your players as well, who will be expecting certain patterns and visuals in the game.
For more information on UI design patterns, read Best practices for designing an effective user interface by Edd Coates, a senior UI artist from Double Eleven.
UI Toolkit sample – Dragon Crashers is a new demo available to download for free from the Unity Asset Store. This sample demonstrates how you can leverage UI Toolkit for your own applications, and involves a full-featured interface over a slice of the 2D project Dragon Crashers, a mini RPG, using the Unity 2021 LTS UI Toolkit workflow at runtime.
You can find more advanced e-books for Unity creators on our How-to hub.