Best Practices
GUI and UI Principles
User interface design is not an exact science. For the most part a UI designer uses a toolbox approach to help make correct UI design decisions.
There are also a number of other "tools" available based on experimental data not necessarily specific to one product or context. One of the more important and frequently used is UI principles. Going into depth into even one principle is a fairly lengthy procedure and so, for more information on specific principles a reference list is provided at the end of this article.
Here we will discuss what UI principles are, how to use them, and (more to the point) how not to use them.
What Are They?
Generally speaking, UI principles are generic statements about how a given system (or set of screens, or device, or... whatever) should behave (or sometimes look) when a user interacts with it.
By way of example, here is a UI principle taken from Bruce Tognazinni's website - an excellent reference for UI designers - (see asktog.com).
Keep status information up to date and within easy view.
There are a few characteristics of this UI principle that are typical. It doesn't make any reference to particular UI design elements (buttons, links, menus, layout, etc). It's not overly specific, for instance it doesn't say what "within easy view" translates to inside the interface or exactly how easy is "easy". It doesn't tell the UI designer specifically where to put things or how up to date the information must be. This is because UI principles must be general enough to apply across a large number of contexts and mediums.
When the information gets more specific you leave the realm of UI principles and start to move towards UI Standards and Guidelines. More specific still and you are creating UI specifications.
How Are They Used?
A UI design principle is intended to allow a UI designer to look for possible sources of problems in an existing interface, or as a reminder for considerations in a design they are about to undertake.
For instance, consider using the above principle if you are designing a web site or web application. Supposes that it has a list of items that may change frequently ; you might ask yourself "does the user easily know how big that list is?", or "what items are most important to the user?", or "will the user know when the list was last updated?"
Applying the UI principle to the UI design, gets the designer thinking about these types of questions, but does not provide specific answers to them. It should be kept in mind that depending on the design context some of these questions are more important than others in supporting user goals.
Limitations
The limitations in UI principles come from the fact that specific UI design solutions depend on specific context, and that UI principles are, by their nature, generic in context.
This is not an intrinsic weakness in a given UI principle; this is just the nature of UI principles. They are intended to provide a general direction into the overall thinking.
In one instance the advice from the above principle - "easy view" -might be "right in the user's face" (say for urgent/emergency type status information). In other cases "easy view" might be "at a glance" (say for information on the number of items in an email list).
Because UI principles are general in nature, you should not try to use UI principles as a means to arrive at a definitive answer as to whether a UI design is "correct" (although they may be extremely strong indicators that a UI is categorically incorrect). To make sure a UI design is working requires real information and empirical data from end users.
Like so many UI design tools - user interaction testing, focus groups, standards and guidelines, UI patterns - UI principles can be a very powerful and beneficial tool if their characteristic, attributes and limitations are well understood.
Here a few places to get started for UI principles:
- AskTog: First Principles of Interaction Design
- IBM - Ease of Use: Design basics
- KDE User Interface Guidelines
- UPA: Common Principles: A Usable Interface Design Primer