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

My Survivability Cooldowns and active mitigation abilities. Also tracking the remaining duration of my Fortifying Brew (White shield) My Current level of stagger My Health and Energy 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?

ElvUI

So why build your own?

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. 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. 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. 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+).

My Tanking UI on my Brewmaster Monk

Healing UI on my Mistweaver Monk

DPS UI on my Shadow Priest

An minimal immersive UI for leveling and enjoying the scenery

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.

My Elemental Shaman’s UI back in Mists of Pandaria. It was overly complex and had way more information then I actually needed while raiding.

My Shadow Priest UI in Legion. You can see how it’s starting to get cleaner, but I still had all my action bars shown, which I came to learn I didn’t need.

My Tanking UI Today. Clean, minimal and efficient

The cycle of design

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

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. Prototype: The implementation of your solution into a testable prototype. Test: Give the prototype to users to test. Watch them use your prototype to identify flaws, and unexpected problems. 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

ChocolateBar (Broker Display): Lets you customize what information you want to see along a clean top-bar. Has plugins for many other addons. SexMap: A replacement for the default mini-map with several themes and customization options. 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. 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 Bartender: Gives you full control over customizing your actions bar. Move, add additional bars, hide bars out of combat, hide bars on mouseover, etc. Details DPS Meter: Currently my favourite DPS meter addon. 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. 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