Papers CHI 2000 ,, 1-6 APRIL 2000 DENIM: Finding a Tighter Fit Between Tools and Practice for Web Site Design James Lin, Mark W. Newman, Jason I. Hong, James A. Landay Group for User Interface Research, Computer Science Division University of California, Berkeley Berkeley, CA 94720-1776 USA +1 510 643-3043 {jimlin, newman, jasonh, landay} @cs.berkeley.edu ABSTRACT Through a study of web site design practice, we observed that web site designers design sites at different levels of refinement--site map, storyboard, and individual page-- and that designers sketch at all levels during the early stages of design. However, existing web design tools do not support these tasks very well. Informed by these observations, we created DENIM, a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming. We performed an informal evaluation with seven professional designers and found that they reacted positively to the concept and were interested in using such a system in their work. Keywords Web design, Zooming User Interface (ZUI), Sketching, Informal, Pen-based Computers, Rapid Prototyping INTRODUCTION Web site design has much in common with other types of design, such as graphic design and "traditional" graphical user interface design, but it is also emerging as its own discipline with its own practices and its own set of problems. We have taken a fresh look at web site design in order to determine what kinds of tools would be helpful to support designers. In this paper, we describe some of our observations of web site design practice and introduce a system named DENIM that is aimed at supporting the early phases of the web site design process. We conducted an ethnographic study in which we observed and interviewed several professional web designers. This study showed that the process of designing a web site involves an iterative progression from less detailed to more detailed representations of the site. For example, designers often create site maps early in the process, which are high- level representations of a site in which each page or set of Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the lull citation on the first page. To copy otherwise, to republish, to post on selwers or to redistribute to lists, requires prior specific permission and/or a fee. CHI '2000 The Hague, Amsterdam Copyright ACM 2000 1-58113-216-6/00/04...$5.00 pages is depicted as a label. They then proceed to create storyboards of interaction sequences, which employ minimal page-level detail and focus instead on the navigational elements required to get from one page to another. Later still, designers create schematics and mock- ups, which are different representations of individual pages. The design process often includes rapid exploration early on, with designers creating many low-fidelity sketches on paper. These sketches are considered crucial to the process. Designers can quickly sketch the overall look and feel of a web site without having to deal with unnecessary low-level details and without having to commit a large amount of time and effort to a single idea. Furthermore, sketches are important for communicating ideas with other team members and gaining valuable feedback early in the design process. These uses of sketches are similar to what has been previously reported for GUI design [12, 26]. Yet, there is a gulf between the needs of web designers during early design phases and the tools available to them. Most web design tools focus only on the creation of production web sites. The high-fidelity nature of these tools tends to force premature formalization of ideas and require undue attention to low-level details. Figure 1. The DENIM interface in site map view. This is the sample web site used in the evaluation. 510 ~.-k~llllll CHI Letters volume 2 • issue 1CHI 2000 • I-6 APRIL 2000 Papers These were the primary observations that led to the design and implementation of DENIM, a system to assist web designers in the early stages of information, navigation, and interaction design• DENIM (see Figure 1) is an informal pen-based system [10] that allows designers to quickly sketch web pages, create links among them, and interact with them in a run mode. The different ways of viewing a web site, from site map to storyboard to individual pages, are integrated through the use of zooming. An informal evaluation of this system has yielded positive comments, subjectively rating high on usefulness and fair on usability. AN INVESTIGATION INTO WEB SITE DESIGN We conducted a series of ethnographic interviews with designers about how they work when designing web sites. In total, eleven designers from five different companies were interviewed, representing a range of backgrounds, experience levels, and roles with respect to web site design. During each interview, the designer was asked to choose a recent project that was completed or nearly completed, and walk the interviewer through the entire project, explaining what happened at each phase. We asked the designer to show examples of documents (including sketches) that he or she produced during each phase and explain the meaning of the document with respect to the process as a whole. In many cases, we were able to obtain copies of these documents for later analysis. Projects discussed ranged from a university site to a municipal aquarium site to sub- sites of a large Internet portal. A more complete description of the study can be found in [18]. Progressive Refinement The designers we studied generally followed a process of progressive refinement of their designs from less detail to greater detail, and simultaneously from coarse granularity to fine granularity. By this we mean that there was a tendency to think about the larger picture, such as the overall site architecture, early on in the