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.
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.
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?
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 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.
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.
A categorical assessment of the varied blocks of data a player will need to refer to in order to assess their current situation.
A spatial assessment that evaluates the smoothness of moving from one type of information to another for strategic purpose.
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.
Using the UI elements identified in the image above, we identify and sort them by type and priority.
With our information categorized, we can look at the eye tracking or flow between the different blocks.
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.
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:
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.
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:
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?
Within each grouping by time sensitivity are different types of information.
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.
Let’s take a look at how the peripheral visibility has improved for the player.
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.
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.
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.
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!
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!
If my process here was of any interest, be sure to check out my other case studies!
Syndicating a independently operated homeowner associations into a platform that services the community opening pathways towards community growth.
A new way to follow recipes that visualizes preparation, expectations, and multi-tasking to help chefs of all skill levels accomplish more in the kitchen.
A B2B e-commerce platform for a wholesale produce industry transitioning clients from paper to digital, built with generational design and scalability in mind.