22
Jul
09

7 principles of UI design

A bit of pointless surfing the other day led me onto a page outlining the “13 principles for display design“. Since addons essentially are software specifically designed for human-computer interaction, I came to think how these 13 principles could be given a UI-addonesque tone.

Now, bringing “real” interface and display design into a game might not be your cup of tea, but if there are a few pointers to keep in mind when laying out your UI, why not use them? After all, it might help. Anyway, my version of the 13 principles of display design, which we can call “the 7 principles of UI design”:

  1. Legibility
  2. Redundancy and multiplication
  3. Proximity
  4. Multiple resources
  5. Similarity avoidance
  6. Simplicity
  7. Predictable/logical movement

1) Your UI should be legible and easily so. If you have to squint to read your ridiculously cool font, or if you have to shine a torch onto your screen to read the leet shade of green text…then your UI is not legible. If you are going to follow only one of the principles, this is the one.

Example:

  • Tolkiens elven font is probably very cool. But try to imagine a scrolling combat text in it? Not really.

2) This is the “if one is good, two is better” principle. The most clear information systems often use two or more forms of communication, often redundant forms. The classic example is the traffic light which uses two redundant forms of communication; colour and position of its lights. Either, on its own, is perfectly sufficient, but by using them both it becomes so much clearer. The key concept here is to have several indicators for critical bits of information.

Examples:

  • Cooldown bars that change colour as the time runs out (DBM does this for example).
  • OmniCC counts down with numbers that start out white, then turn yellow and red.

3) Proximity; the close grouping of related pieces of information. Basically, if a task requires two or more different sources of information to be successful, these should be grouped together, so you avoid having to look at the top right, bottom left and on the floor between your feet to make sense of the in-combat messages. For a warrior this could mean having the rage indicator close to the ability cooldowns. Note that it’s very possible to cram too much information into an area, causing it to become cluttered and unreadable.

Example:

  • Party/Raid frames that group people together as well as show mana, to allow the healer to see his/her mana whilst keeping an eye on the health of the party.

4) This is related to the redundancy point above. The human minds ability to process information increases if the sources of information touch upon different senses instead of all using the same one. Too much of one thing will lead to information overflow. In plainer terms, instead of having all your addons only display visual information, use audible cues too, especially if the audible signals are distinct and clear.

Examples:

  • Omens aggro alert.
  • MSBT dings when my health drops below a certain percentage.
  • DBM plays the “Run away little girl! Run away” sound bit from Karazhan when walls of flame appear in the Obsidian Sanctum.

5) If something is vital to know, or to be warned about, do not make it look like anything else, especially not something humdrum that you use all the time. It needs to be distinct enough that it doesn’t get drowned in the general cacophony that is a raid UI. Is everything shades of red in your UI? Make your death warning blue. Things that are visually distinct stand out just by being there. Again though, moderation is key. Keep the very distinct warnings and items to a minimum, so that your eyes don’t become “immune”.

Example:

  • Blizzard changing the colour of the Sartharion Shadow Fissures from red to blue. Too many player AOE effects were already red, making them hard to spot.

6) Simplicity…don’t we all know the acronym “keep it simple, s…..”? There’s a reason for it, actually there are several reasons. The first and foremost is, the simpler you keep things, the less likely they are to break. But, in terms of user interfaces, it is an advantage to present the relevant information as simply as possible, thereby using as little of the users brainpower as possible. I know it sounds a bit daft, but the less mental processing is used dealing with the information, the more is free to be proactive, to think ahead. And being able to think ahead makes the user a lot more efficient in general.

Example:

  • Grid shows you how much a players health deficit is, rather than show you their total health. The deficit is more useful to healers than the total health since they are concerned with bringing them back to full health.

7) The final principle says that if something moves in your addon, it should be in a predictable and logical manner. The traditional example here is a thermometer where the indicator rises as the temperature goes up. Since a UI is a personal thing, there is no hard and fast rule about how things have to move. However, if something moves, it should move in a fashion that’s logical to the user.

Example:

  • A threat bar in a threat meter than grows as threat increases.

There we are. 7 principles (not rules of course) to keep in mind when setting up your UI (or making your addon). They’re not a checklist, rather they’re a pointer as to how to improve the smooth runnings of your addons. The most important thing to keep in mind, is that the UI is a tool rather than a work of art. While some people might dispute this, the basic reason for using addons is to improve information flow and accessibility of the vanilla UI, especially in a raiding situation.

As with most things, the central thing is this: do what works for you, not what you think would work for others. If the above can help, so much the better.

Advertisements

0 Responses to “7 principles of UI design”



  1. Leave a Comment

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: