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

Computers Support Human-Human Communication (HHC) Design ideas Presentations Reports

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

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”

Informal Communications Styles  Speaking  Writing  Gesturing  Sketching Informal UIs allow users to work naturally

 Architectural design  Presentations Application Areas  UI & Web Page design  Note taking

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

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

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

SILK

 Primitive Recognition SILKWeb: SILK Extensions line text circle rectangle triangle bullet

 Widget Recognition SILKWeb: SILK Extensions hyperlink table

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

 Navigation Bars SILKWeb: SILK Extensions

 Gesture Recognition

 HTML  SilkWeb transformation SILKWeb: Transformation 

SILKWeb  HTML  UI widgets  HTML form elements  Layout and positioning is main concern  Code generation considerations *multiple client platforms *competing standards *readable, maintainable HTML

SILKWeb  HTML  Cascading style sheets w/ absolute positioning  Not compatible across browsers...

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

SILKWeb  HTML  Automatic content generation *images *text *links  Site management *storyboard  directory structure ? 

HTML  SILKWeb  Parsing HTML *JavaCC  Generating a sketchy representation *library of sketches, or *rendered on the fly  Preserving existing code *“Roundtrip HTML” - Macromedia DreamWeaver

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!

Observations: Links  Everybody used some variant of this

Observations: Margins  Almost everybody did this

Observations: Content IS King?

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

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

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

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?