SILKWeb: A Sketching Tool for Informal Web Page Design

Mark Newman, James Landay, Francis Li, Kalpana JoshiJuly 9, 1998

C&C Research Labs, NEC

http://guir.berkeley.edu

Computers Support Human-Human Communication (HHC)Designideas

PresentationsE-mail 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

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?

http://guir.berkeley.edu/