Reader UI of the Week: Tyrias' UI
by Mathew McCurley 
Jun 1st 2010 at 7:00PM
Another week, another reader UI of said week. I hope that everyone in the United States had a wonderful Memorial Day weekend. We went to a birthday party for a dog. I know, right?
This week, we take a look at Tyrias' user interface. As a warrior, he has some unique needs coupled with a nice, simple layout and some awesome uses of Power Auras and opacity. We get to talk about opacity today! Yay! Why aren't you as excited as I am? Opacity is awesome. Click! Click!
Tyrias, take us home:
Hello Mathew and WoW.com,
Thank you very much for the comprehensive submission, Tyrias. There is a lot to like about this UI, so let me pick out my absolute favorite innovations and clue you all in. UI hounds, definitely check out the legend and corresponding pictures below to see where all of these pieces fit together for a pretty cool UI.This is my latest in a long string of tinkering changes to my warrior-centric DPS UI. My goal in setting this up was to create a clean + attractive, rapid response UI, that would be well suited to my class and style of game-play. (That said... Although this was chiefly configured with my warrior in mind, I find that only a small tweak was needed to the pet bar for this to be well suited to my DK alt as well.)
While I use my peripheral vision to scan my surroundings, generally my eyes spend a lot of time hovering around my action buttons watching the timers tick down, so that I can get the next whirlwind off at just the right time. Knowing this, I've moved my buttons up from the typical 'bottom of the screen" locale, setting this focal point as close to the center of the action as was reasonable. With this as the foundation, I've built the bulk of UI by generally placing, near here, all of the key components that send me feedback suggesting actions. See below for a complete list of the mods I run.
One special note, with Power Auras in particular, is that I've spent a fair amount of time configuring it to illuminate and animate, behind my action buttons, each of my different procs or buffs that become active. When use in conjunction with Sexy Cooldown Count, the mods deliver information that help me synchronize special attacks.
With every thing I have installed, I'd go crazy if it looked like a mess, crowding too much of my field of view. So, for appearance I use mods like Sexymap, Button Facade, and Line 'Em Up. For view/field awareness, I've adjusted the transparency settings and provided spaces between each of my major components - so, that I can see what's going on behind them. KG Panels is added for solely for appearance, unifying my layout with soft, translucent bands set behind my buttons and chat frames.
My full mod list includes:
- Dominos
- AzCastbar
- Omni CC
- Button Facade (w/ Lite-Flat)
- Button Range
- Speedy Actions
- Power Auras
- Sexy Cooldown
- Sexy Map
- Tip Tac
- Tiny Melee Stats
- Skada
- Gearscore Lite
- Money Display
- Comix: The Return
- Pitbull
- KG Panels
- Deadly Boss Mods
- Chatter
- Chat Bar
- Line 'em Up
- Auction Lite
- Bagnon
- Gatherer - (Although I roughly have most node locations so memorized. So, I don't always have this turned on).
.....
That's about it.. However in close, I should add that I love comparing and tweaking my UI. That said it should be no surprise that yours is one of the few columns, that I most eagerly await each week. Please let me know if you have any comments and tips you'd lie to add.
Tyrias
Level 80 Fury/Arms - Warrior
Sleeper Cartel - Guild
Perenolde US - Server / Cyclone - Battlegroup.
P.S. I know you hate seeing the menu buttons, preferring rather to use the key commands. However, for whatever reason, I enjoy having the option for them to be click-able. Plus, I use them to graphically balance out my action button area. :)
Talented Power Auras
One of the beautiful pieces of Tyrias' user interface is the inclusion of a Power Auras setup that seems unconventional at first but is so brilliant in its simplicity. Rather than keep the Power Aura notifications up near the physical character, notifications are placed down near the action bars with a separate theme based on current talent spec. I love the idea of having a notification system based on talent specialization and will probably be instituting a system like it on my own user interface.
Power Auras makes this exceedingly easy. Each Power Aura you make has a talent check box, meaning it will appear only when that talent specialization is active. Creating a system where two colors represent two different specs can make it easier for you to switch mindsets and keep an eye out for your own notifications.
I am also a fan of how the circle designs are used, allowing notifications to happen underneath the action bars. By putting two integral pieces of the user interface on top of one another, a good amount of space is saved, and if you are the type of person who looks at your action bars, you do not have to constantly be moving between character and bars. DBM telling you that you are standing in fire, however, might be occasion to move.
Without borders, without opacity
Two things that stand out are Tyrias' lack of opaque areas and the light borders made with kgPanels. First off, opacity in user interfaces is one of those love or hate elements, where it all truly depends on how well you process information that has the potential to have many competing colors and nuanced details floating around unpredictably. Opacity can be dangerous in color-adverse situations. However, Tyrias seems to have come up with an excellent system -- only those truly important bars and conduits of information stay fully opaque in combat. Notice how the action bars, raid frames and debuffs stay darker and more solid than the rest of the user interface. Opacity is a great way to pull more screen real estate from your setup. Mission-critical addons can always stay front and center, but the rest can have their opacity turned down if you do not need them as bright.
Varying levels of opacity is one of the best tips I can give for people unhappy with the amount of room their interface elements take up. At one point, I had a user interface that cascaded upwards, getting more and more transparent from the bottom up. It worked out fairly well, actually. Play around with the opacity settings on your addons and you will find awesome ideas by accident related to exactly how opaque you need your bars and other user interface elements to be.
Of Diablo fonts and menu bars
I've decided to back off of the menu bars from here on out. I said my piece on menu bars last week and I do not intend to address them anymore. Except this time ... the final time. Menu bars actually work great when dealing with issues of symmetry. If the menu bars in some capacity create a more symmetrical user interface, by all means, use them.
The Diablo font is a pet peeve to me, not because it doesn't look cool (it does) but because of the readability. I don't know if the font was designed with the express purpose of reading lengthy amounts of text outside of Diablo itself, which I guess is a contradictory point, since the game was full of text. I haven't played Diablo in awhile. Was the font the same throughout the game?
Basically, if the font works for you, stick with it. I personally need something more common and blocky in order to parse reading faster. After 10 o's with a cross in them, I just start seeing wheels with rims. Really, most user interface advice boils down to just that -- if it works for you, do it. My job here is to clue people in to neat things people do with their interfaces and offer suggestions. My suggestion here is, if you're like me and have a little trouble with gimmicky fonts, stick to something simple. Otherwise, use the Diablo font and have serious PTSD like me when thinking about the Butcher and the Skeleton King.
To recap
Tyrias' user interface is really nice. I like it. Good show, Tyrias! I am definitely a fan of removing most of the borders on many addons including the damage meters and unit frames. Stark, bold, easily distinguishable colors make up a good portion of the background for essential information without being too opaque and solid. Bar textures helps unimaginably well for this effect. While I can't stand the Diablo font, it does look pretty awesome, but your mileage may vary. Using transparency and opacity can bring lots of personal touch and preference into your setup, so see if lowering the opacity on some of your addons helps with space issues.
One last thing that stood out to me was the neatness of chat bar and the channel selection utility below the chat box. Very neat and very simple -- I like it. Be sure to check out the legend and sample screenshots, because I think this user interface might give people some awesome suggestions. Great submission, Tyrias.
Interested in getting the most out of your user interface? Come back once a week for more examples of reader UIs. For more details on individual addons, check out Addon Spotlight, your source for everything addon-related.Filed under: Add-Ons, Reader UI of the Week
Reader Comments (Page 1 of 2)
Jiyambi Jun 1st 2010 7:42PM
Wow. It's been a while since I've seen a UI that made me go "ooooo shiny I want!". This one did. Now I'm going to spend hours mucking about with my own UI again, I just know it... curse you WoW.com! *shakes fist*
Bonksy Jun 1st 2010 7:54PM
Yeah it's nice I like th-
OH GOD IS THAT DEFAULT SEXYMAP???
Nezebu Jun 1st 2010 8:07PM
This UI might be "clean" but it isn't efficient. There are way to many action bars showing. Memorize the keybinds and have displayed only what you absolutely need. A Hearthstone keybind, are you kidding me?
Get rid of the portraits, they are a waste of space and viewing area. Another waste of space is the combat log to the right which is completely unnecessary. That skin of sexy map is wasteful and distracting.
Remember, just because you put all of the information towards the bottom center doesn't mean you are being effective. You are just cluttering mostly useless information and causing unnecessary data to load and display on your computer and the game server.
mackejn Jun 1st 2010 8:26PM
Just because YOU like keybinding everything doesn't mean his ui isn't efficient for what HE needs. I actually kind of like it. I have issues finding keybinds for every single spell for two specs on my shaman since I like to have a lot of utility spells off to the side. Quite frankly his ui is really streamlined for those of us who are visual and like to actually see what we're hitting.
NomNomNom Jun 1st 2010 9:07PM
While in general I agree that there are too man action buttons for my *personal* taste, if you actually read the article properly, you would see that having a lot of abilities visible serves a functional purpose as they have their Power Auras set up to highlight them.
With that said, for my mind, you could further streamline the interface by removing the non-combat 'utilities' (hearth, food, etc) from your action bars and using something such as Opie to manage them. This would further enhance the symmetry I think. Additionally, do you really need 5 different mounts always visible? A mod such as Livestock is wonderful for mount/vanity pet management and removing clutter.
Apart from that, it's definitely a nice UI and gives me a few ideas for tinkering with my own one! Might even inspire me to send mine in for critiquing and suggestions. I run a normal aspect ratio monitor, and even with the excellent article a while ago I still find it quite a challenge to make the UI look as nice as a lot of the widescreen variations
Nezebu Jun 1st 2010 9:47PM
Mackejin, his needs are my needs. His power aura idea is also a waste. It is flashy, not informative.
I wonder what you mean by streamline because I'm not seeing it. His UF are off center from his action bars which are stacked way to many times causing a mesh of spells. I don't want to have to play "spell-search" and then awkwardly glance to the upper-left or upper-right to see a health bar.
Protip*: If you are having trouble seeing how the unit frames are awkward, imagine them, in the same exact place with the portrait's gone.
If you are going to cluster information, at least cluster them in a manner that won't cause damage to your eyes.
Tyr Jun 2nd 2010 12:30AM
Nez,
Not sure if you play a DPS warrior or not, but all of my central abilities can actually be used during a single raid. So, while I have a number of my prime abilities key-mapped, I still watch the Omni CC counter on them to ensure my timing is as precise as I can make it. For, the rest - no way I'm going to assign all of those to a key map. So, they stay visible.
As for power auras, though it may be flashy, it is super usefull..and partly because of its flash. I have unmistakeable visual effects that help me monitor procs and timers. In my case, it does at times overlap with my Sexy Cool Down Count and Omni CC, yet there are some things unique to it as well. As mentioned in the article. I use all three to coordinate and countdown abilities. It's not at all excessive for my purposes.
Now its true, that some of the side buttons don't really need to show up (the mounts, food and etc.) but, this is where the UI is a tad personal. For resons of my own, I like having these things as they are. Opie and mount cycling mods do not do what I want. Were I constructing the UI for others. I'm sure I'd have hidden them too... Yet, It's my own quirk and I see no reason why there can't be room for that in a players custom UI... oh and trust me My comp can handle all of this.
Finally, yea it is the default sexy map animation. That is on purpose too. I use the glowing rune motif again in my various power aura displays. So, while in action the elements visually tie together a bit. It appeals to my graphic sensibilities, but it might not be for everyone. I do not find it distracting in any way.
Anyway... Of course I could hide more elements and streamline things down to the gnats @ss, but that's not for me. This works for how I like to play and is very effecient for my needs. Your needs and tastes might differ.
Tyr Jun 2nd 2010 4:30AM
Oh and yeah.. I had the portraits turned off, but I turned them right back on again. For me, an image is a much faster way to confirm that I'm on the right target. So, I'm not sure how this is a "pro-tip", but again maybe it's more a statement of preference based on what you find more advantageous to you.
Darias.Perenolde Jun 1st 2010 8:12PM
Nice Ty...representin' SC.
Seth Jun 1st 2010 8:49PM
I'm actually a fan of this UI set up. :) Though I'm not a fan of some of the set up (which is bound to happen seeing how each person has individual tastes); what I do really like is the symmetry. I'm not a huge fan of having addons outside of a designated area for addons. Like you have the box area across your screen for your action bars and chat frames, I don't like having the DPS meter and grid outside of that. However, in the case of your UI, I love it! The reason being that one, it gives the entire set up good symmetry, which I think is important, and two, for a warrior it's probably a good idea to have those two things up closer to your character and more at eye level so you don't have to move your eyes too much to look at health bars or dps meters.
I'm also a huge fan of the buff bar being at the top-center of the screen and having the debuff bar close to your unit frames. Again...symmetry stands out in this move and it looks really nice.
All in all, I like it. :) It gives me some ideas for things to tweak on my UI, which looks fairly similar actually. So I thank you for sharing your UI with us Tyrias!
Yeshe Jun 1st 2010 9:00PM
Very nice, Tyr. I know tweaking your UI is one of your all-time favorite things to do; way cool that it was showcased here! It actually looks very sleek. :D
Tan Jun 1st 2010 9:05PM
I love this column. So far I haven't found an individual UI setup that I absolutely had to go out and recreate, but I find a little something I like in each one. Specifically, the buffs centered at the top look really cool to me. I'll have to try that out.
Chibiker Jun 1st 2010 9:44PM
In the reader gallery - what UI is depicted in slide #3 (and 4)?
It's gorgeous!
-Rick
aquasean_oh Jun 3rd 2010 8:56PM
If you go to number 7, it says it's Anjuna's UI
Doodle Jun 2nd 2010 8:09AM
This is actually the first UI from this column that I've really liked in a long time. It's very clean and readable while still having personal touches that make it his. I don't normally like SexyMap either but it fits with everything else. I also like the different greys with the runes colors--it's some color but not too much.
@Nez. Good raiders actually use their utility spells and thus have lots of buttons. I also think it's funny how addons have made some people feel like their graphic designers. Everything does not have to be centered with everything else. The unit frames aren't awkward at all, and putting them there actually moves your eye up and out and leaves more space around your character to be able to see important fight mechanics. It's all about how much information you like to see to play your best, not what some wannabe designer says about having 5 buttons because he's "efficient."
BoomingEchoes Jun 2nd 2010 1:15PM
Been a long time since I commented on a UI, I'm keeping this one short.
This UI is nice, I like the space it allows you to see even with it being so busy, but personally I'm not a huge fan of Diablo Font, nor am I a proponent of 2 chat windows, even if the second window is a combat log. From the looks of the window to the right side its showing much of the same information the left one is, like look picked up and who's just come online, which is unnecessary and as a personal opinion I don't find it essential to see whats hitting me or what killed me all the time (usually I can figure that out without the combat log) unless I'm learning a new fight somewhere or needing to tell someone else that "no, I wasn't standing in the goop, -so and so mob- was hitting me for thousands of health".
Base sexymap isn't quite sexy. It fits ok because the rest of the UI is clean but I don't know, I'm going with the group on this one about it. Also it seems like every thing in the UI is moved up from the bottom of the screen so that the second glowy (was going to say rotating but if you look in each picture its in the EXACT same position) rune under the action bars, Why? what purpose does it serve other then looking cool? What strain does it put your PC under when massive AoE is going on and your in the middle of it because your melee? Gotta think of stuff like that when redoing your UI.
As for what other people said about keybinds, I don't use them either, I'm a clicker. I DO use macros though which could cut down the amount of buttons on the screen, but overall the amount of buttons don't look like an issue and is really up to you. Same with portraits, totally up to you but usually not needed.
Tyr Jun 2nd 2010 4:27PM
Here are answers to a couple of quick questions raised by your eagle eye Boom:
2 Chat windows : The first (left) is strictly for party, raid and guild chat with no other distractions included. The second (right) is made up of a small group of tabs for everything else... i.e. general, trade, boss text, says, yells and etc. One of the tabs on this side is indeed the combat log, while another is a special Blood Queen tab, that I set up to work with the bite mod. So.. the left is focused communication, while the right side, is my all-purpose/catch-all side. I'm weird and I hate excessive scrolling.. So, as much as is reasonable, having two wide chat frames suits me well.
Power Auras: You're right that all of these particular screen shots show a similar image - which is that my battleshout is active (except for the ICC raid shot which shows a similar but different color aura telling me that the blessing of might is operational and is replacing my battle shout. Its set like this so that I can monitor it without having to, mid fight, look at the top of my screeen). What's not shown is that I have 5-6 more, very distinct auras that show up during certian abilities and procs. The trick here was to make them all unique enough that I could distinguish each ability/proc while having them layered on top of each other and also still be able to see through them to the environment beyond. This is where the different graphics, color and animations of the auras comes into play. Too bad these screenshots don't show all of that in action, but its hard to capture a good pic with everything firing off.
That all said, don't worry with all of this installed, my addon memory is still below 15 mb and my comp. is beastly enough to handle it all. :)
pwherman Jun 2nd 2010 2:18PM
Thank you, Tyrias, for providing a legend, along with a "no-legend" shot -- it's a big help. I'm not familiar with a warrior's UI needs, so I'll comment on visuals rather than function. I'd like to confirm that the Sexy Map frame integrates very nicely with the way that Power Auras are deployed. I'm tending to like interfaces, like this one, that have a nice clean panorama view. And while I would also probably not favor the Diablo font, there is a good case here for its use since it adds back in the flavor missing when Warcraft-style borders are subtracted (and it works for its user.)
Harkat Jun 3rd 2010 5:28AM
Whats the addon for the circle of runes behind the actionbars?
B Jun 3rd 2010 8:43PM
The high visbility of this UI and its intelligent usage of space is something I really like. Would it be possible to make a pack of this for Curse??