GAMES UX

Applying Usability Heuristics to Her Story

Exploring the alignment between in-game systems and the real world

Maria Meireles
Mar 9 · 8 min read

the first article about Jakob Nielsen’s Heuristic and video games, I talked about the visibility of system status and The Witcher 3: Wild Hunt. The importance of informing users about what is happening empowers their decision-making process.

This time I will focus on the second heuristic, the alignment between in-game systems and the real world, with a great example of a game that recreates a real-world system to immerse players in the game: Her Story.

Her Story

Her Story (2015) is an interactive narrative video game written and directed by Sam Barlow. In this game, the player explores a database of video footage from police interviews. The goal is to solve the mystery of a missing man resorting only to the interviews with the man’s wife, Hannah Smith.

Video footage found on the police database. Source: Reddit.

The players start the game on an old desktop computer with different programs and files to explore: text files with instructions, a small mini-game, a police video footage database. The “L.O.G.I.C. Database” allows not only to see the clips but to search, sort and tag. As the player sees a new clip, it’s possible to tag it and search for it later — it’s how players make sense of the 271 short videos and piece together her story.

As players progress in the game, a chat application appears, asking, “you done?”. It’s your decision to finish the game — did you understand what happened? Do you want to explore more and collect all the pieces from this puzzle?

Chit Chat app, the chat application that asks “you done?”.

Alignment between the system and the real world

Systems shouldn’t use their terms but rather communicate in the user’s language. Communicate with familiar concepts, words, and expressions adapted to your user, in a natural and logical order, following real-world conventions.

Why?
Users feel comfortable with your system; we humans are most comfortable with what is familiar to us. If the users do not know or understand what is being communicated, they can get confused and second-guess themselves. This can be applied to both language, objects, actions, and other real-world conventions.

How?
1. Make sure the language is adjusted to the users. Do not make them look up a word’s definition.
2. Don’t assume your understanding of words matches those of the users.
3. Align UI elements with real-world objects and actions.
3. Do user research to discover the best words to use and uncover users' mental models of the most important concepts.

Examples:
Since we are here, let’s use Medium as an example, starting with the highlight feature. Highlighting essential parts of an article is a familiar action with an equivalent in the physical real-world, to highlight a book with a marker. This experience is enjoyable and takes it a little further by seeing all highlights inside the “Reading List” page.

Inside your “Reading list” page, you can see your saved articles (and remove or archive them), see the archived articles, check the highlights and see your recently viewed articles. These features and the way they are organised follow a library's real-world organisation with the digital match of real objects to illustrate actions.

You save a story on your reading list by clicking on an icon that resembles a bookmark (and it’s called a bookmark). You remove it by clicking on an icon that resembles a library catalogue card and the archive icon… it looks like an archive box.

Medium help pop-up explaining how saving and archiving stories work. You can see the icon and behaviour match with the real-world objects. Source: Author.

Most of our utility apps resemble their real-world objects: calculator, clock, radio, phone, calendar. As you use different systems, pay more attention to the icons, and you will notice that most of them are representations of actions or objects that are the real-world equivalent of the digital action.

Know your users and show you care about them by listening to what they have to say and adapting your system to communicate just to them. Show empathy on familiar grounds, and you can build trust — it’s the right path to a lasting relationship (with users, of course).

Her Story and alignment between the system and the real world

In Her Story, the players use an old desktop computer to explore the story. This old desktop belongs to the police and mimics a real desktop. All applications inside also mimic an equivalent application from real life — like the ones we have on our desktop or laptops.

Main desktop on Her Story.
The main desktop on Her Story with multiple programs and a file opened.

Anyone that has ever used a computer can play this game and use the different applications with ease. How? The game created an alignment with real systems we know but limited the actions and information to the ones the game requires, matching language to commonly used words and expressions.

What applications/files existed inside the laptop, and what do they do in-game versus real life?

  • Log Off
    Log off appears with an open door icon with exit written on top, named “Log Off”. It’s a commonly used icon and expression.
Log Off icon.
  • Readme files
    Readme files with a notebook icon, one on top of the other with a .txt extension that users know. Just double click (open), and it’s possible to read. Since editing or any other action instead of open/close (and scroll) to read is necessary, only those are possible. One of the Read me files is inside the bin. Open it and take a closer look; it’s possible to find clues to a prominent theme in the story.
Two read me files and a read me file opened.
  • Rubbish Bin
    Bin icon named “Rubbish Bin” with two files inside but only possible to slide them to the desktop.
Rubbish Bin and the rubbish bin opened.
  • Clock
    Clock icon named “Clock”. A simple clock with a themed background. This background looks generic, like the ones we could see on old systems, but it is also related to the story.
Clock app and clock app opened.
  • Mirror Game
    A simple game that can be found inside the bin. This game is oddly for two people to play, a version of a physical reversi game. Even if someone never played it, it's a typical game that resembles a lot of simple games that existed on older desktops. Without giving out any spoilers, I can also say that it provides some clues about the story.
Mirror Game app and the game opened.
  • DB Checker
    Commonly used icon for database and straightforward visualisation graphic can only be open/closed or refreshed for users to check their progression on the video footage.
DB Checker app and the DB Checker opened.
  • “L.O.G.I.C. Database”
    The database is the most complicated program inside the desktop. The one used to see the video footage, the pieces of the puzzle. It’s a relatively simple and straightforward interface. Players can search terms (words or sentences even), see the list of already searched terms, and configure the database.
“L.O.G.I.C. Database” app opened: search of the word murder with 4 video entries found.

If the players search a word, a max of 5 videos appears, and below info of the total number of videos with that word.

Click on a video a small pop-up appears (check the image below). Players can:
- Add to the session, and the video goes to the second row of videos on the main screen;
- Tag with words to later search;
- Play video, and the video opens.

“L.O.G.I.C. Database” app opened: specific video pop-up.
“L.O.G.I.C. Database” app opened: play video, it’s possible to move forward and backward with the mouse if you move the light blue square on the blue video timeline.

How does the alignment with the real world in Her Story improve usability?

  • Usage of familiar applications and file types.
  • Usage of common and simple UI patterns.
  • Usage of icons and copy that resemble the ones used on different operating systems.
  • Limitation of features from known apps, graphics, and text info to only the necessary for the game.
  • Instead of technical police or system expressions, use of common and everyday words and language. Especially on the “L.O.G.I.C. Database”.
  • Extra applications like a clock (that mirrors the time on the players’ computer) and a game — create a sense of being on a real-life machine at the same time that provides clues about the story.
  • Glare filter to mimic old monitor’s glare.

The game’s main goal is for the player to see scattered video footage and put the pieces of the story together. Interacting with the database is the way to achieve this goal. By creating this match, the users do not need to learn specific actions to perform the task — they already know the interactions required and where to do them; they can even get some clues about the story if they look closely.

Source: Polygon.

Final thoughts

I love police stories since I was a little kid: books, TV shows, movies … games. If there is a mystery to be solved and a good story in the mix, I’m sold. So it comes as no surprise that I’ve loved Her Story since the first time I played it. I love to sit down on a lazy Sunday with a notebook and relive the story. My lousy memory helped me keep the mystery for the different times I’ve played it.

Writing about Her Story was something I wanted to do, and just by looking at the second heuristic when I decide to write this series of articles, it clicked — I can write about Her Story and the alignment between system and real-world.

Her Story takes a step further in this heuristic; it’s not only to make the system usable by players but also to serve the game and the story being told.

SUPERJUMP

Celebrating video games and their creators

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store