UX Lessons Learned from Seven Classic Fairy Tales!

Master screenwriter Robert McKee once wrote: Stories are the currency of human communication. Stories are how we make sense of the world around us. The more we understand our surroundings, the better our chances of survival, and we exchange this survival knowledge through storytelling. Every story shared has a lesson we learned from the real world.

Today, our stories are mixed between the digital and physical worlds. We shuttle seamlessly between the two, often forgetting that the digital world does not necessarily conform to the laws of the real world, which can be confusing.

Fairy tales are popular and have survived to this day largely because of their simplicity: they appear to teach us a lesson about the real world in which we live. But these lessons can also be applied in the virtual digital world, and I will tell these stories from another perspective.

1. The Three Little Pigs

UX knowledge: It’s important to build on a solid foundation

Many times, websites and mobile apps skip planning and structuring work such as creating workflows, categories, analyzing site distribution, content matrices, etc., and quickly move from concept to UI design. Imagine trying to design a house from the inside that hasn't been built yet.

Three of the five elements of UX design are directly influenced by the organization and architecture of the website. As the story of the three little pigs reminds us, planning too hastily without adequate preparation can lead to a shaky foundation, which in the digital world means shoddy customer journeys, cluttered content, and a hard-to-navigate website. Once these problems arise, it is almost impossible for them to go away on their own. The website/app owner will be forced to stay on this unstable structure and patch up the cracks forever.

The good news is that the history of the web tells us that good architecture is mostly about keeping the following basics in mind: creating a hierarchy of content; organizing content logically; presenting content incrementally; using consistent and useful navigation; and providing clear signposts. The reason Wikipedia has been around for so long is because it executes the above basics very well.

△ The logical hierarchy of a website’s content

The best ways I’ve found to protect against the big bad wolf from destroying your website/app are: 1. Make a sitemap. 2. Write a "standards" document. Both documents should be visual. A sitemap should visualize the hierarchical grouping of content, while a standards document should lay out the rules for content management. For example, Standard 23: All pages/screens should have an omnipresent primary navigation. Only if a website is armed with these two documents can it have a greater chance of survival.

Take the time to build a stable structure.

2. The Princess and the Pea

UX Knowledge: Don’t Challenge User Expectations

Traditional websites consist of three key UI structures: a header, a body, and a footer. These are a tried and tested canvas for designers.

Over time, these components come to embody user expectations. For example, a header will usually contain: website name (and logo), main navigation, functional navigation, search function, login, etc. Additionally, the header area follows a pattern: the brand logo is usually placed on the far left side of the header.

Not all sites do this, and some believe that breaking the rules will open up better and more unique digital experiences. I'm not going to argue with these points, but it turns out that the vast majority of web pages follow this pattern.

The consistency of the global Internet increases the likelihood that users will see this pattern; the more they see a logo placed on the left side of a web page, the more they want it to be there. This means that users have expectations about a new website before they see it. This is called a mental model, and in digital product UX, a mental model means:

Mental models in digital products are about identifying meaning and saving time.

For example, a mental model of a house is that it has four walls, a roof, a window, and a door. When you approach any house, you know to look for the place that looks most like a door to get in, not a window. This saves you time and you won't have to evaluate every possible entrance. Similarly, for users, a website also contains similar mental models.

△ A mental model of a house

The story of the Princess and the Pea teaches us not to put things outside of where users expect them to be. Like a princess, if something is not what she expected, it will lead to a bad experience.

Likewise, creating a standards document can also help avoid creating a website that does not meet expectations. We can learn this through competitive analysis and user testing. Competitive analysis is often seen as a way to stay ahead of the competition, but in fact they can also help you predict the mental model of your users before they use your website or app.

Let’s say you are a car manufacturer. Almost every one of your target users who visits your website will also visit your competitor’s website. If your competitors put their navigation in the header, but you insist on putting it on the left. Your target audience will feel confused and disorganized when they visit your website. Suddenly, browsing your website requires thought and effort. An otherwise simple task becomes daunting and complicated because their expectations are unnecessarily challenged.

Users are sensitive, treat them like princesses.

3. Candy House

UX Knowledge: Users are always looking for their way home

The most famous fairy tale that influenced interface design is Hansel and Gretel, a story about two children who walked into the forest, were deceived by a witch, and eventually found their way home by following bread crumbs. Breadcrumbs are now a common feature of web design, especially for larger sites where content must be divided into sections and subsections. Breadcrumbs serve three main purposes: orientation, navigation, and reassurance. They use the site structure to tell users where they are now, and then use hyperlinks to allow them to return to previous locations.

Example of breadcrumbs on Argos.co.uk

The most important thing is that breadcrumb navigation can give people peace of mind. Most online activity involves a behavior called information foraging—the search for knowledge. Think about how many times you've looked up that actor whose name you couldn't remember on IMDB (Internet Movie Database). Typically, this act of “foraging” requires something deeper than a single search results page. In this case, breadcrumbs are the most effective.

Imagine you want to wrap your gift with a red bow. You search for bows on your favorite search engine and arrive at a page for an online retail store. If this site had a breadcrumb navigation, it might look something like this:

Gifts > Packaging Materials > Bows

Breadcrumbs provide context for the information you are viewing and reassure you that you are in the right place. If a breadcrumb looks like this:

Gifts > Sports and Leisure > Archery Tools > Bows

…then you will obviously lose confidence.

4. Goldilocks and the Three Bears

UX Knowledge: Anchors help provide context and emphasis to information

We are actually using this fairy tale to talk about an old UX principle: the Goldilocks effect. This effect often occurs when users are presented with three similar but different quantitative options at the same time. For example, three bowls of porridge at different temperatures.

This combination of three options at a specific scale results in two important situations being created: 1) The formation of two anchor points, high and low. 2) A definite middle option. (This is not to be confused with the decoy effect, which is a cognitive bias with a similar purpose but different implementation).

An anchor is a baseline of measurement that we create in order to understand the real world.

For example, you are planning to buy an expensive gemstone that you have never bought before and you get a quote of £5,000 from Dealer A. Get a quote of £10,000 from Dealer B. It looks like Dealer A is the better deal.

But when you get a quote of £100,000 from Dealer C, while Dealer A is still the best option, Dealer B suddenly doesn't seem so bad. If you bought this gem as a gift, Dealer A’s price might even seem cheap when compared to other more expensive gems.

Two anchor points A and B are introduced to determine the background environment. Ideally, we would look for more information, in this case more quotes, so that we can determine that A and B are normal quotes and C is a special case. However, when faced with limited information, we can only make judgments based on what we know.

In digital products, the Goldilocks effect can be used to encourage users to select specific options in order to accomplish our business goals. If we sell services or products online, we want to highlight one or the other. Then add two more options next to it. Doing so will increase its attractiveness in the eyes of users. It’s okay if the additional options are selected, but their main purpose on the page is to support and emphasize the star product.

assembla.com uses the Goldilocks effect to price its three monthly plans

Design still plays an important role in this effect. Color, distance, position, and font weight are all used to visually enhance the star product. But these options are anchors set on the stage.

Once an anchor point is set, it is difficult to change. That's why everyone feels that everything is so expensive now compared to the past. This is because prices have increased with inflation, but we have not changed our anchor. For example, I remember the first time I bought a packet of crisps I paid 20p. Now, 20 years later, when I pay 75p for a packet of crisps I still compare myself to that original anchor.

To borrow Descartes's statement "I think, therefore I am". The role of anchors in how we perceive the world tells us that we are the sum of our knowledge at any given time.

5. The Ugly Duckling

UX Knowledge: Beauty is relative

What is the main idea of ​​the story of the ugly duckling? Is it about overcoming provocative behavior, or celebrating inner beauty? Frankly speaking, I'm not sure.

For me, understanding the concept of relativity contained in the ugly duckling story is the most important thing that can help UX design. The ugly duckling, as the worst anchor in the same comparison, without his presence, the other companions would not be as good as they seem.

The same logic applies to designing multiple CTAs (call to action buttons) on a web page. Imagine you have a single CTA button (Button 1) on a page that prompts users to perform an action, such as buying an item or adding it to a shopping cart. A user browsing the page must make what is known as a "Hobson's choice," which is an exclusive choice between two options: a) buy or b) don't buy. When faced with this choice, most users will choose b) not to buy.

Now imagine that we added an additional button (Button 2) to the page. It is intentionally designed to be an option that requires more effort from the user but can still bring positive effects to our business behavior, such as sharing a link to the product to the user’s social channels. The button is the ugly duckling in this example. Studies have shown that placing Button 2 next to Button 1 will increase the click rate of Button 1. This is the so-called "Hobson+1 effect".

6. The Wolf is Coming

UX knowledge: Don’t mislead users with false information

When a user interacts with a website or app, information is communicated to the user in a variety of ways. From the grouping of content to the colors we choose, users are always guided and influenced by the signs we create, which is a cornerstone concept of symbol theory. (For more on symbol research and discussion of semiotics and UX design, see: Do icons need text?)

A notable example of the application of semiotics is affordances, one of the design principles. Coined by UX godfather Don Norman, affordance is defined as providing a trigger for action. For example, car door handles are designed to allow car users to open the car doors, so their design specifically encourages and assists the implementation of this type of behavior. In this example, the meaning of the sign communicated to the user is: this is for pulling apart.

Car door handles provide the affordance of “pull open”

In the two-dimensional world of web design, affordances are much harder to implement. In the early days of web design, the principle of skeuomorphism was proposed in an attempt to mirror the real world. For example, do you still remember the scene depth design that was once used on iOS6?

But later, with the application of flat design, many buttons that seemed to be no longer clickable were left in the original plan. The buttons have completely lost their affordances, making their meaning difficult to decipher.

This leaves users with an issue of trust. Are all rectangles buttons? This places a heavy responsibility on future web designers to ensure their designs are well thought out and, more importantly, consistent. After all, the interpretation of meaning comes from the process of repetition of experience. If blue underlined text on one page indicates a clickable link, we may infer that the same blue underlined text on another page provides the same functionality. If this is verified again, our thought process will generalize to a simplified pattern to deal with this specific style, which is "blue + text + underline = clickable link".

If we are receiving false signals, as the fable of the boy who cried wolf reminds us, problems arise. Without considering the consequences of his actions, the little boy's false alarm about the arrival of the wolves and the villagers' failure to find anything when they arrived were enough to make the villagers turn a blind eye to the warnings, which led to tragedy when the wolves really came.

Lyondell Basell uses blue text in the title, information, and text links, which creates confusion.

The same thing happens when users visit a site and receive unintended and erroneous instructions. If the owner of the website is a well-known brand, the adverse effects will be amplified because well-known brands themselves are authoritative. So the key is to design consistently, and it's worth reiterating that a good document always helps.

Remember: people naturally trust authority, but they will no longer trust authority if it lies.

7. The Emperor’s New Clothes

UX Knowledge: Don’t be afraid to challenge stereotypes

What a better way to end than to have to write a statement that specifically lists all the previous revelations!

The Emperor's New Clothes is a parable that warns people not to be trapped by pride. It reminds people that they should always question the information they are told.

Remember the picture roller? As an element that appeared in the early days of UX design and became very popular, almost every website is eager to put it on the homepage to display photo galleries, promotions and products. And many websites still do this today.

But the data shows that these are ineffective and even ugly. The main reason for the failure is that the main design intention of the image roller is to achieve the hiding and reproduction of content, which violates the most important principle of user enlightenment: re-identification in recall scenarios.

“Make objects, actions, and options visual to minimize the user’s memory load. The user shouldn’t have to remember information beyond the current paragraph.”

As users flip the roller, they are forced to remember the position of each option in order to make a predetermined decision. To make matters worse, we humans are wired to want to see the whole picture before making a decision. This means that if we know there are 25 options available to us, then we are likely to look at them all before making a choice. This is not user-friendly.

Just like the real world, the digital world we create is constantly changing. This scene will never last long. As the physical and digital worlds become increasingly intertwined, cyclical, evidence-based learning is the only way to understand how user experience is involved.

History tells us that every time a new digital interface is introduced (desktop computers, touchscreen devices, wearable technology, and virtual reality) our held beliefs about UX truths are questioned.

In such situations, UI design is forced to go back to square one and put in extra effort to help users adopt new technologies.

I still remember that when iOS first launched the skeuomorphic interface design, Apple did this deliberately to help users become familiar with the digital world more quickly through the real world.

Flat design has become the design standard for websites and apps, but this is not the case in the world of VR (virtual reality). In the virtual world a file might be better represented as a book on a bookshelf. Skeuomorphism may not be dead, but may continue to exist in cycles.

What we can learn here is that we cannot be sure that the knowledge we know today will continue to be used in the future.

Over time, the "carousel" may be removed. But we have to know that challenging conventions is difficult (it took Apple 6 iterations to have the confidence to launch flat design).

One solution is to adopt a phased reduction approach, an idea first proposed by Allan Grinshtein. The premise of this method is that users need to be familiar with the interface to the point where they no longer need obvious design clues. The design is ultimately determined by the user's familiarity with the interface.

As exposure increases, there will be less and less need for designers to guide users step by step. This will remove the part of UX that needs to cater to the masses and replace it with an increasingly personalized user experience.

If we were to create a graph to illustrate this, it might look like a formula like x+y=10. The X-axis is used to represent the user's expertise level, where 1 means the user is not very familiar with the UI and 10 means the user is very familiar with the UI. The Y-axis represents the degree to which we need to guide the user through the interface. 1 means not very necessary, 10 means very necessary.

It’s easy to imagine a future where responsive design isn’t just about how web pages adapt to size. It is an interface that adapts to different types of users. High-level users and low-level users will have different experiences customized for them.

In a way, this is a natural process of CRM (customer relationship management). In this process, as valuable customer relationships are accumulated, these business relationships can be transformed into business relationship assets and utilized, ultimately presenting users with more meaningful information at the interactive level. This is personalized design in the true sense, a data-driven design model that seeks to maximize impact.

If stories are the currency of human engagement, then UX design is the process of minting that coin. Created a mechanism that allows transactions to happen successfully.