Interactive Sketching for the Early Stages of User Interface Design + CHI’95 - James A. Landay, Brad A. Myers / 맹욱재 interactive UI construction tools are hindrance during the early stages of UI design interactive tool called SILK (Sketching Interfaces Like Krazy) - quickly sketch an interface using an electronic pad & stylus. preserves properties of pencil & paper: a very quickly rough drawing & the very flexible medium.

1. Interactive Sketching for the
Early Stages of User Interface
Design
+ CHI’95
- James A. Landay, Brad A. Myers
/ 맹욱재
x 2014 spring

2. James A. Landay
Professor of Information Science at Cornell NYC Tech
Ph.D. in CS from Carnegie Mellon University
Automated Usability Evaluation, Demonstrational Interfaces, Ubiquitous Computing,
User Interface Design Tools, and Web Design
Brad A. Myers
Professor of Human Computer Interaction Institute Carnegie Mellon University
Ph.D. in CS from the University of Toronto
Programming Environments, End-User Software Engineering, Handheld devices,
User Interface Development Systems, User Interfaces, Programming by
Example, Visual Programming, Interaction Techniques, and Window Management
http://tech.cornell.edu/james-landay/

3. Problem
http://www.creativeapplications.net/mac/the-hypercard-legacy-theory-mac/

4. Problem
- interactive UI construction tools are
hindrance during the early stages of
UI design
- take too much time to use
force designers to specify more of the design details
- prefer to paper or whiteboard

5. Solution
http://dub.washington.edu:2007/denim/research/

6. Solution
- interactive tool called SILK
(Sketching Interfaces Like Krazy)
- quickly sketch an interface using
an electronic pad & stylus.
- preserves properties of pencil & paper:
a very quickly rough drawing
& the very flexible medium.

7. Solution (continued)
- interactive and can easily be modified.
- examine, annotate, edit a complete history
of the design.
- transform the sketch into a complete,operational
interface in a specified look-and-feel.
- this transformation is guided by the designer.

8. Commitment
- supporting the early phases of the interface
design life cycle,
- enhancing both ease the development of UI
prototypes
- reduce the time needed to create a final
interface.
- provides design ideas for a production-level
system

9. Overall layout
Structure of the component
refine detailed look & feel(X)

10. http://dub.washington.edu:2007/denim/research/
SILK then retains the "sketchy" look of the components.

11. Our goal : UI as unintrusive as pencil and paper.
history mechanisms : reuse portions of old designs
quickly bring up different versions
of the same design
for testing or comparison.
=> Changes & written annotations over the course of a
project can be reviewed.

13. replace prototyping tools
{e.g., HyperCard, Director, and Visual Basic)
UI builders {e.g., the NeXT Interface Builder)
for designing, constructing, and testing UIs

14. Problems
advantage of electronic sketching
UR
sketch recognition algorithm

15. Design method
Low-fidelity techniques : creating mock-ups using
sketches, scissors, glue, post-it notes
Prototyping tools : non-programmers write simple
app mock-ups quickly
UI builders : widget-based parts of the app
+ little low-level programming

16. Problem
Over-specification by unimportant details
-> loss of spontaneity
sol> thumbnail sketch(rough illerstration)
fail to quickly interate design process

17. Problem in tools
HyperCard
Macromedia’s Director
Visual Basic
come up with short in early design stage &
production-quality interface

18. HyperCard
http://www.creativeapplications.net/mac/the-hypercard-legacy-theory-mac/
specify design details
extend with programming
(HyperTalk)
poor performance
-> implementing with differnt tool

19. Macromedia’s Director
media integraion tool
script language Lingo
hard to master -> learnability bad
lack of standard widget
inappropriate for non-programmer
http://www.iicm.tugraz.at/thesis/ahollosi_html/node44.html

20. Visual Basic
inappropriate for non-programmer
http://microsoft-visual-basic.softonic.fr/

21. Paper prototyping
quickly preserve thought, but
hard to modify - frequently redraw
=> trasluent layers, white board
translation to computerized format required
lack of “design memory”
- difficult to search, store, organize, reuse
lack of interaction

22. Advantage of electronic sketching
quickly record in tangible form
don’t require specification in details
easy to edit, duplicate, modify, search
(on embed anotation)
early design review > finished-looking interface
focus on unimportant details not fundamental
structural issues

23. User research by Survey
16 professional designer(avr 6 yrs experience)
art or graphic design background
Q. What tools and technique in all stages?
Q. Pros and Cons of paper sketching
Q. Pros and Cons of electronic tools
Gather sketches of early stage
for supporting types of elements

24. Survey result
94% use sketch & storyboards on early stage
sequence of system responce and annotation
Using interface tool on early stage : waste of time
drawing & explanation can be presented & tested before prototyping
“Iteration is critical and must happen as rapidly as possible”
familarity with papers due to intuitive & natural

25. Survey result(contiuned)
88% use HyperCard, Director, Visual Basic on
prototyping stage
some use high-powered UI builder
Director only useful “movie-like” prototyping
(no interaction), not reusable design in final product.
HyperCard,Director lack of widget set

26. Survey result(contiuned)
UI builder - good: complete widget set
reusability in design to final
bad : difficult of learning
scripting language
unable to draw arbitrary graphic
interests in design control with custom looks.
75% reported 20%+a spent designing type of widget

27. Survey result(contiuned)
reacted favorable to SILK
concerned that not paper and adaption
happy with quick implementation & iteration
only 2 willing to use SILK

28. Implementation

29. Strength in SILK
quick action with gestures
recognize interface element drawn by user
give feedback by different color
cycle: for system inference choice
try next best choice
or choose from list
grouping: force the system inference
or user group relevant component
and give name

30. Using SILK
specify the behavior of widget
with inference by system
or by-demonstration technique
or visual language
or scripting language for complex action

31. Using SILK (continued)
Automated transforming process
rough sketch -> real widget & graphical object
needs some guidance of designer

32. Specification of SILK
Status area for last inferred type of widget
feedback can be turned off for distraction
editting start by holding down button in stylus
Multiple design displayed spontaneously
miniature format(thumbnail) for quick visual
search

33. Specification of SILK (continued)
Annotation by type or sketching on annotation layer
typed annotation can be searched
multiple layers of annotation supported for personal in teamwork
Run mode for testing & Behavior mode for dynamic behavior
Two basic levels of behavior
1) sequencing between screens
2) wanting draw new widget working same with known.

34. Specifying behavior of component
Programming-by-demonstaration(PBD)
critical problem in PBD: lack of static representation
textual language or script needs to change program.
-> out of focus, prototyping tool for non-programmer
=> solved by PBD + visual language
using visual notation(mark, symbol) layered on top
-> same visual language for behavior & edit
-> similar to whiteboard & paper
ex: drawing arrows to sequencing

35. Specifying behavior of component 2
Selecting from list of known behavior
->problem for no behavior
=> small number of list is enough proved by Garnet Iterator
making new behavior is very small from user survey

36. Recognizing

37. Recognizing
recognition engine work on mid of sketching
for anytime testing.
Using rule system contain basic knowldege of structure
& make-up of UI.
Rubine’s gesture recognition algorithm
(statistical pattern)
trained by example of Agate gesture training tool
limit for single-stroke gesture

38. Related works
scanning hand-drawn interfaces is start of field
tools for architects
- sketch over printout of CAD tools
- getting different level of feedback

39. Discussion
자신이 자주 사용하는 프로토타이핑 툴의 종류와
장,단점에 대해서 이야기를 나눠봅시다.
이 당시의 논문의 아이디어가 반영되어 개선된
현재의 프로타이핑 툴들의 문제점은 무엇인지
이야기해 봅시다.