Shooting for the Center: User Interface Design

October 1, 2009

Hello friends. Thanks again for returning to the Goblin Workshop. We will take your return visit as either proof that we have piqued your curiosity, or proof that the hospitality suite is designed with enough labyrinth corridors and esoteric doors that you couldn’t find your way out from last time. Either way, welcome back!

Unfortunately, I have some bad news. Apparently there have been some delays with the production process. As a result, our first tangible product is still a ways away.

crashtestdummyThe goblins tell me that I should just turn you away. Some have even suggested using a few of you in product testing. Given what happened to the last few test subjects though, I have explained that would be ineffective in building customer loyalty.

They seemed unconvinced.

Thankfully, they defer to me in regards to marketing and customer relations.

I would hate to waste your time here though. So, let’s instead talk a bit about design. Specifically, interface design.

We will first focus on something many likely already understand, but which may not have previously been explicitly spelled out.  There are certain key pieces of information you need while playing.  Depending on the activities you participate in, or even what role you are playing, this information can differ drastically.

Tanks in a PvE environment may need to know their current health or their relative threat level on certain mobs.  Healers in a PvE environment may need to know their own mana levels or the health of those they are responsible for healing.  Fishers or those advancing tradeskills may need to know the result of their attempt or how much time is left on their current attempt.  PvPers may need to know the relative health of their teammates as well as their targets.

ontarget_FullAt the end of the day, it doesn’t matter what is important to an individual playing a specific role.  What is important, is that the information that is most critical to their success is easily accessible.  When designing your user interface, consider grouping those critical elements together around your avatar so that you can more easily react to the information you receive and still move as you need to.

The more often you need to glance up at the corners of the screen for critical information, the longer it takes you to notice you are standing in a pretty blue patch of burning fire, or that your health is dropping precipitously from a PvP attack as you are raising your fishing skill.

This doesn’t mean clumping all your addons or user interface elements into the middle of the screen.  It means taking the most critical ones, and arranging them in such a way that you can quickly scan them to gain important pieces of information without having your attention split from what else might be going on.

It may mean putting a few important things just below your avatar.  It may involve using addons that allow you to hide certain pieces of information until they are critical.  It may mean using the transparency functions of some addons to place information so that it isn’t obvious until those times you need to react to it.

The center of the screen is typically where most of the actions occur in the game world, consider finding ways to include key pieces of information around that action.

Everyone will have different pieces of information they want more readily available.  Identify what those are, and find an addon that will allow you to place that information where it is most accessible.