Silkweb a sketching tool for informal web page design
1 / 30

SILKWeb: A Sketching Tool for Informal Web Page Design - PowerPoint PPT Presentation

  • Uploaded on 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).

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

PowerPoint Slideshow about 'SILKWeb: A Sketching Tool for Informal Web Page Design' - Gideon

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
Silkweb a sketching tool for informal web page design l.jpg

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






Computers Support Human-Human Communication (HHC)

Traditional software interfaces l.jpg
Traditional Software Interfaces

  • Force translations to formal representations

    • warp human-human communications

Traditional representations l.jpg
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 l.jpg
Informal Communications Styles

  • Speaking

  • Writing

  • Gesturing

  • Sketching

Informal UIs allow users to work naturally

Application areas l.jpg

Architectural design


UI & Web Page design

Note taking

Application Areas

Outline l.jpg

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

Silkweb silk extensions l.jpg
SILKWeb: SILK Extensions

  • Primitive Recognition

  • line






Silkweb silk extensions12 l.jpg
SILKWeb: SILK Extensions

  • Widget Recognition



Silkweb silk extensions13 l.jpg
SILKWeb: SILK Extensions

  • Widget Recognition


text block/


Also buttons, radio buttons, check boxes, listboxes...

Silkweb silk extensions14 l.jpg
SILKWeb: SILK Extensions

  • Navigation Bars

Silkweb silk extensions15 l.jpg
SILKWeb: SILK Extensions

  • Gesture Recognition

Silkweb transformation l.jpg

SILKWeb: Transformation

  • HTML  SilkWeb transformation

Silkweb html l.jpg

  • UI widgets ®HTML form elements

  • Layout and positioning is main concern

  • Code generation considerations

    • multiple client platforms

    • competing standards

    • readable, maintainable HTML

Silkweb html18 l.jpg

Not compatible across browsers...


  • Cascading style sheets w/ absolute positioning

Silkweb html19 l.jpg

Leads to obfuscated code...


  • Lowest common denominator: HTML Tables

Silkweb html20 l.jpg




  • Automatic content generation

    • images

    • text

    • links

  • Site management

    • storyboard ® directory structure

Html silkweb l.jpg

  • Parsing HTML

    • JavaCC

  • Generating a sketchy representation

    • library of sketches, or

    • rendered on the fly

  • Preserving existing code

    • “Roundtrip HTML” - Macromedia DreamWeaver

Informal experiment l.jpg
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 l.jpg
Observations: Links

  • Everybody used some variant of this

Observations margins l.jpg
Observations: Margins

  • Almost everybody did this

Observations content is king l.jpg
Observations: Content IS King?

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

  • 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 l.jpg
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?