Download
denim finding a tighter fit with web design practice n.
Skip this Video
Loading SlideShow in 5 Seconds..
DENIM: Finding a Tighter Fit with Web Design Practice PowerPoint Presentation
Download Presentation
DENIM: Finding a Tighter Fit with Web Design Practice

DENIM: Finding a Tighter Fit with Web Design Practice

457 Views Download Presentation
Download Presentation

DENIM: Finding a Tighter Fit with Web Design Practice

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. http://guir.berkeley.edu 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 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. 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. Canvas Zoom Slider Toolbox 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 (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

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

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

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