20 Mar 2010

UI Quest: Mashing the Buttons

For the first step in rebuilding my UI, I’m going to concentrate on what I think is the second most important part: the buttons. These colourful icons are usually laid out like strips of candy, just waiting for you try one. What I’m going to try and do is make them more useful, ensuring that only the important ones are shown while the rest are tucked out of sight.

In case you’re wondering, the most important element of any user interface is the collection of video settings. If you’re thinking of playing around with these, this excellent forum post should help to get you started. A good baseline is to go for around 40 frames per second (FPS) while in a 25–man raid or a busy battleground before you start using any addons. You’ll probably find that your FPS will vary wildly from area to area, so it’s a good idea to design your UI based on where your computer will be working the hardest.

It’s worth pointing out that I’m using a 20.1″  TFT monitor set at 1680×1050 (that’s a 16:10 aspect ratio) and hooked up using a DVI connector. If you’re using a different screen resolution or aspect ratio you’ll probably want to tweak things to suit your own needs.

Before going through the button bar changes, it’s worth taking a look at the default UI and explain what I’m hoping to change. As standard, the default interface comes with a single action bar (configurable row of buttons), the minimenu and a row of bags. There’s also an XP or reputation bar that runs above the buttons. The XP bar and bags will be tackled another time, but for now we’ll focus on the action bars and minimenu.

There are a few addons that will replace your action bars but by far the most popular is Bartender4. This addon adds a beer tankard shaped icon from your minimap, from which you can control where the bars sit on the screen as well as adjust each bar’s settings. I’ve started off by enabling bars one through four, and dragging the first three to the bottom of the screen.

I’ve left bar 4 floating to one side to start with, but then start using it to hold actions that I don’t need in combat. Abilities like crafting professions, mounts and conjurations can all be moved to this fourth bar. I’ve deliberately left off portals completely, as there’s some useful addons that I’ll cover later that are great for these.

Now that I’ve got my block of three actionbars, I can start to tidy the others.

My fourth action bar – the one with all the stuff I rarely use – will end up on the side of the screen. Likewise the minimenu will be changed from being a long strip to a block. By playing with the Rows attribute for both of these, I can change them from their default appearance so that they’ll fit where I place them. I can also change the size (scale) and spacing (padding) of these buttons to suit their low usage.

I also want to make some further tweaks to bar four so that it doesn’t interfere with the rest of the action. I’m going to make it more transparent out of combat by setting a fade, but I also want it to vanish completely during combat.

By setting the visibility of the fourth action bar to Hide in Combat and by giving it a suitable Fade Out Alpha, I can make it look transparent unless I hover over it with the mouse cursor. As soon as I go into combat it vanishes completely.

To finish the look, I’m going to use two further addons: ButtonFacade and OmniCC. The first one allows me to change the shape and look of the buttons in a process called skinning. You can find several different skins from minimalist boxes to cog shapes as separate downloads from addon sites. OmniCC adds an overlay on top of the button to show what the cooldown remaining on an ability is. I’ve used the default settings on OmniCC and the Zoomed skin that comes included with ButtonFacade to complete the setup.

I’ve not covered macros in this guide as they tend to be class specific. And as I’ve said before, I’ll be coming back to that bag bar and XP bar later on.Of course, this layout may not be to your taste, so feel free to experiment!

The next one in the series will be around unitframes and making sure you have enough information about your character and your target. As always, if you have any questions or if you spot something I’ve missed, feel free to shout in the comments.

The UI Quest Series (in progress):

Like this? Try these other related posts:

Tags: , , , , , ,

2 Responses to UI Quest: Mashing the Buttons

  1. Ercles says:

    A very nice start to those who want to fiddle with their UI but know where to start.

    The only I got to add is that you can free up a lot of space by hiding your bag and mini menu and use your keybindings instead. I was already doing this before I decided to hide them so this saved me a bit of space. This is of course a question of personal preferences. :)

  2. Gazimoff says:

    Glad you’re liking it so far!

    I’ve got a hopeless memory, so tend to rely on having a visible minimenu. As you say though, everyone has personal tastes in this area and it’s good to experiment

    As for the bag bar, I have Plans ;)