Lusipurr.com – Presenting the Sundry Opinions of Lusipurr and Friends

I normally do not inject politics into my gaming.

The only “political” thing I care about in Azeroth is how fast and how far I can shove my axe in Garrosh Hellscream’s forehead. Current estimates put it at “not fast and far enough to reach his tiny, tiny, orc brain.”

Long-time followers of my World of Warcraft columns know that I used to use a total UI revamp for WoW called “NUI+.” The thing I liked most about NUI+ was how it gave me everything I ever wanted out of a UI in a single package, except for good performance. That was not an insurmountable obstacle, as my computer could handle its ravenous demands, but I did really enjoy (and still likely would)
NUI+.

About four or five months ago, however, I decided to switch away from using NUI+ and designing my own user interface. Why? Two reasons:
one, I wanted to squeeze more than 15 frames per second out of a 25-man Rotface fight, and two, I got a little miffed by something I read in the NUI+ creator’s forum signature.

He said: “Annoy a liberal: work hard and be happy.”

“Hey,” I thought, “the term ‘liberal’ has sometimes been applied to me, and I work plenty hard, and am reasonably happy with my life.”

I do not disparage NUI+’s creator his political views; he is entitled to them and to express them in any way he sees fit. However, I too have a concurrent right to feel like I ought not to support his projects because I find his expression of those views to be mean-spirited and ugly. So, in the interest of creating a more proletarian, people’s UI, I undertook the task of designing my own UI from the ground up. I never thought much of it, but on a lark, I submitted it for a reader-generated UI column on WoW.com, and lo and behold, yours truly was this week’s feature.
I informed a commenter that I would share my insights into UI design, such as they are, in this space (and will put off for another week a commentary on the brewing END OF THE INTERNET fostered by Blizzard’s threat to make forum posters real names public). [Editor: Blizzard has recently retracted those plans.]

Many of the young’uns out there do not remember print media. It was where uppity bloggers like myself used to write, except back then we called blogs “columns” that appeared on an “editorial page,” rather than the “Intartubules.” I have been writing professionally since high school; I was a columnist for the “Daily Texan,” the University of Texas’ student newspaper (hear that, Ghostcrawler? The DT!). Most of these gigs paid; Papa Lusipurr, however, does not, yet I shall still share my insights out of boundless love and compassion for my readers. Another intangible benefit these various writing jobs gave me was a sense of “design.” I am by no means a formal student of design or architecture, and computer-based design programs frighten me. I do not understand pixels; I think in picas or points. Still, when designing my own user interface, I tried to put most of these ideas I had learned through years of work with print media in practice. And now, there is a little context for my choices.

This is my first attempt at UI design (click to enlarge)

Designing a World of Warcraft UI is not an easy task; I would estimate that a novice designer should expect to spend at least a week getting just the basics down. Do not expect to raid with a”in-progress” UI. Anything more strenuous than checking mail will be beyond players. And once it is completed, a week or two “adjustment period” to the new functions is necessary before player performance will be back to acceptable levels.

To start with, a designer must have a completely blank screen. This means replacing everything bad that Blizzard put into the default UI, or, well, all of it.

I do not mean to knock Blizzard’s UI designers. For five years ago, their concept of a UI looks pretty snazzy. But the best thing they did was to allow users to design their own add-ons and modifications to allow nearly complete customization.

There are six basic “elements” that will need to be replaced by a UI
redesign: (1) the chat window, (2) the player frames, (3) the minimap, (4) the action bars, (5) the group/raid frames, and (6) the menus and submenus.

There are, on top of these elements, several types of information that end-game raiders and PVPers will need that can be supplied by various add-ons. I will try to address the most common.

First, to obtain a complete UI replacement, a player needs to obtain replacements for each of the six elements. I have chosen the easiest-to-configure replacements: (1) Prat, (2) Pitbull, (3) SexyMap, (4) Bartender 4, (5) Grid, and (6) ArkInventory, TitanPanel.

To obtain these add-ons, I recommend using the sites Curse and WoW Interface. Each of them provide a more or less (sometimes less) usable “updater” application that helps to keep add-ons in sync. As always, before changing anything in the World of Warcraft folder, back up the “Interface” and “WTF” folders in case of massive failure.

Once those seven add-ons are installed, it is time to get cracking.

This was my "version 2.0" revision. Notice the different style and better use of negative space. (Click to enlarge)

One of the greatest aids to good design is proper framing. The simple addition of a thin, 1-point black border around a picture in a newspaper, for example, creates an instant and obvious “division” in both the mind of the reader and the layout of the page that helps separate disparate elements conceptually and physically. While some add-ons provide for a frame or border on their own, others do not. It can also be difficult to achieve a unified look across different add-ons that use different resources.

Thus, it is almost always preferable to have design elements like borders be separate from the actual add-ons, allowing greater uniformity and customizability.

The only way a designer is going to get this is to get, and learn, kgPanels.

kgPanels is evil incarnate, trust me. It is difficult to work with, often arcane in its usage, but with time, will prove invaluable. To get started with kgPanels, one must simply get his or her hands dirty.
Begin, of course, by installing both the kgPanels addon and the “GrizzlySharedMedia” media pack, which will provide a basic sample of textures and borders.

Personally, I find that color and geometric or image-based backgrounds detract, rather than enhance, usability in a user-interface. I fall squarely within the “extreme minimalist” school of design. Simple, clean, and straight lines act as easy ways of directing the focus of the eye toward key spots without pretense or distraction. Thus, my UI makes use of many simple squares and rectancles, thin white borders around flat black backgrounds, and lots and lots of radial symmetry.

The first task, then, is to create a simple rectancle that will frame the chat box. As the chat box is the primary means of communication in WoW, it needs to be located in a place that is (1) accessible and easy to read but not (2) central to the experience. It must be there, but not intrude upon the “playing field.” The logical locations are then one of the four corners. The top corners are less-than-ideal, however, because of the general orientation of the screen. The player character’s feet are “down.” The action takes place from a third-person perspective, with all of the important stuff happening in an “up to down” fashion. Having to glance against the flow of information, then, is disorienting.

That leaves either the bottom left or the bottom right corner as ideal for the chat box frame. I chose the bottom left due to the Western preference from reading from left to right, although the right-hand bottom works just as well.

To make a “chat frame box,” first type /kgpanels config into the game.
This will open the kgPanels configuration pane. I suggest moving it to one side clicking the top and dragging. Then, select “Layouts”
from the menu, and create an active layout, such as “MyUI.”

Once a layout is created and selected as active, go down to the next menu along the left-hand side, “Active Panels.” Create a new panel.
A default panel will appear in the middle of the screen. This can be dragged to any corner; assume the lower left. By clicking and dragging the lower-right-hand corner of the frame, it can even be scaled to a different size. Drag it until a proper size is achieved, and then go in to the properties of the frame. Set things such as borders, border thickness, border color, background, and background color. I chose the “krsrink” border style, thin, white, around a solid black “flat” background. When the frame is properly located, select the option to “lock” it in place. It will now be anchored to the screen.

It is important to note that frames can be so large that they block too much of the game field. As a rule of thumb, the top of the lower elements of the UI should stop well below the character’s feet.

Now, right-click the “General” tab in the chat window, and select “unlock window.” Then, drag the chat window via this tab to the chat frame created by kgPanels. Resize and configure the chat window as suits individual preferences, then “lock” it again. Now, the chat window and frame are firmly anchored to the UI.

This process can and should be repeated to create “frames” for the essential UI elements, such as raid frames, action bars, etc.

Here is my latest UI, but after finishing a fight

Action bars can be large (like mine) or small and simple, depending on the needs of the class. A healer, for example, might need only one or two bars. The great thing about Bartender is the virtually endless customizability it gives; attempting to explain all of its features exceeds my ability or bandwidth. Playing around with it is necessary.

Raid frames are another contentious area. For healers, raid frames will need to be centrally-located and contain lots of different information, such as dispellable status effects, health and mana pools, shield/buff status, and so on. Some combination of Healbot, Clique, Grid or VuhDo are usually used to achieve this. While I am not a healer, my UI still does use Grid as it is modular, highly customizable, and very, very lightweight. Also, as I am not a healer, my raid frames are not centrally located, occupying another corner, much like my chat box. I chose the bottom right-hand side simply because it balanced out the chat frame (I am a sucker for symmetry).
A more healer-centric choice for my UI might have been paring down the action bars to a slimmer height, and relocating the Grid frames, complete with all necessary healing effects and Clique turned on, to just above my action bars.

Once those elements are in place, it is time to think about other things you might need to know. This is, of course, context sensitive.
Damage-over-time based classes might need a way to monitor their DOTs (I recommend SexyCooldowns), whereas proc-heavy classes will need to monitor for certain procs. Addons like “NeedToKnow,” “Mik’s Scrolling Battle Text” and certain heads-up-displays (like IceHUD, which I use
religiously) can provide this information.

All of this information needs to go toward the center; it must impinge on the visual field. It must alert the player. Typically, I recommend that encounter addons (like DeadlyBossMods or
DeusVoxEncounters) be set up in the following manner.

Elements that will stay on the screen for longer periods, like boss cooldown bars, timers, and procs, should be on the left. Our natural left-to-right reading orientation takes note of information over here first. The more mutable right side of the visual field is better suited for short bursts of information (I use mine for cooldown alerts). Central to the visual field should be those actions requiring the most immediate attention: about-to-expire boss cooldowns (like Malleable Goo casts on Festergut-Heroic) or short-term procs (like Bloodsurge!).

Managing a player’s buffs is also essential. Satrina of TankSpot has provided the best and most widely-used addon: Satrina’s Buff Frames.
These modular, highly-customizable frames allow a new buff frame, monitoring player buffs, debuffs, and target buffs and debuffs anywhere on the field. I have several spread around to monitor target buffs and debuffs, my buffs and debuffs, situational self-buffs (like Flurry or Rune Strike). I spread these around my HUD and unit frames so that I know where to look to find out any type of information, from “what debuffs have I applied to the boss?” to “has the boss gained a significant buff I need to remove?” The good thing about SBF is that a player can “whitelist” and “blacklist” certain buffs from showing up in certain frames, making it possible to know exactly when a certain condition is met.

Other in-game conditions such as threat (which I monitor with Omen) and outgoing damage (I use Skada) should also be kept toward the bottom. I am ambivalent as to minimap placement; mine sits in the top right for lack of a better place to put it. Ideally, I would like it along my bottom panel, but doing so would overcrowd it.

Finally, good design makes use of lots of negative space (no active elements; just the playing field) as a way to differentiate between types of information. As I said, I have a general “information flow:”
the top of my screen contains static, rarely-directly monitored information (my spec, my gear, my guild information, my buffs, the minimap and its associated buttons), whereas the bottom is “where the magic happens,” quite literally, as it contains my chat window, my action bars, and my party/raid/battleground/arena frames (chosen by addon-profile switching). I am constantly looking between the info at the bottom of the screen and the visual field, much in the same way a driver might glance at her instrument panel before looking back at the road.

Tooltips, timers, and other, constantly-ticking information is on the left, where I can check it quickly, and it always appears in my periphery. Quick, short bursts of information appear to the right, where I am forced to react to them.

The center of my field is dominated by a large amount of empty space, except for my player character, which is framed by a HUD that shows me my health, my target’s health, whether my target is casting a spell I should interrupt, and debuffs that I have applied and should be monitoring (such as Sunder Armor or my Death Knight’s diseases), as well as the current target of the enemy and if there are any significant debuffs placed on that target that I might conceivably deal with.

My latest UI (version 3.0) in action! (Click to enlarge)

All of this leaves me a lot of negative space in which to maneuver, a relatively clutter-free view of the game field, but plenty of immediate and eye-catching notification to help me play better.

Is this necessarily a perfect set-up? No; the perfect set up would be for all of the visual cues to be apparent without having arfiticial reminders, and without needing visual elements of the user interface to enter commands. But, as we must have artifice in games, we must at least make that artifice pleasing. I find that a minimalist, functionalist approach to UI design suits me best. Artwork and flourish looks tacky, anyway.

Download link (Curse.com)

This entry was posted on Friday, July 9th, 2010 at 12:00 and is filed under Editorials. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.