Sketching interfaces toward more human interface design
Download
1 / 20

Sketching Interfaces: - PowerPoint PPT Presentation


  • 325 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:' - 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 l.jpg

Sketching Interfaces:Toward More Human Interface Design

  • James Landay, University of California Berkeley

  • Brad Myers, Carnegie Mellon University

Priyanka Banerjee


Overview l.jpg
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 l.jpg
Agenda

  • Why is Sketching important?

  • How SILK works

  • Storyboard Creation

  • Advantages of SILK

  • Future Improvements to SILK


Why is sketching important l.jpg
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 l.jpg

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

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

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

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

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


Storyboarding l.jpg
Storyboarding

  • Each sketch shows interface in a particular state

  • In storyboard mode screens can be connected using arrows


Advantages of silk l.jpg
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 l.jpg
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



ad