Design through games — #1 Emotional design with Mario Maker
With Design Through Games, I would like to introduce design laws and good practices by showing video games examples. We frequently talk about applications or websites, but not enough about video games in my opinion. However, it’s a field that combines almost all user senses. This leads to important and interesting UX/UI stakes.
In recent years, we have been talking more and more about emotional design in our interface design. It has a lot of advantages but can also be double-edged if misapplied. We will analyze Mario Maker 2 to explain this notion and how to use it.
What is emotional design ?
Emotional design can be used in different ways when you design your product. Firstly, we will place it in the conception pyramid.
The place of emotional design —
In his book ‘Designing for Emotion’, Aaron Walter analyzed deeply the concept of emotional design and made Maslow’s Pyramid alternative. This one is composed of different layers of users’ needs when they use a product. These layers have been discovered as we go along with technology evolution. (internet, devices,…).
Let’s take the internet as an exemple: at the beginning, we aim to have a functional website, that’s the foundation of every product. For a website, we first aimed to have an html page with text and hyperlinks. That was the best way to make users’ needs possible at this time.
Then, thanks to technology upgrades, it was possible to create an account, make a payment, share content…Because of that kind of feature, users had a new need: security and reliability (the first layer). The second layer concerns usability. An interface should be easily understood and used quickly, this is the realm of UX: I should easily find how to achieve my goal on the interface.
Finally, the last layer is becoming more and more important, especially for standing out from the competition. This concerns the pleasantness of a product. If usability is equivalent to edible, pleasantness is akin to ‘delicious’. Here, we are talking about brand identity, interface design, animations…
And the cherry on top, the pinnacle of our pyramid: emotional design. The goal: to make happen emotions that have a positive impact on the user experience.
Emotional design has several benefits: it makes us smile (brand image), helps us to use products more easily (specific feedback, animations), and facilitates memorization of things (association of an animation, a character, a sound with an action).
What is it made of? —
In his book ‘Emotional Design: Why we Love (or hate) everyday things’, Don Norman established the three levels of appeal towards a product. This is about emotion, and that’s why the concept of emotional design is so important.
- Visceral
The visceral level is a part of emotion that we do not control, which is compulsive. This concerns the visual aspect that allows the product to distinguish itself from another. Branding is one of the key points of this level. The Mario universe, something that has marked several generations, can be an excellent source for an interface. The goal here is to touch the user in his feelings and attachments. - Behavioral
It’s about the efficiency and enjoyment of use. It deals with how the user interacts with a product: how they achieve their goal, at what speed, with what precision, and with what number of errors. The answers to these questions will vary depending on the user, and the goal of a product is to be able to adapt to all kinds of people. If this goal is achieved, any user will then be able to use the product and will feel a sense of accomplishment when completing their task. This feeling is very important for creating a positive connection between the user and the product. - Reflective
In contrast to the visceral level, we’re touching upon the conscious thought here, where the user consciously consider a product’s design. This happens, for example, when considering the image projected by a product to others. The visceral level unconsciously decides what we like, while the reflective level ponders, ‘Does everyone think like me? Am I right to like this product?’.
That was a brief introduction to emotional design, and I recommend reading the work of Aaron Walter and Don Norman if you wish to delve deeper. Now, let’s move on to exploring the application of this concept and its effects on our today example!
L’exemple de Mario Maker
Mario Maker is a video game released on Nintendo Switch in 2019 that allows us to create our own 2D Mario levels. This level design is done directly through an interface within the game, and that’s what we’ll be focusing on.
The interface consists of three parts, all overlaid on a live preview of the level being created. We can move within it as we wish.
- Level settings: the first part, on the left, lets you modify all settings: graphic visual, day or night, time limit, win conditions…
- Construction items: the second part is on the top. You can find and import 12 types of items often used in level design (blocs, enemies, game items…). Other items can be found thanks to the Search button. This one opens a new navigation with a complete item list filtered by categories. There is also a switch button for sound items on the left.
- Edition: finally, on the right, a classic edition nav: save, erase, undo, delete, switch file.
Edition —
Let’s talk about the edition part. This exists in almost all digital tools and usually always looks the same. However, here it’s different. We can see 4 features, each one associated with a character (a robot, an eraser with eyes, a dog and a rocket).
Benefits
Thanks to characters, features have a property kit: a visual design, a sound design, a name and sometimes a vibration on the controller. Here, the goal is to stimulate all the player perceptions(visual, sound and physical) and make it easier to link these perceptions to the feature.
There are also benefits to player feelings and affection because the features character can make him smile thanks to the shape, interaction or sound. All these phenomenons are very nice to upgrade the memorization and to make it positive, to create a good memory and a link with the player.
Let’s talk about Undodog — His kit: a name, a visual design, a sound, a feature. After a few uses of those features, the brain can link the dog, the bark and the visual to the undo feature and the controller button that triggers it. The brain learns quicker “to undo, it’s the dog” than “to undo, I have to use the B button of my controller”.
Furthermore, Mario Maker is a game played by children too. We can imagine that some children are not used to the classic undo feature. Here we only have to explain to the child that the dog let him undo, it’s more easy.
Disadvantages
Sometimes, if you do it badly or not perfectly, this process can make the feature more difficult to understand. If the character shows plainly the features like the eraser or camera here, there is no problem. Sometimes it’s not explicit like the dog or the robot, but we learn quickly to link them to their features. However, sometimes the visual design and the features are contradictory. Let’s take the example of the rocket. When we press the rocket, a 3s timer starts and then the rocket is launched. When I came back to Mario Maker to analyze the interface and write this article, some months after my last play on this game, I instantly linked the rocket to a launch and so to the publication of my level. However, the true feature of this button is the opposite of a launch: it resets your level and makes it back to zero.
The 3s timer makes the reset not instant and the animation is very interesting. However, I still don’t think it’s a good idea to link the reset feature to a rocket launch. Of course, after viewing the tutorial and if you play the game frequently, there will be no problem!
Finally, to make it easier to realize the importance and quality of the emotional design of Mario Maker, I made a classic version of the interface, without any emotions. You can see a very classic interface, similar to a lot of tools. We lose our characters, make some features and buttons more difficult to understand and, above all, we don’t stand out anymore from other tools and brands.
To got further —
It’s easy to imagine the use of a game art direction on the interface of a game, but you can also reverse it: interface characters/objects used as in-game characters.
We can find for example our Undodog or the robot inside the game, they give you some optional missions in the scenario mode of the game. That makes the link between the player and the character even stronger!
Players were not ready to see interface items take life inside the game, that will make them smile for sure. Furthermore, we can even imagine seeing these characters in the next Mario games as easter eggs. Players who will understand the easter eggs will feel privileged because they played Mario Maker. That will make a great memory, a good feeling and make the relation between the player and Mario universe stronger.
