Video games are one of my favorite things. I grew up playing them and learning from them. They taught me concepts such as usability and interaction and are the inspiration behind why I became a UX designer.
But, there are concepts we don’t consider when we build a product, while video games does.
As a UX designer I know the importance of continually improving my skills. This is what led me to a wonderful book by Celia Hodent, The Gamer’s Brain. It highlights seven key points to creating a catchy video game.
I’ve found that the same concepts can also be applied to my process for product design.
The Video Game UX Framework
Video games and Software products have something in common: they both rely on Human-Computer Interaction’s principles. Both of them require an understanding of the human brain in order to make a successful and engaging product.
These are the seven usability pillars she recommends for designing a game,
- Sign and Feedback
- Clarity
- Form Follows Function
- Consistency
- Minimum Workload
- Error Prevention and Recovery
- Flexibility
Let’s break it down and talk about how each pillar can be applied in product design.
1- Sign and Feedback
Feedback is a fundamental element in any product. It keeps the user informed of the state in which he is in and clues him in on what decision to make next. Feedback can be described as any cue that communicates to the user the current status or what action should they execute to fulfill a goal.
получить займ на картуновые займы онлайн на карту
Mario Kart 64 is a good example of incorporating many elements to tell the players what’s happening during the race. In this particular game it’s really easy to identify your current place in the race, how many laps remain, where on the map you are, what’s coming up on the track or when something is wrong. If you are going the wrong direction, for example, you’re alerted.
As designers, we too can provide context to our users with audio, visual or other kinds of prompts whenever the user is going in the right or wrong direction.
2- Clarity
Clarity refers to the way in which the components are presented to the user. Components have to be perceptible and understandable to avoid confusion.
Some concepts that make an interface easier to understand are the dimension and size of the elements, colors and contrasts, typography, symbols and icons. All components must transmit a message to the user and must be clear so that he can perform the desired action.
All components must transmit a message to the user and must be clear so that he can perform the desired action.
There are times where we have a lot to show and explain to our users while they are in the process of using our product. But having too many elements can overwhelm them with information and can cause an inattentional blindness, the exact opposite of what we’re trying to accomplish!
The HUD (Heads Up Display) of Final Fantasy XV, an active RPG (Role-Playing Game), handles this problem really well. The HUD provides the full panorama while in battle while not being overwhelming by displaying relevant information only as it’s needed. It’s easy to process all the components at once. For example, in the upper left you can see the enemy level and health, in the lower right your health and active team members, in the lower left the weapons, and controls.
As a technique, you can perform a heuristic evaluation to test if our components are clear and functional.
3- Form Follows Function
Form follows function—that has been misunderstood. Form and function should be one, joined in a spiritual union.
Another name we have given to this principle of design is affordance, coined by the Psychologist James Gibson. Affordance means that the form of an item should convey its function.
This is one of the most common mistakes we make. It’s easy to put elements on the screen, but it’s common to find that they don’t interact in the way we’d expect.
We need to be really clear with the signs we give.
On Crash Bandicoot one of the main objects you interact with are crates. Some crates contain apples that gives you points. Others work as a trampolines to jump higher. Another triggers a secret passage, and so on. Design elements such as color, texture and symbols are used to easily differentiate between crate types. If it’s red and has a label saying TNT, it’s likely that the box will explode. If it's a steel box, it won’t break.
We need to be precise in the way we present elements to the user as a way to make it clear which action to take. Don't eliminate labels just as a way to keep it "clean." Labels aren’t always a “bad” thing. Keep the primary functions of your product visible.
The user doesn’t know the product as you do.
4- Consistency
Consistency is about the harmony in the ecosystem of the product. Keep the same visuals, interactions, signs, feedback, and overall conventions throughout the product.
Recently, I played a game called Gatoroboto. Just by entering their site I was already experiencing the whole theme of the game. I loved the visuals. The music’s great. But, most importantly, the congruency of the controls and navigation made it easier to quickly adapt to the game, even though I hadn’t played a metroidvania before.
Something similar occurs with products. The product experience should feel the same throughout. There are many examples of a good consistency within products such as WhatsApp, Spotify, and Netflix.
On the other hand, here's an example of what not to do.
Twitter gives you the option to add tweets to your bookmarks. To access your bookmarks via mobile, you simply go to the menu panel and see the bookmark option. But, the desktop version doesn’t work this way. In fact, the web version doesn’t even have the option to access your bookmarks!
For a product to be consistent you should keep the same feeling across all the ecosystem. This is a great way to avoid user frustration.
5- Minimum Workload
In almost all cases we are designing for humans. One way to take the user’s cognitive load into consideration is by minimizing tasks that are not part of the core experience.
Onboarding can be one of the pain points in a product. This is because we tend to overwhelm the user with all the wonderful features of our product. By the end they’re likely to have forgotten all the information we provided, or worse, they skipped it altogether!
Metroid has the most amazing tutorials when you start playing. It teaches you by overcoming obstacles with certain actions and repeating patterns throughout the level.
Don’t expect your user to learn all there is to know about how your product works from the very start. Instead, break the onboarding into small tasks that are easy to digest.
6- Error Prevention and Recovery
Anticipate the errors users may commit and prevent them from happening. This will help to avoid friction during the interaction. And, allow intuitive error recovery when possible.
Design Patterns are solutions to common user interface problems and they can help you minimize the usability issues that users tend to have.
Providing a save option helps the user to be cautious and also to save her progress in case of anything bad happens. Auto-save is the most optimal option, because users can be immersed on certain actions, and forget to save their progress.
As another example of what not to do, let's look at The Legend of Zelda: Ocarina of Time. There is a really peculiar character, Kaepora Gaebora, a wise owl who provides important information. After a long talk with him he asks you if you understood what he just told you. The first option to appear on screen is “No.” If selected, he will repeat the entire dialog.
We are used to seeing the positive option such as Yes, Ok, Next or Finish, first. Our first reaction is to press A to continue. If the first option is a negative one, it is breaking the pattern of option selection our brain is used to. This only leads to frustration.
Mistakes always happen. Provide the user with the option to undo actions. This will bring a sense of relief and increase the level of comfortability toward interacting with and exploring the interface.
7- Flexibility
The more customizable we build a product, the more accessible it will be.
Customization opens the path to accessibility, which makes the product more available to people with disabilities.
Designing for accessibility can improve experiences that can be crucial for someone. We need to be aware of the necessity of all users. Around 300 million people, or roughly 4% of the population, are color blind. Yet, few products consider the color blind in their design.
Designing for accessibility can improve experiences that can be crucial for someone.
Blizzard went ahead and offered an option to modify the interface colors for color blindness.
Having the option to customize certain elements, such as color, can lead to the creation of a more efficient ecosystem. By allowing the user to modify shortcuts, window positions, labels, or toolbars the user is creating his own ecosystem around the product which can dramatically improve his engagement.
Let’s play!
All designers want to build successful and engaging products. If you want to learn more about how to improve user experience, the Nearsoft UX Team are experts on the topic! Read more from us here.
Let me know what you think! You can reach me at flopez@nearsoft.com https://zp-pdl.com/emergency-payday-loans.php
