Crafting a well-designed user interface for a web application is never a trivial task. It’s the one thin layer that lies between the human user and the not-so-human computer. That’s a large communication gap to bridge especially when you are trying to communicate complex system functionality across a broad user base of varying experience. A hallmark of any good UI is its ability to be used effectively by both novice and expert users alike. It is striking a balance between these two oftentimes-conflicting user bases that poses the greatest difficulty.
For novice users, clarity is of utmost importance; for expert users, efficiency. Icons and shortcut keys afford efficiencies for expert users while a fully expounded UI affords clarity for novice users. Unfortunately, here within lies the problem. The UI elements that afford efficiencies for expert users cause confusion amongst novice users. The details required of a fully expounded UI that facilitate understanding amongst novice users clutter the system for expert users. It boils down to this, clarity comes at a price – that price is clutter. By understanding the user population of the application and using an “upgrades gracefully” design, you can design a UI that strikes a balance to best achieve overall system efficacy amongst all users as a whole.
When I refer to a web application, I’m referring to an application accessible via the web with which users perform a business function. This distinction between a web application and a web site is important because the UI can be modeled to leverage the unique nature of usage associated with an application. A web application is unique in that a significant investment has been made and that investment is supported, often resulting in:
- Users must use the application extensively in course of their job, thereby making it possible to learn advanced UI interactions.
- Training and documentation is available to facilitate the learning of advanced UI interactions.
- The successful use of the application is closely tied to individual performance. Learning to efficiently use the application benefits the users.
With such a user base, UI designers are freed of some of the more traditional considerations (and corresponding limitations) of website design: capturing users’ attention, designing all UI interactions explicitly clear, and leveraging recognition over recall. The user base of a web application should be considered a trainable corps. The UI should address the entire spectrum of the corps, from novice to expert, so that the sum work efficiencies across all users can be optimized. Neither extreme should be neglected, but remember that most large gains in efficiencies come from the expert users because of their larger work throughput.
Novice users are characterized by their unfamiliarity with the application. This unfamiliarity must be overcome by training, a help system, and explicitly designed UI. Icons are seen as cryptic symbols and keyboard shortcuts are unknown. Expert users on the other hand, are characterized by their near symbiotic relationship with the application. They have essentially programmed themselves, through training and hours of use, to seamlessly operate within the confines of the application. Explicit instructions and even required mouse interactions are seen as obstacles in their efficient work modes.
So how should a single UI be designed that reconciles the different usage requirements from these two polar groups? Through a combination of transparent, “gracefully upgrading” functionality and good old fashion compromise. Some UI interactions can be available to all users but have limited visibility so that novice users will not be overwhelmed. Keyboard shortcuts (can be set in html via the “accessKey” attribute) are good examples. Other UI elements, like icons, can be designed so that they are more easily understood by novice users yet remain unobtrusive to expert users. For example a “Notes” icon could show a notebook along with the three small letters “NTS”. The level to which you compromise the UI design (heavy towards the novice or the expert) depends on your users. An application that is used periodically and/or a user base with high turnover would best be suited by a UI for novice users. Conversely, an application that is used frequently by a stable user base would require a UI designed for expert users.
Creating a well designed UI focused on the needs of expert users has its own set of project team communication challenges. As with nearly all web design initiatives, UI designers often serve as the conciliating hub to multiple, often-conflicting, interest groups: marketing, business experts, business analysts, developers, and the all important end users. When designing the UI, I solicit feedback from all these groups. Each group often has different feedback on the UI, but the commonality across all is that they are viewing it as a novice user. This presents a challenge to the designer. For example, a business analyst may argue that an icon is too small and its meaning unclear. Instead, why not use a large icon with a complete textual description? Well, he’s exactly right if I was designing a system for solely novice users. But I’m not, so let’s step into the shoes of an expert user who has used the system for 200 hrs. Will this user want to see this big icon on every page? What about the textual description? Would it help to know that this expert user actually never even uses the icon but instead opts to use a keyboard shortcut instead?
Providing additional clarity to novice users by designing an explicitly described UI nearly always comes at an expense charged to the expert users. This expense is oftentimes overlooked during the design stage of UI development because expert users are unavailable (how can you find an expert of a system that does not yet exist) but novice users (everyone who has an opinion) are found en masse. It is the task of the UI designer to filter the kernels of valuable feedback at this stage while strongly advocating for the expert users based on knowledge of human factors as applied to expert users’ known usage behavior on other existing applications.
Clarity comes with clutter. UI designers must balance the benefits of the clarity provided to the novice users with the drawbacks of clutter weighed upon the expert users to optimally design a UI that maximizes overall system use efficiency.
Mike Padilla currently serves as the User Experience Design Manager for all web applications at Radian Guaranty (RDN) where he oversees everything from information architecture to branding integration to rich client UI architecture. Hes led front-end development efforts for such companies as Fleet Credit Cards, Mellon Private Asset Management, The Bank of New York, and Bessemer Trust and his work has been featured by Macromedia for its usability.
