1. DENIM: Finding a Tighter Fit with Web Design Practice James Lin, Mark W. Newman, Jason I. Hong, James A. Landay April 6, 2000 CHI 2000, The Hague http://guir.berkeley.edu

2. 4/6/20002 Informal User Interfaces 4 Take advantage of natural modes of interaction *speaking *gesturing *writing *sketching 4 Without extensive recognition

3. 4/6/20003 Informal User Interfaces

4. 4/6/20004 Outline 4 Investigation into web design 4 The DENIM system 4 Evaluation 4 Future work and conclusion

5. 4/6/20005 Investigation into Web Design 4 Interviews with 11 professional web site designers *focus on specific projects and artifacts +“take me through a recent project” +artifacts were collected and analyzed 4 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. 4/6/20006 Multiple Views 4 Designers create representations of sites at multiple levels of detail 4 Web sites are iteratively refined at all levels of detail Site Maps StoryboardsSchematicsMock-ups

7. 4/6/20007 Site Maps 4 High-level, coarse-grained view of entire site

8. 4/6/20008 Storyboards 4 Interaction sequence, minimal page level detail

9. 4/6/20009 Individual Pages Schematic Mock-up

10. 4/6/200010 Sketching All designers sketched... at all levels

11. 4/6/200011 Converting to Electronic Media 4 Sketching less than they wanted to *“professionalism”: perceived need to present ideas formally 4 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.”

12. 4/6/200012 Implications for a Web Design Tool 4 Support multiple views 4 Sketching is a reasonable approach *retain advantages of informal representations *gain advantages of electronic media 4 Support transformations to more formal representations *currently not supported

13. 4/6/200013 DENIM: Designing Web Sites by Sketching 4 Early-phase information & navigation design 4 Integrates multiple views *Site map – storyboard – page sketch 4 Supports informal interaction *Sketching, pen-based interaction 4 Implementation *Java 2, SATIN

14. 4/6/200014 Outline 4 Investigation into web design 4 The DENIM system 4 Evaluation 4 Future work and conclusion

15. 4/6/200015 DENIM Canvas Zoom Slider Toolbox

16. 4/6/200016 DENIM: Site Map View

17. 4/6/200017 DENIM: Storyboard View

18. 4/6/200018 DENIM: Sketch View

19. 4/6/200019 Video

20. 4/6/200020 DENIM: Creating Pages

21. 4/6/200021 DENIM: Creating Pages

22. 4/6/200022 DENIM: Gestures

23. 4/6/200023 DENIM: Gestures

24. 4/6/200024 DENIM: Gestures

25. 4/6/200025 DENIM: Organizational Arrows

26. 4/6/200026 DENIM: Organizational Arrows

27. 4/6/200027 DENIM: Sketching Page Contents

28. 4/6/200028 DENIM: Sketching Page Contents

29. 4/6/200029 DENIM: Sketching Page Contents

30. 4/6/200030 DENIM: Storyboard View

31. 4/6/200031 DENIM: Panning

32. 4/6/200032 DENIM: Navigational Arrows

33. 4/6/200033 DENIM: Navigational Arrows

34. 4/6/200034 DENIM: Navigational Arrows

35. 4/6/200035 DENIM: Tools

36. 4/6/200036 DENIM: Tools

37. 4/6/200037 DENIM: Pie Menus

38. 4/6/200038 DENIM: Pie Menus

39. 4/6/200039 DENIM: Run Mode

40. 4/6/200040 Outline 4 Investigation into web design 4 The DENIM system 4 Evaluation 4 Future work and conclusion

41. 4/6/200041 Informal Evaluation 4 Evaluation focused on *usefulness of basic functionality *usability of basic interaction 4 7 participants *5 work mostly on web projects *1 designer of non-web UIs *1 usability manager of a large software company

42. 4/6/200042 Platform Used for Evaluation 4 Evaluation system *IBM 300 MHz Pentium II laptop, Win NT 4.0 *ITI VisionMaker Sketch 14 display tablet

43. 4/6/200043 Tasks 4 Draw in Microsoft Paint *get used to the tablet 4 Modify existing design in DENIM *add new page *link page to site *interact with site *get used to DENIM

44. 4/6/200044 Tasks (cont’d) 4 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. 4/6/200045 4 During the experiment *critical incidents *general comments and reactions *types of actions they did at each zoom level 4 Post-questionnaire *reaction to DENIM in terms of +communication +expressiveness +fit with current practices *background & experience Data Collection

46. 4/6/200046

47. 4/6/200047

48. 4/6/200048 Summary of Results 4 Web designers rated it highly in *usefulness *communication with team members *expressiveness *quick iteration *efficiency 4 …but found it lacking in terms of *handwriting *linking pages *communication with clients

49. 4/6/200049 Positive Feedback 4 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. 4/6/200050 Positive Feedback 4 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.”

51. 4/6/200051 Usability Issues 4 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. 4/6/200052 Usability Issues 4 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. 4/6/200053 Future Work 4 “Cleaned up” sketches *for presentations to clients 4 History and versioning *so designers can keep track of design’s evolution 4 Support for more sophisticated interfaces *web form-based apps *“traditional” GUIs

54. 4/6/200054 Conclusion 4 DENIM supports web design practice *integrated multiple views *sketching 4 DENIM adds to current practice *lo-fi interactive prototypes *advantages of electronic media

55. Download DENIM at http://guir.berkeley.edu/projects/denim http://guir.berkeley.edu Download SATIN at http://guir.berkeley.edu/projects/satin