Designing the Obvious: A Common Sense Approach to Web Application Design

Companies that create Web applications usually put out more than one. And a company that bases its business on the sale of Web applications wants to convey a consistent brand, consistent level of quality, and consistent user experience. When this is the case, it's important to look at all the applications put out by the company to see how they mesh.

Without consistency, a company's brand can end up on shaky ground. When customers are forced to learn a dramatically different interface with each application, the company itself can look as though it lacks focus and a clear purpose. Using different sign-on screens for every application, an inconsistent appearance, different approaches for similar task flows, and distinct design patterns for otherwise identical interactions forces users to work to learn new information all the time. Users don't like that.

Learning to use one application should make learning all the others easier. Not only is this better for users, it's better for us. Consistency allows us to more easily convert customers already happy with one application into customers who will be happy with new ones. Consistency in design allows one success to be built upon another.

Consistency in design also means new applications can be put together in less time and with less energy. Reusing interface paradigms already proven effective in current applications means new solutions will be easier to learn for users, easier to develop, easier to design, and more effective right out of the gate.

Consistent messaging

In addition to everything else you can do to maintain consistency, it's important to make sure system messages remain consistent as well. In fact, it's actually easier to do this than to create different types of message displays for different scenarios. Once a system is in place for the display of messages, it can be reused over and over via a simple function in the code. I highly recommend implementing such a system in each application you create so that messages are always as simple to display as a function call, and users know what is happening every time a message is displayed and never have to wonder why the differences exist.

Consistent messaging allows users to trust they know what to expect from an application. No surprises, no thought.

Understanding design patterns

Design patterns are a powerful tool when trying to maintain consistent user experiences across multiple interactions within a single application and across multiple applications (for example, when several applications by the same company are integrated to work together). These patterns are the glue that holds everything together.

Design patterns are used all over the Web because they allow software designers to leverage the experience users have from other sites in their own applications to make them easier to learn.

The pagination design used by Google is used by many other search engines as well, so no one has to struggle with understanding a new design.

The design used for pagination in most search engines, for example, looks very similar in almost every case, and is used so widely because it works in such a way that users no longer have to think about how pagination works (or even that it's called "pagination"). Users can simply glance at the series of numbered links, wrapped with Previous and Next links, and know what to do.

For more information on design patterns, I highly recommend checking out Jennifer Tidwell's book Designing Interfaces (O'Reilly). It's a tremendous resource on the subject, and anyone designing Web applications for a living would be wise to read every page. It's the kind of book that should take up permanent residence on an application designer's bookshelf, much like Strunk and White's The Elements of Style is kept on a writer's bookshelf. That said, you can check out most of the design patterns themselves via the book's support site, www.designinginterfaces.com.

While you're online reading up on patterns, consider checking out the blog discussion on the subject over at www.lukew.com. Luke Wroblewski is the principal designer at Yahoo, Inc. and the author of Site-Seeing: A Visual Approach to Web Usability. In May of 2006, he used his blog to conduct a discussion between himself and several other designers (including Jennifer Tidwell and James Reffel, the UI design manager for eBay) about the power of design patterns and what they mean. The first in the series of posts can be found at www.lukew.com/ff/entry.asp?347.

Design pattern libraries

Possibly the greatest thing a designer can do to help ensure consistency across applications (and even throughout a single application) is to create a design pattern library.

As previously described, design patterns are the glue that holds everything together in an interface. They help users learn new applications based on experience with others (e.g., the pagination element used at the bottom of many search results pages) and can be used across multiple applications to support a consistent user experience.

A design pattern library is a collection of design patterns that have been documented so designers and developers can reuse the paradigms that have been proven to work and that maintain consistency across applications.

A pattern library can come in the form of a wiki for multi-user collaboration or even a simple PowerPoint document with just a few slides. The important thing is that each pattern has a name, a description of when and how to use it, and preferably a screenshot or wireframe of a possible implementation of the pattern so others can easily put the descriptions into context.

Jennifer Tidwell's www.designinginterfaces.com site is a pattern library, but one that serves a broad range of applications instead of a focused set of solutions provided by a single company. The patterns found there can be abstracted and used in any company's internal library, or can simply be used as a reference encyclopedia whenever you get stuck on a design problem.

In the case of a company-specific library, the patterns usually pertain to the solutions the company has devised for their own applications. If all of the company's tools, for example, are meant to use the same basic layout and pagination structure, its design pattern library contains patterns that explain the details.

Patterns can be as broad as a general framework for a design solution or as specific as describing exact details about how each solution should work (e.g., "If more than five options are to be presented, a dropdown menu should be used instead of radio buttons, and the menu should be set to an appropriate default value."). Whatever the case, a pattern library is a great tool for a company to have in its toolbox. Disparate teams building applications for the same company can rely on the library to determine how to handle almost any design problem and still end up with a solution consistent with the company's other tools. This benefits the company, its users, and the internal design staff, who can spend less time answering questions about how interfaces should work and more time evolving the company's products to support a long-term vision.

The Yahoo! Design Pattern Library is one of the best resources on the Web for a glimpse into how pattern libraries should be created.

To see another example of a design pattern library, swing by developer.yahoo.com/ypatterns, where Yahoo! shares its own patterns with the public. This library features patterns as generalized as grid-based page layouts and as specific as the Drag and Drop Modules pattern used by My Yahoo!, Google Personalized, and even Dashboard HQ to handle the reorganization of content modules on a customizable page.

Yahoo! also offers a code base that can be used to implement many of the patterns in Web applications. It's available through the Yahoo! User Interface Library at developer.yahoo.com/yui.

Intelligent inconsistency

Well-known user experience designer Mark Hurst mentioned "intelligent inconsistency" in a blog post titled "The Page Paradigm" (www.goodexperience.com/blog/archives/000028.php). In the context of that post, intelligent inconsistency is about providing only what's necessary on a given Web page even if it results in inconsistencies in navigation and other design elements. This is potentially dangerous advice, because many newer designers won't always have the ability to make truly wise decisions about when and how to be inconsistent, but the concept has merit with regard to interface design in general.

Sometimes it's better to be inconsistent than to maintain consistency at all costs. For example, a purchase path (the sequence of screens shown to a user when she is making a purchase on a site) might show different add-on offers based on what the user is purchasing. In this case, it makes more sense to show appropriate add-on offers than to offer the same ones regardless of the user's interests (intelligent add-ons are much more profitable). Likewise, it makes sense to show a Cancel button only when canceling is a likely and necessary choice, whereas most interactions don't really need this option. (In most cases, a Cancel option is just plain unnecessary, despite the fact that it's provided in the vast majority of online forms.)

Knowing when to be inconsistent is the mark of experience. If you don't feel comfortable enough yet with your ability to decide when and where to be inconsistent, err on the side of consistency.