Heuristic Usability Evaluation of The Witcher 3: Wild Hunt’s User Interface on PS4

by Ash Mishra

From an indie to a AAA title, playing a video game feels like diving in a vibrant art form, where your actions mould the story being told. It is unlike any other art form, and yet, like all of them. Blowing-up buildings, slaying monsters, eating mushrooms, shedding tears, or laughing maniacally while dancing on the corpse of your friend, video games allow you to let loose in the most heart-felt or questionable ways.
 
Which is why, it is understandable to forget that video games are still, first and foremost, a piece of software, written by lifeless developers, too knackered by chugging coffee and crunching away 20 hours a day, just so you can strike those perfect poses on the decaying husk of your dead opponent. (Can’t help doing it, can you).
 
And so, to help these developers deliver even more immersive experiences, this post evaluates some of the shortcomings of the UI design decisions made by the popular action-RPG, The Witcher 3; which managed to swoon the hearts of players and game developers alike; and suggest ways in which this user experience (UX) can be improved. (As if the developers do not already have enough on their plates). This is achieved via a usability inspection method, called Heuristic Evaluation (ugh, just call it what it is, passing judgement by wannabe specialists).
 
Having read this far, not bad for the twitter generation, what follows is this post’s contents, to help you decide whether to keep on reading or watch that funny pets video in the next tab, no hard feelings.

• Witcher 3 — What’s the Big Deal?
• Heuristic Evaluation Process
• Task 1: Using the Quick Menu
• Task 2: Using the HUD
• Task 3: Using the Game Menu
• Final Thoughts

Witcher 3 - What’s the Big Deal?

Witcher 3: Main Menu

The Witcher 3: Wild Hunt is an action role-playing game (RPG), based on a series of fantasy novels and short stories, collectively referred to as the Witcher, by the Polish author Andrzej Sapkowski. This game is the third instalment in the video-game series, where you play as Geralt, a Witcher ( = an itinerant monster-slayer for hire). It was developed by CD Projekt Red, and published by CD Projekt on May 19th, 2015.
 
With over 800 accolades and over 15 million copies sold, Witcher 3 has not only enjoyed both a critical and commercial success, spurring a world-wide cult following, but within one year of its release, has also set the record of being the Most Awarded Game of All Time.
 
Touted for its innovative quest design, deep storytelling, and satisfying combat, Witcher 3 still suffers from severe usability issues (compounded on consoles), some of which, we will explore in this post.

Heuristic Evaluation Process

Now let me make one thing clear, given the popularity and loyalty towards the Witcher 3, I am in no way critiquing the quest design, the combat, or the narrative capabilities of this game, that is, the mechanics. Just the way it handles some UI interactions, and how it can be improved. 

And to do so, we systematically follow heuristics prescribed below, to help pass the blame, I mean, to help make our evaluations free from personal biases:  

• Jakob Nielson’s 9 usability Heuristics (hereby, referred to as NH#)
• Desurvire and Wiberg’s PLAY heuristics. In particular, Category 3: Usability and Game Mechanics from Table 1. (hereby, referred to as PLAY.##)

To learn more, I suggest you comb through Dr. Timothy C. Lethbridge’s Software Usability course-notes.

TASK 1: Using the Quick Menu

When using the quick menu (by pressing L1 on the dual-shock controller), you will see a number of usability issues:
 

Issue #1: The text is too small to read, with lots of empty space

 

Quick Menu: All the issues

• After pressing the L1 button, the quick menu appears full-screen showing different signs and items in a circular ring, as shown above. Note: In Witcher, a “sign” just means a “quick magic spell”.
• And as you can see, the potions legend on lower-left side, the button legend on bottom-centre and the textual description of current sign/item above the button legend is too small (and visually dull) to read. Especially, when you are sitting on a couch, 6 feet away. This UI design issue causes undue memory load, thus primarily violating the NH3 heuristic.

Can Bob fix it?

• On the lower left corner, use a single d-pad image, and place the appropriate potion icons above and below the up and down arrows respectively. This reduces confusion and enhances the cognitive placement. (Currently, there are three d-pad icons!)
• Make all the text and icons bigger as well, to cover most of the empty space (like the button legend on the bottom-centre, and the potion buffs on the upper left side).
• Could also allow the use of L2 trigger to scale-up the UI and R2 trigger to scale-down the UI. These buttons are unused in most of the menus, and can provide a handy, universal solution to all the UI scaling issues.

Issue #2: Sign names and icons are confusing, with bad help-text placement

 

Quick Menu: Confusing signs and help-text

• The sign names are too cryptic. The term “sign” itself can be too confusing for some.
• When you rotate the L stick and toggle between different signs, the help text is placed far below the ring, making it hard to read. And even if you can read it, it takes a precious second to do so, potentially changing the outcome of that boss battle.
• Also, except for YRDEN, all the other signs are triangular in shape, differing only in its orientations and shape-openings, making it hard to visually associate the effects of the sign with the icon.
• These UI design problems violate NH1, NH2, and NH3 heuristics.

 

Can Bob fix it?

 

• For the sign, why not just call it a magic spell?
• For the sign icons in the ring, instead of using terms like IGNI, just call it Fire. Instead of QUEN, call it Shield, etc.
• Change the sign icons to be representative of the effect. Like a flame icon for IGNI, a shield icon for QUEN, and so on.
• For the help text, instead of just showing a block of stationary text, hover a gif-like preview image (showing the effect of the sign), with a simple text description below it (no more than 5 words). This will help players visualise the effect of the sign without moving their eyes much (since now, it is floating next to the icon), reducing casting time and cognitive load.

Issue #3: Meditation, an important activity, should be made more prominent in the Quick Menu

 

Quick Menu: Obscurity of the Meditation activity

• Usually meditation is accessed from the game menu (by pressing the touch pad, a few arrow keys, then finally X). But there is a shortcut to using it, by pressing L1 (the quick menu) and then Square! 
• This shortcut, however, is quite easy to miss on the quick menu (as it is placed in the middle of the button legend at the bottom, which players rarely read, as shown above). 
• Given how important the meditation activity is in the Witcher 3, it should be more prominent. 

Can Bob fix it?

• To fix this NH3 violation, we can put the meditate icon in the centre of the ring, making it the default highlight. So by pressing L1 and then X, it can be activated as usual. But now, the icon is front and centre, and greyed-out during combat (since you cannot meditate during combat).

TASK 2: Using the HUD

The HUD (Heads-Up Display) in the Witcher 3

 

Issue #4: Overloaded gauges on the top left corner are hard to read, with bad feedback

 

HUD: Overloaded and complicated gauges (annotated)

• All the different indicators are bundled together on the top-left corner of the screen. This includes the Health, the Sign Charge (basically, the Magic Points), the Adrenaline, the Active Sign, the Toxicity, and the Level Progress.
• The result is so cramped together, that it makes it hard to absorb all the information with just a quick glance, especially during a combat against a monster.
• Even if it could be absorbed, it still diverts your attention away from the action, be it even for a moment. Thus, breaking the immersion.
• As such, it is an overly complicated and confusing design, which provides poor feedback, is distracting, and fails to highlight the distinctions, breaking PLAY.B2, PLAY.E1, PLAY.F3, NH2, and NH3 heuristics.

Can Bob fix it?

The whole design needs re-thinking. First of all, all the gauges need to be removed. It completely breaks the illusion built by the game’s beautiful world. Instead, each element can be approached this way:

• Why do we need a health bar? Instead, when the player is on death’s door, just make everything look red and disorienting, with the “bloody fish-eye effect”, and add a huge red gauge, at about 3/4th vertical screen distance from the top, that means, “you are dying!!! Either consume food or retreat quickly and heal yourself!”. This method not only draws the player’s attention to its predicament but also keeps the game immersive.
• Same for toxicity. There is no need for a bar. Can just add a slightly greenish tint to everything, suggesting the player that it is about to be poisoned to death. Can also make Geralt act all loopy (with bubbles popping up his head) for comic effect.
• The adrenaline gauge (3 red blocks) can be replaced with visual effects. For example, when the adrenaline fills up, Geralt’s body sparks flashes of orange light (suggesting that he is getting pumped up). And once it reaches full, Geralt is enveloped by the orange halo, until you use an adrenaline move or the combat ends.
• The Sign charge, or Magic Points (MP), meter can be replaced with a particle effect. When the magic is restoring, orbs of light are being absorbed from the surroundings into Geralt, and once full, Geralt obtains a golden, pulsating glow, suggesting his body is brimming with magic. (Just think Dragonball Z).
• There is no need to show the current level progression on the HUD.
• Instead of using a small icon to show the current Sign (magic spell), can have one of the arms of Geralt swirl with light (or some other effect). Different colours of light can be associated with different signs. Or, can have a big sign icon hovering over Geralt’s fist, suggesting which sign is equipped right now.
• The goal should be to make all the elements be a part of the game world, which makes the experience much more intuitive.

Issue #5: Unimmersive and Distractive Mini-map

HUD: Annotated mini-map (image credit)

• Another HUD usability issue, that becomes most apparent while riding your horse.
• When riding to an objective, you have to keep looking at the mini-map to follow the route. Thus, the attention is drawn away from the passing scenery and the player is forced to focus on that little area of the screen on the top right corner.
• Moreover, most “points of interest” are labelled on the mini-map, instead of on the game world itself. This further encourages (or forces) the player to fixate on the mini-map instead of the actual game-world.
• Over-reliance on mini-maps is a common interaction style problem, caused by a distracting and an overly-complicated design choice. It breaks PLAY.B2, PLAY.F3 heuristics.

Can Bob fix it?

• Instead of relying on the mini-map, can add a flat, horizontal compass on the top-center part of the screen, like Skyrim and Assassin’s Creed Odyssey. This approach is less distracting and puts the compass right in the player’s field of view, allowing it to enjoy the scenery.
• Or, one can use the elements from the game-world itself to help with navigation. For example, Geralt could automatically summon some magical fireflies that light the way, esp. when stuck. Or a magic spell can make the grass on the path glow, helping you flow it without distractions. This is a nice way to organically provide help.

Issue #6: Button legends are hard to comprehend

 

HUD: Highlighted Button Legends

HUD: Bottom-right button legend

• Finally, the button legend at the bottom-right corner of the HUD is hard to comprehend, because of the way the buttons are laid out. Everything is listed vertically, adding cognitive load when looking at the button scheme and then translating it on your controller. It becomes especially hard for kids, older players, and people with disabilities.
• Similarly, the quick equipment legend, on the bottom-left side of the HUD, is mapped on the d-pad keys, but is arranged vertically, making it very confusing to use.
• These decisions violate NH3 and PLAY.E1 heuristics.

Can Bob fix it?

• You can aid cognitive placement by laying out the legend in the same layout as the buttons on the controllers. You can also mask it in a white layer at 50% alpha (to preserve game-world immersion) and when an action is pressed, make the selected button highlight in a colourful and vibrant way, so that kids and novices can learn to associate with it.
• Similarly, the equipment icons can be laid around a single d-pad icon to help with cognitive placement. In fact, it can be moved to the lower-right side (next to the button legend), so that all the control hints are in the same place.

TASK 3: Using the Game Menu

Game menu: Annotated Issues

When you press the TOUCHPAD in the game, a game menu fades into existence, which allows you to access the Glossary, the Inventory, the Character customisation tools, and so on. Some of the main issues plaguing this system is:

Issue #7: Initially, some top-bar icons can be confusing

• For example, the leftmost icon on the top looks like a bell, with 21/60 number before it (suggesting that 60 is the limit, and I am at 21). But, what exactly does it mean? 
• Turns out, it means “the amount of weight you can carry”. Meaning, there is a limit to how much you can loot in the Witcher world, and you need to be mindful of what you decide to carry. But portraying that concept as a bell icon alone is cryptic and confusing.
• This is a great example of poor labelling, which breaks NH2 and PLAY.F3 heuristics.

Can Bob fix it?

• A simple fix: show icon and text, instead of an icon alone.

Issue #8: Game menu breaks immersion and takes too long to navigate

• A more pressing issue with the game menu is the way it fades into existence, when you press the touchpad. It feels like transitioning from an immersive world to some artificial menu, destroying that reality bubble. 
• Then, it takes far too long to navigate the menu, because you have to keep pressing left/right/up/down to navigate and X to select. There are seven main menu options and 1 to 7 sub-menu options in each, making it very frustrating. 
• A redundant design, it breaks PLAY.F1, PLAY.G1 heuristics.

Can Bob fix it?

I suggest two ways to fix it:

1. Instead of a linear layout, why not adapt the L-stick Ring layout (like the quick menu). It will reduce button presses, add consistency to the system and make it much more fluid and faster to use. One way this could be implemented is via:
• A recursive rotary dial, where the first ring of icons are the main ones (Glossary, Alchemy, Inventory, World map, Quests, Character, Meditation)
• Then, pointing to one of them and pressing X (say Glossary) will transition the Glossary icon to the centre, and fade out the other icons on the ring, and replace them with glossary’s sub-menu icons + text: Bestiary, Tutorial, Characters, Books, Crafting.
• This way, all the selection is done via one fluid analog stick motion. Pressing X will make a selection, which is quite a universal operation, leading to simplicity and reduced cognitive load.
2. But the first method still breaks continuity, as it is not part of the game world. So, another way this could be implemented is:
• When touch pad is pressed, Geralt pulls out a diary and opens it to reveal a bookish version of an interface.
• Instead of the original or the first style though, a tabbed interface can be used (with bookmarks popping out of the diary to show these tabs).
• The player can use the motion controls of the controller to move the controller and see a faint pointer (which turns out to be Geralt’s finger) replicate the movement on the diary’s page.
• Since this dairy is a magical item, when Geralt hovers his finger on an entry (like Bestiary) using the motion control, and then touches it (by the player pressing X), the ink on the paper re-arranges itself to show the new contents (like The Marauder’s Map in Harry Potter).
• This whole experience makes the game feel magical, and help immerse yourself in role playing as Geralt, a Witcher.

Final thoughts…

Now before you switch to that funny pets video, it helps to reflect on the fact that, even with hundreds and thousands of individuals working on a title for over 3 to 5 years (a typical AAA turnaround time), spending hundreds of thousands of X currency on researching, prototyping, testing, debugging, re-iterating, and so on, obvious usability issues, like the ones we saw, still somehow manage to slip through.

This is understandable, especially with video games, due to the sheer technical and artistic challenges it presents. But what any developer or creator needs to take away from this is, "regardless of how intricate your quest design is, or how moving your narrative is, or how fun the combat is, it is rendered less impactful if the system keeps hindering the player, instead of delivering a seamless experience".

So does that mean, well-executed cliches will do better than fresh-yet-awkward experiences? Is it the ideas or the usability of the ideas that matter more in video games? Or are we just too domesticated, from using bad interfaces in video games, that it just does not matter for an average gamer…?

Food for thought.