Web Interface Design
Web interface design is a critical part of any website or web application. Good interface design can increase consumer confidence and increase productivity; however, for many programmers (and even for some designers), interface design is not part of their skillset.
If a company uses an administration tool frequently, the interface design for that tool can be just as important as the front-end e-commerce website accessed by customers.
What makes an intuitive interface?
For an experienced interface designer, the nuances of interface design may seem obvious, but for many people interface design can seem intimidating. While interfaces can and do vary greatly, almost all intuitive interfaces include the following five features:
- Global navigation
- Limited navigation options
- Back button
- Home button
- Location indicator
Simply integrating these five features into your interface can drastically improve its usability. But what do they really mean? Each of the five items is detailed below.
Breaking it down
1. Global Navigation
Some things are sacred in interface design, and a globally-consistent navigation is one of them. For websites, the global navigation may be major categories such as company, clients, design, etc., while for an e-commerce administration tool they might be orders, products, and advertising. Whatever the navigation elements, the navigation should stay readily available and in the same place throughout the entire interface.
2. Limited Navigation Options
Everybody likes choices, but in interface design too many choices can bad. By limiting choices on a given page, you can help keep the user on track and help to avoid confusion. As a general rule, global navigation should have no more than ten options, and any subsets of navigation should also be limited to ten. If you find you can't keep the items limited to ten, then it may be a signal you need to re-categorize or utilize another type of navigation (e.g., a search box).
3. Back Button
Have you ever used an interface where you couldn't get back to the section you were just in? For many web applications, the problem of a lack of a back button is solved by the back button integrated into the browser itself. However, if your interface leads a user to a dead-end (for example, after a product update), you should always include a way to return to the previous page. When using Flash, it is important to keep in mind that unless you create separate HTML pages, the browser back button becomes completely useless, and in fact can be a little misleading. Users trying to return to the previous page may turn to the browser back button, and in doing so erase any memory of where they were in your Flash application!
4. Home Button
In the same vein as the back button, there should always be a one-step method for returning to the top or home page of an interface. A common practice is to associate the home page with the logo or header image of an interface. While there is nothing wrong with this, it is also good policy to actually have a global navigation item labeled home, index or start. This way you are providing not one but two methods for a user to return to the beginning of your application. This is beneficial as different users may have developed different habits, and in either case your interface will meet their expectations.
5. Location Indicator
If the home button is a quick way for a user to reset their compass, a location indicator is that compass. A location indicator gives the user an idea of where they are in an application, and is especially important in larger multi-tier applications. A location indicator can take a number of forms including navigation highlighting and breadcrumb navigation. Navigation highlighting is simply differentiating between the current section or page in the global and/or subnavigation on the page. Breadcrumb navigation is used most effectively on larger applications where navigation will proceed through several categories, allowing a user to back up to any point in the trail. For examples of breadcrumb navigation, look at the Yahoo! or dmoz directory.
Testing your Interface
After several hours (or days) of work, your interface has all of the five features mentioned above and you're ready to pop the cork on that bottle of champagne. Not so fast! Before declaring your interface a victory, you owe it yourself and your users to test it out. Find someone whose opinion you trust, but has had little or no exposure to the interface you just completed.
Ask them to use and comment on the interface you have created. While they are using the interface, pay attention to any details you need to point out to them, and take notes on any places they become stuck or unsure of how to proceed – these may be problem areas that you can improve on. Pay careful attention not only to what they say about the interface, but what they do.
When to break the rules
The five key points mentioned above will help make any interface more intuitive and easy to use, but what if that is not what you are after? There are plenty of examples of non-commercial and even commerical interfaces that are intentionally non-intuitive. The purpose of these interfaces is to grab the user and make them work to figure out how to use it. Unclear, moving, mislabeled and even hidden navigation can lead to interesting interface experiences. These experimental and artistic types of navigation can be fun to play with and fun to create; however, they should always be the result of intentional manipulation. If you decide NOT to include or label a particular piece of navigation, you should first decide what the ramifications it may have on the user (namely, that obfuscating navigation can aggravate users and lead them to navigate away from your site altogether).
