Sunday, February 8, 2009

Building a Better UI

WoW has an amazing quality that has really changed the way designers think of doing UIs. Not that vanilla WoW has a wonderful interface; I actually hate it, and think it lacks in several departments. But WoW came along was was like "fuck it, make your own. here's the language we use". They realized the community themselves would spend more time and effort building shiny Unit Frames for them, and understood that not everyone wants the exact same thing in a UI. Even patch notes that significantly make changes to UI code contain LUA updates and new hooks they've implemented. This is enormous, when you think about it. Now when an MMO launches (Warhammer or AoC, for example), the UI is generally opened up to the community to establish. Some things are off limits, but when you think of how many addons are available for WoW, no two UIs are the same (unless two people are running the vanilla interface).

This also has an interesting side effect of forcing people to look under the hoods of their game installs; something pirates and crackers have been doing for years, but something Average Joe would never do. "Dig into my Saved Variables folder, and paste this code at the end of what?" More and more people just aren't turned off by that, and it opens a whole new world for them that something like Gears of War on the xbox just won't deliver.

Over the years of playing WoW, I've gone from using packages like Cosmos, to realizing those packages were bundles of related addons and stripping out the ones I don't like. I bagan to develop a sense for how I wanted my UI to feel, and have added things to it over and over and built up a lot of crap. When I began doing arena on my druid back in BC, I realized 90% of the shit on my screen was only useful for a raid, and actually copied my entire WoW folder over to another install, and cut all the shit out of the picture. Raid windows, threat meters, DPS meters, bars full of shit like tradeskills and buttons I'd never push in the arena got axed, and I had a "slimmed down" version of my UI that would maximize viewing area. As I began using this, I realized I didn't really give two shits about my placement on the meters etc, and that I found myself launching the "lite UI" for raids as well. I had come full circle, and was actively trimming shit down instead of building it up.

With my priest, I decided to take an even more aggressive approach, and sit down and actually think about what I wanted on my screen. It turns out the answer is "not much". Even the screens I'll post are still a bit cluttered for my tastes, but one huge breakthrough I had was when I realized that I don't need to see my fucking Smite button on the screen. Like AT ALL. I know pushing 4 casts Mind Flay. I also know it has no cooldown. Why do I need to have a square showing that icon on my screen AT ALL?

I don't.

I eliminated every bar that just shows buttons I don't need to look at, and only kept up any spell that actually has a cooldown I may be interested in seeing. Knowing my shadowfiend is up in 17 seconds is nice, I guess. I also kept buttons like Rez on there, since I don't waste a keybinding on that. I click it. I click potions, too.


in combat:

Click images for non-shrunk versions.

Those big wonky green and blue bars to the sides of my toon are kinda .... yeah. I dunno about those. I installed them for my warlock to watch threat during Patchwerk, and have kinda gotten used to them being there. In all honesty, I don't think I pay ANY attention to them at all, though, and if they were gone I wouldn't even notice. I used to have my player's unit frame in the upper left hand corner of the screen, too, but found during PvP I liked not having to look so far away from the center of the screen to see my HP/MP. That's actually the purpose those bars are supposed to serve, but having them AND my unit frame right next to each other is kinda dumb. Meh. If you look closely, you can see three little buttons by the unit frame of who I'm targetting. On my warlock (again, on Patchwerk), I wanted to put my trinket cooldowns right where I could see them, while I was staring at my DoTs ticking down. On my priest, I threw Holy Fire and Mind Flay in there to guage distances (Mind Flay is 20 yards, most others 30). I'll eventually probably put something more useful there, or just axe it altogether.

For the 'combat' image, I tried to bubble myself (Weakened Soul debuff, big red icon, right hand side under the minimap), as well as throw an active buff on myself (Power Infusion, Inner Focus, top center of the screen, big icons). My 'normal' buffs (Fort, MotW, whatever) are in the upper left. I began dissecting the image and labeling everything, but that got to be big enough for a followup post, I think. I want to get this up before lunch today, I've been really busy at work.

One thing not shown here is that I realized last night I actually DO need my main action bar visible for when I jump in a vehicle or mind control someone. I made it totally invisible unless I hover my mouse over it (you can't see it at all, the dim bar you see on the right edge of the screen is my tradeskill and buffs bar). I MC someone, take a look at what the buttons do, and don't need to look at it anymore. I use 1-0 as my action buttons (and a Belkin n52), so there's no OH WAIT WHICH ONE IS Q or V? ... I can tell at a quick glance that 4 and 5 are whatever, and then I don't need to see that button anymore. I find it actually even forces me to learn specific mobs' moves, which makes it more interesting, plus it's always there if i do want to look at it (just mouseover it).

I'll follow up with a more in depth look in the next day or two. UIs are fascinating to me, and I love seeing what other's people's dashboards look like. I remember raiding with a holy priest that was asking me an addon question and I had her host an image of her UI on imageshack to show me something. She raided at 800x600 (back in MC, 40 man raids), and had the WORST layout I have ever seen. I wish I still had the image. Her viewable area of shit happening outside of unit frames was a little box about 80x50. There was a corehound breathing fire on her in the picture. I doubt she even realized it at the time.

;)

6 comments:

Anonymous said...

I don't even play anymore. But here's what I used:

http://seleste.net/images/ui2k9.jpg

General messages such as NPC banter, exp and loot are in the blank space next to the combat log, and to the right of that just before the bags is the party display. Uncluttered, functional yet still pretty. That's how I roll~ :3

Rich said...

seleste.net is my new homepage.

You are an inspiration to us all, jan.

Zaxis said...

Jan, any way you could share what addons you used to achieve that look? I have been trying to get a clean, crisp interface like that for a long time, and most of the packages available that advertise that don't deliver. Yours, however, is exceptional.

Anonymous said...

The jist of it is:
eePanels2 (for the bottom panel and unitframe panels)
PitBull (unit frames, had to hook the panel behind it to the pitbull frames to appear/disappear with it)
FuBar (the glowing exp is FuBar_FuXPFu)
simpleMinimap (moving/modifying map)
Bartender4 (bars, of course)
Skinner (to make the whole UI uniform gold/gray)
VisualThemes (just some pretty polish)
IceHUD (the aura-looking bar skin comes with it)
ButtonFacade (Entropy skin for the metallic borders)
Countless hours of tweaking all that.

As for Seleste.net... I may have a blog there one day. I'll put a RSS that updates every day on whether the blog exists or not. :3

Cronoo said...

My mods aren't really current on my Rogue, but here's my normal UI on an alt.
Obviously at 80 his buttons would be more filled out and it'd look neater =X
http://1.bp.blogspot.com/_jpKVO616wNI/SZJvI49xOgI/AAAAAAAAACo/huy1beUdJn4/s1600/RawrUI.bmp
lolwindowsmode^

Anonymous said...

I did a bit of LUA coding while I was playing. I was surprised Blizzard kept so much utility into the interface hooks, although in the end most of my stuff was broken as they reeled it in (bye bye to my in-game drinking game, no drinking items automatically while in combat anymore, heh).

Anyway, I would like to point out that customizable interfaces with scripting weren't exactly an invention of Blizzard.

I also agree, I loathe the default interface, I think it's poorly done. What Blizzard is fantastic at however, are icons. All of the ability icons, item icons, etc. are extremely well done. This is immediately evident as soon as you play any other MMO.