sketching interfaces toward more human interface design l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Sketching Interfaces: Toward More Human Interface Design PowerPoint Presentation
Download Presentation
Sketching Interfaces: Toward More Human Interface Design

Loading in 2 Seconds...

play fullscreen
1 / 20

Sketching Interfaces: Toward More Human Interface Design - PowerPoint PPT Presentation


  • 339 Views
  • Uploaded on

Sketching Interfaces: Toward More Human Interface Design. James Landay, University of California Berkeley Brad Myers, Carnegie Mellon University. Priyanka Banerjee. Overview. This paper talks about an electronic sketching tool, SILK (Sketching interfaces like krazy)

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 'Sketching Interfaces: Toward More Human Interface Design' - Angelica


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
sketching interfaces toward more human interface design

Sketching Interfaces:Toward More Human Interface Design

  • James Landay, University of California Berkeley
  • Brad Myers, Carnegie Mellon University

Priyanka Banerjee

overview
Overview
  • This paper talks about an electronic sketching tool, SILK (Sketching interfaces like krazy)
  • SILK is an interactive UI design tool
  • It provides flexibility in creating and evaluating designs
agenda
Agenda
  • Why is Sketching important?
  • How SILK works
  • Storyboard Creation
  • Advantages of SILK
  • Future Improvements to SILK
why is sketching important
Why Is Sketching Important?
  • A picture speaks a thousand words
  • Informal means of communicating design ideas
  • No requirement to focus on details like font, color etc
  • Saves time and generates more ideas
  • Complex UI design tool is not good during initial design stages (Example: Photoshop)
slide5

Paper Sketching Vs Electronic Sketching

Benefits of Electronic Sketching over Paper:

  • Recognizes graphic elements as it is being drawn (Example: scrollbar)
  • Interaction with the design is possible (Example: Storyboard creation)
  • Testing can be done at any point
  • Enables quick edits thus supporting iterative design
what is silk
What is SILK?
  • SILK is an informal sketching tool
  • It uses an electronic pad and a stylus for sketching
  • It combines all the merits of paper based sketching and electronic sketching
how silk works
How SILK Works?
  • Recognition and Annotation
  • SILK recognizes 4 primitive components i.e. rectangle, squiggly line, straight line and ellipse
  • Primitive components combine to form widgets
  • SILK recognizes 7 basic widgets and a combination of widgets
  • SILK supports annotating sketches (i.e. drawn written or typed comments)
  • Annotations can be hidden or displayed
slide8
2) Behavior Specification:
  • Draw a sketch of a button
  • SILK recognizes it as a standard widget
  • Standard behavior of a button is its click -ability
  • On switching to SILK’s run mode the ‘click’ behavior of the button can be displayed
slide9
3) Transformation:
  • Draw a rough sketch of an interface
  • Switch to SILK’s run mode to view real widgets and graphical objects corresponding to those in the sketch
widget recognition
Widget Recognition

1) Recognizing Components:

  • SILK recognizes primitive components using Rubine’s algorithm
  • It uses statistical pattern recognition technique to train classifiers
  • It can learn new patterns that designers use to form primitive components
  • Retraining is transparent to the designer
slide12
2) Detecting Spatial Relationships (How does the Algo work)
  • Does the new component contain or is contained by another component? (Example: Scrollbar)
  • Is the new component near another component? (Example: check boxes)
  • Is the new component a horizontal or a vertical sequence of combination of components of same type? (Example: Radio Buttons)
slide13
3) Determining the intended widget
  • Determine relationship between new component and other components
  • Pass the new component and the relationship to a rule system
  • Rule matches new component and relation
  • Example: Scroll Bar i.e. a tall skinny rectangle containing another small rectangle
slide14
There is atleast 1 rule for each widget
  • If no rule matches then SILK leaves the selection upto the designer
storyboarding
Storyboarding
  • Each sketch shows interface in a particular state
  • In storyboard mode screens can be connected using arrows
advantages of silk
Advantages of SILK
  • Design ideas can be sketched very quickly and informally like paper sketches
  • They can be communicated quickly
  • Making edits and re-iterating was easier and quicker over paper sketches
  • Unlike paper sketches designs are more interactive and components can exhibit their behavior
  • Storyboarding feature helps designers from missing out any interactions
  • SILK is simple and easy to use
future improvements
Future Improvements
  • Improving the strength of the widget recognition algorithm
  • Provide rules for inferring widgets
  • Allow users to enter new types of components into the system and create new rules for them
  • Allow users to specify behaviors of new components