Pimp My UI: The Art of Interface Design

Zygar · 05/29/07, 2:50 AM

This thread partially inspired by the old, archived thread: Post your unique UI that brings something new to the table.

Recently, I have been browsing multiple UI threads, across multiple forums, in a search to find the perfect UI for my Warlock, having gotten bored of my old one. (Yes, I am aware this is a Paladin. I kind of destroyed my Warlock’s UI in trying to make a new one.)

My search was in vain however, as it turns out 95% of UIs are exactly the same. All of them are variations of the same boring layout, some are prettier than others, but they’re still the same. You’ve got the chat on the bottom left, the combat log on the bottom right, a minimap usually in the bottom middle somewhere, with action bars to the left and right, and unit frames above that. Hell, even my UI follows most of these boring conventions.

And that got me thinking: “Surely this can’t be the most efficient layout, can it?” Often these generic Ace UIs have a lot of useless information in the most prominent parts of the screen, while cramming important stuff away in a corner, or just stuffing it all in the bottom and having a nice cluttered interface.

So I figured, in the search for the perfect UI, I’d make a place to discuss the overall design of the interface. If you’ve got an interface that makes use of design elements not frequently seen in other UIs, post it! In fact, if you’ve got a UI that isn’t your standard generic boring Ace UI, then post it, along with an explanation of what you did differently.

Also, if you have tips on interface design, I’d love to hear them. In fact, to get the ball rolling, here are a few personal observations:

1. An ideal UI will be goal driven. What do you need? What information is of the highest priority? What actions will you be undertaking with this UI? Will you be PvPing? Will you be raiding?

2. Space saving – this is a big one, especially on screens with lower resolutions. To maximise viewing area, you really want to make efficient usage of space. Does your minimap have to be that big? If you’re in a group, do you need to see damage meters and the minimap at the same time? No? Then place your damage meters on top of the minimap! Same deal with party and raid frames – do you absolutely have to have your party frames enabled along with your raid frames? If not, place your raid frames on top of the party frames, to take their place in a raid.

3. Centralization of important information: This is one of the most important ones, and the one which the default UI gets so horribly, horribly wrong. First off, anything important SHOULD be near the action, as that’s where you’re naturally going to be looking, right? So unit frames should be centered somewhere. Secondly, your important stuff should be clustered together – cooldowns, cast bars, dot timers, etc should all be near the action. This is the mindset that most of the generic Ace UIs follow – everything is centered, and often near the bottom, as it’s generally more comfortable to have the vital information near the bottom of your screen than at the top.

4. Consistency: This one is interesting. You can have the most boring and generic UI layout in the world, but if you pick a nice visual style and apply it consistently throughout your UI, you can have an amazing looking interface. Case in point, an interface screenshot I found on these forums. Generic Ace layout, yet it looks great.

Note: This thread is NOT the “Post your UI” thread; this thread is for discussion of interface design, and UIs that break the mold. If you have a UI that does something different, post it, but please – only post it if you’re prepared to explain what makes your UI special.

Zygar · 05/29/07, 2:50 AM

Anyway, for all my waffling on about centralization, I am finding myself completely incapable of designing a user interface for my Warlock that doesn’t piss me off. As a Warlock, I’m finding that even though I don’t have many cooldowns, the position of unit frames is something that takes some time adapting to, and seeing as how I have some alts with a heavier reliance on cooldowns, it would be bad design to make positioning of that sort inconsistent across characters.

This was my first attempt. Yes it’s a Photoshop mockup. I built it ingame, and didn’t how the information at the top of the screen took attention away from the info at the bottom – teaching me about centralization pretty quickly.

This is my second attempt. Shifting chat to the top of the screen could take some getting used to, but on a non widescreen monitor, it really frees up a lot of room at the bottom of the screen, while not even completely obscuring the top left, where nothing important really happens anyway. (Not shown: raid frames covering party frames, SWstats covering the map, KLH Threat Meter to the left of demon’s unit frame.) The vital information is concentrated in the bottom center, the most important information being up just high enough for it to be comfortable to look at for an extended period of time. Honestly though, I don’t know if this is the answer, either. I’m sort of at a loss as to what I can do to make a nice, sleek UI with maximum viewable screen space, reusable space (such as SWstats covering the minimap, or my chat edit box obscuring fubar) and all the information I need to play effectively. At this point, I’m really looking for advice on how to proceed. I was hoping that by making this thread I would stimulate general UI discussion that would assist with this, but any advice that anyone would like to offer would be very much appreciated. Additionally, if you want to have a play around with the Photoshop file that this came from, I uploaded it here: Interface Mockup.psd (4mb).

Randor · 05/29/07, 3:06 AM

With IceHud and Mik's text mod, there's no need for things around the middle of the screen. I prefer my stuff near the bottom where I can glance at it if needed (most things are hotkeyed). I also prefer a clean UI.

I think it also matters what class you play, or what role. Melee need far less information than a caster and/or healing class.

As far as perfect, I think beauty is the eye of the beholder here. One person's preferences may not match anothers, just as one's play style may not be the same as someone else's.

• Falk · 05/29/07, 3:32 AM

Completely off-topic, but funny enough that it warrants posting. I read the topic title and was about to post my UI, because I feel it's certainly -pimped- enough. Then, I read this following paragraph:

Originally Posted by Zygar

All of them are variations of the same boring layout, some are prettier than others, but they’re still the same. You’ve got the chat on the bottom left, the combat log on the bottom right, a minimap usually in the bottom middle somewhere, with action bars to the left and right, and unit frames above that. Hell, even my UI follows most of these boring conventions.

Every subsequent sentence was a knife in my back and served to make me wince even more. (click here to see why)

To try to salvage the situation, let me try to explain some of the design considerations I'm more proud of. Even though at the heart of it all my interface is a boring, generic Ace interface. (On steroids, but still... :P)

I'd agree with most of your points. There's usually quite a lot of irrelevant information in a person's user interface that probably could be pruned out. Some examples are:
1) Action Buttons - other than buttons that show abilities with cooldowns, is it necessary to visually represent what skills your character has and what keyboard buttons they're bound to? They're used almost as much as you breathe and should be second nature... surely they can be hidden to save some real estate.
2) Self's name/class/level/race on unitframes. I don't need to know that I'm level 70, and that my name is Falk.

To me, I feel that the most efficient use of space is a design that neatly sections everything into rectangular regions. Non-regular shapes tend to have a terrible information:real-estate ratio, especially w.r.t. the space that's leftover to view the playing field after all the other UI elements are put in place. As an example, if you play DotA a lot, that humongous information display on the top right for kills/deaths/etc tends to get in the way quite a lot of the time and people generally end up minimizing it.

As to why I 'defaulted' to the usual layout of stuffs bottom, playing field top, it's because it makes the playing field area rectangular. A viewport mod (Skinner, in this case) helps 're-center' the player character model in the remaining real-estate and provides a good, clean, mostly uncluttered view in all directions of the character.

The most important/relevant information is displayed directly below the character. My reasoning for that is because the closer to the center of the screen the info is, the better, as it's quicker for glancing. Why bottom then? Simply because we (most often) need to see things in front more than behind the character, hence getting close to the player model from below is the smallest sacrifice in field of view.

I put self/target unitframes one on top of the other. It gives a very fast and clean visual comparison of whose health is lower, by how much, etc without having to look at percentages and compare. It shows how my mana is in relation to a mob's HP, etc.

Not shown in that particlar screenshot is timer bars right below the unitframes. Both skill/buff/debuff timers (Sorren's Timers) and BigWigs boss timers coexist there.

Zamaar · 05/29/07, 4:19 AM

Now that you mentioned centralizing the info I noticed I was doing something wrong, my cooldowns are on the right side of the screen and my debuffs duration are on the left side, I'd love to know if there is an addon that tracks debuffs duration and cooldown in a tiny (hi2u laptop with 1024*768 res) tidy way, would be awesome.

Randor · 05/29/07, 4:26 AM

doh, lagged.

Randor · 05/29/07, 4:31 AM

Originally Posted by Zamaar

Now that you mentioned centralizing the info I noticed I was doing something wrong, my cooldowns are on the right side of the screen and my debuffs duration are on the left side, I'd love to know if there is an addon that tracks debuffs duration and cooldown in a tiny (hi2u laptop with 1024*768 res) tidy way, would be awesome.

Morganti's buff bars mod will do that.

subscience · 05/29/07, 12:48 PM

I completely rehauled my UI a few times over this weekend. Initially, I had an aesthetically pleasing UI layout that was, simply, a pain in the ass to use. Sure it looked pretty, but I had to constantly look back-and-forth across my monitor to get pertinent info. I scrapped it. My second go around brought back better results but I'm still looking for ways to setup something that's comfortable to me.

Here's a few things I learned that I personally prefer in a UI:
Cluster information by category and importance. This seems like a no-brainer, but when I had initially setup my UI, I had Antagonist timers in one area, totem timers in another, and cooldown timers in yet another area. For example, if I wanted to halt a spell cast, I would have to check one area for my target's castbar, check another to make sure my shock cooldowns were up, check yet another area to see if I had the Grounding effect, and then finally fire the spell interrupt. Clustering pertinent information together made a noticeable difference in timing and far less headaches.

Buff/Debuff filtering. There are certain buffs/debuffs that I need to be able to check for on everyone. With Blizzard's standard buff/debuff icon sizes, it's hard to sort through the cluster of icons to pick out the pertinent one and even harder to see the new icon duration timer if I'm using a smaller UI scale. I setup a debuff filter for only important and pertinent buffs (as a Shaman, that would be any Fear, Poison, Disease spells and other important PvP debuffs such as Polymorph, MS, Counterspell/Spell Lock).

[Speaking of which, does anyone know of a good debuff filtering mod for player/party/target? Something that can maybe create a duplicate debuff container with filters.]

Minimap positioning is important! I never realized how much I relied on my minimap until I moved it. As trite as it may be, having my map in the dead center along the bottom is very nice and glancing below your player frames tends to be a bit more intuitive than peering to the top corners of your screen.

Too many hotkeys = bad. I found out how to bind Ctrl/Alt/Ctrl+Alt modifiers to my mouse and wound up with 30+ extra keybinds. At first I thought "sweet! Now I'll be even more efficient!" until I actually took the keybindings I made and tried them out. I ended up staring at my spells and their keybindings trying to figure out what was bound to what instead of actually using my keybindings. Suffice to say, I nixed the idea and kept the simple Shift/Ctrl/Alt modifiers.

Clustering keybindings. In the same vein as clustering pertinent information my UI, I find binding spells/abilities with rougly the same use (or would be used in similar situations) to the same/nearby key to be a lot more helpful than I thought. For example, F, Shift F, Ctrl F etc. were my Healing Wave ranks (9, max, trinket + NS) and my C with modifiers were my Lesser Healing Wave ranks. I changed it up and bound my max rank heals to a key (F) and my downranked spells to another. In essence, my F key turned into my "oh shit needs max rank heals, mash that key" and my C into a more PvE-friendly, downranked spell binding. It's somewhat hard to explain, but having similar functions bound to a key helped me a lot in terms of remember what was bound to which key and spell ranks.

Machichi · 05/29/07, 1:49 PM

I've realized that my somewhat smaller flatscreen monitor (1024x768) has probably affected my UI more than anything else. I tend to shrink the scale of almost every addon I use so that I can reclaim as much space as I can while still having the info I want. Almost every addon I use has been shrunk to at least 85% of it's out-of-the-box size. I've recently been contemplating using some of my collegiate graduation money to trade-up to a larger monitor, thoughts? I know there's no real downside, but is the difference in monitor size (vs my shrinking checkbook) really noticeable from a gameplay standpoint?

Naji · 05/29/07, 2:09 PM

Originally Posted by Machichi

I know there's no real downside, but is the difference in monitor size (vs my shrinking checkbook) really noticeable from a gameplay standpoint?

A couple of months ago i went from a 19" CRT Monitor to a brand new 22" widescreen TFT and the difference is immense. I went from running the game in 1280x1024 to 1400x900.

Before I would have all my UI crammed on my screen, and like you, had to downsize most of it. Now I have much more room, so i can actually see what's going on in the world behind my UI

(I want to post some samples but my domain seems to be down at the moment)

grimman · 05/29/07, 2:12 PM

I started with a fresh UI a couple of days ago when I paid for WoW time after 2 months of absence. As I was playing, at first without any addons at all, I found it increasingly painful to do anything with the default Blizzard UI and moved more and more towards what you people seem to call an Ace UI. Me, I would call it a Discord UI... but that's beside the point.

http://dlxmedia.net/WoWScrnShot_052907_142953.jpg is what it looks like right now, action buttons still visible.

A while back, more than those two months I mentioned earlier, and preBC, it looked like this:
http://loot.dlxmedia.net/wowscrnshot_102406_215235.jpg

I apologize for the two different sub domains/URL handling, but I'm trying to keep my renewed WoW addiction a secret.

But as it has been pointed out, it's simply more intuitive to keep it all in the middle. My main is/was a hunter and having the minimap in the center like that is pretty much necessary in order to use tracking efficiently without having to look all over the interface for the info needed.
And like Falk I find it utterly stupid to keep the name/level visible for any other reason than screenshots. At least to find out what level I was when a particular screenshot was taken.

Binding wise, I don't know how many of you are actively using the scroll wheel for actions, but on my hunter I had ScrollUp == HM, ScrollDown == serpent sting, Shift+ScrollUp == trinket1 and down for trinket2, and so forth. Trinkets require(d?) an addon.

One thing I'm curious about is the lack of "HUDs" in most screenshots. I would have thought it was an efficient way to display HP/MP (or equivalent) without being too obtrusive, but apparently not. I don't really fancy them myself, I've tried, but never could find one I liked.

Edit: Oh, and like some people I have brought the scale down a notch to accomodate some stuff. My chat boxes are in the same spot, and are accessible through tabs to minimize clutter.

◊ Kyth · 05/29/07, 2:23 PM

One thing I learned (and I play with my UI a lot) is that duplication of information is *not necessarily* bad.

I still keep dot timers around, for instance, for when I'm handling multiple adds. But the ease of having Quartz's debuff information right in the middle of my screen, small and compact (because it's just one target) is worth the "Additional" realestate for me, and I find it easy to ignore one or the other. On a boss, though, dotting is a breeze and I can just pay attention to the very middle of my screen.

After years of hating HUDs, I finally tried one long enough to get used to it and I've found I really like it, although I still cannot pvp with it effectively.

The single biggest UI "cleverness" for me was when I first thought of placing my trinket right below my character's feet. (and then later added my soulstone.) I also have almost all my hotkeys hidden, but I have two spells up to show "range to target" or which schools are silenced.

Trinkets below my feet in plain sight was probably a bigger dps upgrade for me than any loot ever will be.

Emila · 05/29/07, 2:29 PM

Personally I found the resolution to a more important factor than the actual size. Since I started playing wow I have moved from 1024x768 to 1280x1024 and than finally to 1600x1200. Getting a monitor that can support the larger resolutions (and a computer than can too) was liberating for my UI.

As it has been mentioned before, relevant placing of your bars are by far one of the best things you can do. Currently the biggest problem with me current ui is that my focus target (and targets target) stack just above my own bar, causing me to have problems remembering what one is my target and which one is my focus.

Originally Posted by Machichi

I've realized that my somewhat smaller flatscreen monitor (1024x768) has probably affected my UI more than anything else. I tend to shrink the scale of almost every addon I use so that I can reclaim as much space as I can while still having the info I want. Almost every addon I use has been shrunk to at least 85% of it's out-of-the-box size. I've recently been contemplating using some of my collegiate graduation money to trade-up to a larger monitor, thoughts? I know there's no real downside, but is the difference in monitor size (vs my shrinking checkbook) really noticeable from a gameplay standpoint?

◊ Kyth · 05/29/07, 2:34 PM

Originally Posted by Emila

Currently the biggest problem with me current ui is that my focus target (and targets target) stack just above my own bar, causing me to have problems remembering what one is my target and which ones i my focus.

Try resizing them by order of importance. Focus being smallest, target being largest.

• bekayoh · 05/29/07, 3:21 PM

The biggest improvements can simply be made by sorting UI areas.

Putting clicked items into one area. For me my mouse is usually "resting" in the bottom right quarter of the screen. This the area I have my target and ToT, trinkets, consumables, assist windows and party or raid frames.

Usually I put my chat frame in the middle. I use my tabs on my chat window a lot as well. A chat tab for combat text, one for tells, one for general/trade/lfg spam and maybe an additional for guild or private channels. If you leave your chat windows unlocked you can grab and drag one of those windows out for certain times (LFG, or LF enchants etc) but minimize the two chat box clutter that most uis have. Almost everyone has some sort of scrolling battle text for instant combat info so the combat log can be hidden until you need to check it. Of course I have heard that MTs often need to see a bigger combat window so for them they would have to keep it out.

Then on my left hand lower side I put the info going from center area out in order of importance. Usually my unitframe with main spells under it, then KTM and a damage meter. The meters can be made invisible until in group this leaves my ui with a nice chunk of stuff in the middle bottom of my screen solo and slowly fills in the bottom in raids.

Added a little mock up of my ui to make my above explanation a little better. (hopefully)

• Maligne · 05/29/07, 3:44 PM

The biggest thing I notice when it comes to cleaning up UI's is people dependence on having buttons and bars show cooldowns. Why have every possible thing that could be cooling shown all at once? Why not just use bars that appear only when something is on cooldown?

• bekayoh · 05/29/07, 3:54 PM

Originally Posted by Maligne

The biggest thing I notice when it comes to cleaning up UI's is people dependence on having buttons and bars show cooldowns. Why have every possible thing that could be cooling shown all at once? Why not just use bars that appear only when something is on cooldown?

I usually use cooldown for for cooldowns which I didn't put in my above post nor did I put a enemy castbar/cooldown because those are small and where people put them is very dependent on class and play style.

I've tried slimming down my buttons on screen but most of the time I don't like it. I have tons of spells on absolutly memerzied as far as keybinds but I still like to see most of my spells for range and just in case. I do keep my spell buttons tiny though.

For secondary spells (hearth, portals, conjuring, buffs) I've tried things like geist, which I may go back to, but in the end I like the majority of my spells on screen. This is a personal prefrence

◊ Shalas · 05/29/07, 3:58 PM

Originally Posted by Maligne

The biggest thing I notice when it comes to cleaning up UI's is people dependence on having buttons and bars show cooldowns. Why have every possible thing that could be cooling shown all at once? Why not just use bars that appear only when something is on cooldown?

For one, I've never found a cooldown bar mod that always puts the same cooldown in the same place. In addition, only showing bars for things that aren't usable suffers from the basic problem that in general I care much more about what I can use than what I can't. You could use DoTimer style ghost bars, but then you aren't saving any space, you're just replacing a button with a bar.

• Maligne · 05/29/07, 4:03 PM

Double post!

• Maligne · 05/29/07, 4:06 PM

Originally Posted by Shalas

For one, I've never found a cooldown bar mod that always puts the same cooldown in the same place. In addition, only showing bars for things that aren't usable suffers from the basic problem that in general I care much more about what I can use than what I can't. You could use DoTimer style ghost bars, but then you aren't saving any space, you're just replacing a button with a bar.

Saying you care more about what you can use than what you can't is just saying the glass is half empty. And even then, I guess what I'm saying is, the things you can't use take up way less space on the screen than the things you can, so why not just worry about that? If I don't have a frost nova bar counting down, I know I can use it.

I realize that to some extent it's a personal preference thing, but if you changed your preference, you'd save a lot of space.