Upload
wookjaemaeng
View
112
Download
4
Embed Size (px)
DESCRIPTION
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.
Citation preview
Interactive Sketching for the Early Stages of User Interface Design+ CHI’95 - James A. Landay, Brad A. Myers/ 맹욱재x 2014 spring
James A. LandayProfessor of Information Science at Cornell NYC TechPh.D. in CS from Carnegie Mellon University
Automated Usability Evaluation, Demonstrational Interfaces, Ubiquitous Computing, User Interface Design Tools, and Web Design
Brad A. MyersProfessor 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/
Problem
http://www.creativeapplications.net/mac/the-hypercard-legacy-theory-mac/
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
Solution
http://dub.washington.edu:2007/denim/research/
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.
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.
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
Overall layoutStructure of the component
refine detailed look & feel(X)
http://dub.washington.edu:2007/denim/research/
SILK then retains the "sketchy" look of the components.
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.
replace prototyping tools {e.g., HyperCard, Director, and Visual Basic)UI builders {e.g., the NeXT Interface Builder)
for designing, constructing, and testing UIs
Problemsadvantage of electronic sketchingURsketch recognition algorithm
Design methodLow-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
Problem
Over-specification by unimportant details -> loss of spontaneity sol> thumbnail sketch(rough illerstration)
fail to quickly interate design process
Problem in tools
HyperCardMacromedia’s DirectorVisual Basic
come up with short in early design stage &production-quality interface
HyperCard
http://www.creativeapplications.net/mac/the-hypercard-legacy-theory-mac/
specify design detailsextend with programming(HyperTalk)poor performance -> implementing with differnt tool
Macromedia’s Director
media integraion tool script language Lingo
hard to master -> learnability badlack of standard widgetinappropriate for non-programmer
http://www.iicm.tugraz.at/thesis/ahollosi_html/node44.html
Visual Basic
inappropriate for non-programmer
http://microsoft-visual-basic.softonic.fr/
Paper prototyping
quickly preserve thought, buthard to modify - frequently redraw=> trasluent layers, white boardtranslation to computerized format requiredlack of “design memory”
- difficult to search, store, organize, reuselack of interaction
Advantage of electronic sketching
quickly record in tangible formdon’t require specification in detailseasy to edit, duplicate, modify, search(on embed anotation)
early design review > finished-looking interfacefocus on unimportant details not fundamentalstructural issues
User research by Survey
16 professional designer(avr 6 yrs experience)art or graphic design backgroundQ. What tools and technique in all stages?Q. Pros and Cons of paper sketchingQ. Pros and Cons of electronic toolsGather sketches of early stagefor supporting types of elements
Survey result94% 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
Survey result(contiuned)
88% use HyperCard, Director, Visual Basic on prototyping stagesome 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
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
Survey result(contiuned)
reacted favorable to SILKconcerned that not paper and adaptionhappy with quick implementation & iteration
only 2 willing to use SILK
Implementation
Strength in SILK
quick action with gestures
recognize interface element drawn by usergive 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
Using SILK
specify the behavior of widgetwith inference by system
or by-demonstration technique or visual language or scripting language for complex action
Using SILK (continued)
Automated transforming process rough sketch -> real widget & graphical objectneeds some guidance of designer
Specification of SILK
Status area for last inferred type of widgetfeedback can be turned off for distractioneditting start by holding down button in stylusMultiple design displayed spontaneouslyminiature format(thumbnail) for quick visual search
Specification of SILK (continued)Annotation by type or sketching on annotation layer typed annotation can be searchedmultiple layers of annotation supported for personal in teamwork
Run mode for testing & Behavior mode for dynamic behaviorTwo basic levels of behavior 1) sequencing between screens 2) wanting draw new widget working same with known.
Specifying behavior of componentProgramming-by-demonstaration(PBD)critical problem in PBD: lack of static representationtextual language or script needs to change program.-> out of focus, prototyping tool for non-programmer=> solved by PBD + visual languageusing visual notation(mark, symbol) layered on top-> same visual language for behavior & edit-> similar to whiteboard & paper ex: drawing arrows to sequencing
Specifying behavior of component 2Selecting 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
Recognizing
Recognizing
recognition engine work on mid of sketchingfor 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 toollimit for single-stroke gesture
Related works
scanning hand-drawn interfaces is start of fieldtools for architects - sketch over printout of CAD tools - getting different level of feedback
Discussion
자신이 자주 사용하는 프로토타이핑 툴의 종류와장,단점에 대해서 이야기를 나눠봅시다.
이 당시의 논문의 아이디어가 반영되어 개선된 현재의 프로타이핑 툴들의 문제점은 무엇인지 이야기해 봅시다.