Kevin Bury - User Interface Design

User Centered Design

November 2nd, 2006

As the name implies, User Centered Design (UCD) is an approach to software design that focuses on the needs of the end user. A user profile is developed that describes the target audience for the application. Next, typical usage scenarios are identified that represent the kinds of tasks users will perform. Design begins with low-fidelity mockups and storyboards, and progresses to interactive prototypes. User feedback is gathered at every stage of the process, and the design is iterated on until it meets the requirements of the end user.

User feedback is gathered via design walkthroughs, customer visits, and usability testing. Because design changes are applied to a prototype, iteration occurs very rapidly. The result is a prototype that serves as a interactive specification for the product.

User Centered Design enables the translation of market requirements into a tangible representation of the user interface early in the development process, before coding of the product begins. This website contains many examples of the application of UCD.

The Design Process

User Interface Design is a process of discovery. Not all ideas pan out. Sometimes a direction will appear promising early on, only to fall apart later when other factors are introduced. This is why it is best to start with “low-fidelity” tools such as site maps, flow diagrams and wireframes. Because low-fidelity designs are quick and inexpensive to generate, there is not a huge investment in them. It is easy to explore different ideas and iterate on them until you feel confident moving to the next level.

Our first example below shows an early attempt to map the organization of the user interface for a web authoring tool. Product Management had created a 150-page requirements document that included the features they felt would be necessary for the product to be successful.

It is not easy to digest a 150-page requirements document. In fact, the document was written by multiple people and contained numerous duplicate and sometimes contradictory requirements. The diagram below shows the distillation of the requirements into a high-level visualization of the organization of the user interface. It was iterated on many times and became a catalyst for clarifying product requirements, as well as the high-level user interface design.

Many questions can be answered using low-fidelity designs like this. For example; What features of the product need to be available in the primary workspace? How many different views are needed? What information should go into property sheets, wizards, palettes, etc?

Low-fidelity designs enable end-user feedback even at this early stage. Most software applications are targeted at tasks that users already perform by other means. For example, a new web-based application might be designed to replace a process that is currently being done using Telephone, Fax, or EDI. In such a case, there is already a process end users are accustomed to. To be successful, the new solution must work better than the existing process. Using domain-expert interviews, and diagrams like this, the existing process can be understood and documented. This information is fed into the design process. The high-level design for the new application can be shown to the same domain experts, and feedback gathered.

Next is an example from a different project that shows one of the alternatives considered for the basic organization and end-user flow of the product. Because the essence of the design was summarized on one page, it was very easy to understand and compare the alternatives.

Next, is an example of a flowchart that mapped out the detailed workflow for a web-based transaction application. This design was iterated on several times before all the major paths in the workflow were captured. Having the end-user workflow visible like this was a tremendous help getting everyone on the team focused. It helped to solidify requirements for, not only the user interface, but also the underlying data model.

Entry Filed under: Blog, User Centered Design