obso1337.org

WoW custom UIs are notoriously complex. To the uninitiated, the mass of buttons and text can be alien and confusing. There is no reason to how or why things work the way they do, their total customization makes them usable to only the primary user (after a significan learning curve). After an impromptu lesson about Fitt’s and WoW GUI design with Justin the other night, I figured I should write it down.

Fitt’s Law Applied to WoW UIs

Something I see often is a giant mass of buttons arranged on the screen to both make way for other addon widgets and to maximize the number of macros the user can access at once. If you study them, you can see that many of these UIs are inefficient, no matter how adept the user is with the interface. The buttons are small, and important functions are hidden in a mass of similar-looking buttons.

What is the most efficient size for a block of buttons? Lets think about it in relation to Fitt’s Law.

Basically it is a prediction model for human movement which has determined:

• the bigger the target the easier it is to hit
• the edges and center of a target are easier to hit than a specific target in the middle

For right-handed users, the five easiest points to hit (red area) are:

center
1. bottom-left
2. top-left
3. top-right
4. bottom-right

Also, edges are easier (green area) to hit than targets off-center of an object (white area) and the easiest movements to make (black arrows) are from top to bottom (pulling motion) and left to right (pulling motion). Pulling towards yourself is a much more natural and comfortable motion than pushing away.

If you notice, the most efficient movement is similar to the MacOSX and Windows menu bar. Items are clicked from the top corner, dragged down and across to the right. Windows actually does a strange thing with the Start Menu, although the bottom right is one of the first points you will notice (although eyetracking research done for the web is slowly proving otherwise), clicking and accessing items in the Start Menu arn’t as comfortable as clicking and accessing the File menu in your application.

Now, lets get to the WoW UI part.

WoW UIs come in all shapes and sizes. Some of them provide additional information or easy interfaces to create custom macros, and others break apart the GUI itself and allows you to arrange buttons and dialogs however you see fit. I’ve seen several UIs which sport a giant pile of buttons, all arranged in a tight condensed area in order to allow room for other dialogs and information.

But is something like that really improving your game? Lets talk about grouping buttons.

Here we have a diagram of several button layouts. The most efficient and easy to search-and-click layout would be the single button. There are no other buttons around it competing for space, it is a single target to hit, and no scanning is necessary once the target area is identified.

Next we have a 2×2 square. This ‘four corners’ example allows easy targeting of all four buttons (bottom-left, top-left, top-right, bottom-right corners) as well as movement in five directions. The top-left button is the most versatile and allows the most movement. This button would be the best button to start a button combo or to put a life-saving ‘Oh Shit!’ macro.

But wait, we can do better. You wouldnt benefit much by a 2×2 square over the existing interface because the default buttons are set up as horizontal and vertical rows in order to take advantage of the edges. Let’s look at a 3×3 example.

In this example we still have the four corner sweet spots as well as the center. There is still the optimized movement between the corners, however the diagonal movement from top-left towards the center is slightly weakened. The middle edges between the corners are not as strong as the corners themselves, however are still viable because of their ‘edge’ quality.

This layout provides more room for more complex combinations allowing quick horizontal or vertical moves without having to change direction to access additional buttons. Keep in mind the longer the movement and further you get from the starting point of a combination, the weaker the movement will become.

Now we will go a step further and look at a 4×4 square. Immediatly a high level of complexity is introduced. We lose the center sweet spot to four buttons instead of one (this is a result of the ‘even’ number of blocks, but still a factor). There is yet more horizonal and vertical room for combinations, however their length weakens the movement.

The size of the block introduces ‘dead zones’, buttons which would take much more effort and mobility to scan, identify, and navigate to (represented in yellow). These would not be recommended in combinations with critical attacks or mid-battle life saving techniques. Because of this, these dead buttons essentially become useless in battle and take up space, reducing the benefit of the larger horizontal and vertical combinations which are already weakened by their length.

Where in the 3×3 layout essentially all 9 blocks (100%) were strong (blocks in which they were a sweet spot (in red) or strong movement (in black)), the 4×4 only has 8 blocks (50%) which are strong. Not a very efficient use of space with the potential of causing error and death (in game of course).

Overall the most efficient use of space, movement, and value is the 3×3 square. You get the highest rated single-target points as well as space to create more complex combinations of clicks while not having to relive Simon every time you want to play the game. If designed with contexts of attacks, casting, defense, or healing in mind, it could become a very efficient and usable alternative interface for WoW.

Happy Hunting!

seele :: Jan.05.2006 :: General, WoW :: 4 Comments »

Trackback this post |