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

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


  • 281 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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

http://guir.berkeley.edu

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

E-mail

Reports

Design

ideas

Presentations

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

Presentations

UI & Web Page design

Note taking

Application Areas


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

text

circle

rectangle

bullet

triangle


Silkweb silk extensions12 l.jpg
SILKWeb: SILK Extensions

  • Widget Recognition

hyperlink

table


Silkweb silk extensions13 l.jpg
SILKWeb: SILK Extensions

  • Widget Recognition

list

text block/

paragraph

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

Not compatible across browsers...

SILKWeb ® HTML

  • Cascading style sheets w/ absolute positioning


Silkweb html19 l.jpg

Leads to obfuscated code...

SILKWeb ® HTML

  • Lowest common denominator: HTML Tables


Silkweb html20 l.jpg

®

?

SILKWeb ® HTML

  • Automatic content generation

    • images

    • text

    • links

  • Site management

    • storyboard ® directory structure


Html silkweb l.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


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
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 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?



ad