DENIM: Finding a Tighter Fit with Web Design Practice

1
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

2
Informal User Interfaces

• Take advantage of natural modes of interaction
• speaking
• gesturing
• writing
• sketching
• Without extensive recognition

3
Informal User Interfaces
4
Outline

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

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)

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
7
Site Maps

• High-level, coarse-grained view of entire site

8
Storyboards

• Interaction sequence, minimal page level detail

9
Individual Pages
Mock-up
Schematic
10
Sketching

• All designers sketched

• ... at all levels

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 Ill do on paper.
  As soon as I feel like Im going to be doing any
  design revisions, Ill move to an electronic
  tool... because its easier to make changes to
  these things.

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

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

14
Outline

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

15
DENIM
16
DENIM Site Map View
17
DENIM Storyboard View
18
DENIM Sketch View
19
Video
20
DENIM Creating Pages
21
DENIM Creating Pages
22
DENIM Gestures
23
DENIM Gestures
24
DENIM Gestures
25
DENIM Organizational Arrows
26
DENIM Organizational Arrows
27
DENIM Sketching Page Contents
28
DENIM Sketching Page Contents
29
DENIM Sketching Page Contents
30
DENIM Storyboard View
31
DENIM Panning
32
DENIM Navigational Arrows
33
DENIM Navigational Arrows
34
DENIM Navigational Arrows
35
DENIM Tools
36
DENIM Tools
37
DENIM Pie Menus
38
DENIM Pie Menus
39
DENIM Run Mode
40
Outline

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

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

42
Platform Used for Evaluation

• Evaluation system
• IBM 300 MHz Pentium II laptop, Win NT 4.0
• ITI VisionMaker Sketch 14 display tablet

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

44
Tasks (contd)

• 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

45
Data Collection

• 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

46
(No Transcript)
47
(No Transcript)
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

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.

50
Positive Feedback

• Liked informal interaction
• You draw a box in Illustrator or Freehand or
  Quark, and its got attributes that have to be
  dealt with, and it interrupts the thought
  process.... Its 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.

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

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

53
Future Work

• Cleaned up sketches
• for presentations to clients
• History and versioning
• so designers can keep track of designs evolution
• Support for more sophisticated interfaces
• web form-based apps
• traditional GUIs

54
Conclusion

• DENIM supports web design practice
• integrated multiple views
• sketching

• DENIM adds to current practice
• lo-fi interactive prototypes
• advantages of electronic media

55
Download DENIM athttp//guir.berkeley.edu/project
s/denim
Download SATIN athttp//guir.berkeley.edu/project
s/satin