Latest in Gaming

Image credit:

Reader UI of the Week: Tyrias' UI


Each week, brings you a fresh look at reader-submitted UIs. Have a screenshot of your UI you want to submit? Send your screenshots, along with info on what mods you're using and some background information, to

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,
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.

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. :)
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.

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.

Gallery: Reader UI of the Week gallery | 267 Photos

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.

From around the web

ear iconeye icontext filevr