Pimp My UI: The Art of Interface Design - Page 12

Zygar · 10/02/07, 6:02 PM

I'd like to share a little mod I found on WoWAce called ReadySpells.

This is a boon for me as a Warlock, as instead of having big clunky DoT timers, ReadySpells simply tells me what is NOT up on the target, giving me 4 seconds warning when my spell is about to expire. This way, in a raid situation, the more dots I have up, the more screen real estate I have - the opposite of a traditional timer where the more dots you have up, the less space you have.

coolballer · 10/02/07, 6:21 PM

I have mostly focused on trying to centralize what I consider the most important information around my character (which is your health, target health, targets debuffs, and targets target). There is some overlap in the information displayed, but overall I really don't mind overlap of some things (for example, health of target and your character is displayed in the Hud, and in the unit frame on the immidiate screen, and also in the party and GRID raid frames). The reason for this is because I use this same layout for PVP and PVE. So I need to have all the raid information available to me (such as buffs and debuffs on the entire raid). In 5v5 arena the GRID frame is covered by Proximo since I will already have my party of 5 at the top of the screen. The focus target is also rather important and as such has its own prominant place on the direct left side of my own characters health. Raid screenshot.

The biggest thing I need to do is to get a new cooldown counter. The one I have now doesn't seem to flow with the UI. Also, Since this screenshot was taken I have switched the positioning of the threat meter and the damage meter, since threat is more important then a damage meter which basically serves no purpose aside from a benchmark for yourself.

I have very few buttons on the screen. Every spell and ability that I have bound is hidden. The only buttons on screen are buttons I click to use for the most part. I found that hiding all buttons that I have bound really cleaned up a lot of space in the UI. However, this really makes it important to have a good cooldown monitor so you will know what is available to you at all times, and this is something i'm lacking.

I think the biggest thing I have yet to do is find a good spot for the threat meter. I'm trying it down between the grid raid frame and the chat window, and so far i'm not sure I like it. But I can't think of another place I could put it.

Kelfar · 10/03/07, 3:03 AM

I think for my UI I try to have almost no buttons but I have 12 key buttons that always show up. These buttons are Summon Water Elemental, Iceblock, Cold Snap, My mount, Arcane Intellect and Molten Armor.

I could take off my buffs such as AI and molten armor but I kind of like having that many buttons on my screen. I have one other bar that only shows up on mouseover that has things like Teleport:Shatt, Conjure Food/Water, Evocation, Arcane Brilliance. Basically things that I don't use very often and are more situational. I will use teleport Shatt maybe once a day(only level 68 so still questing) Conjure food and water once each when I logon I am usually good from then on.

The one thing I don't like about my UI is that I have both my normal chat frame and my combat log showing just so its symmetrical but I really want to change that. The one thing I really like about Sieto(can't remember exact name, was omgphatloots.org guy) UI is that Chat frame is in the middle with everything around it and you have room on the bottom left and bottom right for other things. Right now I have no place to put damage meters and Omen So they just sit above my chat frames. The one problem with doing it like Sieto's is that I only have a 19" monitor and run at 1280x1024 so I don't have much room at the bottom middle for everything unless I zoom out alot or else it gets quite close to my character which I don't like.

But in the OP post the one thing I agree with is that chat frames on each corner and cast bars in the middle with unit frames on top is what everyone does but some people can pull it off. Ryas and Caith come to mind. They follow that "generic" UI build but they know how to make it look nice.

Led ++ · 10/03/07, 5:10 AM

Originally Posted by Furion

If my Healthbar has the same color scheme as everything else which is being put around that I'd have problems knowing my health at a glance.

True, this sometimes bugs me to tho it's more a matter of getting used to it. Imo the important thing in Unit Frames is that the background colour of health should have an obvious darker or lighter colour then the normal colour.

Originally Posted by Furion

I think looks and functionality unfortunately don't always go hand in hand and while your UI certainly convinces me in the former my priority is more on the latter. When I look at http://elitistjerks.com/f32/t16276-p...wow_interface/ or similar threads I can often see people making a choice between these two and most seem to prioritize the looks even if it causes a loss of functionality to a degree.
I sometimes wonder if they make these kind of choices partly because, when designing their UI, they already know they are going to post their UI and wether they would make the very same choices if they just used it in private.

True, I agree that having pretty art isnt always the best, that's why my UI's mainly have the simple colours and 'textures'. I choose for an original set-up partly for good looks to, as I know most people dont have an interface like that but at the same time I worked around it's functionality and lucky for me .. it worked bothways.

Gern · 10/06/07, 10:09 PM

I'd like to talk about how people process information differently, and how it relates to the choices they make when modding their UIs.

I first started thinking about this when one of my fellow tanks and I were discussing mods to time our shouts and thunderclaps. He uses timer bars, which I tried and was never able to get used to, and I use a debuff filter. I've noticed something similar with unit frames, where most people are able to use frames that are just health values and names, while I need portraits and percents. I began to notice just how 'pictoral' my UI was, my buffs are icons, my unit frames use portraits, my debuffs are images, etc. For the longest time I tried adapting to timers, like elkbuffbars, DoTimers, etc. but I found I simply was unable to process the information when it was displayed like that. I never really gave it any thought, other than thinking, 'this mod doesn't work for me'.

A perfect example is my continued use of the game's default unit frames (albeit moved to a more suitable location), even though I've long since replaced every other aspect of the default UI. I've tried Pitbull, I've tried AGUF, but I've found I am unable to adapt to anything other than the standard unit frames. For the longest time I simply believed it was due to using the standard unit frames for so long, but now I believe it's due to the way my mind processes what it sees. Most after market unit frames give you a health bar with a name written on it and a health value, and I've found I simply can't make heads or tails of it when in combat. I need portraits to tell what I'm targeting and what my target's target is, and for that the standard unit frames work best. And as I pointed out, this seems to carry over into every other mod I use.

I think this goes to show that when discussing the science behind good interface design, just as important as layout and class/role functionality is choosing mods which compliment the way a player processes information.

Furion · 10/07/07, 6:27 AM

Originally Posted by Gern

I think this goes to show that when discussing the science behind good interface design, just as important as layout and class/role functionality is choosing mods which compliment the way a player processes information.

Yes, I think you are up to something interesting there. People learn better from different sources (some through hearing, others reading etc.) so it's quite obvious not everyone can process the same kind of information equally. So I guess some would profit a lot more from mods with audio warnings than others.

I myself was quite happy with timer bars at first but as I proceeded to implement them more into my interface I have to say that there is a hard limit on how many bars my brain can process at a given time thus I had to cut them down a lot again so I don't have too many shown at once.
This suggests to me that it might even be smart to use as many different ways of displaying different information given at one time as possible to maximize the amount you can process. And that it might help to have the most critical informations displayed through several means (audio-visual for example).

Quaunaut · 10/07/07, 8:32 AM

Before I begin, I want to say, I play DPS classes. My most important things are managing cooldowns, and mana. My UI works for all 3 class types *very* well, but my most important focus is DPS, so you will see those things take priority in screen position.

This thread helped me a lot over time, and I am a big believer in a few things:

Color is *the* most important thing. I'm still trying to figure out how to make Pitbull have the main bars change color as I/others lose health, as that would make a *huge* difference.

Centralization of information. I've recently begun trying to do this, as I used to have bars in different parts of the screen(all the corners but bottom right). Then, I centralized everything to the bottom-middle of the screen, like many do:

Prioritization of Information. After Centralizing, I found that having 3 bars, and autobar, and blah and blah, all in the bottom of the screen was hurting me more than it was helping- I would take extra time to be searching for the proper ability in that mess of buttons. So, I prioritized.

Note: I changed mains at this point as well, but Shamans are even worse on buttons usually- but luckily, I have Numen to help me.

Lastly, using the best screen real estate correctly. Many people talk about maintaining screen real estate, which is important, but just because you have plenty of acreage does not mean you are more efficient- you need your eyes to not be moving much. I tested for a long time with dozens of ways of managing this: Cooldown Pulse to have cooldowns in the middle, but I found that to be more distracting, and in the middle of a fight I wasn't recognizing the difference in icons. Cooldown bars would have worked, but I had to search for which cooldown I was looking for. Eventually I settled on the new OmniCooldownCount way of cooldowns: The quick flash. This allowed me to line up my mental cooldown rotation with screen flashes- I didn't even have to see WHAT was flashing, just that something was, and I instantly would know what it was.

But this also produced a problem. I found if I was leading, I would forget cooldown positions easily. If I was tanking, I was spending half my time looking at bars and the other have at onscreen enemies- this could cause issues in Heroics, where that much time means your Healer gets hit 1 extra time, and usually, 2 is death. As my Shaman(where I don't tank), I found I'd still have issues because of managing totem placement.

This means, I had to use the best screen real estate. The best, obviously, is the middle- but using that without crippling camera movement(rclick) or just plainly seeing what you want to is hard. So, I go out from the middle.

After seeing Led++'s UI both on the Ace forums(where at first it only intrigued me, before I found it pointless because of the similar colors of everything), and these forums(which came at the perfect time), I suddenly thought of the perfect variation.

With that, my cooldowns were near the center. This was good. I could identify them without losing a bead- perfect. My health was close by. Party member health is lower on the screen, above my Autobar. This needs to be perfected- but usually having their bars turn red from aggro is good enough.

Also, this is the first time I used Minichat- which is a big helper thanks to it maximizing- suddenly people saying things in raid becomes real obvious, when the box pops open all of a sudden.

So, basically: Thanks Led.

PS: Also, prettyness matters to me, hence the special model usage from Zuxana's Model Citizen. Still looking to change up a few things there, but I can't have an ugly UI, I just refuse.

Edit1: I had to add 3 things.

#1: The reasoning behind health bar color changing. Even if its progressive, you DO notice the change- and generally, progressive health loss isn't a problem as you generally know its happening. But instant, big burst hits, color change *really* helps because it gives you instant mental recognition of your general percentage of health.

#2: First, just wanted to say, upon reviewing my UI right now, I suddenly thought that I need to switch my buff and Debuff positions. I always know how many buffs I have, and never when I have Debuffs- I need that to be switched around(as buffs aren't *that* important really). Second, the reason I use default box+numbers for my buffs is because of screenspace- yes, bars are more easily recognizable(and in general, I think de/buffs are the best things to have on bars), but I don't think any are so important as for it to make that big of a difference between the two, so screen real estate wins.

#3: The reason I chose the portraits to go over the bars is PURELY aesthetics. I just wanted it to be purty and stylish. To counteract the lack of nearly 50% of the bar being shown, I put not only the absolute number in the bar, but the % in big numbers above it.

Kytrarewn · 10/07/07, 11:24 AM

Not to drag up an old topic that's been discussed in (minimal) detail already, but I do tend to find myself going to various mods and sliding scale down to 0 to the point that they become barely useful, if at all.

http://elitistjerks.com/501260-post361.html is my current UI.

Case in point is Autobar, in the lower right-hand corner. I like it for it's healthpotion/poison/elixir functionality, as well as the ability to have hearthstone/mounts very easily available, but at this point, in the name of "good visibility", I find myself minimizing it to where misclicks are absolutely inevitable.

My barmod is also relatively useless at the moment, but I like having it there. Perhaps I'm weening myself off it by making it smaller and smaller as we go along.

In addition, while, as a Rogue, I might not absolutely need to have raid frames up and open, I tend to enjoy playing "backseat raidleader", and seeing "OK, druid X is down, but he has a BRezz up, we can BRezz him, and we can Brezz the 7k HP mage who got two-shot by cataclysmic/spitfire".

This was probably the happiest I've been with my UI, all things considered, from the AQ40 days.

ViewportUI.jpg - Image - Photobucket - Video and Image Hosting

This is from the BWl days, and I was relatively happy with it (essentially the same thing but with party frames in a different place, and no viewport).

newui2.jpg - Image - Photobucket - Video and Image Hosting

This is my initial attempt at a custom UI somewhat usable for raiding (ZG/MC, I believe).

UIFortorm.jpg - Image - Photobucket - Video and Image Hosting

Basically, my big problem is that I find myself regressing further and further into the "tweaky tweaky too much screen used! Not enough screen used! Use the whole screen! No, just the bottom! Now more and more transparent! No, Viewport beneath all UI elements!" paradigms, and I can't reach the levels of satisfaction that I had previously obtained.

Granted that this is supposed to be a thread specifically about the theory of UI design: What do you do about temporary windows like Omen, sRaidFrames, etc to integrate them into your UI in a usable form?

Minimizing the size of Omen is, well, not an option at the current point in time, and I'm an information whore, so getting rid of Fubar, Assessment, sRaidFrames, etc. is not an option.

What am I doing wrong here, and how do I fix it?

♦ s4dfish · 10/11/07, 2:32 PM

Just download and swapped to Caith's latest posted here:
Bellum Forum :: Thema anzeigen - Caith v.10.1

I generally prefer to do my own UI, but wanted to try someone else's to see if I can get a different perspective. For reference here's an example of what I was running before:
http://elitistjerks.com/462916-post1441.html
Only changes that weren't show there is that I ended up with fubars on the two blue horizontal bars displaying stuff I reference frequently (guild members online, quest log, time, etc.).

Things that impress me from a usability focus are the clean lines and minimal amount of information on the screen at once. Having fewer things showing makes finding the thing you NEED much easier. Having a more consistent design seems to also make it easier look at for extended periods of time, which we all do. Placement of the party frames is also pleasant, seems to be at about 33% along the X axis and 50% along the y. I'd always pushed mine to the edge of the screen (0% X), which freed up more of the playing field, but forced me to look farther to find out who's pulled aggro/dying. Having the target debuffs on class timer display over my frame was a very interesting adjustment, but one that makes sense. I'm usually more concerned with my health, so keeping that information very close to what I'm already looking at was useful.

Fewer buttons on the screen was also an interesting adjustment. I typically have all my bars showing all the time, even though I do most everything through keybinds. So, I adjusted to only 1 main bar showing by having it swap with modifier presses. So I was able to effectively copy my old bar layout straight over.

Not having my always on fubar is an adjustment. I'm very used to knowing at a glance what time it is, how many guild members are on, how much coin I have, my durability, etc.. However I think that if I placed that information back to an always on setup, it'd ruin the cleanliness of the current design. Still trying to decide if/how I can incorporate that information without having to mouseover the bar to display it.

Bridonna · 10/11/07, 2:56 PM

Originally Posted by s4dfish

Not having my always on fubar is an adjustment. I'm very used to knowing at a glance what time it is, how many guild members are on, how much coin I have, my durability, etc.. However I think that if I placed that information back to an always on setup, it'd ruin the cleanliness of the current design. Still trying to decide if/how I can incorporate that information without having to mouseover the bar to display it.

You could add a small FuBar panel to your minimap like this

That image has GuildFu, BagFu, and ClockFu. You could also add smaller Fubars in other places, like once I did this around my actionbar:

♦ s4dfish · 10/11/07, 4:01 PM

Hmm, I may have to do something like that. Balancing between cleanliness and usefulness is more challenging than one would think...

Taryenne · 10/20/07, 8:23 AM

One thing I've found unmeasurable in my ui design/layout is the desktop feature in openRDX
Switching from a very minimalist solo ui to party or raid ui really lets me keep control of all aspects, saving the balancing act of player/target/tot positioning in respect to party/raid layout

Personally I found it quite irritating having to position player/target/tot around my main window that I use in raids, with this desktop feature however, all that becomes irrelevant

To elaborate further, when soloing I might want my frames nearer the centre of the screen (most actions are bound to my unitframes)
However, entering a party or raid this setup isn't suitable, selecting party/raid desktop puts the frames to a pre designated position and my party/raid frames as the focus
Raid over, select solo desktop and everything back to its original state

poopuu · 10/25/07, 8:38 AM

I am struggling hard to centralize my UI - to put information where my focus should be. As a raidhealer, the grid-box of 25 raidmembers is my most important information. So i have tried to design my UI around this big grid-box and kept in the central area of the screen. But i have two "problems" i don´t know how to fix and i would like to have some input from other raidhealers.

1: When i am not raiding - while questing or grinding - the area becomes useless and empty. (If i design it in the middle with my own portrait and castbars around it).

2: The grid-box area takes alot of space. How do you centralize 25-unitframes without cluttering the screen? Here is an screenshot of my "old" UI to demonstrate what i am talking about.

Sovereignty · 10/25/07, 11:40 PM

This is just some things I have been thinking about (a bit) recently but...

What's the deal with folks bordering EVERYTHING? Maybe I'm just way too out of the loop (I still haven't gotten over v4 of my Shaman's UI...and it's worked out exceptionally well for leveling my paladin) but I find this new trend in bordering to be slightly tacky. I guess this is gradient 2.0 =\

On the same note, why is everyone going with the [ ][ ][ ] approach to their bottom frame? It seems like folks who used to be quite "anti-combat log" have now gone over to the dark side! Ah, well, c'est la vie!

Bridonna · 10/26/07, 7:08 AM

Originally Posted by poopuu

I am struggling hard to centralize my UI - to put information where my focus should be. As a raidhealer, the grid-box of 25 raidmembers is my most important information. So i have tried to design my UI around this big grid-box and kept in the central area of the screen. But i have two "problems" i don´t know how to fix and i would like to have some input from other raidhealers.

1: When i am not raiding - while questing or grinding - the area becomes useless and empty. (If i design it in the middle with my own portrait and castbars around it).

2: The grid-box area takes alot of space. How do you centralize 25-unitframes without cluttering the screen? Here is an screenshot of my "old" UI to demonstrate what i am talking about.

I think you could do one thing that would solve most of your problems. Decrease the height significantly on your grid frames. When the grid frames take up less height, its easy to fit both them and your UF, even an actionbar or two, in the central part of your screen without looking cluttered. And when the grid isn't there, it still should look fine. If I can fit 40 people + my UF + my action bar, I'm sure you can with 25. But there really is no need to have the frames that tall, it just takes up too much space. Now, if you had the grid frames someone other then the central part of your screen, having them larger is better since you have to look father away to see them. But when you are always looking at them, and they are central to your UI, they dont need to be that large.

♦ masanbol · 10/26/07, 9:16 AM

Originally Posted by Sovereignty

What's the deal with folks bordering EVERYTHING? Maybe I'm just way too out of the loop (I still haven't gotten over v4 of my Shaman's UI...and it's worked out exceptionally well for leveling my paladin) but I find this new trend in bordering to be slightly tacky. I guess this is gradient 2.0 =\

I think the border trend has a lot to do with the fact that people have discovered that it's possible to replace Blizzard's default border texture with one of your own, which can then (through Skinner or something similar) be applied to your entire UI with very little effort. One thing I always hated about my UIs was that the default frames were all different from my eePanels creations. This new attack on bordering creates a consistency that I like quite a bit.

♦ s4dfish · 10/26/07, 1:00 PM

What are peoples thoughts on buff icons versus buff bars? I like buff bars for long duration buffs, but for shorter duration buffs (procs, etc) and pretty much all debuffs I prefer bars.

Zygar · 10/26/07, 9:24 PM

Originally Posted by s4dfish

What are peoples thoughts on buff icons versus buff bars? I like buff bars for long duration buffs, but for shorter duration buffs (procs, etc) and pretty much all debuffs I prefer bars.

I like to place anything self-cast, procs, and debuffs on top of my player frame, usually using Pitbull's Aura function. Long buffs and such get given a bar at the top right of the screen.

I'm not sure if I posted my imitation of Saeto4, but here is a demonstration of what I'm talking about.

It centralizes information that will either affect adversely, or information that I can *do* something about (ie, showing self cast buffs and procs) around the area of the screen that I'll be looking at the most. To prevent it from getting too cluttered, other buffs, typically long ones cast by other people, get given a thin bar in the top right of the screen. I can still check at a glance to see what buffs I have, but it keeps buffs that are largely irrelevant to me out of my face.

One thing I'm finding is that it's tricky to place the cast-bars somewhere where they look good, and offer maximum functionality.

Teffy · 10/29/07, 6:23 AM

Originally Posted by Bridonna

You could add a small FuBar panel to your minimap like this

That image has GuildFu, BagFu, and ClockFu. You could also add smaller Fubars in other places, like once I did this around my actionbar:

mind going a little more into depth on the mini-map panels? are those just custom fubar panels sized to fit perfectly w/ your minimap?

Bridonna · 10/29/07, 9:27 AM

Originally Posted by Teffy

mind going a little more into depth on the mini-map panels? are those just custom fubar panels sized to fit perfectly w/ your minimap?

Yup. On the minimap, it's just one panel, sized down, and moved under the minimap. Then I put a few eepanels behind both the minimap and fubar to make it look one piece.

Bas · 10/29/07, 2:55 PM

Seems i got a problem with my CyCircled.

As you can see my target buffs aren't affected by my CyCircled settings. Does this need to be done in Pitbull or am i just overlooking something?

♦ s4dfish · 10/29/07, 8:59 PM

Try UI Help Center.

Bas · 10/30/07, 12:33 PM

Sorry, i will. New to EJ and all.

Taryenne · 10/30/07, 1:12 PM

I know I've mentioned before about the desktop feature in RDX but heres a visual idea of how it works, hit one button to change layouts
An absolutely awesome feature for condensing information / freeing up space for other raid elements

Solo Layout:

Raid Layout:

Kiralyn · 10/30/07, 4:40 PM

For buff concerns, I'm currently using the buff bars built into the newest DoTimer, and catching certain effects in the Prominence component instead of into the default buff location. This puts all my long-term buffs in the classic corner position, and lets me have indicators for procs, trinket durations, etc. caught dead center on my screen. What I end up is short-term buffs/debuffs sitting right over my character, and the raid-buff type spells off to the side. Additionally, you can configure display for both the buffs and the Prominence portion of the mod seperately, so as mentioned above, you could have bars for long buffs, and icons for shorter ones.