Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and...
Transcript of Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and...
![Page 1: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/1.jpg)
cognitive science + computer science
Direct Manipulation
Scott Klemmer
![Page 2: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/2.jpg)
A4 Example
![Page 3: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/3.jpg)
Good HE: Christal Vo
![Page 4: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/4.jpg)
Good list of changes: Hasan Al-Jamaly
![Page 5: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/5.jpg)
Good Video: Eunice Kim, Yu Hao Chang, Andy Xia
https://drive.google.com/file/d/1jRVJi1sAqsKiXWchHQu8qkFLL2eTpHVR/view
![Page 6: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/6.jpg)
Key to good design:• What makes an interface
easy, hard, or “natural”?
![Page 7: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/7.jpg)
Alex Lee, OXO, Gel 2008 http://vimeo.com/3200945
How might we improve the measuring cup?
![Page 8: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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 Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/9.jpg)
The Simpsons, Homer Designs a Car
![Page 10: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/10.jpg)
Measure Cups & Automobiles What We Learned
![Page 11: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/11.jpg)
Image Courtesy Bill Verplank
The Execution Gap: How do you do?
![Page 12: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/12.jpg)
Image Courtesy Bill Verplank
The Evaluation Gap: How do you know?
![Page 13: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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 Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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 Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/15.jpg)
Courtesy Bill Moggridge, IDEO
![Page 16: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/16.jpg)
COMMAND LINE v. GUI
![Page 17: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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 Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/18.jpg)
Principle Command Line GUI
Visibility
Feedback
Consistency
Non-destructive
Discoverability
Reliability
![Page 19: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/19.jpg)
Successful Indirection?
![Page 20: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/20.jpg)
Courtesy of Takeo Igarashi
![Page 21: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/21.jpg)
Eye to the Future: Gestures• The solution to menu creep?• Even more direct?
![Page 22: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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 Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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 Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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 Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/25.jpg)
How about Tic-Tac-Toe?
![Page 26: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/26.jpg)
These games are Isomorphs
![Page 27: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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 Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/28.jpg)
Working Memory
![Page 29: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/29.jpg)
David Allen
Getting Things Done
![Page 30: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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 Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/31.jpg)
Images courtesy of Proteus Biomedical
Proteus Ingestible Networked Pill
![Page 32: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/32.jpg)
![Page 33: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/33.jpg)
![Page 34: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/html5/thumbnails/34.jpg)
Thanks for Your Midterm Feedback
![Page 35: Direct Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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 Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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 Manipulationixd.ucsd.edu/home/w19/lectures/IntroHCI-w18-Week5.pdf · • Feedback and interaction in studio are helpful • Going through the design process with tools and](https://reader035.fdocuments.net/reader035/viewer/2022070802/5f02f1127e708231d406c57e/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