The Stories We Tell: Narrative and User Interface in Red Survivor

Coming from a writing background, I find that a game’s narrative is an important part of what keeps players interested and playing. Even small hints of the game’s backstory and characters’ relationships allow players to become invested. Red Survivor’s story is one of ordinary people during the Russian Civil War who must scrape together what little is left of their world while struggling to fight against a strange mechanical menace. As the player progresses, they can find more hints of the world before the war through artifacts that add depth to the ruined landscape.

Throughout the game we want you to become a part of your survivors’ lives, to root for them and fear for them. You’re not just in control of units; you’re in control of lives, and your actions can alter the course of the story forever. As a user interface designer, my job is to work those aspects of the narrative into the gameplay by designing menus, buttons, and other ways for the player to interact with the world.  

Looking at Good UI

A UI designer lays out the game, providing the tools that help the player act upon and learn more about the game world. These features can be on the screen at all times–for instance a player character’s health bar or inventory. UI can also consist of menus that display key information, such as maps of the world, possible upgrades for the player character, or quest information. Sometimes there are in-game explanations for this–the Pip-Boy in the Fallout series, for example, is a device worn by the player character which allows them access to their inventory, vital signs, skills, and other important information. This helps keep the player in the game even when they navigate menus.

Within the game, the Pip-Boy tracks the player’s status and inventory. It also deals with out-of-game details such as the pause menu (1).

The best UI designs tell you what you need to know without getting in your way. This often means using iconography, placing important status details where they won’t interfere, and accenting important features with particular colors or backgrounds. This War of Mine(below) does this by placing global information (such as the date and time) in the upper left corner, while the active unit’s personal details can be found in the lower right corner. This information is accessible at a glance, but does not obscure the player’s view of the survivor.

This War of Mine uses iconography (hand, door) within circles to represent unit actions (2).

For more specific information, the player has access to menus such as the active unit’s inventory, but these details don’t need to always be on-screen. “This War of Mine” also breaks up information by using varied colors. Orange accents highlight important facts that might be needed in-context, such as the active unit’s traits and the current time of day. This allows specifics you might need for quick decisions to stand out against the dark background.

The Many Faces of Red Survivor

For Red Survivor, my goal is to make the gameplay as understandable as possible. This means creating a layout for the game that is cohesive and comprehensible, even to new players. Some of these design tasks involve creating the look of menus and buttons–such as the pages for journal entries and artifacts–and tailoring the look of the UI to match the feel of the game. The UI should also provide the player with the important parts of Red Survivor’s narrative.

Red Survivor has several different features that tell the story of the survivors and the world. One example of this is the survivor journal, where survivors keep track of notable events in their lives. The player can read these entries to understand more about who their survivors are and how they feel about their world. Artifacts that these units find also reveal the game’s backstory. These artifacts are scraps of the old world–pamphlets, photos, and other paraphernalia that hint at what the world was like before the war and provide more character to the game.

An initial layout for Red Survivor’s journal system with mockups of journal entries.

One of the difficulties of designing UI is creating a layout that allows the user to access information that doesn’t intrude on gameplay. I created a tabbed menu system (above) that contains detailed information that the player can access, topics that are not critical on a turn-by-turn basis. The elements that they player might need more frequent access to–such as active objectives, unit inventory, and the actions that a unit can take–are not hidden in menus, but are always accessible to the player (below).

For instance, the player’s current objectives–goals to fulfill–will affect the player’s overall strategy. This might determine how the player places their units or what resources they choose to gather, and so it’s convenient to have that information on-screen at all times. On the other hand, journal entries add flavor to the game but are not critical to decision-making. If the player wishes they can go to that menu and read the latest journal entries, but this text does not need to be on-screen at all times.

A concept for Red Survivor’s main UI. The unit’s current available actions (bottom) and active objectives (top left) are always on-screen.

Red Survivor’s user interface is still a work in progress. There’s a lot to do–integrating the style and theme of the UI with that of the game, designing prompts for the user such as tooltips and confirmation windows, and of course looking at player feedback to see what works and what needs to be improved. Designing UI means constantly revising layouts, coming up with clever solutions, and most importantly thinking about how the player will see the game. Over the next few weeks I’m looking forward to working with our programmer to get a new UI implemented and start to test some of these features in-game!

Works Cited