Abstract

In this case study the user interface of a multiplayer online role playing game (MMORPG) is examined from the perspective of high-level content players. Components such as eye tracking, the user's ability to categorize information and quickly implement that information into strategic decision-making, as well as aesthetics are assessed to validate the need for and generate a redesign of the interface.

The results of the case study found that the majority of users append the current interface with improved data analytics features. The redesign resulted in a simplified linear flow of information, clustered categorizations of data based on their time sensitivity and proximity, as well as a new dynamic alert system that combines data to provide strategic insights and promote rapid responses.

Introduction

World of Warcraft (WoW) is a massive multiplayer online role playing game (MMORPG) that has been captivating players since 2004 with the most common content made for groups of five.

In 2016 a new challenge mode was introduced called Mythic Plus where teams compete for global rankings by completing content at increasingly difficulties until they reach their limits.

This case study looks at the user interface (UI) from the perspective of Mythic Plus. Through the design process, we examine pain points and pose a solution for a smoother visual architecture.

The Obstacle

While the game has become more challenging, the interface has remained mostly unchanged. Independent creators make add-ons that high level players often rely on in order to modify their UI or the way the data is presented to them.

How can we present in-depth information in a way that is helpful, succinct, and sufficiently satisfying to high level players?

The Design Process

As this is an existing product, the design process revolved around developing a known element. We analyze the UI for the Mythic Plus setting, and ideate with external tools as this is a passion project.

Research: Identifying the UI Elements

Research begins with an assessment of the existing UI and identifying the elements within it and their purpose. Below is an image of the user interface highlighting the UI elements, with each element colored according to their level of time-sensitivity, provided in the key below the image.

Measuring Success For a Gaming UI

The user interface is only successful if it helps the user achieve their goals. So what do the players need? In order to advance to higher levels, teams must complete all of the objectives within a time limit. So what consumes time? The movement between different types of information.

Information

A categorical assessment of the varied blocks of data a player will need to refer to in order to assess their current situation.

Flow

A spatial assessment that evaluates the smoothness of moving from one type of information to another for strategic purpose.

Visibility

A visual assessment that measures how much the UI blocks the playing field and how much of it sits in the player’s periphery.

Information, flow, and visibility are the three major factors that will allow players to be mindful of their position, spells, and the actions of their teammates and opponents.

Information Categorization

Using the  UI elements identified in the image above, we identify and sort them by type and priority.

Information Observations

• Health information is separated for enemies and players via left and right.
• Buffs and debuffs are separated by immediate concerns found on the health frames and status buffs found on upper edge of the screen.
• Contextual information like the chat and objectives can be minimized or hidden depending on need. One is static, the other is constantly flowing.
• Cooldown information for spells or items has a long view both horizontally at the bottom and vertically on the right, each one hugging the perimeter.

Tracing the Data Flow of the UI

With our information categorized, we can look at the eye tracking or flow between the different blocks.

Flow Observations

• There is a mix of lateral and vertical eye movement in the center cluster of time sensitive data. Players will be required to look all around while looking at the field of game play.Health information is separated for enemies and players via left and right.
• There is also a flow that goes around the perimeter of the screen, staying out of the way, but also keeping potentially important information further away.Buffs and debuffs are separated by immediate concerns found on the health frames and status buffs found on upper edge of the screen.
• The upper right corner possesses information that is used as needed, but far from where any of the other ancillary information is.Contextual information like the chat and objectives can be minimized or hidden depending on need. One is static, the other is constantly flowing.

Assessing the Visibility of The UI and Field

We see how the data flows, but how does the user see the data? Let’s look at the peripheral markers. Roughly, everything is somewhat far from the player's figure. This is largely because the UI hasn't changed in many years and it was original designed for screens of a much smaller resolution and everything was closer together then.

Visibility Observations

• The majority of the critical information floats on the outer edges of the central periphery. 

• Red critical information on the right is not included in the peripheral vision at all.
• Gameplay occurs within the central peripheral area, while the further peripheral in green is still within range of danger of oncoming attacks.

User Research: Interview insights

25 competitive players were surveyed and asked questions regarding their preferences when playing mythic plus content. While many had been playing the game since its start, most had played for at least a year or two. Here’s what they had to say about their preferences:

Players Centralize Their Most Needed Data.

Most mythic plus players have addons that lie directly under their character that provide greater functionality and a lower time to glance and gather information.

Players Use Their Own Health Bar Primarily.

Most mythic plus players have addons that lie directly under their character that provide greater functionality and a lower time to glance and gather information.

Players Don’t Need Everything in the Action Bars.

Most mythic plus players have addons that lie directly under their character that provide greater functionality and a lower time to glance and gather information.

A Desire For Higher Functionality.

Instead of only knowing timers for when to click spells, players are looking for the optimal window to combine spells and attacks for the greatest effect. They use addons that provide clearer notifications, alerts, and timers with conditional indicators.When the action bar is at the bottom, players have a hard time seeing this peripherally.

Players Want To Free Up Visual Space.

Many players turn off the images on the health bars, or minimize their objective screens so that they can see more of what is happening on the playing field with special effects and nearby enemies.

Players Use the Mini Map  Often At High Levels.

The minimap will show the location of teammates to resurrect them or how far they are which helps inform the strategy of when to start encounters.

Ideation Tools

In order to move the elements around, I used a few well known add-ons to modify the interface: ElvUI and WeakAuras. These allow moving the UI around and developing "if this then that" conditions for alerts using lua code. I created a general pattern for an alert system that will be provided in an update.

Two other add-ons were later used: OmniCC and Details - these are common for allowing players to track their performance and attach timers to player frames.

ElvUI

A common user interface addon that is highly modifiable with simple data blocks that allow variable fonts, transparencies,  color settings, and more.

WeakAuras

An addon that allows a customizable alert system with condition IFTT programming.

Insights to Actions

Before I begin prototyping, I condensed the feedback from players into what actions to take when creating the prototype. Below are the guiding ideas for the design:
‍

Players use Their own health bar Primarily.

move enemy data into the field of play or remove.

Players Centralize Their Most Needed Data.

Centralize the most needed Data and Health.

A Desire For Higher Functionality.

Create a Higher Functioning Action Bar.

Players Don't Need All of the Action Bars.

Players Use the mini Map Often at high levels.

Place needed items Within Visual Flow Lines.

Players Centralize Their Most Needed Data.

Players Use Their Own Health Bar Primarily.

Iterative Prototypes and Testing

The evolution of these prototypes occurred fluidly, through constant iteration. The organizaton of the flow of UI elements was the first and smoothest to approach, however figuring out the data that was required for a successful team took quite a bit of trial and error.

The major difference between mythic plus players and casual or raid players was the amount of accountability each member has to contribute to the team's success. Everything must run with some level of synchronicity. In order to do this the data presented needed to be organized within range of looking at only a few anchor points on the screen.
‍

Maintaining a consistent UI layout designated for 5 to 40 player content provides flexibility for players with multiple characters that function in different settings, like tanks, melee and caster damagers and healers.

In each iteration surveys were taken and he UI tested to see what information was missing or had poor visibility. Testers also noted their preferences in terms of various add-ons and their functionality.

The placement of UI elements was easiest to solve, but when removing extraneous data that a player wouldn't use, I found many players didn't like that as they wanted to be aware of what their teammates were up against in order to assist.

In 5-man groups, all player resources needed to be visible at the side of their party health frames in order to strategize and plan alternative routes on the go. If something went awry, brand new plans were constructed in real-time.

The final prototypes were tested in raid and mythic plus settings and resulted in a smooth visual flow that provided all necessary information which required a great deal of manipulation through ElvUI and WeakAuras.

Ultimately the success of the team depends on many factors, but the measurement of success with this prototype was how much easier it was for others to find information, use information, and how much the frustration of looking for timers, cooldowns, or map markers was reduced.

So what were the changes?

Condensing and Prioritizing information

Within each grouping by time sensitivity are different types of information.

Information Improvements

• Health information is condensed to the center with nearby buffs and debuffs.
• Target information, debuffs, and health lay on the target.
• No change to contextual information. Chats, objectives, all remain the same.
• A new dynamic alert system was created to replace the static action bars. The major actions are included with alerts that show optimal synergy between actions and make usability visible through colors. This will be added to the case study in an update.

Simplifying the Flow

The initial layout had the user's eyes going all over the screen for information that was similar in nature. Below is an image of the pathways for the user now. The benefit of these is that everything can be glanced at in a single motion, and critical information is compiled is an area that is the shortest distance from the player.

Flow Improvements

• Reduced visual points of interest to the periphery and center with everything flowing in simple horizontal lines or short vertical lines.
• Minimap was moved towards the perimeter flow for easier assessment.

Increasing Visibility & Proximity

Let’s take a look at how the peripheral visibility has improved for the player.

Visibility Improvements

• Critical information is brought to the center of the player's field of view instead of off to the edges.
• By reducing the action bars and decorative features there is more open space for a player to view ground effects or enemy groups.
• The new alert system renders the action bar at the bottom less critical than it was effectively making i secondary, leaving h major information sill central.

The Solution & Results

Below is the final version, that is very similar to the prototypes seen above. Ultimately, it’s the usage of the information appended to each of these that will display the utility of this new layout and information system.

Impact Journey From Insights to Results

From start to end, the insights to actionable ideas, to actions, to results are mapped below. There are two tiers of actions, the first to represent the ideas of what to do from the insights, the second are the solutions to those ideas. This journey allows a visualization of the improvements made for the players.

The Resulting Player Experience

Competitive players and casual players were selected for a survey. After being asked about their interactions and experiences with the UI, here’s what they had to say about their preferences and using the icons for the metrics that their feedback will affect.

Players Are Supported With Strategy Suggestions.

The creation of a new alert system that provides synergy between timing and spells gives advanced players an edge, maximizing their efficiency.

Greater Enjoyment of the Visual Landscape.

By realigning a lot of the existing graphics, there are fewer visual interruptions into things like ground effects or what goes on with other enemies.



Trimming down some of the classic designs around the action bars further provides visibility. It’s a beautiful game and players can enjoy the newer content much more!

Players Can Interpret Data More Easily When Clustered.

Grouping data types allows for another form of strategy support through comparison.

Players can compare their health to enemy health, can visualize how long their status effects will last, and view the target data with the target, allow a faster assessment of the situation.

The Flow Between Types of Information Feels Easier.

Players reported that the minimal layout allowed the data to be seen much more clearly and grouping the data together reduced the mental load of shifting between types of data.

Final Thoughts

Mythic plus players have a different set of needs than the regular “casual” player. It’s a far more data intensive approach that has a void in support.

By utilizing external tools, we’ve created a smoother flow,  clearer information, and greater visibility of the game world!

Thanks for Reading This Case Study!

Whether you've skimmed or read it thoroughly, I appreciate you taking the time to look through this case study on a gaming user interface. While I've presented the core concepts of designing a interface that matches a need for efficiency with visual distance, there was so much learned along the way about prioritization and proximity. Be sure to reach out if you'd like to know more or have any questions!