Immersive INTERFACE DESIGN

Immersing a Creative World into a Usable UI (USER INTERFACE)

UI designer Steph Chow discusses how to embed a game's world into its user interface (UI), and how to strike the right balance between player immersion and player usability.
​

Immersive game elements include characters, VFX (visual effects), environments and UI
 
UI is not just about bright juicy green buttons.  UI is part of an immersive strategy.
 
AR AND UI IMMERSION

• A big focus on camera visuals needs to be balanced by minimal game controls
• The balance between familiarity and fantasy is also important
• But there still needs to be a way to imply the AR world when the camera is off

 
VR and UI IMMERSION

• A huge opportunity for immersive, in-game visuals and physical interactions
• Animation, audio and haptic effects can also enhance player feedback
• But complicated tasks still require explanatory visual interfaces and accessible buttons.

 
ENGAGEMENT IN UI IMMERSION
 
Players play games not just because they are fun, but because audiences grow to love the unique worlds (fictitious universes) in which they are set.
Details that go beyond characterisation like typography, colour palettes, shapes and iconography can help to keep a player immersed and engaged.  Chow aims for a branded experience through both visuals as well as functionality.
 
The interface needs to be immersive and usable. 
The process of embedding a game’s world in its interface unfolds in 3 phases

1. Research, 2) Exploration and 3) Iteration

 

1. Research:

What is the visual culture behind your world?
This is the time to seek out the visual elements that make your world distinct.  This can be inspired by history e.g. the 1950s American iconography of the Fallout Series
Or by Nature e.g. Paradise Bay, reminiscent of oceans and rocks
Or by Subcultures e.g. Splatoon 2 takes its inspiration from punk references, including graffiti.
 
Chow recommends taking research beyond google searches – e.g.  watching movies, visiting museums

1. Exploration

It’s important to explore the spectrum offered by your ingredients

• Diegetic (included in game-world, so seen and heard by in game-characters) vs non-diegetic (only visible to players)

Diegetic is more likely to be fully immersive, easy to grasp narratively and preserves the 4th wall
But if you have a lot of information to show it can be buried in a diegetic look

• can help guide players through complex tasks by clearly separating game-play challenges from the detailed content.  Needs to be designed carefully however to avoid distraction and further complicating the task.

 
Deciding between these 2 approaches depends upon 3 things

1. Amount of platform screen space
2. The complexity of the game mechanics e.g. simple game mechanic vs complex strategy
3. How player is interacting with the game (touch, controller, camera)

 

• Skeuomorphic vs flat

Skeumorphic (incorporating non-functional design elements) creates a sense of familiarity by emulating materials whilst flat design stays true to its medium (ignoring colourful details to focus instead upon the inventory, for example, and its function in the game).
It’s worth exploring different layout options to judge the best approach.

• Layout

Can provide both immersion and usability – draws upon familiarity to improve clarity, makes functions and form clear in the visuals

• Animation

Actions can communicate timing urgencies, be pinned to interactions, direct player attention and create a sense of pace.

1. Iteration: To find the balance between narrative impact and usability

 
Things to evaluate

• Readability – Has the interface been over-designed to the point of confusion?
• Personality – Are the brand’s keywords visually implied in the design?
• Implication – Are interactive and non-interactive elements distinct and clear?
• Scale – What is the memory load of your design?

 
Also keep usability heuristics in mind

• Visibility of system status
• Match between system and the real world (e.g. using conversational language)
• User control and freedom (e.g. providing clear abort, or restart procedures)
• Consistency and standards
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help users recognise, diagnose and recover (e.g. with simple error messages that point to solutions)
• (Easily discoverable) Help and documentation

Chow, Steph. 2018/2020. Immersing a creative world into a usable UI U.S.: Game Developers Conference.