cft

The masking principle applied to UI

Why users can not remember our interfaces


user

Marc Morera

3 years ago | 3 min read

Let me share with you my journey today…

… I took a cab using one of these apps.

Ride-hailing apps
Ride-hailing apps

… I checked my savings at one of these banking apps.

Banking apps
Banking apps

… I bought a pair of t-shirts through one of these retail apps.

Retail apps
Retail apps

By the end of the day, I used three different applications and I can’t remember any of them.

It’s a fact that companies avoid giving character to their interfaces. They design a brand but at the moment to develop an interface they hide it under a mask… just like Spider-man.

The masking effect

When Marvel launched Spider-man in 1963 the character immediately connected with the readers because, in contrast with the other superheroes, all children were able to imagine themselves under the mask.

Spider-Man: Into the Spider-Verse (2018)
Spider-Man: Into the Spider-Verse (2018)

In Scott McCloud’s awesome book Understanding Comics, he talks about a technique in illustration called “the masking effect». The underlying principle is this:

Users want to see themselves in other things. But the more realistic or detailed a drawing of a character gets, the fewer people can project themselves in that character.

An emoji can apply to everyone, but a photo can only apply to one person. The point is that we can emphasize with cartoonish simple characters but we struggle with realistically drawn ones.

Understanding Comics: The Invisible Art by Scott McCloud (1993)
Understanding Comics: The Invisible Art by Scott McCloud (1993)

Recently we had another example of how people perceive empathy through “the masking effect” with “Sonic the Hedgehog” film.

People loved Sonic’s original pixel design but when Sony Pictures launched the movie trailer and revealed the new realistic Sonic’s appearance, people immediately hatted it.

Sonic character evolution
Sonic character evolution

Due to audience feedback, people have forced the studio to reshoot the movie with a new cartoonish character design.

Avoiding the wrong perception

Sadly I feel UI designers are embracing this principle as a pattern. Not as cartoon characters, we are using it as politicians.

Politicians apply “the masking effect” into their own image. Look at this picture from the 2018 Spanish general election candidates. They look exactly the same. Same suit with neutral colors and same haircut. Nothing sticking out, just an accent color on their tie.

Pablo Casado (PP), Pedro Sanchez (PSOE) and Albert Rivera (C’s)
Pablo Casado (PP), Pedro Sanchez (PSOE) and Albert Rivera (C’s)

Now, look at the interfaces of these banking applications. It’s the same language.

Banking apps
Banking apps

Just like politicians, these designs are looking for empathy with a common face without sharing a message because they are just too afraid to provide the wrong perception.

We are not building empathy because we are too afraid that users may leave us.

We are using flat design because it’s more nitid, makes speedier pages, and has easy adaptability. We use native fonts to ensure effective readability on all the screens. We choose blue as the accent color because it fits in most of all the component’s status.

We base our interaction on a navigation bar to provide quick and intuitive flow in web and mobile interfaces…

Well, it does not looks like we are designing, it looks like we are following a recipe.

Don’t take me wrong, that’s not necessarily something bad. I’m aware that we design it simply because we want to make it functional. But it feels like we are designing lazily and, just as politicians, we are too afraid to leave the safe path. In the end, we will come out with the same product as our competitors, a fine product for everyone but not especial to anyone.

So now that we already know how to make something visually functional is time to try better. Design something usable and delightful is not easy but that’s the real UI designer job.

Let users remember you

So how may we compose an interface where users can project themselves without coming up with another cold default random design?

If we look beyond Spider-man, Tintin, or manga characters we see a rich and detailed world. The only element designed minimally is their face, simple enough to share emotions and connect with users. So how they make these characters recognizable?

Well, it’s pretty obvious, look at their hair.

Tintin (Hergé), Goku (Akira Toriyama) and Lisa (Matt Groening)
Tintin (Hergé), Goku (Akira Toriyama) and Lisa (Matt Groening)

We should find a way to do the same with our interfaces. Let’s ideate an interaction, a component, or a wording to connect with the users. Don’t be afraid to be repudiated from the mass, identify your target. Empathize with your users using the masking effect and add something to make the interaction unique.

Let’s add a layer of personality to our designs. Something to let users remember you.

Upvote


user
Created by

Marc Morera


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles