DENIM: Finding a Tighter Fit with Web Design Practice

James Lin, Mark W. Newman, Jason I. Hong, James A. Landay

April 6, 2000CHI 2000, The Hague

http://guir.berkeley.edu

4/6/2000 2

Informal User Interfaces

Take advantage of natural modes of interaction* speaking* gesturing* writing* sketching

Without extensive recognition

4/6/2000 3

Informal User Interfaces

4/6/2000 4

Outline

Investigation into web design The DENIM system Evaluation Future work and conclusion

4/6/2000 5

Investigation into Web Design

Interviews with 11 professional web site designers* focus on specific projects and artifacts

+ “take me through a recent project”+ artifacts were collected and analyzed

Designers were* from 5 different companies* representative of different specialties

+ information architects+ creative directors/project managers+ graphic designers+ all-of-the-above (esp. smaller firms)

4/6/2000 6

Multiple Views

Designers create representations of sites at multiple levels of detail

Web sites are iteratively refined at all levels of detail

Site Maps Storyboards Schematics Mock-ups

4/6/2000 7

Site Maps

High-level, coarse-grained view of entire site

4/6/2000 8

Storyboards

Interaction sequence, minimal page level detail

4/6/2000 9

Individual Pages

Schematic Mock-up

4/6/2000 10

Sketching

All designers sketched

... at all levels

4/6/2000 11

Converting to Electronic Media

Sketching less than they wanted to* “professionalism”: perceived need to present

ideas formally

Ease of incremental modification “The beginning of each step I’ll do on paper.

As soon as I feel like I’m going to be doing any design revisions, I’ll move to [an electronic tool]... because it’s easier to make changes to these things.”

4/6/2000 12

Implications for a Web Design Tool

Support multiple views Sketching is a reasonable approach

* retain advantages of informal representations* gain advantages of electronic media

Support transformations to more formal representations* currently not supported

4/6/2000 13

DENIM: Designing Web Sites by Sketching

Early-phase information & navigation design

Integrates multiple views* Site map – storyboard – page

sketch

Supports informal interaction* Sketching, pen-based interaction

Implementation * Java 2, SATIN

4/6/2000 14

Outline

Investigation into web design The DENIM system Evaluation Future work and conclusion

4/6/2000 15

DENIM

Canvas

Zoom Slider

Toolbox

4/6/2000 16

DENIM: Site Map View

4/6/2000 17

DENIM: Storyboard View

4/6/2000 18

DENIM: Sketch View

4/6/2000 19

Video

4/6/2000 20

DENIM: Creating Pages

4/6/2000 21

DENIM: Creating Pages

4/6/2000 22

DENIM: Gestures

4/6/2000 23

DENIM: Gestures

4/6/2000 24

DENIM: Gestures

4/6/2000 25

DENIM: Organizational Arrows

4/6/2000 26

DENIM: Organizational Arrows

4/6/2000 27

DENIM: Sketching Page Contents

4/6/2000 28

DENIM: Sketching Page Contents

4/6/2000 29

DENIM: Sketching Page Contents

4/6/2000 30

DENIM: Storyboard View

4/6/2000 31

DENIM: Panning

4/6/2000 32

DENIM: Navigational Arrows

4/6/2000 33

DENIM: Navigational Arrows

4/6/2000 34

DENIM: Navigational Arrows

4/6/2000 35

DENIM: Tools

4/6/2000 36

DENIM: Tools

4/6/2000 37

DENIM: Pie Menus

4/6/2000 38

DENIM: Pie Menus

4/6/2000 39

DENIM: Run Mode

4/6/2000 40

Outline

Investigation into web design The DENIM system Evaluation Future work and conclusion

4/6/2000 41

Informal Evaluation

Evaluation focused on* usefulness of basic functionality* usability of basic interaction

7 participants* 5 work mostly on web projects* 1 designer of non-web UIs* 1 usability manager of a large software

company

4/6/2000 42

Platform Used for Evaluation

Evaluation system* IBM 300 MHz

Pentium II laptop, Win NT 4.0

* ITI VisionMaker Sketch 14 display tablet

4/6/2000 43

Tasks

Draw in Microsoft Paint* get used to the tablet

Modify existing design in DENIM* add new page* link page to site* interact with site* get used to DENIM

4/6/2000 44

Tasks (cont’d)

Design task* 45-60 minutes to create “ForRent.com”

web site* provided

+competitive analysis+market research on what renters,

landlords want+what client company wanted

* wanted to see+how participants approached realistic

design task+how they used DENIM to help design

* extra motivation: $250 for best design

4/6/2000 45

During the experiment* critical incidents* general comments and reactions* types of actions they did at each zoom level

Post-questionnaire* reaction to DENIM in terms of

+communication+expressiveness+fit with current practices

* background & experience

Data Collection

4/6/2000 46

4/6/2000 47

4/6/2000 48

Summary of Results

Web designers rated it highly in* usefulness* communication with team members* expressiveness* quick iteration* efficiency

…but found it lacking in terms of* handwriting* linking pages* communication with clients

4/6/2000 49

Positive Feedback

Liked the different views integrated

“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.”

4/6/2000 50

Positive Feedback

Liked informal interaction

“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.”

4/6/2000 51

Usability Issues

Hard time linking pages* pages were too small to draw arrows, or* could only see one of the pages at enough

detail* solutions implemented

+hide pages in site map view+auto pan

4/6/2000 52

Usability Issues

Handwriting was difficult* writing surface was too smooth* application feedback was sometimes slow* automatic word grouping was poor* solutions implemented

+improved performance+improved inking & grouping algorithms

4/6/2000 53

Future Work

“Cleaned up” sketches* for presentations to clients

History and versioning* so designers can keep track of design’s

evolution

Support for more sophisticated interfaces* web form-based apps* “traditional” GUIs

4/6/2000 54

Conclusion

DENIM supports web design practice* integrated multiple views* sketching

DENIM adds to current practice* lo-fi interactive

prototypes* advantages of

electronic media

Download DENIM athttp://guir.berkeley.edu/projects/denim

http://guir.berkeley.edu

Download SATIN athttp://guir.berkeley.edu/projects/satin