Sketching Interfaces: Toward More Human Interface Design

1
Sketching InterfacesToward More Human Interface
Design

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

• Priyanka Banerjee

2
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

3
Agenda

• Why is Sketching important?
• How SILK works
• Storyboard Creation
• Advantages of SILK
• Future Improvements to SILK

4
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)

5
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

6
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

7
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

8

• 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 SILKs run mode the click
  behavior of the button can be displayed

9

• 3) Transformation
• Draw a rough sketch of an interface
• Switch to SILKs run mode to view real widgets
  and graphical objects corresponding to those in
  the sketch

10
Widget Recognition

• 1) Recognizing Components
• SILK recognizes primitive components using
  Rubines 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

11
(No Transcript)
12

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

13

• 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

14

• There is atleast 1 rule for each widget
• If no rule matches then SILK leaves the selection
  upto the designer

15
Storyboarding

• Each sketch shows interface in a particular state
• In storyboard mode screens can be connected using
  arrows

16
(No Transcript)
17
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

18
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

19
Questions
20
(No Transcript)