Direct Manipulation - UCSD Design Lab
Transcript of Direct Manipulation - UCSD Design Lab
![Page 1: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/1.jpg)
cognitive science + computer science
Direct Manipulation
Scott Klemmer
![Page 2: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/2.jpg)
A4 Example
![Page 3: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/3.jpg)
J Delaney
![Page 4: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/4.jpg)
Key to good design:• What makes an interface
easy, hard, or “natural”?
![Page 5: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/5.jpg)
Alex Lee, OXO, Gel 2008 http://vimeo.com/3200945
How might we improve the measuring cup?
![Page 6: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/6.jpg)
Patrick Vlaskovits blogs.hbr.org/cs/2011/08/henry_ford_never_said_the_fast.html
Henry Ford, Innovation, and That “Faster Horse”
![Page 7: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/7.jpg)
The Simpsons, Homer Designs a Car
![Page 8: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/8.jpg)
Measure Cups & Automobiles What We Learned
![Page 9: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/9.jpg)
Image Courtesy Bill Verplank
The Execution Gap: How do you do?
![Page 10: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/10.jpg)
Image Courtesy Bill Verplank
The Evaluation Gap: How do you know?
![Page 11: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/11.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 12: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/12.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 13: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/13.jpg)
Courtesy Bill Moggridge, IDEO 13
![Page 14: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/14.jpg)
COMMAND LINE v. GUI
14
![Page 15: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/15.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 16: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/16.jpg)
Principle Command Line GUI
Visibility
Feedback
Consistency
Non-destructive
Discoverability
Reliability
![Page 17: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/17.jpg)
Successful Indirection?
17
![Page 18: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/18.jpg)
courtesy of Takeo Igarashi
![Page 19: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/19.jpg)
Eye to the Future: Gestures• The solution to menu creep?• Even more direct?
![Page 20: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/20.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 largest
rule 3 Only the largest orange on a plate can be transferred to another plate
20
![Page 21: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/21.jpg)
The Bagels Puzzlegoal Order the donuts by size: largest-to-
smallest, left-to-rightrule 1 Only one donut can be transferred
at a timerule 2 A donut can only be transferred to a
peg on which it will be the largestrule 3 Only the largest donut on a peg can
be transferred to another peg
21
![Page 22: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/22.jpg)
Let’s play a number game!• Two players• Think of the numbers 1 to 9• Players draw alternately, without
replacement• The objective is to make a set of 3 that
adds to 15
![Page 23: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/23.jpg)
How ‘bout Tic-Tac-Toe?
23
![Page 24: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/24.jpg)
These Games are Isomorphs
24
![Page 25: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/25.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
25
![Page 26: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/26.jpg)
Working Memory
26
![Page 27: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/27.jpg)
David Allen
Getting Things Done
![Page 28: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/28.jpg)
Don Norman, Things that Make Us Smart
Naturalness• Cognition is aided
when the propertiesof the representation match the propertiesof the thing being represented
28
![Page 29: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/29.jpg)
Images courtesy of Proteus Biomedical
Proteus Ingestable Networked Pill
29
![Page 30: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/30.jpg)
![Page 31: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/31.jpg)
Thanks for Your Midterm Feedback
![Page 32: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/32.jpg)
“I like”: Lecture• The material (videos/concepts) behind
designing, iterating, and testing is great.• Videos that supplement the lecture
material• Lecture activities really help me apply the
info
![Page 33: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/33.jpg)
“I like”: Labs• Gives the steps and tools needed to build
a functional website• Helped me learn a lot of HTML, CSS, and
JS knowledge• Teaches me skills I will use in the future
![Page 34: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/34.jpg)
“I like”: Studio• Constant feedback from TAs and
classmates each week so we have new ideas for making further changes and improvements
• Studio gives us the chance to collaborate with other teams, evaluate each other’s work, and give feedback.
![Page 35: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/35.jpg)
“I like”: General• Each assignment is thorough and pushes
students beyond what they might might be used to doing
• Fast pace and practical applicability. • Studio, lab, and lecture all interplay nicely.
![Page 36: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/36.jpg)
“I wish”: Assignments• Assignments have a lot of information, which
makes it difficult for students to know what is due
• Expectations for grades are not clear and not clearly correlated with my effort
• “Stretch goals” for assignments as well as labs
![Page 37: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/37.jpg)
“I wish”: Labs• I wish labs were more challenging rather
than just copy/pasting• I don’t really feel like I’m learning as a CS
major.• Vagrant makes lab a struggle
![Page 38: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/38.jpg)
“I wish”: Studio• The initial studio allocations make it hard
for waitlisted students to get into the studios they want
• Studio often feels rushed and jam-packed• More elaboration on studio brief and why
it matters
![Page 39: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/39.jpg)
Assignment 5
![Page 40: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/40.jpg)
All Design is Redesign• Let’s reduce the gulfs• Say you’re looking for a dorm desk…
![Page 41: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/41.jpg)
Start on Pinterest
![Page 42: Direct Manipulation - UCSD Design Lab](https://reader030.fdocuments.us/reader030/viewer/2022020707/61fe9400bab1e45ea06a4d5f/html5/thumbnails/42.jpg)
Head to Craigslist