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.
   

View:

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