1. 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 http://guir.berkeley.edu

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

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

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 Application Areas  UI & Web Page design  Note taking

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.  Primitive Recognition SILKWeb: SILK Extensions line text circle rectangle triangle bullet

12.  Widget Recognition SILKWeb: SILK Extensions hyperlink table

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

14.  Navigation Bars SILKWeb: SILK Extensions

15.  Gesture Recognition

16.  HTML  SilkWeb transformation 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. SILKWeb  HTML  Cascading style sheets w/ absolute positioning  Not compatible across browsers...

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

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/