SILKWeb: A Sketching Tool for Informal Web Page Design Mark Newman, James Landay, Francis Li,...
-
Upload
bernadette-willis -
Category
Documents
-
view
213 -
download
0
Transcript of SILKWeb: A Sketching Tool for Informal Web Page Design Mark Newman, James Landay, Francis Li,...
![Page 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/1.jpg)
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
![Page 2: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/2.jpg)
Computers Support Human-Human Communication (HHC)Designideas
PresentationsE-mail Reports
![Page 3: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/3.jpg)
Force translations to formal representations* warp human-human communications
Traditional Software Interfaces
![Page 4: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/4.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”
![Page 5: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/5.jpg)
Informal Communications Styles
Speaking
Writing
Gesturing
Sketching
Informal UIs allow users to work naturally
![Page 6: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/6.jpg)
Architectural design
Presentations
Application Areas
UI & Web Page design
Note taking
![Page 7: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/7.jpg)
Outline
Informal User Interfaces Approach to the Web Design Problem SILK: Background SILKWeb: First Iteration An Informal Experiment Future Plans Collaboration with NEC
![Page 8: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/8.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
![Page 9: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/9.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
![Page 10: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/10.jpg)
SILK
![Page 11: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/11.jpg)
Primitive Recognition
SILKWeb: SILK Extensions
line
text
circle
rectangle
triangle
bullet
![Page 12: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/12.jpg)
Widget Recognition
SILKWeb: SILK Extensions
hyperlink
table
![Page 13: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/13.jpg)
Widget Recognition
SILKWeb: SILK Extensions
list
text block/paragraph
Also buttons, radio buttons, check boxes, listboxes...
![Page 14: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/14.jpg)
Navigation Bars
SILKWeb: SILK Extensions
![Page 15: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/15.jpg)
SILKWeb: SILK Extensions
Gesture Recognition
![Page 16: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/16.jpg)
HTML SilkWeb transformation
SILKWeb: Transformation
![Page 17: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/17.jpg)
SILKWeb HTML
UI widgets HTML form elements Layout and positioning is main concern Code generation considerations
* multiple client platforms* competing standards* readable, maintainable HTML
![Page 18: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/18.jpg)
SILKWeb HTML
Cascading style sheets w/ absolute positioning
Not compatible across browsers...
![Page 19: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/19.jpg)
SILKWeb HTML
Lowest common denominator: HTML Tables Leads to obfuscated code...
![Page 20: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/20.jpg)
SILKWeb HTML
Automatic content generation* images* text* links
Site management* storyboard directory structure
?
![Page 21: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/21.jpg)
HTML SILKWeb
Parsing HTML* JavaCC
Generating a sketchy representation* library of sketches, or* rendered on the fly
Preserving existing code* “Roundtrip HTML” - Macromedia
DreamWeaver
![Page 22: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/22.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!
![Page 23: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/23.jpg)
Observations: Links
Everybody used some variant of this
![Page 24: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/24.jpg)
Observations: Margins
Almost everybody did this
![Page 25: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/25.jpg)
Observations: Content IS King?
![Page 26: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/26.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
![Page 27: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/27.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
![Page 28: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/28.jpg)
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
![Page 29: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/29.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?
![Page 30: 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 .](https://reader035.fdocuments.us/reader035/viewer/2022062805/5697c0291a28abf838cd7209/html5/thumbnails/30.jpg)
http://guir.berkeley.edu/