Principles of UI Design in the World of Warcraft

David King

·

Follow

12 min read

·

Dec 28, 2018

--

3

Listen

Share

It was Christmas 2004 and I was 16 years old when I found World of Warcraft under the Christmas tree. After several hours or play, I made my way the capital city of Orgrimmar. It was a living city full of real players chatting and trading. I was like nothing I had seen before in a game, and I was hooked.

I was a major noob until the first expansion, The Burning Crusade, when I starting to partake in endgame content and really understand the mechanics of the game. It was also at this time, that I discovered an often overlooked aspect of the game that I fell in love with: Addons and UI Building.

This was the first game I had played that let you completely revamp the game’s interface, tailor it to your needs, and get creative while doing it. I’m a big design nerd, and playing with the UI in WoW was a partial influence in my decision to choose a career in UI (User Interface) and UX (User Experience) Design.

Since that day, I’ve spent hundreds and hundreds of hours building, tweaking, then scrapping and re-building my various character’s UIs. And that’s what I want to talk about today. I wanted to create an article that celebrates my WoW UI creation, explore some principles of WoW UI design through the eyes of a professions UX/UI designer, and hopefully inspire you to create your very own custom UI.

Chapter 1: Why Design your own UI?

The Issues with the default UI

The default UI that comes with the game is OK. It’s totally playable, but it has remained mostly unchanged since the games original release in 2004. As technology has evolved and the end-game has gotten more complex and challenging, the default UI has failed to keep up.

Lets look at some of its issues:

Problem: Field of Vision
Back in 2004 most players were still using CRT monitors with a resolution of 800x600. Compared to today’s 1080 or 4k monitors, the information on screen was concentrated into a smaller area. Your eyes naturally picked up more information. As monitors got bigger, the UI information got pushed further and further away from your screen central character, where all the action happens.

Looking at your player health bar, or watching your action bar for procs/cooldowns pulls your eye away from your character (ie. the Centre of Action), which means you might miss interrupting enemy spells, or not realize your character is standing in fire. You end up staring at the bottom or top corners of your screen and miss out of the wonderful art and animation of the game.

YouTuber and Streamer Preach Gaming, made a fantastic video where he use eye-tracking software to compare the default UI and his custom UI.

Problem: Hierarchy of Information
Hierarchy means the order of importance of difference pieces of information to a player. Depending on what role and type of content you are doing, different pieces of information have different levels of important to success. If your DPSing, tracking your cooldowns, rotation, DoT and bleed effects is super important. If you’re healing, watching your party member’s heal is vital to success. If you’re tanking, you want to make sure your own health bar and survival tools are in focus.

The default WoW UI does a poor job of providing players the hierarchy options they need to succeed.

Let’s take a look at my tanking UI.

Information that is most important to me while tanking in order are:

1. My Survivability Cooldowns and active mitigation abilities. Also tracking the remaining duration of my Fortifying Brew (White shield)
2. My Current level of stagger
3. My Health and Energy
4. My Rotation abilities

You can see I’ve used this hierarchy to guide the layout of information I need while tanking. The most important information is closer to my character (The centre of action), and less important information is further out.

Chapter 2: Why not just use a prebuilt UI like ElvUI?

“Out-of-the-box” community built UIs (like the popular ElvUI by Tukui) are great alternatives to the default UI. They solve a lot of the problems of the default UI, and are well maintained by their creators. They are perfect for anyone who just wants a better UI, and has little interest in building their own. They can also be a good first step to building your own UI. But if you’ve made it this far into the article, then you probably have some interest in creating your own original UI. Right?

So why build your own?

1. An out-of-the-box UI, is by necessity generalist and built to work in all aspects of WoW’s plethora of content types. A major advantage of building your own UI is that you can tailor it to the content that YOU play, whether it’s raiding, pvp, or just a more immersive questing experience.
2. A lot of players will install an out-of-the-box UI, and not really understand the intention behind the layout, which can be jarring at first. The beauty of a custom UI is that it’s build By you, for you. You will understand every little aspect of its layout and why your placed each piece where you did.
3. A personalized UI can help counter any weaknesses you have as a player, and help you get better. For example, if you have trouble interrupting enemies, then you can make enemy cast bars as big and as central as you need. Maybe you struggle with standing in fire? Build yourself a BIG warning with sound. Do you find yourself forgetting to use your major cooldowns? You can create a custom action bar or WeakAura JUST for your cooldowns near the centre of your screen.
4. It’s fun! If your like me, you can find great joy and pride in building a beautiful and functional UI. And at the end of the day, games are about fun.

Chapter 3: Principles of designing your very own UI

So you want to build your own UI? Nice! Let’s look at some design principles we UX/UI designers use in The Biz and how you can apply them to creating your very own UI.

Define your needs

Every player is different and has different needs, and WoW has a ton of different content types to take part in. A raider’s needs are different from a PVPer, which are different from a role player’s. Are you planning on Healing? Tanking? DPSing? Maybe you just want to have a more enjoyable immersive gameplay experience that minimizes the UI and lets the art of the game shine. Custom UIs are not just for high-end raiders. The first step is figure out what from your UI.

Here are a couple different UI’s I’ve built for the content I’m currently doing in the game (Mostly Heroic Raids and mid-level Mythic+).

Consider Your Hierarchy of Information

Now that you’ve figured out what your needs are, extrapolate that into what kind of information is most important to you.

In the images above you can see that my Monk’s tanking UI prioritizes my character’s health and survivability cooldowns.

My Monk’s healing UI prioritizes my party’s health bars and healing cooldowns.

My Shadow Priest’s UI prioritizes DoT tracking so I can maximize DoT up-time, my resources (Insanity in this case) and my rotational spells so I never miss important cooldowns.

The final UI show here is one I built while leveling up a new character. It’s intentionally minimal, as I don’t really need to worry too much about maximizing DPS while leveling. Instead it’s built to give a more immersive experience, letting me enjoy the beauty of the world as I level. In this case The World is the most important thing to me so I leave it clear of clutter.

Focus on the Centre of Action

Your character is your centre of action and is conveniently placed in the middle of your screen. This is where you want to be focusing your attention. Why? Well, keeping your attention on your character will help you avoid ground effects, it will help you focus on proper positioning during a fight. Enemies also tend to end up in this general screen area so you can track their health and their spell casts. Focusing on the centre of action will make you a better player.

You should try and place the most important information to you nearest to your character so you can track it without losing sight of your character.

Minimize Unnecessary information

Sometimes less is more. WoW has a lot happening on screen, especially in dungeons, battlegrounds and raids. Your brain can only process so much information at once, so it can be a detriment to have TOO much on screen. The cleaner your UI, the more of the battlefield you can focus on. Figure out what elements of your UI you don’t need in the moment-to-moment gameplay and see if you can move them to the peripheries of your screen, or hide them entirely.

You’ll notice on my UIs that I don’t show all my ability bars. This is because I have have my keybinds memorized (from playing too much). Unless a spell has a cooldown I need to track, I can safely hide those buttons and clear up space form more important things. For things like markers, food, toys, flasks, and hearthstones, I have those in hidden action bars along the bottom of my screen that only appear when I mouse over them (a feature of the Bartender addon). This may not work for everyone, but it supports my play style, which is what your UI is there for!

I also put things like my minimap, DPS meter, and chat in the corners of my screen, because I only need to glance at those periodically in combat.

Support your weaknesses

Remember this is Your UI. If you know there’s something you know you’re bad at, then find/create a UI element that helps you improve.

Chapter 4: Iteration and the Design Process

A UI is never “Complete”. As you play with your shinny new UI, you will find ways to optimize and evolve it to be more efficient and effective. Below you can see how my own UI has evolved over the years.

The cycle of design

This graphic shows the process us designers follow in The Biz when designing interfaces, apps and other digital products.

1. Design: Identify what the user needs from your product and identify problems that need solving. Design an interface solution that solves the user’s problem and achieves the goals of the product.
2. Prototype: The implementation of your solution into a testable prototype.
3. Test: Give the prototype to users to test. Watch them use your prototype to identify flaws, and unexpected problems.
4. Iterate: Iterate on your initial design to incorporate solutions for the problems you discovered during testing.

Applying the design cycle to your UI

When designing inferences in The Biz testing can be very time consuming and expensive. You need to recruit users, design tests, run those tests, and analyze the results. The joy of building your own UI is that YOU are the only user that matters! You can test the effectiveness of your UI simply by playing the game! As you play, you will get a feel for what’s working and whats not. You will quickly find out if your UI is too complex, or too simple. You will be able to see if your DPS increases, if you interrupt more, if you win more Arena matches, etc.

You can then take those learnings and iterate on your own UI!

In Conclusion

If you’re they type that’s at all interested in UI design, building a custom WoW UI can be one of the most fun and rewarding ways to spend your time in the World of Warcraft. It can also greatly help your performance and ultimate success at the game.

Thank you for reading through this lengthy deep dive into WoW UI design. I’ll include some additional tips and resources below to help you get started. Happy designing!

— —
About the Author: David is a profession UX/UI designer in Toronto, Ontario. Check out his design portfolio at dkgd.ca

Appendix i: Addons I use

1. ChocolateBar (Broker Display): Lets you customize what information you want to see along a clean top-bar. Has plugins for many other addons.
2. SexMap: A replacement for the default mini-map with several themes and customization options.
3. WeakAuras 2: The single most powerful addon for creating a UI. You can create almost any element you can think up, from cooldown trackers, buff/debuffs trackers, resource bars, even add some nice visual flair to your UI.
4. Pitbull Unit Frames: A replacement for the default unit frames. There are many other good unit frame addons that are simpler and easier to use, but Pitbull offers the most powerful customization
5. Bartender: Gives you full control over customizing your actions bar. Move, add additional bars, hide bars out of combat, hide bars on mouseover, etc.
6. Details DPS Meter: Currently my favourite DPS meter addon.
7. Gnosis Cast Bar (Not Shown): A very powerful Cast bar addon that lets you create custom cast bars for you, your targets, your focus targets, etc.
8. Opie (Not Shown): This is a neat little addon for clearing clutter from your screen. You choose a keybind, and when you hold it down, you get a little circular action bar around your cursor that hides on release. Its great for mounts, food, hearthstones, mage portals, etc. When you need it, simply pop up that circle of tools on command.

Appendix ii: General Tips

1. Action bar addons like Bartender let you hide/show action bars in and out of combat. You can hide bars you only need to see in combat to give yourself a cleaner more immersive experience when you’re running around the world or in town.
2. Lean WeakAuras. It can seem complex at first, but there are TONS of WeakAuras online you can import and play with simply by copy and pasting a string.
3. Backup your WTF folder. The WTF folder in your WoW directory contains all the settings for your UI. Nothing is worse then reinstalling, or having to purge this folder, and losing your entire UI! Simple copy and paste this folder somewhere else on your HD, or back it up on the cloud. I recommend doing this after each major iteration on your UI. You can then restore it by pasting it back in the directory. Also helpful if you play on more than one computer.
4. Keep you addons up to date. The Twitch client is a great tool that makes, finding, installing and updating addons a breeze. Simply open it every one and a while and update all your addons.
5. Take it at your own pace. It can be pretty daunting building an entire UI at once using multiple addons with different options menus. Start with one or two addons, until your comfortable.
6. Target dummies are a great way to test your UI as you build it.
7. Watch tutorials. YouTube has tons of great addon and UI tutorials
8. Use your class Discords. Every class in the game has their own discord. This is a great place to ask questions, or get custom WeakAuras you can import. List of all class Discords.
9. Save often. The game will save your UI settings every time it loads your UI. This happens when you log in, or log out, but DOES NOT happen if you disconnect or the game crashes. To avoid losing your work just use the “/reload” command to save your work periodically.
10. Create Profiles. Many addons have a “Profile” feature that lets you save configurations that you can then apply to other characters. They may even support auto-switching profiles when you change specialization.