Docsity
Docsity

Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity


Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan


Guidelines and tips
Guidelines and tips

DENIM: A Pen-Based System for Sketching and Designing Web Sites in the Early Stages, Papers of Computer Science

Denim, a pen-based system designed to support web designers in the early stages of web site design. Observing designers' practices, the authors identified the need for a tool that allows designers to sketch and interact with web pages at different levels of detail, from site maps to individual pages. Denim offers an informal, sketch-based interface and the ability to view sites at several levels through zooming. The system was inspired by the ethnographic study of eleven designers from five different companies, which revealed the importance of iterating through web site designs at multiple levels of detail and the use of hand-sketched versions for various document types.

Typology: Papers

Pre 2010

Uploaded on 08/05/2009

koofers-user-3m4-1
koofers-user-3m4-1 🇺🇸

10 documents

1 / 8

Toggle sidebar

Related documents


Partial preview of the text

Download DENIM: A Pen-Based System for Sketching and Designing Web Sites in the Early Stages and more Papers Computer Science in PDF only on Docsity! 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 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. 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 process, and then progressively focus on finer and finer details, such as the appearance of specific page elements, typefaces, and colors. The importance of iterating through web site designs at multiple levels of detail is also discussed in [19] and [21]. During the course of our interviews, we identified several types of documents that are commonly used by web designers to represent a site design at different granularities. Site maps generally represent an entire web site at a coarse granularity, where the smallest unit represented is a page or a related group of pages (Figure 2). At a finer level of granularity, some designers used storyboards to represent specific interaction sequences, such as how a user might execute a task using a part of the site (Figure 3). Finally, designers create representations of individual pages, which can range from thumbnails, which are miniature representations of pages; to roughs, which are usually hand-drawn sketches of pages; to schematics, which are medium-fidelity representations of the information and navigation components on a page; to mock-ups, which are high-fidelity representations of the exact contents and appearance of a specific page. The observation that designers create site visualizations at different levels of detail inspired us to offer a similar range of options in DENIM. We introduced zooming to allow multiple visualizations of a site while preserving a unified context in which to iteratively refine the site design. Sketching All of the designers we interviewed sketch with pen on paper as a regular part of their design process, even though eventually all of them end up using computerized tools. Some designers work for relatively long periods on paper before transferring to electronic media, while some merely make quick sketches on scrap paper before using computer- based tools to realize their ideas. It is worth noting that hand-sketched versions were observed for basically all of the document types described above, including site maps, storyboards, and individual pages. Figure 2. Part of a site map for a news web site. Site maps show entire web sites at a low level of detail. Figure 3. A storyboard showing an interaction with a tutorial system. Storyboards depict individual interaction sequences. Links An arrow between two pages represents a link between those pages. We provide navigational and organizational links. Navigational links are links in the HTML sense: they represent the reference from an item on one page (e.g., a word or image) to another page. Organizational links are used to represent a conceptual link between two pages; that is, the designer eventually wants to make a navigational link from one page to another, but does not want to fill in the details at this time. To create a link, the user draws a stroke between two pages. The system checks if the stroke is a link. Organizational links start on one page and end in another. This creates a gray arrow from the source to the destination. Navigational links start on a specific object on one page and end in some other page. This creates a green arrow from the source to the destination. When creating a navigational link, any organizational links from the source page to the destination page are removed. As additional feedback, the source of the navigational link becomes blue. Run Mode After a number of pages have been sketched and navigational links drawn between them, it is possible to preview the interaction by entering run mode. In run mode, a simplified “browser” window appears on the screen. The browser displays one page at a time, like a real web browser, except the pages displayed are the sketches that the designer has created. If an element inside a page is the source of a navigational link, it is rendered in blue in the browser. Clicking on these elements causes the browser to display the target of the link, just as in a conventional browser. With run mode, designers can test the interaction with a site that they are designing without having to create a full-fledged prototype. Gestures and Pie Menus Most commands in DENIM can be activated either through gestures1 or through pie menus. The current implementation supports a relatively small set of gestures, as we are still 1 By gesture, we mean a stroke created by the pen that activates a command. experimenting with how to best map the functions of DENIM to a set of gestures. To activate a gesture, the user presses the button on the barrel of the pen and makes a stroke. Using a modified version of gdt [16] and Rubine’s recognizer [20], we implemented gestures for panning, undo, redo, group select (select everything enclosed by a circular gesture), cut, copy, and paste. Tapping on an object without depressing the barrel button selects or deselects that object. Tapping on the canvas, outside of any web page, clears the selected objects and sets the zoom-center target, denoted by crosshairs. The selected object can also be dragged, moving it to a new location. We use a form of semantic zooming [1] in which the interaction with objects changes with zoom. In the two broadest views, the overview and site map views, gestures work shallowly: you can select, move, or edit web pages, but not anything inside of a web page. Since these views focus on whole pages and the relationships between them, it follows that editing commands should operate on entire pages. In the two narrowest views, the sketch and detail views, gestures work deeply: you can select, move, or edit individual ink objects inside a web page, but not web pages themselves. These views focus on the contents of individual pages, so operations work on the page contents. The middle zoom view, the storyboard view, supports operations at both levels of detail. For example, the user taps the page’s label to select the page but can tap any object inside a page to select that object. Pie menus [3] are used to provide access to functions not easily mapped to gestures, as well as providing redundant access to certain commands. The user activates the pie menu by tapping the screen with the barrel button depressed. Keyboard shortcuts are available for several commands, including cut, copy, paste, delete, undo, redo, pan, and zoom. DENIM does not attempt to recognize most of what users write or sketch. The exceptions are the small set of gestures described above, words written directly on the canvas in site map view that are interpreted as new page labels, and lines drawn between two pages that are treated as links between those pages. EVALUATION We conducted an informal evaluation of DENIM in order to gain feedback about the usefulness of the functionality of the tool and the usability of the basic interactions, such as creating pages, creating links between pages, zooming, panning, and interacting with a design in run mode. Seven professional designers participated in the study, one of whom had participated in the initial investigation. Five of the participants said that web site design projects constituted at least half of their current workload. The remaining two participants were a user interface designer working on non-web related projects and a manager of a usability group for a large software company. Overview Site map Storyboard Sketch Detail Figure 5. The zoom slider The system that we used for the evaluation consisted of an IBM 560Z ThinkPad (300MHz Pentium II) laptop running Windows NT 4.0, and an ITI VisionMaker Sketch 14 display tablet (see Figure 6). The participants interacted primarily with the display tablet, although they could also use the keyboard for shortcuts. One evaluation session was conducted per participant, and each evaluation session consisted of three parts. First, the participant was asked to add a few elements to a drawing in Microsoft Paint to become familiar with using the display tablet and pen. The second task was to get the participant used to interacting with DENIM. We loaded a previously- created web site design (shown in Figure ) and asked the user to create a new page, link the page to the site, and then run through the site using run mode starting from the home page and ending at the page they just created. The final part was a large design task, intended to be difficult to complete in the time allotted. We were interested in seeing how participants approached a realistic design task and how they used DENIM to help them. To help motivate the participants to create the best design they could, we offered US$250 to the best design. The participant was asked to develop a web site for a fictitious start-up company. The web site was to help renters find places to rent and to help landlords find tenants. We provided an analysis of a competitor’s web site, market research on what renters and landlords said they wanted, and a description of what the client company required and desired. The participant had 45 to 60 minutes to come up with a preliminary site design, and then he or she presented the designs to us as if we were the rest of the design team. While the participants performed the tasks, we recorded what types of actions they did (e.g., panning, drawing, and creating new pages) and at what zoom levels they performed those actions. This was to give us a sense as to what features of DENIM they used and how well zooming supported the different design activities. We also recorded any critical incidents that occurred and their general comments and reactions. After the participants were finished with the tasks, they filled out a questionnaire. We asked what they thought of DENIM in terms of usefulness, ease of use, and how they thought using it would affect their design process. The questionnaire also asked for basic demographics, primary job responsibilities, what tools they normally used, and how much web design experience they had. Observations Users made substantial use of different zoom levels, with usage concentrated primarily in the middle three levels (site map, storyboard, and sketch). Several users verbally expressed that they liked the concept of the different zoom levels and liked the ability to maintain a unified representation of the site, while interacting with it at different levels of detail. It appears that users felt that the integrated view would help them iterate more quickly through different design ideas. One user highlighted the advantages of the integrated view by observing: It’s not like ‘OK, that’s one idea,’ then open a new file and work on a new [idea]. You don’t need to do that. The iteration goes on within this [tool] and I can see the relationships. Another user described how she thought DENIM would improve her current process by remarking: I usually [create site maps] in PowerPoint, then I go back to the navigational flow, then I go back to PowerPoint… And here it would be so easy to do that iterative kind of thing. However, the current integration of these views through zooming sometimes proved to be problematic. Several of the users became frustrated navigating around their site designs and found that they often had to zoom out to a higher level in order to find their desired target and then zoom back in on that target. Likewise, users had trouble creating navigational links between pages that they had initially drawn far apart on the canvas. It was difficult to find a view of the site that would include both the source and the target, yet have enough detail to be able to find the specific object on the source page that they wished to serve as the link source. In response to these issues, we have made two changes to DENIM. We introduced auto-panning, which pans the screen when the user draws a line towards a side of the screen. This makes it easier to link two pages that are not visible at the same time. A user can start drawing from one page and draw until he or she sees the desired page. We also changed the display of pages at the site map level so that only their labels appear. This encourages users to draw their initial site maps more densely, since the total size of each page is less, and the density of pages makes it more likely that the source and target page will be visible on the screen at the same time in the storyboard view. These features have been implemented but still need to be evaluated. We also plan to explore focus+context techniques [5] to address the navigation and linking problems we observed. Figure 6. The display tablet used in the evaluation Being able to see more of the site in the periphery while zoomed in to a particular portion of the site could help reduce the difficulty of finding one’s place in the site. Similarly, being able to compress the distance between a source and target page while maintaining a high level of detail in the source page would help relieve the problem of linking pages that were originally drawn far apart from each other in the site map. Users appreciated the informal mode of interaction provided by DENIM. One user compared the interaction to other tools with the comment: You draw a box in Illustrator or Freehand or Quark, and it’s got attributes that have to be dealt with, and it interrupts the thought process.... It’s nice to be able to get rid of all the business with the pictures and all the definite object attributes. That is such a hassle. At the same time, the free-form sketching interface provided some stumbling blocks. For example, handwriting on the screen was difficult, given the average performance of the application, the simple stroking algorithm used, and the lack of feedback from writing on a smooth screen. Two users experienced difficulty reading their own page labels. Another user wanted to type her page labels. Other users said that they like to handwrite while brainstorming, but would like the ability to replace handwritten labels with typed labels as their ideas become solidified. We plan to address these concerns by improving handwriting input, as well as supporting the progressive refinement of text objects by allowing their replacement with typed text. Feedback The responses to the post-test questionnaire, though informal, were instructive in several ways. Opinions about DENIM’s perceived effect on the respondent’s work practices were sharply divided based on the amount of the respondent’s workload that consisted of web design projects. The two individuals not involved in web design ranked DENIM relatively low on factors such as “the perceived benefit using the tool would have on their ability to communicate with team members” and on “DENIM’s overall usefulness” to them. The five web designers, on the other hand, had generally positive opinions of DENIM along these lines. First, while the web designers ranked the ease-of-use just above average (6.4 out of 10), they ranked the usefulness fairly high (9.0 out of 10). This seems to indicate that, despite the shortcomings of the current implementation in terms of performance and fluid interaction, users felt that the basic concepts were on target. Also, the web designers gave very high rankings when asked to rate DENIM according to its perceived ability to communicate with others involved in the design process. Those users rated DENIM better than 8.5 out of 10 in terms of ability to communicate with design team members (8.6), internal managers (8.8), and usability engineers and testers (8.8). They also gave similarly high marks to DENIM’s improvement in their ability to express their ideas (9.0), iterate quickly through versions of a design (8.6), and overall efficiency (8.6). All users gave DENIM relatively low marks in terms of ability to communicate with clients (6.14 out of 10 overall), which we attribute largely to DENIM’s inability to produce “cleaned-up” versions of sketches that would be acceptable to show to clients. FUTURE DIRECTIONS Our initial evaluation of DENIM was informal; we intend to follow up with more formal evaluations on later versions of the system, including field tests in which DENIM is used to design real web sites. We hope that such evaluations will tell us whether long-term use of DENIM can help designers work more efficiently and produce better web sites. We are also looking into ways to support the generation of medium-fidelity prototypes from low-fidelity sketches. As noted before, such a feature could allow designers to give more “professional” presentations, while staying with sketching longer. We would like DENIM to work with existing web design tools to fit more naturally into the entire web design cycle. This includes generating HTML and other artifacts that can be imported by other tools. DENIM should also be able to import files from other tools, so that designers can smoothly move back and forth in the design process. In order to make DENIM scale for large web sites, we plan to explore additional visualizations and interactions that operate on higher levels of abstraction. For example, it would be desirable to allow the designer to identify sub- sites and collapse and expand their representation. The overview zoom level in particular could be used to support interactions with the overall site structure. We have devised extensions to the storyboarding mechanism to support the design of more sophisticated web interfaces as well as traditional GUIs [15], including methods to allow designers to specify their own reusable components. These components can be as simple as a new kind of widget or as complex as a template for a web page. CONCLUSION Our ethnographic study showed us that in the early stages of design, web designers go through an iterative process of progressive refinement, that each refinement focuses on finer levels of granularity and an increasing level of detail, and that sketching is used throughout the early part of this process. These observations informed the design of DENIM, an informal sketch-based system supporting web designers in the early stages of design. DENIM allows designers to quickly sketch out 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 web page, are unified through the use of zooming. In an informal study with seven professional designers, we found
Docsity logo



Copyright © 2024 Ladybird Srl - Via Leonardo da Vinci 16, 10126, Torino, Italy - VAT 10816460017 - All rights reserved