Sketching Interfaces: Toward More Human Interface Design

1. Sketching Interfaces:Toward 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 SILK’s run mode the ‘click’ behavior of the button can be displayed

9. 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

10. 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

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

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