Storytelling with Interface: The Narrative Design of User Interface in Video Games

​01 Intro to Contextual Design in Video Games

Contextual design has been widely adopted in the game industry since players were blown away by the way that they could view the map, for the first time, via the holographic display projected from the character’s arm in Dead Space (2008). Worldview, immersiveness, contextual design, and 3D UI have become buzzwords in the industry ever since. As early as the beginning of 2020, console games started their journey of contextual design. In 2009, the term Diegetic Representation was officially introduced in a paper titled Beyond HUD. The author also categorized the user interface in video games into four groups based on whether the representation is visualized in the 3D games space and whether the representation exists in the fictional game world.

Dead Space (2008) brought contextual UI into video games for the first time

Categories of contextual UI

Contextual UI has almost become a synonym for high-quality UI. There is no doubt that it is more expressive and immersive, but on the other hand, it is also faced with problems such as difficulty in production and relatively high cost. It is worthwhile to point out that contextual design does not apply to all of the game genres or interfaces, eg. subsystems and dialogs.

02 The real touching thing is the story itself

Not every interface can be contextualized, so how can we enhance the expressiveness and immersiveness of the video game when the constraints happen?

Contextualization is just one of the design strategies to achieve our goal and the goal itself is something that we should pay more attention to. The form of artistic expression has never ceased changing since the birth of art. However, the core of it is always about telling stories and expressing emotions. Just like a vivid novel—although there are no visuals, you can still feel like you are there in the story. Remember it is the narrative itself that can touch people.

03 Incorporate the narrative into the user interface

Since the narrative is the sweet spot, how can we develop a good one and infuse the game user interfaces with it?

Elements of Narrative

We are all familiar with common elements of a narrative, such as characters, setting, and plot. To summarize, the formula is “someone did something somewhere”. Thus, as long as we make these elements clear to the audience in the UI, immersiveness will be created.

1. Characters

“Characters” are the most frequently used tool in nowaday’s video games. No matter it is a campaign poster or a “poster girl” in the main page, the players’ attention can be easily drawn to it. Besides disclosing game-related content, such characters can also convey emotions to the players and guide their feelings. Take Shadow of the Tomb Raider for example, when the player wants to save the progress, the heroine, Lara, will sit down next to a bonfire, the moment at which the player can see the tired yet unyielding look on Lara’s face and strongly resonate with her.

Savepoint in Shadow of the Tomb Raider

The employment of “characters” should not be limited to models or large-size illustrations. Instead, a small decorative figure can work as well. For instance, the cat in Onmyoji: The Card Game (阴阳师：百闻牌) will show up whenever there is new information that players should pay close attention to. In this way, as long as the player catches sight of this friendly cat, he/she will stay focused without even noticing him/herself.

The cat in Onmyoji: The Card Game will show up whenever there is noteworthy information

2. Objects

Although the “characters” are the most efficient way to engage players, a careful depiction of objects and the surrounding can also make a good narrative. Good examples include book-inspired user interfaces and the ingenious mobile phone interface in GTA5.

The card collection interface in Harry Potter: Magic Awakened

The mobile phone interface in GTA5

The collection system is designed as a mobile phone interface in Forever Seven Days

3. Atmosphere

Similarly, a well-designed atmosphere can also enhance the narrative of the interface in video games. The advantage of this method is that it will not cause excessive interference to the displayed content and can be applied to more general interfaces. For example, the foggy effect in Identity V（第五人格） can be used in many interfaces and even become a reminder of the game.

A frosted glass effect is applied in Identity V to create a sense of horror

The broken glass effect is generously used in Dishonored 2 to craft a dangerous atmosphere

Floating particles in Assassin’s Creed: Origin is an element used throughout the title

4. Events

Events are the combination of the three mentioned above. Using events wisely can make the user interface much more interactive and at the same time, boost the players’ heartbeat.

AI girl in Detroit: Become Human

In Detroit: Become Human, the AI girl who will interact with the players when entering the game, pausing, or accomplishing a mission leaves a deep impression. At the end of the game, the player can even decide whether to set her free or not.

The interactive menu in Batman: Arkham Knight

The menu items in Batman: Arkham Knight are also designed based on events. When the player switch between these options, the posture of Batman in the background will change accordingly, which can also be found in the main menu in Shadow of the Tomb Raider.

“Report” feature in Nonhuman Academy is turned into “Detention”

The event does not necessarily have to be very concrete. For example, the “report” feature in Nonhuman Academy（非人学院） is depicted in the form of comics, which makes the interaction intriguing.

In mobile games, we can see a lot of interactions during events such as gacha. Examples include Onmyoji（阴阳师）, Onmyoji: The Card Game（阴阳师百闻牌）, and Street Fighter: Duel （街霸：对决）. A reasonable narrative design can enhance the charm of the game and make it more vivid.

04 Principles of Narrative

1. Fit the worldview

A good narrative design needs to fit the worldview and content of the game, and more importantly, transform players’ behavior into part of the story so that the players can be truly engaged in the game.

Turn player’s behavior into part of the game scenario

2. Fit player’s mood

Never listen to a love song after a breakup. When designing the narrative, it is imperative to empathize with the player—what emotional status he/she is in and what atmosphere we want him/her to feel. Only when the narrative conveyed by the interface echoes with the player can he/she be genuinely stimulated.

The lobby in COD: Modern Warfare depicts how a soldier goes to the warzone

3. Find the balance in Impossible Trinity

In UI design, there is a theory called Impossible Trinity which states it is impossible to have all three of the following at the same time: clean interface, convenience interaction, and comprehensive function.

Impossible Trinity in UI design

When we are designing an interface with narrative, we also need to consider this impossible trinity. Does the decoration affect the player's easy access to the information? Does the interactive simulation complicate the player interaction with the system?

No matter how good a piece of artwork is, it is tiring after watching it for a long time. Sometimes, although the design itself is amazing, it can bring a negative experience if it is triggered more frequently than necessary. The most typical example is that a draw-all gacha mechanism must be provided in card games because at this moment players focus more on the results, rather than a sense of ritual.

The same problem appears in the auto-chess game of Hearthstone. The competition part of Hearthstone is very interesting, the visual effect of each card is very vivid, and there will even be cheer from the audience. However, because the longer the time the competition lasts, the shorter the time the player holds the cards, many players choose to exist and then re-enter the game to skip the competition phase.

4. Process of narrative-driven UX design

First of all, before jumping right into the design, we need to fully understand the design requirements and the functional framework/process of the system. Only after the functional logic is refined and organized, can we begin to optimize the experience and expressiveness.

Step 1 Organize the system structure and find the core interface

This step is mainly to comb through the existing functions and the relevant requirements in the PRD and determine the scope of design. When designing specific functions, we need to pay more attention to what functions and information should be available on this interface.

A clear hierarchy of functions and user flow is the prerequisite of narrative design

Step 2 Design the scenario

After determining the various functions and processes, we need to design a reasonable game plot to account for the process. This plot needs to correspond to the function.

In Super Mecha Champions （机动都市阿尔法）, instead of selecting a spot on the map and landing with a parachute, players need to enter the cockpit, selects a destination, and then the mecha is ejected towards it. This design is a good way to blend the gameplay into the game plot, which is very in line with the characteristics of the game.

The design of “parachute” in Super Mecha Champions

When we are designing the storyline, we need to combine it with the functionality organically and blend the functions into the game. You can find below a summary of 8 steps to combine the narrative and other elements that need to be considered during design. When we are brainstorming for design solutions, it is helpful to refer to this process to ensure that the solution strikes a balance between storytelling and functionality.

8 elements of narrative-driven interface design

Step 3 Design the narrative interface

When we come up with a plot, the next step is to use the elements in the interface to express it – demonstrate the 8 elements of narrative design in the interface, and evaluate and strengthen the relationship between them.

In the new player onboarding interface of Super Mecha Champions （机动都市阿尔法）, although the contextual design is missing, players can still understand the meaning of the operation and the content of the plot through the employment of those narrative elements.

Ticket design in Super Mecha Champions

Compared with traditional games that let players choose the difficulty through a pop-up window, the design of Super Mecha Champions is much more vivid.

Design of beginner’s proficiency selection in other games

Another example is the arena interface of Gwent: The Witcher Card Game. The player's perspective is the demon hunter standing in front of the bulletin board, and every battle is a contract. When the player defeats 9 opponents, he/she completes 9 contacts and gets paid accordingly. The sealing wax is used in the interface to show whether the player wins or loses, and it cracks into pieces if the challenge fails.

The arena interface in Gwent: The Witcher Card Game

05 Conclusion

Contextual design is only one of the representations of today’s design trend in the game industry—an increasingly focus on the design of worldviews and narratives. There are many potential alternatives to combine game narrative and interface design, and the form varies from one to another. As game designers, we are not only here to design functions listed in PRD, but more importantly, to create the charm of the game that can attract players. I hope that we can continue to explore and create works that truly touch people's hearts.