Tutorials
ACM ISBN: 1-581 13-158-5
CHI 9 9 1 5 - - 2 0 M A Y
1999
Practical Usability Methods in Website Design Darren Gergle, Tom Brinck, and Scott Wood D i a m o n d Bullet D e s i g n 315 W. H u r o n , Suite 140 Ann Arbor, MI 48103 USA +1 7 3 4 665 9 3 0 7 darren @ diamondbullet.com
[email protected] swood @diamondbullet.com ABSTRACT This tutorial presents a practical approach to applying usability methods to website design. Website projects are usually done on tight schedules, with limited resources, and without a well-defined approach for achieving usability. For many developers it's easy to dismiss usability methods as an unnecessary overhead cost. We demonstrate how usability methods can be integrated efficiently and effectively into each stage of the website design process. Employing this process, and by using forms, checklists, and other tools to improve communication and workflow, website projects can be managed successfully achieving a highly-usable product. Keywords WWW, Worldwide Web, design process, usability, userinterface guidelines, user testing, project management, website design
learning each method as knowing and remembering when to apply each method and how to do so efficiently. To achieve this, we've defined a process for developing usable websites [2]. To facilitate this process, we've created a series of forms and checklists, as illustrated in Figure 1, which we use at every stage of the design process to remember critical questions to ask, facilitate communication with clients, document key design decisions, and quickly implement usability evaluations.
I. _
i
r=
~
-
-
I
,Z~__.
ee:
INTRODUCTION H
How are traditional usability methods best applied to website design? In the fast-paced and competitive world of website design, usability methods need to be applied in a cost-eft~ctive and practical way that is smoothly integrated into the design process. In this one-day tutorial, we present a design process and project management strategy, and demonstrate how usability concerns are addressed at each stage of design and development, from initial client interactions and requirements analysis to prototyping, production, final testing, and release. At each stage, we address which usability methods are most appropriate and demonstrate how to effectively and efficiently apply them. We cover many practical concerns regarding client interactions, budgets, design tradeoffs, and schedule constraints. With the wide variety of usability methods available, it is our experience that the real challenge is not so much
110
I
i
i .
.
.
.
.
.
.
.
.
.
.
.
.
Figure 1. Forms and checklists, e.g. client requirements, functional testing, website design guidelines.
THE ROLE OF CLIENTS AND MANAGEMENT While users should be the designer's primary focus, they are rarely the ones who are directly paying the bilh; and making the final decisions on a website. Whether you are working for external clients or building websites for your own company, as a website designer you need to achieve usable designs while working within the constraints defined by your clients or your management.
CHI 99
15-20
MAY 1999
ACM ISBN: 1-58113-158-5
At times, the role of your client or your management can be crucial to achieving a usable product: for example, when they provide useful guidance for requirements or when a client acts as a domain expert on the design team. At other times, the role of a client may be in tension with usability considerations: often for valid non-usability concerns, such as legal issues or corporate image. In this tutorial, we take a practical approach to effectively communicating usability considerations with your client, integrating the client into the process, and making necessary tradeoffs.
USABILITY THROUGHOUT THE DESIGN PROCESS The basic stages of our website design are Planning, Analysis, Mockups and Prototypes, Production, Testing, Launch, and Maintenance. Several of these stages may involve phases of usability evaluation and redesign (especially with prototypes), and the stages are not meant to be viewed as strictly linear and non-overlapping. Following is a summary of these stages and some of the techniques we use to integrate usability into the process. Planning In the initial stage, a project plan is formulated with information about budget, schedule, necessary resources (e.g. software), and personnel who need to be involved. These are the constraints that apply to usability considerations at every subsequent stage, setting the framework for making necessary tradeoffs. At this point, a usability plan is created to clearly specify the target user population, their expected use of the website, and the type and depth of usability evaluation to be performed. Analysis In an initial design session with the client, requirements are determined with help from an interview form which identifies key issues to be specified. When users are accessible, straightforward interviewing and questionnaire approaches can be used to gather further user requirements. Technical requirements must also be determined early, such as the need for special database, multimedia or security elements. Although somewhat orthogonal to usability, the available technologies can impose severe restrictions on interface design. With requirements in hand, usage scenarios, user-modeling, and other forms of analysis can be conducted as needed. At this point, the structure of a site can be outlined, and specifications drawn up for the designers and producers.
Mockups and Prototypes Simple sketching and mockup techniques can be used to quickly explore alternative visual designs and get client feedback [1]. Similarly, rough drafts and outlines of the textual information are created and functional prototypes for technical elements are built. These drafts and prototypes can then be evaluated using functional checklists (i.e. can they be implemented successfully), usability inspection
Tutorials
checklists, task analysis, and with user testing and user feedback. Projects with larger sites and sites with complex interactivity will often need to continue this design cycle using semi-operational prototypes. Although there is no substitute for testing with real users, task analysis techniques will often identify interactivity problems in a more cost-effective fashion early in the development cycle. Because of the high cost of later design changes, clear communication with the clients and users is essential at this stage. Mockups and prototypes serve well to clarify what are sometimes abstract design requirements, and every effort should be made to arrive at a final design by the end of this stage.
Production As design documents and mockups are finalized, the producers of a website refer to sets of guidelines (for text, graphics, and interactivity) to develop the details of the design and transform that design into an implemented system. Testing and Launch Functional and user testing may occur throughout the production process, and meeting performance criteria determines when a website can finally be launched. Usability inspections and client feedback are also crucial to identifying final problems. We consider functional testing to be an essential aspect of usability since a website is not usable unless it works correctly and fulfills the needs of a user. Checklists of commonly-encountered problems can guide a functional or user test to quickly identify major concerns. Maintenance Site maintenance should be accounted for in the initial planning stage, but the exact nature of maintenance requirements can often change during the course of development. Website documentation and design guidelines are a useful output of the production process which are used as changes are made. Functional and usability checklists are also critical ways of ensuring that regular changes preserve the integrity of the design. ACKNOWLEDGMENTS We thank Heather Bradley, Frank Levy, Stephen Markel, Karsten Nielsen, Demet Wood, and the rest of the staff at Diamond Bullet Design for their input and contributions. REFERENCES 1. Brinck, T. and Gergle, D. (1998). The Design of Banking Websites: Lessons fi'om Iterative Design. APCHI 98: Asia Pacific Computer Human Interaction Conference, Kanagawa, Japan (July 1998). 2. Brinck, T. Gergle, D., and Wood, S. (1998). Website Design From the Trenches. Tutorial at CHI 98 Human Factors in Computing Systems, Los Angeles, CA (April 1998).
111
