Reader UI of the Week: Going transparent with Quatho's UI
Welcome to Reader UI of the Week, WoW Insider's weekly user interface column, where your UI is the star! Last week's edition changed the format up a bit, but this week we're going back to form and checking out a pretty cool setup by Quatho.
I chose Quathos' user interface for a couple of reasons, most notably to highlight how cool transparency can be when crafting your user interface, as well as working from a laptop. Many people email me asking for laptop user interfaces, and whenever I can, I do like to oblige. So sit back, relax, and let's jump into Quatho's UI.
Take it away, Quatho:
Hello,
I've been playing the game since June 2006, and thought it was about time to share something about one of my favorite things about WoW: UI's. Although I never have been a "hardcore" player, I do enjoy raiding with friends once in a while. So far I'm very happy we managed to down the LK about 2 weeks before the Shattering :-) The idea of sharing this popped up when scrolling through my screenshots folder and being amazed at how my interface changed. To get an idea, I uploaded the most relevant screenshots of this evolution here.
Now back to the current interface, a thing that I've always been confronted with is screen size. I've always played WoW on a 13" macbook, on a 1280x800 resolution. I rarely use an external display, so the challenge is to make the game experience as good as possible on the small screen.
At the moment the interface I've settled on has three major states:
Out of combat, no target
Here the focus is on my location (minimap) and the visual world around me. Most of my interface is hidden, showing the minimap and a very slimmed down version of all the other bars and addons. (I guess more could be hidden that I currently do)
Out of combat, target
When targetting someone or something, I play with transparency to very lightly show the info I need about the target. This is slightly different whether I'm in a city or 'outside'.
In combat
The focus is on my own status, the group members and the target(s). Also threat and damage meters come into play here. Also, the minimap gets hidden at this point, which helps a lot in making the change of state clear.
Also another 'requirement' for me is to have a UI which is as flexible as possible. My main character is a Warlock, but I do also play a healing/tanking druid. This is mainly the reason that I have quite a large space of my UI reserved for Vuhdo, it's pretty handy when tanking/healing ... might be a bit overkill when playing as DPS, but so far this is the most optimal thing I've come up with.
You'll find an annotated version of my UI in attachment, showing the most crucial addons I use. These are:
Bartender 4 I use several bars scattered around the UI. Most of them are hidden and appear on mouseover. Since I play on a small screen, I scale all my bars down to 60 - 70% depending on the functionality.
Chinchilla Minimap Since a while I settled with this minimap, I like the simplicity of it
ForteXorcist I like to have my spell timer bars in the centre of the screen. As I mostly play a lock, this is a pretty crucial thing, so having it showing dominantly in the middle works pretty well.
Marking bar Very handy addon to quickly mark things in nasty PUG situations. I also scaled this one down to save screen estate.
MiniMapButtonBag (MBB) Since my minimap is pretty small, there's no space for additional minimap buttons. MBB gathers them all in one, scalable, button
Omen I still like having Omen besides Skada, but there's no real reason for that.
Prat I like to have two smaller chat screens, one filtering the guildchat, whisps and party chat and the other showing the rest. It really helps to focus on the important chatter.
Quartz Casting bar of choice.
Satrina Buff Frame I recently switched to SBF from Elkano's buff bars. I love the customization options of SBF, which I'm still tweaking at the moment.
Skada Lightweight damage meter showing all information needed.
Stuf After considering several unit frame addons, I now settled with stuf. I had the conceptual idea of having large, almost square, healthbars. Using stuf this seemed to be working out the best.
Tidy Plates / threat plates I believe a must have addon for all classes, so much information is contained in just that colored square above the mobs.
Vuhdo I like vuhdo because it has decent options for dps, healers and tanks .. and also, the configuration screen is pretty fab compared to others ^^
Apart from that, I couldn't live without (won't go into the details here):
Advanced trade skill window
Auctionator
Bagnon
Clique
Deadly boss mods
eAlign
Fishing buddy
GatherMate2
OmniCC
OPie
TipTac
TooltipOnMouse
Xloot
So playing WoW on a small screen surely is possible. It's all about experimenting with sizes, positioning and transparency. Addons like Clique and Opie can also help a great deal in setting up an enjoyable small screen UI since they hide functionality but are still very rapidly accessible via mouse or keyboard shortcuts. Also, when building my latest UI, I found it very helpful thinking about those three states (no target, target, combat) having separate UI requirements which really helped my puzzling together my current UI design.
Hope you liked it!
If you need any additional information, let me know.
Rgs,
Quatho, Zenedar (EU)
Thanks for the email, Quatho. Transparency is a tool that many people are not always using to its full advantage. To be fair, getting used to UI hiding and transparency is not the easiest thing in the world, but taking it one step at a time can help you slowly become accustomed to a system that allows pieces of your UI to disappear when not in use. If you're the kind of person who like everything on screen all the time, you might be able to glean a few cool ideas by working with transparency.
See through me
One of the coolest aspects of transparency is that you can quickly notice pieces of the user interface come to the forefront of your setup when they go from lower transparency to opaque. I've been using transparency as an option in Grid for a long time, bringing group and raid members into opaqueness when reaching a health threshold. The same can be said for many user interface elements -- you might only need to see them when specific things happen. For instance, action bars that aren't for trade skilling or general use can be hidden or transparent until combat.
What Quatho does with his UI is make most of the combat pieces transparent during the times when he is out of combat so that the "shadow" of the user interface is usable but not at the forefront of his mind. With a smaller screen, hiding interface elements means more screen real estate to see the world and keep awareness when out of combat.
Another cool aspect of having interface options go opaque upon entering combat is that you always know when you're in combat. Before I made a few of my elements transparent out of combat, I was the guy mashing his mount button until I popped out of combat, constantly pressing the button, hoping it would make the whole ordeal go faster, like an elevator button at the mall.
Focusing on states
Quatho's philosophy for deciding when and where certain interface elements are applicable and important is a great way to go about dealing with your own user interface. Take time just flying around one of the capital cities doing whatever it is that you do during a general play session. Take note of the buttons you press, the activities you perform, etc. I guarantee that half of your user interface is just sitting there, collecting dust during this time.
So why not create states that your user interface can be in? The simpliest would be in or out of combat. Think about it: Most of the pieces of your user interface help you deal with combat-oriented activities. Start tinkering with one addon at a time, and see if you like how transparency can open up some areas of your user interface. You'll be focused on combat during combat, but slowly paring down the amount of screen space occupied by addons out of combat.
How to hide
So, you want to try out some transparency or conditional/situational UI hiding? Good for you! It's easier than you think, I promise. Action bar addons already have some pretty simple transparency controls built in, so if you're a Bartender or Dominos user, those tools are right there, ready to be used. Jump into the bar editor and select the transparency options from the individual bars.
Recently, I did an Addon Spotlight on one of my favorite addons, Kong Automatic UI Hider. This little addon will assist you with conditional or macro conditions for hiding all sorts of elements on your UI, plus it's easily configurable and easy to use. Kong is my UI hider of choice, but I am sure that the comments will have plenty of other suggestions as well.
Working within the constraints of a laptop screen can be occasionally brutal, especially with a game like World of Warcraft, where there are so many options for UI advancement and change. Adding to your UI doesn't always have to be a mess on your screen at all times. Try being transparent -- I think you'll enjoy it. Thank you very much for the submission, Quatho.
Filed under: Add-Ons, Reader UI of the Week









Reader Comments (Page 1 of 2)
tornax Mar 8th 2011 6:32PM
Damn good job about that UI, I have the same issue, small laptop screen. I tried some native alpha setups in bartender end other addons but for few weeks I'm testing Kong and it works far batter than native alpha support.
wow Mar 8th 2011 7:11PM
The health frame height. It is over 9000.
Pyromelter Mar 8th 2011 7:13PM
Okay, normally I criticize UI's that aren't in a raid or at least some kind of group. However, the third pic shows where his vuhdo raidframes are, so I can get a good idea of it.
I really like what he did there. I especially enjoy how he has omen set up- my omen is the exact same. I wish omen's default was "transparent" because that parchment thing is really bleh. Same thing with his damage meter - very transparent, and right under omen, taking up minimal space. I'm a big believer in damage meters, but I think people should shrink them down and make them more transparent, so I love what he did with omen/skada.
I really like how he is tracking his dots and curses with forteXorcist, as well as the cooldowns. I don't think I could personally hang with the transparency of his action bars, but I like how he has them laid out, with common action buttons on the left and buffs/shields on the right.
The only thing I have a hard time getting behind is the thickness of his unitframes. While I think the default blizzard frames are too skinny on health and mana, having a unit frame that is that thick seems somewhat counter-productive and unnecessary considering a minimalist-type setup. The target frame can also be criticized in a similar fashion.
All in all, I think this is a very unique and fun UI. I think it works great for a DPS because all the pertinent info is aligned with where is eyes are, while allowing for a maximum amount of screen space, and while minimizing or making transparent less pertinent information. I would just modify the thickness of the unitframes and play around with that area to give even more on-screen real-estate to the player, and it would be even better than it is now.
Quato Mar 9th 2011 3:49AM
Thanks for the comments and suggestion on the thickness of the unitframes. I'm experimenting with showing info about myself and my target(s) inside of the frames now ... but you're definitely right that they are taking up (too) much space at this moment ^^
Nipah Mar 8th 2011 8:46PM
I don't know, maybe my laptop is exceptionally awesome (note: It's not), but I've never had a problem with making a UI for it. It supports 1280x800 resolution, its like 3 years old, and I've only got 2GB of RAM in it... but really, other than how pretty things look in-game, I don't see any restrictions when making my UI as opposed to helping my friend with his desktop UI (other than his being a bigger resolution).
Regardless, I will offer the following critiques, even though I'm sure no one really cares:
Huge freaking unit frames: Wow, those... are really, really tall. Also, why show % & absolute health at the same time? Even the target's target is huge, and there is no reason for that at all...
Cast bar: Taller than it needs to be... and who needs to see the icon for their casts? Seems like a waste of space to me. Make it similar to the threat/DoT bars above the target and you're off to a good start.
Stuf agro bar: ... align it to the right or left of the target frame! Sure, nitpicking, but why is it floating out there, slight to the left of right?!
Action bars: Why are they all spread out? You could simply drop the middle bar down to be in line with the rest, and move the vuhdo chunk up, having all your action bars in one place for better visibility.
Now, I'm not saying that these changes need to be made or the world will end in fire... its just my opinion on what could be changed. Keep in mind, my UI isn't perfect either, as can be seen in these links (don't have a screenshot of my current one, but its a combination of the two basically):
http://img.photobucket.com/albums/v450/ChibiMagatsu/Warcraft/wowUI.jpg
http://img.photobucket.com/albums/v450/ChibiMagatsu/Warcraft/tetriUI.jpg
Also of note: I heal/tank/dps with my UIs... whether I'm on a Druid, Warrior, Shaman, or Hunter, I keep the basic UI layout and tweak little things like PowerAuras and such.
Pyromelter Mar 8th 2011 11:57PM
"Also, why show % & absolute health at the same time?"
Just wanted to address this - I always put this on there. As a fire mage, 35% is an important number to know; on the other hand, I always find it useful to have the total health of the mob always being shown. Other classes have execute-range abilities and rotational changes, so percentage is very important.
Quato Mar 9th 2011 3:45AM
Hi, thanks for your comments. Sure, the frames are huge. My idea was to use their hugeness as a space to display alerts etc. I didn't dive into the secrets of power aura's etc enough but my idea was to display relevant info regarding myself and the targets inside of the bars. But, perhaps they'll still turn out to be too large.
The icon on the cast bar, true it's not needed but I tend to like the visual appearance of the icon. So just aesthetics I guess.
The stuf agro frame is mostly a visual gimmick, I put it there to represent a "label" ... yet it has no real use so I might as well remove it...again personal taste in aesthetics. Point taken though ;-)
And your point about the action bars is very true, I've struggling with them for a while now. I'll try your suggestion and see how it works out on my tiny 13" screen.
techvoodooguy Mar 9th 2011 3:52PM
Agreeing with Pyromelter. I'm in the process of revamping my UI right now, but I have both percentile and absolute shown on my target frames. Hunters especially need this, because we have our Careful Aim phase from 100-80% (+60% crit on Aimed Shot and Steady/Cobra Shot) and Kill Shot phase from 20-0% (Kill Shot used twice each CD and extra focus from Steady in MM iirc)
Nipah Mar 9th 2011 7:34PM
Sorry if I sounded too mean in my post, I just noticed that I didn't point out anything I liked (which was, frankly, anything I didn't point out!).
unit frames: I can understand where you're coming from, so just do what you find best, and take my comment as my opinion (which yeah, it is). If you like it the way it is, go for it!
As for % health: I believe there is a feature in text for Stuf to only show text at X_HP or whatever... though I don't believe I ever got it to work properly, so maybe its better off as is... I only ever needed it on my Warrior, so it wasn't a top priority for me.
threat meter: I have the threat meter showing on my Stuf as well, I was just lamenting the fact that its not aligned with the target frame, that's all.
action bars: Trust me, I know how much of a pain it is to get them all settled down... I'm still not 100% happy with the way I have mine set up (1 long bar, 2 smaller 2x6 bars on top), but I think that having them all together in the same place would make for less eye-roaming.
Nipah Mar 9th 2011 7:35PM
Edit post button = wanted.
I just realized why I didn't care to have % health on my bars: Power Auras.
I have it set to show up at various low %s for different classes... so when they're at the point I can use execute/kill shot, it pops up a nice, pretty little icon to let me know that now is the time to burn the mob down.
Nyxrain Mar 9th 2011 12:57AM
I like it, I use Real UI and a large part of it is transparent depending on what I'm doing, with more addons being made every day it might save a lot of people's sanity and I love how you have Satrina Buff frames setup.
radiationcowboy Mar 9th 2011 2:22AM
Nice UI. I noticed your using Skada and Omen. You can set Skada to be a threat meter in combat and other meters out of combat. could help free up some space.
Thiocyanide Mar 9th 2011 4:16AM
Default textures on bars is so cringeworthy.
WoWOutsider Mar 9th 2011 8:56AM
Is Skada reliable yet? Everything I've ever seen says it loses data compared to Recount. (And that's a completely separate issue from the "it reports lower DPS because it counts idle time" difference -- which I don't care about.)
WoWOutsider Mar 9th 2011 9:14AM
I should clarify... everything I've ever seen except for all the people who say it doesn't happen. But, you know, at least 51% of everything I've seen or I wouldn't believe it. Probably.
Um, er, anyway... does Skada still lose data?
tiramisoup Mar 10th 2011 8:50AM
I've found Skada to be more reliable than Recount, e.g., two people running Skada in a fight have the same numbers, whereas I often got different numbers with Recount. It also uses less memory (idk if Recount has improved on this score). There are options you can set in Skada to discard trash, so maybe that would affect someone's totals, but for a given fight, Skada is accurate enough. The only thing I miss is Recount's graphical breakdown of spell usage. If you are really interested in accurate meters or fight analysis, just save the combat log with an addon like Loggerhead and upload to World of Logs.
tyler Mar 9th 2011 9:14AM
Is there not a download link for this UI? I am playing on a laptop while my desktop is getting its Mobo replaced and I dont want to spend a lot of time on making my own UI, I was hoping Quatho would share his with us.
Web Mar 9th 2011 12:00PM
Seriously? THIS is spotlighted?
- Ugly, default textures for the unitframes with a hp bar that's hideously gigantic.
- The fonts and bar textures are all over the place. There's no consistency here. Any designer in any field will tell you that a consisitent look and feel is very important for the overall design. You've got a serif font for the timers and castbar and two different types of sans-serif fonts for everything else. Keep it similar.
- Omen with an eyesore of a background. You're already using Skada. Why not use it for threat as well so you have a more consistent look? They're both based off of Blizzard threat now so there aren't any inaccuracies anymore.
- Use a chat addon. Default font with flashing tabs doesn't exactly scream pretty.
This is one of the worst UI's ever spotlighted. It's not good-looking and doesn't involve anything new or little-known.
Nipah Mar 9th 2011 7:36PM
I heard constructive criticism was the in thing, but maybe I should be a flaming bag of ass like you if it'll help me get the girls.
Quato Mar 10th 2011 4:18AM
Thanks for pointing out these details, you're very right regarding consistency in fonts and textures. To me this UI was more about sharing the overall concept, it sure could use some work regarding the stuf you're mentioning. I didn't see a lot of small res. UI's featured here, so that's what made me submit mine in the first place.
About your final comment 'it's not good looking', any designer in any field will tell you that taste is a very personal thing too ;-)
Ur way of talking does make me VERY curious about your UI setup though.