How I Build My UI in World of Warcraft

/

World of Warcraft and I go way back- all the way to 2006 in fact. And while it's been several years now since I actively played, Blizzard still manages to pull me back for every new expansion, and the upcoming Battle for Azeroth is no exception.

What I want to talk about today, is User Interface. WoW's default UI has always been kind of... basic, but the most important feature it has always had, is mod-ability. Specifically, WoW has a very open-ended UI system written entirely in lua, making it very easy to mod. The modding scene has been so prevalent for so long that, customizing one's UI is almost a rite of passage at this point- it's just something that most people do when they become reasonable serious about the game. 

Over the years, I've spent a lot of time playing with different addons and layouts, trying to figure out exactly when and where I like my information to be displayed. I honestly attribute this practice to my first experience with UI/UX design.

Unfortunately, setting up for yet another new expansion means re-doing my UI for the umpteenth time, but I thought I would use this as an exercise, to walk you through setting up my time-tested UI; what I do, and more importantly, why. As a note, just keep in mind that a UI in this game is a very personal thing, that's meant to serve only one's self, and achieve whatever goals the user specifically wants to accomplish. This is not inherently the same thing as creating a UI designed for this consumption of others. This is what I personally look for in my own UI.

So let's get this thing going!

Before we do anything at all, here we have the default WoW UI. It's not exactly awe-inspiring, but it's definitely way better than it once was. There's a fair amount of customization to be had here these days, and for the most part, it's pretty usable out of the box, even for end game content.

Most notable is the fact that, the unit frames (positioned at the top left in this screenshot) can be moved wherever you want. Quite handy if you don't feel like look all the way across the screen every time you want to look from your player resources to your action bar.

Some of the most notable things that I personally find lacking, are a damage meter, and the ability to combine the bag display into 1 big container, instead of separating it out into 5 small ones, and so those are the 2 addons I just can't live without. 

Once we start to look at the actual layout of the game screen though, it starts to look more like this:

The first thing I do in setting up my addons, is to grab Sunn Viewport Art. This real nifty addon can do a few things, but By default it just adds a bit of a bar (with some pretty art) to the top and bottom of the screen. 

It also has the option to change the game's actual render viewport so that rather than drawing the bars on top of the screen, it renders the entire game world in between the bars, guaranteeing that Sunn will never draw ontop of the actual game world. This has a lot of benefits, because stretching the viewport horizontally also allows you to actually see more stuff. Personally I do not choose this option however. It makes the game world look a bit small to my taste, and it tends to push your character pretty far up the screen.

I much prefer my character's feet to be positioned in the lower 1/3 of the screen, rather than in the very middle. This is actually kind of important, because the feet is the only part of your character that mechanically matters, since it's where you contact the ground, and the only hit detection the game has with your character at all (and we all know that standing in the fire is bad). Because of this, the focal point of the screen tends to be close to where my character's feet tend to be (as can be seen marked on the image above).

So, the lower 1/3 of the screen is kind of important, and thus this is where I position most of my UI. It also happens that, because the player has full control of the camera at all times, you will basically never see anything in the world that appears beneath/below the character on the screen, and so the very bottom is almost entirely dead space. Hence, we create a spacious bar at the bottom where it will basically never be covering anything we care about, and position most of our UI on top of it.

I like to think of it as separating the screen into 2 distinct areas. On the top, we have the game world and whatever the player (aka me) has positioned the camera to look at. On the bottom, we have the UI, encompassing all of the information one needs to perform their role as a character who exists in WoW.

Sunn creates a perfectly straight line that creates a very clear distinction between the two, and so it's very easy to quickly scan from one section of the screen to the next, and there's basically 0 confusion where the game world ends and the UI begins. Squishing everything in the bottom may feel a little cramped, but it also means that there will basically never be a point where the UI down there interferes with looking at or interacting with something in the world.

Next up we have arguably the most important mod - our action bars (done via Bartender4). We turn off the Blizzard art frame because, pretty as it is, it takes up a lot of screen real estate, and just doesn't really accomodate anything else being placed near it. We also don't really need things like the menu bar and the bag bar, as those things are all easily accessible via hotkeys. Which, is a bit of a theme here.

On that note, one of the more unorthodox things I like to do, is turn off my main action bar as well. This is the bar that contains all of my main core rotational abilities. My reasoning is that, WoW is a game which is measured in hundreds of hours- if you haven't memorized what ability is on which key already, then you've got bigger problems anyways. It can definitely be helpful to be able to see these abilities to see things like cooldowns, but there are better ways to display that information that we'll be getting to in a bit.

Instead I like to break my bar up into 2 sections. On the left I have very large icons that are used for things like longer cooldowns, and anything that I may not be using moment to moment. This information is important, so positioning it on the very bottom of the screen may seem a bit far from the screen's focal point, but since we're typically talking abilities that have a cooldown of around 1-5 minutes, there's usually no need to look here more often then every 20-30 seconds. More importantly though is seeing how cooldowns relate to each other (since typically one wants to either stack cooldowns, or stagger them), and so I like having them all next to each other in a row, to see all of those cooldowns at a glance.

The second section are the smaller icons to the right, which just represents anything else I want easy access to, but am not going to care about in the heat of the moment enough to dedicate a keybinding to. Things like mounts, teleports, professions, toys, etc all go here. These 2 bars line up nicely to be the same height as the larger bar beside it, and so the action bars all make a perfectly rectangular shape, which is very convenient for fitting other UI elements around.

One thing also that you may have missed, is that I've moved the experience bar to the very top of the screen. This is nice and out of the way, but still visible. It fits because I do like to have Sunn add a slim bar to the top as well, just for framing, which simultaneously creates a home for this bar. The experience bar isn't very important, and in a lot of cases players will have it turned off entirely once they reach max level, but I like to have it here if I have it turned on.

Next up, we have our chat (powered by the Prat 3.0 addon), and our damage meter (the one and only Recount).

These elements both entail data that is nice to be able to see, but that one shouldn't really be looking at in the middle of combat, and so the fact that they are about as far from the screen's focal point as you can get isn't really a big deal. Because everything is nice and rectangular, they fit into these corners very cleanly, and at this point we can start to see how nice and clear the game world looks above the line Sunn draws on the screen.

Some quick notes about these addons:

Prat is a pretty deep addon that adds a lot of customization to the chat window. I don't really make a ton of use of these features, but the main thing it does is let us place the chat in this corner. By default the chat window has a lot of elements that hang off of it (and that 99% of people never use) making the window a non-rectangle and kind of hard to work with. Also, because the chat entry field is also on the bottom of the window, the game doesn't allow us to position the window at the very bottom of the screen by default. Prat lets us change both of these things, thus allowing the chat window to nicely fit in the very corner of the screen. I like to have the mostly-transparent chat tabs overhang the top of Sunn, so that the actual chat envelops the entire height of Sunn's black bar.

Recount is a very important addon for numerically tracking your performance, and that of your group, and I don't know how anyone plays the game without it. But thankfully, it doesn't take up much screen real estate, and it will fit pretty much wherever you want to put it. There's not a lot to consider here, but I like to make sure that it uses the same bar textures and font types as other addons. Also, like Prat, I like to have the title bar of recount overlap the top of the Sunn art, so that the actual tracker bars envelop all of Sunn's black space.

Next we have the unit frames. I like to use Shadowed Unit Frames- it`s a nice middleground addon that offers a lot of flexibility, without being too overly complicated.

Again, we have more rectangles. These just fit right in the space we've crafted for them here, and we can see that they line up with the edges of the action bars. One thing I like to do that isn't pictured here, is line up the top of the first bar in recount with the top of the unit frames' bar. Again, like Recount, I also make sure to use the same fonts and bar textures here.

As for what we actually have here, on the left is the player frame, to it`s right is player`s target, and to the right of that is target of target. Each one has bars of equal height, and so everything just more or less looks like it lines up. Also I like to try and position the bars so that the separation between the player and target bar is in the middle of the screen. My UI tends to have a vague grouping of elements so that player stuff is on the left, enemy stuff on the right.

This position of the unit frames is nice because it`s always just in the peripheral view, but it`s not distracting. If a value (say, your HP) suddenly jumps, you will probably notice (as you should!). Otherwise, these elements don't tend to move a lot, so your attention can stay elsewhere, while still having this information available incredibly quickly. What you`re targeting is nice and big, and I really like having 3D character portraits on these bars just as extra visual confirmation (and also, they just look cool). Depending on what I`m feeling, sometimes I`ll hide the resource bar of the target of target frame, and put a target of target of target frame in it`s place, but that is almost only overkill, and even for healers is useful on very rare occasions.

This one is pretty simple. We have SexyMap in the top right, and TipTac in the bottom right.

SexyMap is mostly there because it just touches up the look of the minimap a tad. Lots of addons like to add shortcuts to their customization menus as little buttons around the minimap- which are handy, but they can create a lot of clutter. SexyMap allows you to hide those unless you mouse over the map, while still displaying the default WoW buttons like looking for group. SexyMap also touches up the look of the clock and current area display, and gives you a lot of control over whatever crazy look you want for the map. I like to stick with the rounded top-right corner look, so that the map is well tucked into the corner, and never distracting. Realistically, you don't need to look at the minimap too often these days.

TipTac gives a similar treatment to the tooltip that appears whenever you hover over.. well, anything. It adds a bunch of information, especially if you are hovering an NPC or player. Things like, current target, spec, health bar, and just in general pretties it up a bunch. This information isn't too useful at a glance typically, but positioning it just above recount is just a comfy home for it, and so TipTac is mostly nice just for moving the anchor point to this position.

Finally, we have the last few touches- which is the actual information we need to perform our key rotational abilities. We have MikScrollingBattleText displaying on the left and right edges of the game world, and information pertaining to abilities and buffs just above the player frame (usually done with a combo of extra Bartender4 bars, TellMeWhen, and WeakAuras2).

The scrolling combat text is pretty basic, but depending on the class may take a lot of tweaking. I think this is a really important feature to have so that one has the proper feedback from performing their abilities, but it can get very spammy if one isn't careful. This is part of the reason I try to position all of the scrolling text around the edges of the screen's focal point - it's there more as a "nice to have", but you shouldn't really ever be looking at it aside from it just being in your periphery, so it should be out of the way.

For melee classes especially, I like to have auto-attacks in their own scroll zone even farther towards the right edge of the screen. This is also a good place for things like pet attacks, and damage sources that are somewhat inconsequential. I actually like to turn off the healing text and use Blizzard's built-in scrolling text for this, because Blizzard's heals will appear above their target, and if I'm healing I find it really helpful to be able to contextualize my target's location in this way.

As for the ability display, the idea here is to provide myself with all the information I need to decide instantly what ability I should be using. This is very important because I have my primary action bar hidden, but this also gives me a lot more control over what information I actually need displayed to aid my decision making process. This is going to be different for every class and spec, but in general I can keep it pretty simply just by throwing a Bartender4 bar there, and using TellMeWhen to track buff/debuff uptime. For example, in the case of my Warrior here, I want to know if Raging Blow and Bloodthirst are on cooldown, I want to know if I can currently cast Execute, and I want to know if Enrage is active on me.

If I'm not careful, this particular part of the UI can tend to encroach on the game world a little bit, but this is also the most important part of the entire UI, and this is where I intend to be looking at basically all times. This is the crux of it all, and basically everything is designed around how far I have to look from that point if I'm looking for a specific piece of information.

And that's basically it. Obviously there's more stuff that goes into a UI, things like cast bars (I use Quartz for these), raid frames (which I use the stock blizzard ones), DeadlyBossMods for raid encounters, and so on. These things always tend to occupy the outside edges of the screen, but you can see what I mean by that down below. For reference, here is the "final" UI with the focal points drawn on it again, now that everything is in place. Looks like we did pretty good!

Finally, I always tend to make tweaks as I play and get a feel for how the UI works with a specific class. For example, since taking the above screenshots, I've swapped the health and rage bar on my Warrior's unit frame, so that the resource count can be directly next to the rotational ability icons. Lots of classes will have special quality-of-life addons and trackers that may or may be desirable to use, and so on. 

This is more or less the core I always start from though. It's worked for me for a long time, but we've come a long way from when I first started cobbling together addons. This isn't a super fancy UI, it's just a very efficient package thrown together in about 30 minutes. To take this a step further, I would typically spend a bit more time trying to make sure everything looks pretty, maybe try and work in some custom art somewhere. I've played around with audio cues in the past as well. Setting up my own voice recordings to yell at me to use totems was a lot of work, but proved pretty handy when I was an Enhancement Shaman back in the day!

Finally for some fun references (and a trip down memory lane),  here are a few shots from over the years (Sadly, I can't find any of my screenshots of my very first Rogue UI from 2006):

Combat Rogue world gameplay (2007)

 

Hallfire Ramparts as a Shadow Priest (2007)

 

Anetheron (Mount Hyjal) as a Protection Paladin (2008)

 

Grand Widow Faerlina (Naxxramus 25-man) as a Frost Death Knight (2008)

 

XT-002 (Ulduar 10-man) as a Restoration Shaman (2009)

 

Baleroc (Firelands 10-man) as a Holy Paladin (2011)

 

Lei Shen (Throne of Thunder 10-man) as en Elemental Shaman (2013)