Monday, November 12, 2012

Evolution of a UI: Continued

It's time for some more UI work. Last time we were getting a general overview of the current UI and laying out what works and what doesn't as well as picking out some annoyances that should be fixed in the next version.

The more I stared at screenshots and thought about placement and other factors, the more I realized that (some issues and annoyances aside) I generally still like and enjoy the overall concept of my setup. I like having the chat box, minimap, raid frames and action bars all together in a nice solid unit. I also like having them lifted slightly off the bottom of the screen to help keep my eyes centered on the action. The things I don't like are significant enough to be really annoying, though. Since one of my primary alts is my Resto Shaman, healing frames are important and large groups like battlegrounds and LFR meant that my attention was down in the corner of the screen instead of on what I am or am not standing in. The buff bars that I've been using for the last four years are becoming gratuitous as raid buffs are consolidated more and I've learned to monitor the important ones (trinkets, Bloodlust, big CDs, etc) in other ways. I don't really need a huge list of buffs going off all the time when I generally only care if I have Kings and Brilliance or not. The HUD elements for monitoring my health and mana are somewhat irrelevant since, due to the theme/styling I chose, aren't visible when what they're intended to show me is most crucial. This means that I end up watching my Player frame for that information which makes the entire addon redundant. Combine that with other issues like bloat and clutter and I still have significant work to do, even if the end result won't look terribly different from what I'm already using.

As I mentioned last time, part of my process is to list every single aspect of my UI and decide if I need it and when I need it. This can be as simple as a handwritten list on a scrap of paper, but for the sake of easier editing (and the fact that I have the handwriting of a serial killer) I opted for a spreadsheet.


Click to zoom, though it's not really interesting.

Having everything laid out in front of me, I can go through and make specific notes and observations about each element. Some I've removed, some I'm replacing with other addons or options while a few others are getting minor tweaks. This also is a good time to look at both of my specs and decide how many buttons I'll need to have on screen at any given point in order to function. Few things are more annoying than getting everything set up based around your main spec only to remember that your off spec has three or four more abilities that you now don't have room for. This also tends to be a problem with alts.

Once I get an idea of what I need to have on screen at any given point, I can finally start working on the layout.

If you're working on your own UI, I would recommend at least grabbing a pencil and a few sheets of graph paper. Being able to lay everything in front of you and see the final product is a key factor in a clean and polished UI. If you jump right into the game and start moving things around, then you're likely to end up with several hours spent on a disjointed and unfocused interface that, rather then feeling like a finished package, looks like a doomed game of Tetris. That's not to say that this step is completely required, I've made a few interfaces in the past that I didn't lay out beforehand, but it certainly helps.


Extreme Measures

I'll be the first one to admit, this is the point where I probably take things a little further than they are reasonable. Due to my (limited) engineering background, I actually prefer to take things into AutoCAD at this point. I do this because it's far easier to just drag things around on a screen as well as copy, paste, scale and stretch elements as needed than it is to be constantly erasing and redrawing or starting over on new sheets of paper. In CAD, I can also move specific elements to different layers to visualize different states and see how things will come together while I'm in a city or in combat or what have you. Since the original plan was for a multifaceted UI that expands and changes based on my location and other factors, this is huge for me.

The first step is to import a screenshot from WoW into CAD ("import" in this case is a fancy word for "copy and paste") so I can be sure I'm working in a field that is the same resolution as my current setup. It sucks to spend three hours on a layout only to find out that you got the scaling wrong and nothing works.


Click to zoom

For the same reason, my next step is to trace the size and shape of a few elements that I want to keep the same size. This time, that means my action buttons which are as small as I can justify having them without making them difficult to see and my chat box which is already as small (at least vertically) as the game will allow. Unintentionally building something that requires those elements to shrink is going to cause me problems in the long run. For the sake of being thorough, I also traced out my broker icons and minimap and marked thhe vertical and horizontal centers.


Click to zoom

Once I've mapped out all the guidelines I need, it's time to just start moving stuff around and make them fit together. In hindsight, I wish I'd have documented this better but I ended up getting lost in the process. It probably would have been a boring thing to explain and read about anyway.

Six hours later, I was finished:

City

Group

Combat


If you look closely, you'll notice that I've removed a few aspects to my original UI that have become redundant or simply don't serve a purpose anymore. The IceHUD Mana and HP bars are gone, my TargetofTarget and Focus frames have been removed, the large column of buffs and debuffs in the upper right corner have been removed and will be replaced by an ElvUI-style dashboard of buff indicators to show me when I'm fully buffed and ready for a pull. Raid frames have been centered and given room to grow vertically so I can more efficiently heal in large BG's or LFR without having to move things around all the time.

From here, I'll head into Photoshop to create transparent images with my layouts that I can import into kgpanels and use as templates for placing UI elements in game. Again, this is a step that isnt completely necessary but I feel it makes things easier in the long run as opposed to having to try to eyeball something on a piece of paper and recreate it on screen.


Now is the hard part: getting a few dozen addons made by different people to play nice and do what I want them to do when I want them to do it. This is usually the part where I consider learning more about LUA. This is also the part that will have to wait for a few days. I've learned not to screw around with my addons too much in the middle of a raid week.

No comments:

Post a Comment