UXcellence Exploring excellent user experience

The Legend of Zelda: Breath of the Wild may not be the fastest selling game in history, but it was the fastest selling launch title Nintendo’s ever had. In fact, Nintendo sold more copies of the game than they did Switch consoles to play it with. Though a drastic departure from previous Zelda games, it is easily one of the best games I’ve ever played. Over countless hours in the last two months, I’ve learned many valuable lessons that I hope to apply to my own design process and products.

Slowly at first

Link just wants to glide and this old man won't let him.
Just let me glide already! Breath of the Wild eases new players into the game on the Great Plateau.

In Breath of the Wild, you start out on the Great Plateau - a sheltered area you can only leave after completing a series of tasks. (Trying to leave earlier results in a plummet to certain death.) These tasks introduce you to many of the major mechanics of the game, unlocking new abilities one at a time. Each new ability increases your bag of tricks for handling challenges without overwhelming you all at once.

In design, we call this progressive disclosure.

Rather than overwhelm users with the full breadth of capability when they start using your product, think about the most essential features and introduce them progressively. Often you can do this by building from one task to the next. For example: in a social media application, this can be as simple a flow as setting up a profile, then finding friends, then reacting to their content, and finally posting your own.

Just one more thing…

Link pondering an unopened treasure chest.
Always be rewarding. Whether an actual treasure chest, unlocking a new part of the map, or learning more of the storyline, the rewards keep you playing.

You’ll find yourself saying “Just one more …” again and again as you fight a new monster, explore what’s over the next hill, or pick your hundredth mushroom of the evening. While the world of Hyrule is huge, it never feels empty. Whether there’s a monster camp in a distant grove, an interesting rock pile, or a mysterious ruined building, there are cues scattered about to entice you to keep exploring.

That’s only the first step in the habit loop that keeps you coming back for more. By fighting monsters, uncovering hidden chests, or talking with characters, your actions build on that habit. Finally Nintendo cements that habit by rewarding you: with victory (or sometimes defeat), with an unexpected treasure, or with more story about the world.

That’s the habit loop in a nutshell: show a cue that leads to a routine behavior that is in turn randomly rewarded.

Use the habit loop for good.

By cueing your users to take actions and then rewarding them, you create a positive habit loop that gets them hooked. How? Cues can be as simple as call to action buttons, notifications, or even just a feeling of boredom. Habitual actions are our programmed response to those cues. Rewards are the shiny gold star at the end that keep us coming back. Rewards don’t have to be as obvious as a badge or prize. Often the best rewards are social feedback (likes, comments, etc.) or intrinsic feedback like the feeling of accomplishment at completing a task.

Be careful, though. Don’t use the habit loop to enforce negative behavior. It can easily lead to addictions where users constantly check in to avoid FOMO (fear of missing out). While this can be good for your product in the short term, ultimately it will leave your users anxious and dissatisfied.

Casting a wide net

Link poses for a selfie in front of Hyrule Castle
How do I look? You can take selfies in the game to share with your friends.

If you receive the UXcellence monthly email, then this won’t be news to you. (If you don’t get the monthly email, I highly recommend it!) With its open world and drastically different approach from previous Zelda games, Breath of the Wild could easily have turned many long-time players away. Instead, by building a game that appeals to multiple play styles, it’s gotten nearly universal acclaim (with an incredible 97% at Metacritic).

I could happily wander the world for hours, exploring whatever interesting thing appears around the next bend of the road. My wife loves the puzzles, seeking out shrines to solve. Another friend plays just to see how many monsters he can kill in a single epic battle. Others I know love following the storyline, collecting rare gear, playing the scattered mini-games, or seeking out treasure.

What can designers learn?

Your product may not revolve around fighting monsters, treasure hunting, or solving puzzles. You should still consider how different people approach your product and what their motivation may be. A multifaceted experience can help your product connect with and reward more people.

Multiple routes to accomplish goals

For every obvious route, Link could take the path less traveled.
Hmm, which way today? There’s no single way to get most places or solve most puzzles.

Breath of the Wild has an impressive physics engine and realistic terrain. You can use magnetic skills to lift heavy metal objects and build structures. You can climb high mountains or towers, then glide down and surprise foes. For every obvious path through a winding canyon or dark forest, you can almost always opt to take the road less traveled.

The game designers never expect players to take the direct, obvious route to the end. In fact, you can skip straight to the end of the game and fight the final battle shortly after getting off the Great Plateau. No matter what your current goal is, there are often several ways of accomplishing it. Getting into a heavily fortified area? You can fight your way through, sneak in from behind, or glide down from above.

Focus on the goals; forget the happy path

We designers love happy paths. First the user does this, then that, then they finally get to their goal. The more complicated the flow, though, the more likely it is that the user never reaches their goal at all. Instead, we should keep our eyes on the goal: what does the user actually want to accomplish? How might we help them get there from different angles? How would they accomplish their goal with a touch device? What about keyboard only?

Marking up the map

The map features stamps and pins.
Stamp it up! You can customize the map with your own stamps and pins to make finding things easier.

As you explore the vast world, you’ll unlock different portions of your map. What was once blank space will fill in with terrain, shrines, markers, and towns. You can even add your own marks to the map, in the form of pins and stamps. By zooming in with the scope control, you can “pin” an interesting looking spot. This adds a brightly colored beacon to your map. (The mapping of 3D space to a 2D map works surprisingly well.) By heading in the direction of the beacon, this helps you navigate what could otherwise be tricky terrain. Then once you arrive at the beacon, it automatically disappears (making room for you to place it again).

Stamps let you add permanent marks with various icons (like a pot, a star, a sword, a bow, and others). It’s an easy way to remember a location for later: like a cooking pot (which are hard to find away from towns), a shrine you still need to unlock, or even a monster you want to fight when you get stronger.

Navigating your way

Getting around your site or product may be a snap if you’ve got a solid structure founded in your user’s mental model. You can also provide ways for them to get back to specific content. For instance, in Basecamp users can bookmark frequently used documents or messages to find them easily.

Show me what’s useful

Link's Stasis ability can stop time, and also shows interactive objects in bright yellow
So many shinies! Using a special ability, you can quickly see interactive objects and enemies.

Link has several tools to help him discover things. One of his abilities, Stasis, will turn most interactive elements yellow while activated (and when you upgrade it, it will even turn most enemies yellow). Technically you can then use the ability on those items or enemies to freeze them in time for a brief period. But one of my favorite ways to use it is activating it while moving to find items I can pick up and seeing enemies in advance.

Another tool you’ll use early on is the Sheikah Sensor. At first, it’s mostly helpful in telling you when you’re approaching a shrine. It beeps audibly and a small icon with a basic rangefinder pulses to let you know how near or far you are. By upgrading the sensor, you unlock the ability to find almost any useful object simply by taking a picture of it and then setting it as the item to track with your sensor.

Findability+

The parallels here with digital design are pretty direct:

  • Make actionable items (buttons, links, etc.) obvious through color or other visual cues.
  • Create focus styles that clearly show the selected item.
  • When users have searched for specific keywords, highlight them.

Conversational context

Link standing on top of a table talking to a shop vendor
Excuse me. Turns out shop vendors don’t like you standing on their tables.

As Link explores the towns, stables, and other places in Hyrule, he talks with a lot of people. Amazingly, many conversations change depending on when you see the character, where you see them, the weather, what you have in your bags, or even where you are standing when you talk with them.

In the real world, this is completely normal. We take in hundreds of cues about a person as we start talking with them, and what we say depends on the overall context we perceive. Do they look happy, sad, rushed? When did we last see them? What are some things we have in common? What are they wearing? What have they said previously?

Losing the thread

Most AI we interact with (even some of the more advanced systems like Siri, Alexa, and Google) forget context from one statement to the next. Go ahead and ask them about the weather today. Now just say “[Insert AI trigger here], how about tomorrow?” That’s a pretty simple cue about the previous request, but even that can be hit or miss.

If your product uses conversational design techniques, find ways to remember and react based on the contextual clues that your user provides.

Information where you need it

Your inventory is a treasure trove of useful information
What am I craving? Clever use of icons, numbers, and infographics gives you a TON of information at a quick glance.

One subtle nicety you may not notice is how important information is constantly right where you need it. When you fire an arrow, the number of arrows you have left is right there on the crosshair. Different foods and armor can give different bonuses, which you can quickly see as simple icons overlaid on the item. You can easily see by a simple number how strong that new weapon or shield is and whether it’s better or worse than what you are holding.

A stitch in time saves…

By presenting the information your users want in context, you can save them unnecessary work. Placing simple status icons, sparklines, or styled data beside relevant content makes it easier to quickly parse out meaning. How can you save a step by showing contextual information?

Rich music sets the scene

Link enjoying some music in Rito village.
Just enjoying some tunes. The music throughout is beautiful and enriches the story immensely.

The music in Breath of the Wild is perhaps its biggest unsung hero. It’s ever-present but often so subtle that you don’t outwardly notice it. That said, music is often your first cue to what’s going to happen on screen. While taking my horse for a leisurely gallop, my son knew that I was going to be attacked before a single monster entered the frame. Is my son a psychic? Nope, the music changed.

Even more wonderfully, there are several themes that — as the story progresses — become more complex and interweave multiple melodies and styles. They serve as another tiny reward for advancing the story.

Visually telling stories

While sound and music may not always be an option, particularly with web-based products, we can still tell stories using visual cues.

  • Differentiate sections and types of content with color.
  • Use transitions and animation to direct the user’s eyes to where changes occur.
  • Use imagery and typography to convey the right mood.
  • Set a rhythmic scale and vertical on your type so it flows more easily.
  • Build atop grids that give your layout a balanced (or unbalanced) symmetry.

Constraints

Your weapons always break at the worst moment.
Dang it, not again! Link breaks more weapons than anyone I know.

There are times when Link’s weapon will break while fighting an enemy, resulting in a mad scramble to replace it. This may be an unpopular opinion, but I think the weapon durability system in Breath of the Wild is kind of genius. It forces players to be creative and choose what play style they prefer. Similarly, the small number of weapon slots you start off with means you can’t stockpile every single weapon you come across.

The real problem with the weapon durability system isn’t that weapons break. It’s that there’s no way to tell how soon a weapon is going to break until it’s nearly broken.

Artificial constraints added

Constraints are seen as a weakness, but they can foster creativity and skill. Twitter still only allows people to post 140 characters per tweet. Vine was built on 6 second videos. By artificially constraining their services, Twitter and Vine force brevity, which in turn leads to more creative use of their platform AND skill at conveying an idea in as few words as possible.

Just as with the durability system, consider how to inform your users how close they are to the artificial limit.

Personalization

Link wearing a luchador outfit with different color options displayed
So stylin’! You can dye armor sets or individual pieces in 15 different colors, then mix and match to get your own look.

Last but not least, you can customize Link’s world in fun ways to give it your own personal touch. After all, you’ll probably play the game for more than a couple hours and it’ll be more fun if it feels like you had a hand in it. Here are a few ways you can personalize Breath of the Wild to your liking:

  • You can dye Link’s armor different colors.
  • You can name your horses, change their hair style, and give them different bridles and saddles.
  • You can buy a house and hang up your favorite weapons in it.

Making it your own

Personalization in products is how your users make the “house” you’ve built into their “home.” There are many ways to do this:

  • In Profiles: Can users add their own avatar, choose a cover image, or set colors for their profile page?
  • With Content: Can users favorite items and pin them to their profile? Can they choose what’s shown prominently?
  • By Location: Can users get recommendations by their location?
  • Through Preferences: Can users set their tastes to get filtered results?
  • By Previous History: Do you recommend content based on its similarity to other things users have been interested in?

Conclusion

Designers of all types can learn a lot by studying what works in great video games. Successful games hook players early and continuously reward player habits to keep them coming back for more. Game designers appeal to different play styles, and they enable players to take different routes to reach their goals. Great games show what players can use and help them navigate a complex world. Games are at the forefront of reactive intelligence, crafting stories that reflect the actions that players have taken. Because players need to react in real-time, the best games have mastered the art of instant feedback. Great games tell great stories and augment them with visuals, audio, and design that enhance the narrative. Game designers challenge players by placing constraints that force them to think creatively. And the best games let players make their own place in the world.

Take some time to think about how you can apply some of the lessons above to your own products. Consider picking up a copy of The Legend of Zelda: Breath of the Wild. Then read some more about design and video games:

Was this helpful? Share it!

Explore more like this