Interactive sketching for the early stages of user interface design

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

자신이 자주 사용하는 프로토타이핑 툴의 종류와장,단점에 대해서 이야기를 나눠봅시다.

이 당시의 논문의 아이디어가 반영되어 개선된 현재의 프로타이핑 툴들의 문제점은 무엇인지 이야기해 봅시다.