GAMES UX
Applying Usability Heuristics to Her Story
Exploring the alignment between in-game systems and the real world
In 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.
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?
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.
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.
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.
- 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.
- Rubbish Bin
Bin icon named “Rubbish Bin” with two files inside but only possible to slide them to the desktop.
- 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.
- 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.
- 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.
- “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.
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.
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.
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.
