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.

 

A Heuristic Evaluation of LeetCode

by Xuejing Ma

What is LeetCode?

LeetCode is a famous online programming website. It helps software engineers, computer science students, and aspiring engineers improve programming skills, prepare for technical interviews and get their dream jobs.

LeetCode provides more than 1000 coding problems. Users can use the embedded programming interface to write a solution code for each problem. After submitting your solution, the system will automatically judge your answer. If the answer is correct and accepted, the system will give you a feedback and it will also compare the efficiency of your answer to others from all over the world.

LeetCode also provides a discussion board for users to discuss all kinds of topics related to programming, technical interviews, careers, etc. It also holds a online contest each week. Users can participate the contest and earn points by solving problems online.

Figure 1 demonstrates a user interface of LeetCode. The menu bar shown in the green box provides many useful sections we have mentioned above. The Problems section is the most used one. Users can practice plenty of problems by programming online in an embedded coding editor. The Articles section provides many excellent solution explanations for most of the problems. Discuss is an area where users can communicate with each other by posting and commenting. Other sections such as Explore, which provides online courses, Contest, which holds coding matches, etc. are also very popular among the users.

Figure 1. The user interface of LeetCode

The icons shown in the red box indicate other features of LeetCode. By clicking on the avatar, users can access their account features. The console-like icon is a coding playground for experiments. The bell-shaped icon is for notification. Finally, if you subscribe and become a premium member, you can access more advanced features. The most popular one is unlocking the company tab. Thus, a user can check the previous interview questions of the company with which he/she will have an interview.

Our evaluation will cover most components and focus on Problems, Articles, Discuss and some features under the user account.

What is a heuristic evaluation?

A heuristic evaluation is an inspection approach to identify usability issues in a piece of software. It involves experts examining the software and judging its compliance with recognized usability principles which are called the heuristics. We used Nielsen's 1990 heuristics in our evaluation. This set is first introduced by Jakob Nielsen and Rolf Molich in their paper Heuristic evaluation of user interfaces.

What are the usability issues of LeetCode?

In our evaluation, we found five significant usability issues. Each subsection below describes one issue with a short demonstration video. We also point out which of the heuristics the issue violates. Finally, we provide some improvement suggestions for each issue.

A. Search results do not prioritize exact matches

Searching is heavily used by users of LeetCode. In video 1, we searched for a problem called Binary Tree Preorder Traversal under the Problems section. Surprisingly, we found the best match result occurs in the third place. Then, we searched for an article containing keywords Two Sum under the Articles section. Again, the best match did not appear at the top. During our evaluation, we found that, in many cases, users need to scan through the results and find the best match manually.

This issue violates heuristic 2 - speak the user’s language, because the order of search results is not intuitive and understandable for most users. Therefore, users need extra time and effort to locate the best result.

Video 1. Illustration of how an exact match does not appear as the top search result

Improvement Suggestion

1. A quick fix is to highlight the matching keywords in each result. In fact, it has already been done in the article search shown in the video. Thus, the result with the most matching words will be easier to find.
2.  The developers need to improve their searching algorithm and make the order of search results more straightforward and understandable.

B. Difficulty in navigating around a list of pages

Page navigation is another common functionality of a website. In video 2, we tried to find the last submission record page which contains the earliest record. Unfortunately, the system only provides two buttons, newer and older. If the submission record history is long, users must click older many times to flip page by page and get the oldest record. In the video, we used a trick, changing the page number in the URL, to show the last page. However, most users do not know the trick. Even if they know it, they need to guess multiple times because the total page number is not available. The same issue also exists in the Articles section. In the global ranking page, we found some improvement. Designers give us two shortcuts for the first and last page.

This issue violates heuristic 7 - provide shortcuts, because users do not have efficient shortcuts to jump among different pages.

Video 2. Illustration of the difficulty in accessing the last page of the submission record

Improvement Suggestion

1. The developers can refer to the design from GeeksforGeeks, another interview preparation website. As shown in figure 2, this design gives two shortcuts for the first and last page. In addition, users can fast forward and backward by clicking the largest and smallest page number. It also shows the total page number so that the user can modify the page number in the URL without any error.
2.  A better version for the design in figure 2 is to change the immutable current page number display (shown in the red box) to be mutable. Thus, the user can jump to any page without changing the URL.

Figure 2. A better page navigation design

C. Difficulty in interpreting distribution charts

In video 3, we submitted an answer to the problem Binary Tree Preorder Traversal. After that, the system showed us general performance information which includes runtime and memory usage. Next, we clicked the detail link and checked the performance distribution charts. At first look, we could not find our position in the charts because there was no highlighting nor label to indicate it. However, after careful observing, we noticed a grey area which indicates our position. But it is too light for users to discover.

We also found that if we use the mini chart below to zoom in a specific area, and if this area is correct, then a label will appear in the main chart to indicate our position. Again, it is not straightforward because most users will not zoom in the chart and they will never find the label.

Another problem we found is related to unit consistency. The memory usage information uses MB as the unit while the chart uses kb. Users need to do the conversion and we don’t know whether to use 1MB = 1024kb or 1MB = 1000kb since both are used in different systems.

The issue first violates heuristic 3 - minimize memory load. Users need to memorize the performance data to locate their position if there is no label and they do not notice the grey area. It also violates heuristic 4 - be consistent. The inconsistency of different memory usage units confuses users and requires them to give extra effort in unit conversion.

Video 3. Illustration of the difficulty in interpreting the distribution charts

Improvement Suggestion

1. The designers should use more eye-catching color such as yellow or orange to highlight the user’s position in the chart.
2. The chart should display the indication label by default, not after zooming in.
3. The system should use a consistent unit for memory usage size.

D. No efficient approach to access another user's profile

In video 4, we tried to find a friend user whose ID is davidluoyes. LeetCode does not provide any search box to find a user by ID directly. Therefore, we need to find the ID davidluoyes first, and then, click the ID and enter the profile page. We tried to first find any post or article written by davidluoyes. Unfortunately, we found nothing. And then, we tried to search in the global ranking list which contains a lot of IDs. However, after searching for a few pages, we gave up because there are more than 3000 pages! We searched for the whole system and could not find any way to get the ID.

Since there is no other choice, we used the magic trick again, modifying the ID in our own profile page URL to davidluoyes. Finally, we entered his page and opened his most recent post. Obviously, he wrote a post, but why we did not find it at first? We will answer this question in the next section.

This issue violates heuristic 7 - provide shortcuts. The designers failed to give the user an access shortcut to another user’s page given the ID. Therefore, it is almost impossible to check another user’s information unless you know the URL trick.

Video 4. Illustration of no proper approach to access another user's profile

Improvement Suggestion

1. The system should provide a search box for a user to find another user by the ID.
2. There should also be a friend list for a user to access a friend’s profile quickly without searching.

E. Different discussion sections are confusing

In video 5, we tried to find a comment from davidluoyes under a post called Kadane's Algorithm - Since no one has mentioned about this so far :) (In case if interviewer twists the input). Just like we did in video 4, we searched the whole Discuss section and found nothing. We even searched in the Articles section and could not find any useful information. Then, we thought there might be comment history in davidluoyes’s profile page. Unfortunately, there is only post history.

After the first attempt failed, we had to use another piece of information that the post is related to a problem Best Time to Buy and Sell Stock. We searched the problem name in Discuss and found something similar. Unfortunately, it is not the post. Finally, we gave the correct steps:

• Go to the problem page Best Time to Buy and Sell Stock under the Problems section
• Click the Discuss tab under the problem (not the Discuss in the menu bar) and enter an independent discussion area only related to the problem
• Search the post and enter the post page
• Search davidluoyes for his comment page by page

But why can’t we find anything under the Discuss section? In the video, we showed that the Discuss under the problem has a URL like leetcode.com/problems/… The Discuss section in the menu bar has a URL like leetcode.com/discuss/… They are totally different components of the system. That is the reason we cannot find any post related to a specific problem under the Discuss in the menu bar. The two discussion areas have the same name and their interfaces are very similar to each other. So, most users will be confused by this design and have difficulties to find a post under a problem.

This issue violates heuristic 2 - minimize memory load because it requires the user to remember both post and problem names in order to find a post related to that problem. Regarding comments, it also requires users to memorize the post name that they commented so they can view the comment in the future. The issue also violates heuristic 7 - provide shortcuts because a user cannot search a comment by user ID under a post.

Video 5. Illustration of the confusing discussion section design

Improvement Suggestion

1. The designers should add a section called Comment History in the user’s profile page. It will provide a shortcut for each comment without memorizing the post name.
2. The designers should also change the Recent Posts section in the profile page to Post History. The user should be able to access a full history of posts and comments.
3. The designers should add a search box under each post for users to search for comments.
4. Regarding the confusing Discuss design, the designers can remain the current problem interface. However, they should link the problem Discuss tab to the Discuss section instead of creating a separate discussion area. Under Discuss, they can add a Coding Problem button. After clicking it, a coding problem list displays below. The users can pick a problem and enter its discussion area. In addition, if a user searches a post, the system should do a global search within Discuss and return all matching results from all categories.

Conclusion

LeetCode is a very powerful but complex website. Although most users of LeetCode are proficient in computer science and software development, the designers still need to improve the usability to attract more users who are new to programming. The usability issues should not be their obstacles.

As we have seen above, many usability issues can be solved by some URL tricks. However, the website designers should not expect all users to have deep knowledge of computer science or website development. Therefore, the interaction style should be more friendly and straightforward so that the users do not need to use magic charms. Finally, the system architects should carefully review and modify the system model and make it more consistent and understandable.