April 2002

Articles Archives Printable PDF version

With all the press and attention recently given to extreme programming and agile modeling techniques, it seems very little attention has been given to user interface design techniques that will blend, rather than clash, with these new development methods being used to create high quality, industrial strength, and highly usable applications. As an offshoot to the agile modeling techniques, we are proposing teams explore the benefits of agile design to quickly establish a high quality user interface (UI).

What is agile design?

We’re faced with shorter timelines, more aggressive development goals, and limited resources to complete our projects. Each project requires a UI design strategy successfully implemented with the other aspects of the project. Agile design addresses these constraints by limiting the level of documentation to a point that works well for the team based on the skill, complexity, and proximity of the team participants. Agile design acknowledges that great user interfaces are an iterative process and require time-tested, user-centered design techniques as a foundation for success.

Agile design is built upon the principles established by a talented team of professionals who wrote a manifesto on agile development to address the needs of the current development environment we all seem to face. We often attempt to layer usability into a fast moving agile development environment where successive iterations of the code base are commonplace.  This approach can backfire if we insist on heavy documentation and human factors studies before getting prototypes in front of users.  On the other hand, just putting a few developers in a room with some end users can often result in a product that works for a subset of users on the team, but not a product that truly delivers the benefits of user-centered design.  This is because specific design decisions need to be validated with actual usability testing to verify how the users behave, rather than relying on what they think they want.

Where does UML fit it in?

We feel the use of UML and specifically use cases on design projects can help create a common set of notations for documenting UI design decisions. We are particularly impressed with use case techniques covered in the book, Writing Effective Use Cases.

Unfortunately, UML does not go far enough in providing useful documentation techniques for deriving a world-class user interface.  Specifically, it lacks UI models we feel are critical to developing robust web applications. These UI models allow  extensive refactoring of the UI before initial implementation.  The models form the basis for the prototype and are driven from a starting point of user centered design.

Using agile design models to refine your design

There are some basic models we use to support the quick development of prototypes, while adhering to the principles of agile design and usage-centered design.  First, we develop a user profile matrix that allows the team to more clearly understand the unique tasks and characteristics of each user type for the system.  We then develop a presentation model that documents major decisions about the system like platform, colors, fonts, and overall UI architecture.  This model clearly demonstrates the key UI elements and often includes several design renderings, so that everyone can visually validate the design direction.  We then move on to develop specific navigation models  that are supported by existing visual design patterns and the documented use cases for the system under development.  To flush out the models, we develop screen layouts for specific pages of known complexity to validate both the navigation and presentation models. Of course, all of this modeling needs to be supported by a robust set of design standards and guidelines. This entire process may occur over a period of days or weeks, depending on the scope and complexity of the design project.  During this period, we continually refine each of the models and strive for a strong congruency between them.

Why use agile design techniques?

Using these techniques with the appropriate skills, roles, and levels of documentation can result in highly effective and usable software delivered under shorter time frames. Your team members must commit to a strong discipline of design iterations, highly focused interactive design sessions, and fluid team communication for this approach to succeed.

We have been using these techniques on several projects over the past four years and have had success with small teams, as well as very large enterprise application design efforts. In the end, it is really about achieving a successful design with the resources you are given. Please feel free to e-mail me at jimh@classicsys.com with questions or concerns you have experienced applying these techniques, and I will follow up this article with some more detailed examples of how we implemented agile design techniques successfully on our client projects.

Back to Articles