Context

When I first played Breath of the Wild, I was in awe at its masterfully crafted Game Design and even more so, how it's UI was supporting it all the way through, but I have engaged with the next installment, Zelda Tears of the Kingdom, and found that it felt lackluster in comparison.

Problem

After delving deeper, experimenting and analyzing it myself in game, reading online forums and articles, I found that as both games were focused on keeping the UI as reductionist as possible, the added features of TOTK had only made that more challenging, making its UI more prevalent than it had been in BOTW which went against the immersion a more reductionist UI had achieved.

Objective

Improve upon the UX of the interfaces in TOTK by optimizing and reducing the amount of time spent engaging in the UI.

Defining the Problem

Analyzing and Assessing Zelda TOTK’s Current UI

I decided on this topic for one main reason, I already love the UI in this game and found it to have solved numerous issues I had with the previous installment in the franchise and I can tell the UX Designers who worked on it had clear intentions related to the overall Game Design that led to every aspect of the UI. However, despite this and how objectively effective the experience using the interface was, it is criticized often by me and many others for the new problems created that go against the overall Game Design philosophy. This inadvertently made me curious to see if I could use my new skills to improve upon a design that is already so effective and that I have personal understanding of.

How might we lean into the strengths of the Zelda TOTK UI to promote immersion and flow?

The main strengths of the interface is it’s seemingly sole purpose of keeping players out of the menus as much as possible, reducing time outside of the game world and maintaining player’s focus on what is happening in front of them. However, it’s shortcomings seem to be where the design has room to improve in the same regard. The in-game HUD works great as it stays minimal but the menus from in-game to the inventory can end up chaotic and clunky in practice.

more specifically...

How might we further optimize the implementation of Quick Menus in Zelda TOTK to reduce time spent outside of the game?

Although I initially wanted to tackle more aspects of the interface like the inventory, it has become clear that this direction (quick menus) is the biggest obstacle to what I have identified as the strength and intentions of the current UX design (retaining immersion). The introduction of quick menus itself works very effectively for this but at times feels like it also works against it as it has multiple ways it can be executed better.

Conceptualise and Design

Ability Wheel

To begin with, I took the advice from the Expert Review and began with Card Sorting for the abilities.

Sketches

Final Sketch

Item Selector

Sketches

Visual Design Direction

---

Original Ability Wheel and Item Selector

Ability Wheel Mockup Iterations

I realized quickly while making the default states that having two wheels would increase the number of clicks and thus add to the micro-decisions and increase bandwith required when using the menus, so I quickly decided to abandon the first section splitting the sages and abilities and instead integrate them into one menu. This may sound like a minor issue, but as the menu is used the most often in the game, an additional click, decision, seconds all add up so pursuing even more reduction is the optimal way forward.

Default Versions

Hover State

Toggle State Versions

Sage Toggle From Link Ability Wheel

While creating the mockups, I realized by allowing players to toggle the sage abilities from the ability wheel, I can reduce the UI even further by halving the amount of clicks. This would require holding the stick against the ability with the corresponding sage color.

Final Prototype

Ability Wheel

Default with Current Ability and 3 Sages Active

This design prioritizes sleekness and futurism in its aesthetic while retaining the tribal patterns prevalent in the original in-game technology. It does this by providing as much information as possible with the least amount of obstruction to the in game world. This is inspired by the reductionist design philosophy exhibited throughout the game, for example in the hidden-until-pertinent stamina wheel.

Other important changes include removing redundant/irrelevant features based on research and card sorting (map, amiibo, camera) to hopefully reduce user mental bandwith and allow for faster, streamlined use of the menu. The remaining functions are all abilities and were rearranged in a logical way; ascend at the top and building tools grouped at the bottom.

Hover State

Having the center circle react to joystick movement will be most of the visual reactivity needed, aided further by the highlighting of the hovered ability with its corresponding color.

Hover State Held to Toggle Sage

Having active sages displayed will suggest to players a way to toggle them from this menu. This is previously only possible in the inventory screen which I am trying to avoid to keep players in the game world and out of menus as much as possible, in order to keep immersion from breaking. Furthermore, adding a pulse animation after a few seconds hovered will reveal the corresponding sage icon, taking full advantage of the convenient color coding in the original game.

Item Selector

This design keeps with the new aesthetic while adding an important function also aimed at speeding up and streamlining the use of menus to retain immersion. This is done by simply allowing players to favorite certain materials for throwing and fusing. In combination with the sorting function of the original design, it should make the use of the item/fuse menu much faster.

Next Project