Denim finding a tighter fit with web design practice
Download
1 / 55

DENIM: Finding a Tighter Fit with Web Design Practice - PowerPoint PPT Presentation


  • 441 Views
  • Uploaded on

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, 2000 CHI 2000, The Hague. Informal User Interfaces. Take advantage of natural modes of interaction speaking gesturing writing sketching

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'DENIM: Finding a Tighter Fit with Web Design Practice' - LeeJohn


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Denim finding a tighter fit with web design practice l.jpg

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


Informal user interfaces l.jpg
Informal User Interfaces

  • Take advantage of natural modes of interaction

    • speaking

    • gesturing

    • writing

    • sketching

  • Without extensive recognition



Outline l.jpg
Outline

  • Investigation into web design

  • The DENIM system

  • Evaluation

  • Future work and conclusion


Investigation into web design l.jpg
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)


Multiple views l.jpg
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


Site maps l.jpg
Site Maps

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


Storyboards l.jpg
Storyboards

  • Interaction sequence, minimal page level detail


Individual pages l.jpg
Individual Pages

Mock-up

Schematic


Sketching l.jpg
Sketching

All designers sketched

... at all levels


Converting to electronic media l.jpg
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.”


Implications for a web design tool l.jpg
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


Denim designing web sites by sketching l.jpg
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


Outline14 l.jpg
Outline

  • Investigation into web design

  • The DENIM system

  • Evaluation

  • Future work and conclusion


Denim l.jpg

Canvas

Zoom

Slider

Toolbox

DENIM


























Outline40 l.jpg
Outline

  • Investigation into web design

  • The DENIM system

  • Evaluation

  • Future work and conclusion


Informal evaluation l.jpg
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


Platform used for evaluation l.jpg
Platform Used for Evaluation

  • Evaluation system

    • IBM 300 MHz Pentium II laptop, Win NT 4.0

    • ITI VisionMaker Sketch 14 display tablet


Tasks l.jpg
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


Tasks cont d l.jpg
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


Data collection l.jpg
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


Summary of results l.jpg
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


Positive feedback l.jpg
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.”


Positive feedback50 l.jpg
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.”


Usability issues l.jpg
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


Usability issues52 l.jpg
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


Future work l.jpg
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


Conclusion l.jpg
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 at http guir berkeley edu projects denim l.jpg

http://guir.berkeley.edu

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

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


ad