The Secret

"How do you do it, Constie? How do you come up with these UIs? Please describe your process to me in detail."

Full disclosure: No one has ever said anything remotely like this to me. Is that going to stop me from telling you? Absolutely not.


I recently had the thought to begin the process of designing a UI by writing down what information it would need to include as opposed to by beginning with a visual mockup. I did that with this UI - here are the notes I ended up with.

Now, I have two UI concepts that I want to try out while leveling in WoD - a purely monochrome UI, to learn about where colors are particularly useful; and a purely sound-based UI, to learn what visual information can be replaced with auditory information without loss of functionality. In this post, we're going to make an attempt at the former.

There are two parts to setting up UI elements - layout and appearance. They're not completely separate, as sometimes one forces small changes in the other, but you can mostly treat them as separate phases; I'm going to start with the layout.

What I know from the start (because I'm following certain design principles) is that I want all information that's relevant to my regular rotation to be in one place (and ideally all presented in some uniform way); all critical information that will prompt me to do something different from just my regular rotation (e.g. boss timers and fire under my character) as close to that as possible; and more situationally relevant information (e.g. Mass Dispel cooldown and boss frames) somewhere I can easily check it when I need to without losing track of the more important things.

This UI accomplished most of the above reasonably well, but I didn't have a really good place to put boss timers or boss frames in it. Having rotation timers in the middle with vertical player and target frames to the sides of them and buff frames to the sides of those is something that I think works significantly better than anything else I can think of or have seen, so I'll start from there.

As indicated in my notes on required information, I'm not sure I need to have my mana displayed. Right now at 90 my mana regeneration is 740 MP5, which means the only non-healing spells I have that can even make my mana go down are Dispel Magic, Levitate, and Mass Dispel, and those aren't things I'm likely to use enough for my mana to run out. Values might change as I level up, though, so I think what I'm going to do is not show my mana bar for now and enable it again when the expansion is out and then reevaluate my decision. Alternate power can be where mana usually is.

I think my EventHorizon is going to have 3-4 bars - definitely always Mind Blast, Divine Burst, and Mind Flay/Sear, and then the Insanity buff could be overlayed on the Mind Flay/Sear one, and then for Shadow Word: Death I think what I want to try to get EventHorizon to do is to show a bar for it only if the spell is usable. I could then track Vampiric Touch and Shadow Word: Pain by coloring the frame border... except this is a monochrome UI, so that option is not available. In that case I might actually have bars for those spells, too, for 5-6 in total. Tracking Void Entropy seems like it should be unnecessary except maybe in multi-target situations, but it shouldn't really require any special considerations, so I'll just worry about it when I'm level 100. (I'm hoping it's never actually the best talent choice, anyway, because I don't really like the idea of it.)

There are two more regular rotation things to track: Shadow Orbs count and range to target. Coloring thirds of EventHorizon's "now" line for Shadow Orbs has worked well for me before, and it should be fine to just color it black to keep it monochrome (or have a number on the Mind Blast bar as in the UI above). As per my notes, I think range should be presented as a number - the first place to put it that comes to mind for me is before the target name, but I'm not sure that's ideal since then it would move around when switching between targets that have names of different lengths. Another obvious choice is above the target frame, but that's kind of far away from the "now" line. I think for now I'll have it before the target name, and maybe move it later if a better idea comes up, since it's just a very short text string that shouldn't require me to move anything else around to accomodate it.

The next most critical bit of information is boss timers (and notifications). Recently I tried putting BigWigs's text notifications on top of EventHorizon, and I find that actually works quite well for making them hard to miss as long as you're selective about which ones to display. Maybe possibly perhaps I could do the same with timers, which in the case would be just text and no bars - although I have previously experienced that timers don't properly show up for all boss abilities, so maybe that would make me miss things. I would like to avoid bars, because they take up a lot of space - especially since I'm planning to do mainly 20-man raids in WoD, I don't think I can fit both timer bars and raid frames below EventHorizon, for instance. Perhaps I could have raid frames on the left, boss frames on the right, cooldowns immediately below EventHorizon, and timer bars below those. I suspect that won't look great, but I think it should be reasonably efficient.

Should the situational cooldowns be displayed in the form of a cooldown line or an action bar? Good question. The difference between them as I see it is that a line can be more compact, whereas an action bar can be more functional - "can be", in both cases, not "is". A cooldown line only shows icons for spells that are on cooldown and uses icon position to indicate time left, whereas an action bar always shows icons that are overlayed with timers when spells are on cooldown and uses icon positions to indicate which spell is being tracked. The potential advantage in functionality comes from two things: If you're not reminded that you have a spell (say, by having its icon displayed) you might forget to use it (which might sound silly, but it happens to me all the time); and if the time left on Spell X's cooldown is always displayed in the exact same position on your screen, it's easier to quickly check what it is at a glance. Consider how you would go about finding out if Fear Ward is on cooldown in each case: with a line, you would scan through the whole thing, and if you didn't see Fear Ward's icon in there then you would know it was off cooldown; with an action bar, you would look immediately at the Fear Ward icon and see whether or not it had a timer overlay. So, given that a sufficiently large number of cooldowns is being tracked, a line is smaller and a bar has some (minor) advantages in functionality. I'm tracking at least 10 cooldowns and I'm not that concerned about space, so I'm going with an action bar. (It's definitely not the case that that's always the correct answer, though.)

Dispellable target buff alerts would normally be done with colored borders, but in lieu of that I think a sound alert should be fine. If EventHorizon is going to have 5-6 bars, it would be fine for it to be tall enough that I can have buffs and debuffs in separate frames.

I think the extra action button can go in the center of the screen, scaled down and transparent. That way I'll see it when it pops up and I can read its tooltip, and it won't be too obstructive.

As for the appearance, we of course want to have a consistent visual style throughout the UI. I don't want to spend forever on this, so I'm just going to go with my usual thin borders and pixel fonts so it's a simple matter of applying the same settings everywhere, but otherwise I might see if I can make a more default-styled theme work (although I'm not sure that's really possible with EventHorizon, or timer bars in general).

...and that's the design part done! Now all that's left is implementation - well, I still haven't chosen any particular fonts or textures, but unlike e.g. raid frame placement those are decisions that can safely be made last - and since I know a fair amount about how to make addons do what I want that should be the easy part.

The addons I'm going to be using for the above are:
  • Bartender, because it's the one I've always used and know how to set up
  • BigWigs, for the same reasons as Bartender
  • EventHorizon, because it's much easier to get it to do exactly what I want than Raven
  • Grid, for the same reasons as Bartender and also because I won't need my raid frames to do very much beyond looking right
  • kgPanels, to display target name and range in the right positions and probably also to track Shadow Orbs
  • PitBull, for the same reasons as Bartender (and I'm planning to make use of its combat fader module)
  • Quse Boss Styles, to make BigWigs bars look the way I want
  • Radar, to avoid having to think about what to do with the minimap
  • Raven, because I know it can do what I want and I don't have a reason to switch from it
  • Shadowed Unit Frames, for the boss frames, because PitBull doesn't have those (which, yeah, I know)

So, we log in and get something like this:

Hiding Shadowed Unit Frames frames, PitBull frames, and Bartender bars we're not going to be using, we have this (apparently I had already set EventHorizon to be anchored to the right of my player frame here):

Now, one thing that might sound obvious but at least wastes some time for me on occasion when I forget it is that if you have two UI elements that you know you're going to have be the same size and aligned in some dimension, and one of them has more restrictions on its size than the other, you should set that one up first. In this case, that means getting my action bar to be a size I want and then having EventHorizon match its width. I'm going to be using Masque with the Nefs2 skin, so I download and apply that, set EventHorizon not to use icons, border, or background and make a kgPanels panel for those things, set PitBull to use vertical bars, and move those three things to the middle of the screen:

Raven is to PitBull height as Bartender is to EventHorizon width, so I create a player buffs frame, put it next to my player frame, and fiddle with icon size until I get something that fits. An icon size of 40 turns out to be big enough that EventHorizon shouldn't get too crowded and it doesn't cause any spacing issues, so I go with that:

After that it's mostly just obvious things, so that's it for this post. Hopefully this has given you some useful insights - if any of the above needs clarification, feel free to ask in the comments.

No comments