Making a spaceship (creating a good user interface)

Creating a good UI

One of the most important aspects of performance in-game is a solid UI. This game is all about making good judgment calls and reacting to information as it’s given to you. You have a proc! use it. Your diseases fell off! reapply diseases. You took a lot of damage! Death Strike. You are ABOUT to take a ton of damage! Use a cooldown. Almost every aspect of the game can be narrowed down into info -> response, so if you can make the info come to you in a cleaner way you will have an easier time. This is where a good user interface comes in!

Taking advantage of motor learning

As I mentioned in the intro, a good user interface is all about feeding you the right information. The best way (in my opinion) is to take advantage of our natural affinity for motor learning, or the mental equivalent of muscle memory. Take throwing a ball for example. Moving your arm back, then moving your shoulder, followed by your arm then finally rotating your wrist and letting go of the ball at the exact right time to hit the spot you are aiming at. When you go to throw a ball, you don’t think about any of this (unless you are a pro in training maybe), you just “throw it”. 

Just like when a doctor hits your knee with that rubber hammer thingy and your leg kicks, you can train yourself to react a certain way to pretty much anything. This is basically all of practicing ever, for anything from music rehearsal to sports training. You are just training your muscles and mind to react to patterns and other common stimuli.

“How do I apply ‘practice’ to making a user interface? Reniat, are you drunk?”

-you

Just in the same way you can train yourself to react to a pitch in baseball, you can train yourself to react to stimuli in a user interface. For example, let’s say you were having a hard time keeping track of Bone Shield. You are constantly forgetting to put it back up. A hard solution would be to start training yourself to start thinking about Bone Shield every minute so that you know to check if it’s back, but that’s ridiculous as it requires you to have bone shield in the back of your mind constantly. A MUCH easier solution is to make something in your user interface pop out when bone shield is off cooldown and go away when you use it. Now you know exactly when it falls off and can reapply it instantly just be reacting to one simple icon popping up on your screen, which is where your attention already is! We can even make this pop-up smarter by checking if there are any stacks currently and only pop up if Bone Shield is up AND you don’t have any stacks, preventing you from overwriting any stacks and wasting charges. Now you are using Bone Shield like a pro and all you’re doing is hitting Bone Shield when the Bone Shield icon pops up in your screen!!!! ISN’T MOTOR LEARNING GREAT!?!?

Reniat are motor learnings

 

Avoiding Clutter/Redundancy

Another incredibly important to a good UI is to make sure it’s not preventing you from seeing that you’re standing in fire. As tanks we especially need to keep a very sharp eye on the raid/dungeon group and keep our raid awareness maxed, so putting a bunch of icons all over the middle of the screen is obviously not ideal. Making a great UI is a balance between giving as much information as possible to you on-screen in a highly noticeable manner, while minimizing the visual impact of the notification itself on the screen real estate. You will obviously want some icons towards the center of your screen, but those interface items should be things you want to see pretty much ALL the time. As tanks, our health bar/AM comes to mind. Some easy simply solutions include making icons smaller, putting them off to the side (but still close enough to the center to be instantly seen). Some more elegant solutions include adding button glow and other eye-catching but spatially small effects, as well as making the icons fit other parts of your UI like a puzzle, blending in to make a seamless and compact but info-heavy user interface.

Putting it all together

So now that we have some general grounds for a “good” UI, let’s look at putting one together specifically for Blood DK tanking. It is important to note that everyone has different tastes, because everyone reacts different to different stimuli. There is a very high chance you will HATE my user interface. Even if the interface shown doesn’t work for you, take the principles talked about above and apply them to something that works for you. The point of this post is about the concepts behind good UI elements, not “here is my UI copy it because it will work for you”, because chances are it won’t work for you. With that said let’s review everything we’ve learned so far.

A good UI:

1. Provides the info you need

2. Is not cluttered or in the way

3. Keeps the important stuff in the most visible places

4. Promotes raid awareness

So let’s start by looking at a user interface made by a very handsome blood DK (*ahem*) and breaking it down into its individual components (At the end of this post I will put links to all the weak auras scripts you see). Please ignore the fact that some components are shoddily edited in. I forgot to get screenshots during raid so I had to edit in Hermes and the raid frames.

Let’s start with the most important part of my UI: my health and runes (yellow square).  You can see they are right near the center of the screen. As blood DKs, monitoring our health is paramount to solid DS timing, as you want to be able to react ASAP.  This is why I’ve chosen to display my health so prominently on my screen. There is a balance to be found in not cluttering the center of the screen and putting important info, and this is what works for me. You may choose to make it less prominent to allow for better vision and that is totally fine. Again, take what works for you and apply it. Everyone’s UI is different. This is an example of executing good ui element #3, “Keeps the important stuff in the most visible places”.

Directly below that are my cooldowns. Knowing what CDs you have available is incredibly important as any tank, but especially blood DK. If you could do nothing else other than time DS and use CDs really well, you could get very far as a blood DK.  Obviously there are more things to master, but those 2 things are the most important by far, as they are what keep you alive. By color coding the bars, I can see what is available out of the corner of my eye. If I see blue, red, and green bars then I know I have Icebound Fortitude, Vampiric Blood, and Anti-Magic available at the moment. A grey bar indicated how long until that cooldown is back, so I can see which cooldowns I’ll get back in the next few seconds as well. Using bars and colors as opposed to just actual numbers I can keep them further away from the center, and rarely if ever have to look directly at them, satisfying the good ui principles #1 “Provides the info you need”, and #2 “Is not cluttered or in the way”.

To the left of my center vision is where I track procs/infrequent but important events (red square). These are things that I want to react to immediately but are not going to occur often. It is important to note that everything in this group (Plague Leech, Defile, Crimson Scourge procs, ect.) will disappear when I use it, which is usually immediately. If they didn’t go away when used and they stayed up all the time, this would violate the 2nd principle of good UI “Is not cluttered or in the way”.

Just below the red square you can see where I track Blood Tap charges. This is a good example of using motor learning, as once I reach 10+ stacks the button gets a halo effect, alerting me to the fact that I have 10 or more stacks, shown below.

To the left of the red square is where I keep track of all CDs on me. This includes externals (Pain suppression, Ironbark, Hand of Sacrifice, etc.). It is very important  to track this somewhere very viable as this is a crucial part of proper cooldown management. Tracking CDs like this let’s you know when you use your next CD to chain them without overlapping them to get max coverage. Another tool to further that purpose is Hermes (the green circle) where I can see all available external cooldowns.

You’ll notice that I only have a few spells on the screen, and they aren’t bound to anything. This is because everything is bound in Dominoes and hidden. If you can, memorizing your keybinds is a great way to save screen real estate, because you don’t have to have all your stuff on screen.

Weak Auras

I HIGHLY recommend weak auras. 99% of what you see in my UI is built with weak auras. I will put links to the strings for each component here.

Blood Tap: http://pastebin.com/vaiHbSuJ

Available Cooldowns: http://pastebin.com/0F7kZwBt (may not be importable as it’s a VERY long string)

Active Cooldowns: http://pastebin.com/uc4zQVyx

DPS cooldowns (Fallen Crusader, dmg procs, etc.): http://pastebin.com/sbffkiww

Notifications (Plague Leech, Defile, etc.): http://pastebin.com/6iHiKYAk

Soul Reaper: http://pastebin.com/AT2ENcMq

Bone Shield: http://pastebin.com/WBrcCcei

Runes (requires both): http://pastebin.com/410ePvEz – http://pastebin.com/2A5g2PXA

My HP and RP is actually Galvins Unit Bars. You can make an almost exact copy of this in weak auras, but for some reason weak auras gives a SLIGHT delay in hp tracking for me. This is unacceptable for DS timing, as that requires as fast reaction as possible, so adding a good chunk of a second in UI delay is NOT ok. This is the reason I do not have my HP/RP made in WA. The delay isn’t in any other ui component for whatever reason.

As a bonus, here is the evolution of my UI from the beginning to end of MoP.

(Be warned. I started out as a NOOOB)

The beginning

The first appearance of my current rune weak auras (and the reason they are separated into 2 groups)

Replaced Xperl as my HP/RP addon, and put runes together

New cleaner frame for the runes/hp+rp

Blood shield tracker moved above HP, and made the cooldown tracking symmetrical