Evolution Of UI

When looking through my screenshot folder looking for article ideas, I noticed that I could guess the approximate date of the screenshot by looking at the UI alone. Although once my UI used to be a static element, over the course of last 16 months it’s been an everchanging entity constantly shifting its appearance and gaining/shedding parts. Although now most of the screenshots make me think “how the hell could I be happy with this UI back then?”, put together they create something like story of UI concepts, progression and refinement.

The Before Shot
This is what my UI looked last April, 2 weeks before I started tinkering with it. It is the standard Blizzard UI with a couple mods added here and there – TitanPanel at top displays various information I keep track of, Omen, the always-mandatory raid addon, of course keeps track of my aggro. The only visual addon I have here is SexyMap which was a really sweet looking addon that I installed despite it not fitting in my UI at all. Everything else is “out-of-the-box” – raid frames, action bars, bags, unit frames etc.

Baby Steps
Late April 2009 I decided that it was time for me to build my own custom UI. I had tried a few premade UI packages before but my experience with them was horrifying so I decided to start from scratch and do all the hard work myself. Over the course of the better part of a Saturday one by one I tried out many addons and started experimenting with different UI looks when I was suddenly I called into a Naxx25 run. Hastily I threw together something functional and this is what I wound up using for about 4 hours in a 25man raid.

The Dominos bars were completely out of position and I couldn’t find my emergency buttons so between boss fights I tried to lay out the bars in a pattern similar to the default. Healbot (the gray bars above minimap) I had enabled only minutes before entering Naxx so I had no idea how to use it. I had decided to stay with SexyMap as my minimap addon but I had to trim it heavily to make it fit – round minimaps are a bane.

Shaping the UI

Around May some solid ideas regarding the overall UI design had formed. I had decided to keep unit frames at top (as that was what I had gotten used to using the default UI) as well as buffs. SexyMap had gained the title of bottom centerpiece around which all the other elements were placed. I had discovered a fantastic addon called SunnArt which let me create artsy frames at the top and bottom of screen. It really tied the UI together and at the time gains in visual style far outweighed the loss of screen estate. Also I had started using XPerl unit frames because they were the easiest to set up and that was a huge plus for a person like me who was new to addons.

Bringing It Down

Over the next few months I was actively looking around for ways to improve my UI. One thing that I found common in most raider UIs or UI compilations was the tendency to store as much of the information as possible on the bottom  of the screen. So I followed suit. I removed the top SunnArt panel and brought the unit frames down to bottom center. The latter change I found particularly hard to adopt to because I kept instinctively looking at the bottom left corner for my or my targets health/mana numbers. However keeping vital information together was a good decision as, once I got used to the new placement, travel time for my eyes between different elements of the UI was greatly reduced and reflex time only benefited from that. Other than the unit frames, I had also started using Satrina Buff Frames to make the buff icons smaller and take up less of the screen.

Meet Grid

Ever since dual-spec had been introduced a few months back, I had been assembling a healing set and in late 2009 I was finally ready to do a few raids in my discipline offspec. This however also meant that I had to make my UI healer-friendly. So far I had been using Healbot however it’s only purposes was to monitor what buffs raid members were missing and what debuffs needed to be removed. Enough for a shadow priest but as a discipline priest it was scrapepd in favor of the famous Grid. Now I won’t lie – figuring out how to set it up was difficult already but then I had to fit it in my UI. After taking a look at a few healer UIs the obvious choice was to place it in bottom-center and thusSexyMap had to be moved. Upper-right corner was taken by Elkanos Buff Bars with which I was briefly experimenting so the minimap wound up in the completely counter-intuitive upper-left corner – a circumstance I absolutely loathed at the time as it sometimes took me a solid 5 seconds to find it. Because Grid was taking up more space than SexyMap and I had more buttons on screen than ever (78 buttons on screen was my all-time high), Omen and, more importantly, the chat frame had to be made smaller. Minor inconveniences to make me healing-ready.

Bringing It Down, Part 2

Setup seen in previous screenshot remained virtually unchanged for about 3 months till March 2010. SexyMap had been positioned in upper-left corner I had almost gotten used to it when one day the nitpick bug bit me again. This time I was determined to find space for both Grid and SexyMap at the bottom of screen so I gradually started cutting down on number of buttons used (down to 60 in this screenshot), made Dominos buttons even smaller and Omen – even narrower. These concessions however allowed me to put SexyMap back at the bottom which instantly felt a lot more intuitive. Another major change that had happened in the last few months was the switch from XPerl to Pitbull. It was time to get a unit frame addon that I could customize with no limitations – the only problem was that in my eagerness I downloaded Pitbull3 which meant that a few weeks later I had to switch unit frames again to Pitbull4. Also – I had switched back Satrina Buff Frames apparently.

Tweaking To Mediocrity

The UI was finally functional and easy to use enough for any situation possible. So attention was turned to making the whole package more appealing to the eye. In the last screenshot the UI was just a slab of addons put together in one block of information. It was obvious that this slab should be cut down into more manageable chunks and, since SunnArt didn’t provide this functionality, I decided to start using kgPanels. One of my best decisions ever, if I may so myself. kgPanels not only allowed to split the bottom portion into multiple boxes, I could also apply custom textures to them to create a more visually appealing look. Of course this change required sacrifices. I started aggressively macro-ing abilities together to save space on action bars (only 43 buttons left here!), chat frame was smaller than ever which meant I finally had to install a chat addon (Prat) to manage the space available as best as possible. On the plus side I was able to view damage meters and threat meters at the same time by placing them one above the other (so far I had used a threat-in-combat/damage-out-of-combat display setup and put both addons at the same place). Also I had reached a decision regarding buff frames – I settled on Satraina Buff Frames emulating the look of Elkanos Buff Bars, this allowed for most visual style and customization.

Reaching Perfection

Over the last few months I have been adjusting the little things to make the UI truly shine. Getting better at macros and adding certain functions to TitanPanel (like respeccing with a single click) allowed me to cut the number of buttons down to 30! Not bad considering it’s 48 less than a year ago. This allowed me to move Skada and Omen to more central positions on left and right side of Grid respectively. Apart from that most attention was spent on little details like matching bar textures and sleek-looking fonts. kgPanels received a new set of textures inspired by LUI v3. The buff bars were split into columns to prevent the stack from getting excessively long in a 25man raid encounter. Where possible UI elements are aligned and centered to pixel perfection just to appease my OCD nature.

A bonus shot, just to justify calling this a “minimalist” UI


~ by Shale on August 10, 2010.

One Response to “Evolution Of UI”

  1. That looks fantastic. I need to try out kgPanels.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: