1 / 30

SILKWeb: A Sketching Tool for Informal Web Page Design

http://guir.berkeley.edu. SILKWeb: A Sketching Tool for Informal Web Page Design. Mark Newman, James Landay, Francis Li, Kalpana Joshi July 9, 1998 C&C Research Labs, NEC. E-mail. Reports. Design ideas. Presentations. Computers Support Human-Human Communication (HHC).

Gideon
Download Presentation

SILKWeb: A Sketching Tool for Informal Web Page Design

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. http://guir.berkeley.edu SILKWeb: A Sketching Tool for Informal Web Page Design Mark Newman, James Landay, Francis Li, Kalpana Joshi July 9, 1998 C&C Research Labs, NEC

  2. E-mail Reports Design ideas Presentations Computers Support Human-Human Communication (HHC)

  3. Traditional Software Interfaces • Force translations to formal representations • warp human-human communications

  4. Traditional Representations • Rigid and unambiguous • hard to mix (e.g., few tools support rough sketches) • warp perceptions of the viewer • Increase time • encourage precision • Inhibit creativity • “tunnel vision”

  5. Informal Communications Styles • Speaking • Writing • Gesturing • Sketching Informal UIs allow users to work naturally

  6. Architectural design Presentations UI & Web Page design Note taking Application Areas

  7. Outline • Informal User Interfaces • Approach to the Web Design Problem • SILK: Background • SILKWeb: First Iteration • An Informal Experiment • Future Plans • Collaboration with NEC

  8. The Web Design Problem • How do we improve the Web Design process to maximize creativity and expressiveness? • In early phases, precision is deadly • both for designers and evaluators • Lots of designers sketch anyway

  9. SILK: Background • Design GUIs by sketching • Sketch GUI screens and widgets • system recognizes widgets as drawn • Specify widget interactions in storyboard • Simulate interaction in “run mode” • Output formal UIs (VB, Motif, Java) to transition to next stage

  10. SILK

  11. SILKWeb: SILK Extensions • Primitive Recognition • line text circle rectangle bullet triangle

  12. SILKWeb: SILK Extensions • Widget Recognition hyperlink table

  13. SILKWeb: SILK Extensions • Widget Recognition list text block/ paragraph Also buttons, radio buttons, check boxes, listboxes...

  14. SILKWeb: SILK Extensions • Navigation Bars

  15. SILKWeb: SILK Extensions • Gesture Recognition

  16. SILKWeb: Transformation • HTML  SilkWeb transformation

  17. SILKWeb ® HTML • UI widgets ®HTML form elements • Layout and positioning is main concern • Code generation considerations • multiple client platforms • competing standards • readable, maintainable HTML

  18. Not compatible across browsers... SILKWeb ® HTML • Cascading style sheets w/ absolute positioning

  19.  Leads to obfuscated code... SILKWeb ® HTML • Lowest common denominator: HTML Tables

  20. ® ? SILKWeb ® HTML • Automatic content generation • images • text • links • Site management • storyboard ® directory structure

  21. HTML ® SILKWeb • Parsing HTML • JavaCC • Generating a sketchy representation • library of sketches, or • rendered on the fly • Preserving existing code • “Roundtrip HTML” - Macromedia DreamWeaver

  22. Informal Experiment • Study w/ students in graduate UI course • paper, pencils, markers, scissors • web design tasks • goal: Learn how people sketch to represent ideas about structure and navigation • Caveats: these are not designers!

  23. Observations: Links • Everybody used some variant of this

  24. Observations: Margins • Almost everybody did this

  25. Observations: Content IS King?

  26. Future Plans • Study, interview, observe professional web designers • Apply study results to storyboard • Java Port • want to be able to distribute • Ink Infrastructure brings together several informal UI initiatives

  27. More Future Work • Lazy vs. Eager recognition tradeoffs • recognition often annoying & attention consuming • Moving back & forth across “formal” barrier • formal informal • Integration with later design phases • Collaborative SILKWeb • remote collaboration • LiveBoard • Visualization of Storyboards

  28. Conclusions • Need more study • how do people really sketch? • just because they do it one way, doesn’t make it good • Need to talk to web designers • "Content is King" in early design? • infiltration of other design styles • Java/JavaScript/DHTML/Flash, XML, Fusion

  29. Collaborations with NEC • How does SILKWeb fit into the larger design process? • How can we use these tools in team environments? • collaboration (annotation?) • source code control • How can we better integrate with multimedia?

  30. http://guir.berkeley.edu/

More Related