![Page 1: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/1.jpg)
cognitive science + computer science
Direct Manipulation
Scott Klemmer
![Page 2: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/2.jpg)
A4 Example
![Page 3: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/3.jpg)
Good HE: Christal Vo
![Page 4: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/4.jpg)
Good list of changes: Hasan Al-Jamaly
![Page 5: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/5.jpg)
Good Video: Eunice Kim, Yu Hao Chang, Andy Xia
https://drive.google.com/file/d/1jRVJi1sAqsKiXWchHQu8qkFLL2eTpHVR/view
![Page 6: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/6.jpg)
Key to good design:• What makes an interface
easy, hard, or “natural”?
![Page 7: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/7.jpg)
Alex Lee, OXO, Gel 2008 http://vimeo.com/3200945
How might we improve the measuring cup?
![Page 8: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/8.jpg)
Patrick Vlaskovits blogs.hbr.org/cs/2011/08/henry_ford_never_said_the_fast.html
Henry Ford, Innovation, and that “Faster Horse”
![Page 9: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/9.jpg)
The Simpsons, Homer Designs a Car
![Page 10: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/10.jpg)
Measure Cups & Automobiles What We Learned
![Page 11: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/11.jpg)
Image Courtesy Bill Verplank
The Execution Gap: How do you do?
![Page 12: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/12.jpg)
Image Courtesy Bill Verplank
The Evaluation Gap: How do you know?
![Page 13: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/13.jpg)
Finding gaps: questions?• Function: What is this thing?• Actions: What can this thing do?• Mapping: Can I figure out how to do it?• Performance: Can I do it?• Feedback: Did I do it?• Meaning: What is the system telling me?
![Page 14: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/14.jpg)
Source: Donald A. Norman and Jakob Nielsen, ACM Interactions, 2010
To reduce the gaps, provide...• Visibility (perceived affordances or signifiers)• Feedback• Consistency (also known as standards)• Non-destructive operations (hence the
importance of undo)• Discoverability: All operations can be
discovered by systematic exploration of menus• Reliability. Operations should work. Period.
And events should not happen randomly.
![Page 15: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/15.jpg)
Courtesy Bill Moggridge, IDEO
![Page 16: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/16.jpg)
COMMAND LINE v. GUI
![Page 17: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/17.jpg)
Shneiderman, B., "Direct Manipulation: A Step Beyond Programming Languages." IEEE Computer, 1983.
Direct Manipulation • Immediate feedback on actions• Continuous representations of objects• Leverage metaphor
![Page 18: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/18.jpg)
Principle Command Line GUI
Visibility
Feedback
Consistency
Non-destructive
Discoverability
Reliability
![Page 19: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/19.jpg)
Successful Indirection?
![Page 20: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/20.jpg)
Courtesy of Takeo Igarashi
![Page 21: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/21.jpg)
Eye to the Future: Gestures• The solution to menu creep?• Even more direct?
![Page 22: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/22.jpg)
The Oranges Puzzlegoal Order the oranges by size: largest-
to-smallest, left-to-rightrule 1 Only one orange can be transferred
at a timerule 2 An orange can only be transferred to
a plate on which it will be the largestrule 3 Only the largest orange on a plate
can be transferred to another plate
![Page 23: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/23.jpg)
The Bagels Puzzlegoal Order the donuts by size:
largest-to-smallest, left-to-right
rule 1 Only one donut can be transferred at a time
rule 2 A donut can only be transferred to a peg on which it will be the largest
rule 3 Only the largest donut on a peg can be transferred to another peg
![Page 24: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/24.jpg)
Let’s play a number game!• Two players• Think of the numbers 1 to 9• Players draw alternately, without replacement• Objective: make a set of 3 that adds to 15
![Page 25: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/25.jpg)
How about Tic-Tac-Toe?
![Page 26: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/26.jpg)
These games are Isomorphs
![Page 27: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/27.jpg)
Problem Solving as Representation
“Solving a problem simply means representing it so as to make the solution transparent”
—Herbert Simon, The Sciences of the Artificial
![Page 28: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/28.jpg)
Working Memory
![Page 29: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/29.jpg)
David Allen
Getting Things Done
![Page 30: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/30.jpg)
Don Norman, Things that Make Us Smart
Naturalness• Cognition is aided
when the propertiesof the representationmatch the propertiesof the thing being represented
![Page 31: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/31.jpg)
Images courtesy of Proteus Biomedical
Proteus Ingestible Networked Pill
![Page 32: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/32.jpg)
![Page 33: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/33.jpg)
![Page 34: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/34.jpg)
Thanks for Your Midterm Feedback
![Page 35: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/35.jpg)
What are we doing well?• Feedback and interaction in studio are helpful• Going through the design process with tools
and techniques used in the real world• Videos that supplement lecture to help with
design concepts
![Page 36: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/36.jpg)
What can we do better?• Labs too easy, labs too hard• More details about why we’re doing what
we’re doing in lab• Assignment wording and grading are vague
![Page 37: Direct Manipulation - IxDixd.ucsd.edu/home/w18/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools](https://reader035.vdocument.in/reader035/viewer/2022081611/5f02f1137e708231d406c583/html5/thumbnails/37.jpg)
What’s one thing you could do better?
• Go to office hours• Go to lecture/lab• Work on assignments sooner• Spend time exploring concepts