silkweb a sketching tool for informal web page design
Download
Skip this Video
Download Presentation
SILKWeb: A Sketching Tool for Informal Web Page Design

Loading in 2 Seconds...

play fullscreen
1 / 30

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


  • 283 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
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

traditional software interfaces
Traditional Software Interfaces
  • Force translations to formal representations
    • warp human-human communications
traditional representations
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
Informal Communications Styles
  • Speaking
  • Writing
  • Gesturing
  • Sketching

Informal UIs allow users to work naturally

application areas
Architectural design

Presentations

UI & Web Page design

Note taking

Application Areas
outline
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
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
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
SILKWeb: SILK Extensions
  • Primitive Recognition
  • line

text

circle

rectangle

bullet

triangle

silkweb silk extensions12
SILKWeb: SILK Extensions
  • Widget Recognition

hyperlink

table

silkweb silk extensions13
SILKWeb: SILK Extensions
  • Widget Recognition

list

text block/

paragraph

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

silkweb silk extensions14
SILKWeb: SILK Extensions
  • Navigation Bars
silkweb silk extensions15
SILKWeb: SILK Extensions
  • Gesture Recognition
silkweb transformation
SILKWeb: Transformation
  • HTML  SilkWeb transformation
silkweb html
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
Not compatible across browsers...SILKWeb ® HTML
  • Cascading style sheets w/ absolute positioning
silkweb html19
 Leads to obfuscated code...SILKWeb ® HTML
  • Lowest common denominator: HTML Tables
silkweb html20
®

?

SILKWeb ® HTML
  • Automatic content generation
    • images
    • text
    • links
  • Site management
    • storyboard ® directory structure
html silkweb
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
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
Observations: Links
  • Everybody used some variant of this
observations margins
Observations: Margins
  • Almost everybody did this
future plans
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
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
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
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