Wednesday, June 23, 2010

UI Design: Positioning Mods

It's been a while since I touched on this topic, so here we go: /revive old topic!

The base Blizzard UI only helps so much when it comes to raiding, and thus the vast majority of raiders use mods. It ultimately comes down to each user to arrange their own UI to suit their purposes, without sacrificing their situational awareness. While some mods are "required" for raiding, some mod-layouts could result in an incredibly cluttered screen that would decrease your raid awareness and reaction time, resulting in you standing in fire that you can't see because it's hidden under a mod, or just causing you to miss something or take 2 seconds longer to react to it because it's not where your eyes usually rest, or generally just being so cluttered that you don't notice important things.

Anyone fighting in a progression raid (or even pvp) with a pressure to perform their best can tell a tale on how important every second of situational awareness is. In two seconds, an interrupt could be missed, an add could spawn and kill a healer, a player could die from a debuff, your character could explode the whole raid, a cone effect could be turned toward you and blast you into silence-land, or any number of other destructive dungeon mechanics.

Role Priorities:

Understandably, each role will have different things they need to design their UI around.

A healer will want to prioritize these things:
  • Visibility of the playing field
  • Raid frames and the information they show
  • Boss Mod timers
  • HoT/Cooldown trackers
  • Buff/Debuff alerts
DPS and Tanks will want to prioritize more on these things:
  • Visibility of the playing field
  • Boss Mod timers
  • DoT/CC/Cooldown trackers
  • Buff/Debuff alerts
  • Aggro
There are thousands of mods out there (varying in popularity, efficiency, and scope) that you can choose from. Most mods, however, even ones such as map, action bars, raid buffage, and chat can have a significant impact on your situational awareness if the mod blocks out important information!

Thus, the actual layout of your UI is very important. You need to be able to see the important information without it blocking your view and without needing to split your attention heavily into the far areas of your screen!

Here are my recommendations: figure out what elements of your UI are most important, and move them to the center.

The Screen:

The center of the screen is, immovably, your character. This is the pivotal point from which everything should radiate; this is the spot where you're standing in fire, or behind the mob, or judging range to a target, or walking off a cliff. Every time you move and need to see where you're going, this is the spot your eyes will go.

Keep in mind that if you play zoomed-in on your character, the larger the amount of screen they take up, and the less you see of what's going on around you. I suggest zooming out a healthy distance.

Now, imagine making zones of your screen radiating out from the center like a target, and putting your mods in each zone according to priority.

Zones are rough estimates. It's more of a gradiant than specific, cut-and-dry zones, but you get the idea :)
  1. Immediate character. This is your personal space bubble. HuDs, significant power auras, dot timers, buffs, and cooldowns are useful here. Anything in this zone should be small, translucent, and unclickable to allow visibility and interaction with the game world.
  2. Begin Clickables: Here's where you start getting into a more comfortable zone to block your view (on the top and bottom) or make things clickable. I put my cast bars, boss timers, raid warnings, and several small, translucent clickable actions in this zone. Some of my raid frames touch into the outer edge of this zone, and my sexycooldown pulse splashes into this zone when a CD completes.
  3. Middle range: Best place for your raid frames, IMO. You need to be able to see to the sides, however, so this is why I put mine at the bottom of the screen. You're generally more likely to get away with opaque things hiding the game behind them in this zone.
  4. Standard-Screen edges: this is about the extent you want to be putting anything important, especially if you have a wide-screen monitor tempting you with further space. You need to still see things going on in this zone to the sides, so keep things as translucent as possible on the right and left, still, but this is a good place for the less-imminent boss timers. Raid frames can spill over into this zone for healers, but I really recommend keeping them closer to zone 3.
  5. Peripheral: The things in this zone should be unimportant during combat, or only at a quick glance: a noticeable cooldown, chat log, damage meter. If you're putting important click-actions here, that's a pretty long way to travel your mouse and eyes. I suggest having only out-of-combat clicks in this area, otherwise having the actions keybound.
  6. Far Corners: If you put something here, it should be of little consequence to your raiding, especially on a wide-screen monitor. Things like your name, your portrait, zone name, bags, and chat go well into these corners.


As I mentioned before, mods have a nasty habit of blocking your view, even if you need them to be closer to the center of your screen... for example, raid frames. Even though these are of paramount importance to a healer, they can't be sitting in the middle of your screen. Keep these mods close, but ensure visibility, by putting them in around zone 3.

Beware the urge to put them on the far sides of your screen in zone 5, especially if you have a wide-screen monitor: you'll miss something important if you're fighting your focus between two far distances on your screen. Whether it's moving your cursor or just having to split your attention between the two areas, it does have an impact.

I know it's a pretty common place to put them. I used to keep my raid frames like this on the far left of my screen (regions 4 and 5), until I realized that I was having trouble moving while keeping a close eye on the raid to cast insta-casts while on the move. My raid frames and my character were too far from each other.

I've seen some UIs that slip sections of their raid frames over into region 6: the far corners! If you're a tank or a DPS, sure, I can understand putting raid frames in these further areas; the information isn't immediately necessary to those roles. A cleansing dps still needs to notice things to be cleansed, a RL needs to notice if someone is dead or dieing or has some important buff/debuff, but these aren't as important as the raid frames are for a healer.

So what's my recommendation?
I moved my raid frames from there to the bottom of my screen: region 3, spilling into 4. This is significantly closer to my center screen, while being far enough away that it's not blocking my view of something I might be standing in... and it's less likely to block my view than if I put it to the top or sides. I really enjoy this layout (and so does the stick figure!). If I need to move, my mouse and eyes are already fairly central with the screen for mouse-movement.

With the squarer, shorter health bars of Grid, I'm able to fit 25 boxes + pets in quite comfortably in this space. If you prefer wider, more traditional health bars, your raid frames will take up more space, but that'll be up to your own preference ;)

A note on Viewports:

Some players like running with viewports. These take your rendered game environment and downsize it, essentially shrinking your "monitor" down while leaving blank, unrendered space as a frame. This space is not technically blocking your view of anything if you're using a real "viewport," and the space is popular for putting in mods that would otherwise block your view.

Personally, I don't like running viewports, but that's my own preference. Whether you're running viewports or not won't impact the raw distance your focus/eyes/mouse have to travel between a mod and your central movement point, as compared to a fullscreen view... only the relative positions of the mods to your central character will impact that.

Beyond Positioning:

There are more things you can tweak for a mod than just its position, and these things can have a large impact on where you do end up placing it. For each mod, ask yourself these questions:
  • Is it translucent? Can it be made translucent, by lowering the mod or frame's alpha, without making it hard to work with? (ie bartender, power auras, health bars/HuDs, nameplates)
  • Is it big? Can it be made larger or smaller without sacrificing legibility? (ie button size, buff icon size, bar width, nameplates)
  • Is it animated? Is the animation distracting, or is it not even noticed? (ie sexymap, sexycooldown, power auras, cooldown pulses)
  • Does it look complex? Is this distracting, or make it hard to recognize peripherally? (ie power auras graphics, boss timers, combat text)
  • Is it necessary? Do you really need to know that info? (ie overflow of combat text)
  • Can it be key-bound and removed from your screen?
  • How often do you need to look at it or access it during combat?
These things can impact where you can place the mod while still being able to make use of the information it gives. For example, boss mod timers that would normally cover a portion of the screen:

Thinner bars, overall more legible at a glance, and shows background more reliably. The information they grant is very important to me, so this reskin of my DBM bars enabled me to better pay attention to it, and move it closer to center-screen without loosing any visibility. (Instructions on this DBM reskin can be found here)

My UI Layout:

This is how I chose to arrange my UI as a healer/sometimes tank/melee dps), with the "zones" overlaid. It works well for me, though a pillar behind me is forcing my camera closer than I normally am zoomed.

An unedited shot, click to enlarge:

My UI is by no means perfect, nor is it appropriate for every player/role (for one thing, I have my threat meter down in the far corner!). Every UI has room to improve, imo. Just be sure you do your best to maximize efficiency without sacrificing visibility. So, when tweaking or building your UI, just remember these key things:
  • Visibility of the Game Field: mods' position + size, transparency, zoom
  • Importance of the Mod's Info: position + size, animation
  • How long you have to focus on it in combat: position + legibility


Keeva said...

I'm going to create an online petition for Kae to use stick figures in every blog post.

I used to have my Grid over in the far right corner; this worked best for me because having stuff under my feet made me anxious that I was covering fire/bad stuff. But - having said that - I think it was only okay because I had a 17" monitor, so the "far" corner really wasn't that far from the center of my screen anyway.

Now that I have a 24" widescreen monitor, it's simply not practical to have Grid in a corner anymore, and I had to move to a more central point (although still not directly under my character).

Avoran said...

I was having some problems with the "grid vision" for a while on my Druid as well. So after hours of playing with UI designs in paint I came up with a somewhat unorthodox UI that just "fits" for me really. Tell me what you think?

Kae said...

It's certainly unique! I'd be concerned about things hidden behind the boxes, though, especially if I needed to click on them (more a tank/dps thing, I suppose?).

Beranabus said...

My UI is the best.

Just saying.

Kae said...

Base UI makes me cringe, Bus ;)

Anonymous said...

Hi Kae, Your Inteface is good, but i suggest you try minimalistic compilation. it is a lot organized just check it out yourself for more info, Ive been playing world of warcraft for years now and I admit it Im addicted to addons and interface compilations. I like my interface as neat as possible that way its easier for me to raid especially being a healer and all. anyway, heres a link to take a look what my interface looks like

My omen meter is beside my recount its just not showing when i IDLE its because I am in a City and not in combat. I edit my grid, and rearrange some frames in my own playstyle to make it easier for me. anyway, take care!

Anonymous said...

Oh and the DBM skinning, thats how mine looks like too, same as yours. I really loved it, you just change the script code .lua file to look like that. i learned and got it from tukui too. its awesome! they can do skinning for other addons too like omen and recount meter and other boss mod.

Kae said...

I do like that they centered the raid frames at the bottom, but I really prefer my own UI as a whole :) The Tukui one has raid frames too large for my liking, and shows way too many action bars showing. I keep the vast majority of my actions either keybound or in a openable submenu system via LunarSphere. With the IceHUD, I also don't need to stick my blocky personal/target unit frames in the center of my screen (though it's a good spot for those without a HUD).

Plus, UI compilations have a tendency to mess with my Grid buff and Hot monitor settings ;)

Simon said...

hehe love this bit, gj!

Anonymous said...

This is the good thing about Tukui, you can edit it on your own taste and minimize action bars, grid, and depends how much resolution your pc can take, and its not that the frames are huge you have to minimize your ui settings, so it wont look big lolx.

and note that in my compilation I disabled Tukui's grid settings. the grid you see in my picture I did that on my own, so the grid settings is really not messing up if you use others compilation and also your HoT monitor.

But yea it depends on others how they really want it, how comfortable they are, its really up to you. not all of my addons is from Tukui you still can configure like i said on your own playstyle.

Kae said...

I really prefer my own UI. I'm very happy with it, and the few tweaks I'd like to do are not things that Tukui UI has. While a UI compilation is a good place to start, I am not looking for a place to start... I already have that :)

You seem concerned that my UI is less organized; please keep in mind that it is in combat. I intentionally took raid shots from the most hectic fight I'm attempting at the moment, because that's where a functional UI is most important.

I found the DBM bars customization from Damia UI. I found it in Zing's screenshots at the Totemz blog. Not sure who designed it first, but there are a lot of UI compilations out there.

In regards to the raid frames, I think you misunderstand me: they are too wide for my taste. Some people prefer that traditional health-bar frame, but I feel it takes up too much screen real-estate when I can condense them into squares. That's a personal preference towards minimalization.

Now, what I do want to do with my UI is this (and I just haven't gotten around to fiddling with it):
- Remove my personal frame, as it's completely unused and redundant to both Grid and my HuD.
- Move my target frame to top-center, with debuffs to the side. Probably move the portrait to the top as well to center it better, graphically.
- Move the "heroic attempts remaining" frame to the far left corner.
- Move my "inc boss timers" up a bit so they stop overlaying my cast bar.
- Find time to apply more of my own art to the interface. Been really wanting to make a leafy border along the top.

I do need to get around to it :) Some day when I stop procrastinating on it, heh!

Anonymous said...


"You seem concerned that my UI is less organized"

You probably misunderstood me too, I did not say that your ui is unorganized, i was just suggesting that as far as UI compilations out there now a days Tukui is the most convenient I have ever used and I agree with you it doesnt matter how it looks like, the important thing is the utility of the addon you are using to help your class to play better, meh, others even dont need UI to perform and they can still do well. I tried so many including Bati's ui in Holy Nova Now. and I know there are a lot of UI Minimalistic compilations made now a days and its crazy!

P.S I feel like we are debating what is better and what is not lol, sorry to bother you and posting here (ill stop now =P). it was really just a suggestion. I appreciate the replies though take care! and Goodluck on the future plans and rearranging some stuff regarding UI, in fact i had to do some of that with a friend that keeps bugging me >.<

Peace! =)

Kae said...

Hehe, actually you did spur me into action on the UI modifications, as I just kept forgetting about wanting to do them. I stayed up way too late (insomnia...... ugh) last night, fiddling with my UI on an alt. The biggest pain is trying to move the "heroic attempts"/pvp frame in the top center; I was wary of trying the MoveAnything mod as it's no longer going to be maintained. Did find a mod that let me move part of it: BattleObjectivesMover, I'll just have to see if it worked for the heroic-attempts text as well!

Sorry for the misunderstanding :) We UI Junkies get a bit defensive about our design choices, ne? No rabid tree coming after you, no worries! :D

Vixsin said...

I'm a bit late to this post, but something else to add ... don't underestimate the power of audio cues in place of timers/alerts/etc. One of the biggest changes I made to my UI in recent weeks was to transition a number of my eye-catching alerts to auditory cues. A chime for Infest casts, a bell for Plague, a raid warning for mana sub 60%; all things that I can process without moving my eyes away from the action.

And I'm going to second Keeva's suggestion for stick figures in every post.

Jasyla said...

I love this post!

Over time I've moved almost everything towards the bottom of my screen. I like my target, focus and own frame to be down around grid.

I also like the option introduced recently (actually it might have been a while ago) to consolidate your buffs on the upper right.

I'll have to look into that DBM skin, it's nice.

Kae said...

That's a very good point! I've actual got a combo-points mod that chimes every time I get a combo-point, scaling by number until I use a finisher :) HearKitty is awesome!

DBM's been pretty good about providing audio queues for most boss alerts, though the mana one is a good idea. I'm guessing you did that through Power Auras?

Agreed on keeping focus frames closer to Grid. Grid provides a personal frame (and pets') but focus and target aren't handled by "raid frames," so it's up to the user to move them appropriately!