{"id":2393,"date":"2021-03-15T00:15:12","date_gmt":"2021-03-15T03:15:12","guid":{"rendered":"https:\/\/ember.com.br\/?p=2393"},"modified":"2024-06-22T05:15:49","modified_gmt":"2024-06-22T08:15:49","slug":"aplicando-heuristicas-de-usabilidade-a-um-jogo","status":"publish","type":"post","link":"https:\/\/ember.com.br\/en\/aplicando-heuristicas-de-usabilidade-a-um-jogo\/","title":{"rendered":"Applying usability heuristics to a game"},"content":{"rendered":"
\n
\n

The importance of informing users about what is happening empowers their decision-making process. A great example of this is in a game system that recreates the real world to immerse players in the game: Her Story<\/em>\u00a0.<\/p>\n

Her story<\/h1>\n

Her Story<\/em>\u00a0(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 by relying solely on interviews with the man's wife, Hannah Smith.<\/p>\n

\n
\n
\n
\n
\n
\"\"<\/div>\n

\"\"<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>

Video footage found in the police database. Source: Reddit.<\/figcaption><\/figure>\n

Players begin the game on an old desktop computer with various programs and files to explore: text files with instructions, a small minigame, and a database of police footage. The "LOGIC database" allows players not only to view the clips but also to search, sort, and tag them. As players view a new clip, they can tag it and search for it later \u2013 this is how players interpret the 271 short videos and piece together their story.<\/p>\n

As players progress through the game, a chat application appears asking "are you finished?". It's your decision to finish the game \u2013 did you understand what happened? Do you want to explore more and collect all the pieces of this puzzle?<\/p>\n

\n
\n
\n
\n
\n
\"\"<\/div>\n

\"\"<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>

Chit Chat app, the chat app that asks "Are you finished?".<\/figcaption><\/figure>\n

Alignment between the system and the real world.<\/h1>\n

Systems should not use your terminology, but rather communicate in the user's language.\u00a0<\/strong>Communicate using familiar concepts, words, and expressions adapted to your user, in a natural and logical order, following real-world conventions.<\/p>\n

Why?<\/strong>
\nUsers feel comfortable with their system; we humans feel more comfortable with what is familiar to us. If users don't know or understand what is being communicated, they may become confused and question things. This can be applied to language, objects, actions, and other real-world conventions.<\/p>\n

How?<\/strong>
\n1. Make sure the language is adjusted to the users. Don't make them look up the definition of a word.
\n2. Don't assume that your understanding of the words matches that of the users.
\n3. Align UI elements with real-world objects and actions.
\n3. Conduct user research to discover the best words to use and uncover users' mental models regarding the most important concepts.<\/p>\n

Examples:<\/strong>
\nSince we're here, let's use Medium as an example, starting with the highlighting feature. Highlighting key parts of an article is a familiar action, with a physical equivalent in the real world: highlighting a book with a bookmark. This experience is enjoyable and goes a step further, allowing you to see all the highlights within the "Reading List" page.<\/p>\n

Within the \u201cReading List\u201d page, you can view your saved articles (and remove or archive them), see archived articles, check highlights, and view recently viewed articles. These features and the way they are organized follow the real-world organization of a library, with the digital combination of real objects to illustrate actions.<\/p>\n

You save a story to your reading list by clicking an icon that looks like a bookmark (and is called a bookmark). You remove it by clicking an icon that looks like a library catalog card and the file icon\u2026 it looks like a file box.<\/p>\n

\n
\n
\n
\n
\n
\"\"<\/div>\n

\"\"<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>

The pop-up media help explains how saving and archiving stories works. You can see the icon and behavior corresponding to real-world objects. Source: Author.<\/figcaption><\/figure>\n

Most of our utility applications resemble their real-world objects: calculator, clock, radio, telephone, calendar. As you use different systems, pay closer attention to the icons and you'll realize that most of them are representations of actions or objects that are the real-world equivalent of the digital action.<\/p>\n

Get to know your users and show that you care about them by listening to what they have to say and adapting your system to communicate only with them.\u00a0Show empathy for family reasons and you can build trust \u2013 it's the right path to a lasting relationship (with users, of course).<\/strong>\u00a0.<\/p>\n

Its history and alignment between the system and the real world.<\/strong><\/h1>\n

In\u00a0Her Story<\/em>\u00a0, In this game, players use an old desktop computer to explore the story. This old desktop belongs to the police and mimics a real desktop computer. All the internal applications also mimic a real-life equivalent application \u2013 like the ones we have on our desktops or laptops.<\/p>\n

\n
\n
\n
\n
\n
\"\"<\/div>\n

\"\"<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>

Main work area in Her Story.<\/figcaption><\/figure>\n
\n
\n
\n
\n
\n
\"\"<\/div>\n

\"\"<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>

The main workspace in Her Story with several programs and an open file.<\/figcaption><\/figure>\n

Anyone who has ever used a computer can play this game and use its various applications with ease. How? The game creates an alignment with the real systems we know, but limits the actions and information to what the game requires, combining language with commonly used words and expressions.<\/p>\n

What applications\/files were on the laptop and what do they do in the game compared to real life?<\/em><\/strong><\/h2>\n