cognitive science + computer science
Direct Manipulation
Scott Klemmer
A4 Example
Cheng-Lin Lin, Chiao Fu,Ping-Tsung Hsu
youtube.com/watch?v=ITRpSB3uOvE
Henry Mao, Qixin Ding,Xiangyu Zhao
youtube.com/watch?v=3vAVqqnbqL0
Key to good design:• What makes an interface
easy, hard, or “natural”?
Alex Lee, OXO, Gel 2008 http://vimeo.com/3200945
How might we improve the measuring cup?
Patrick Vlaskovits blogs.hbr.org/cs/2011/08/henry_ford_never_said_the_fast.html
Henry Ford, Innovation, and that “Faster Horse”
The Simpsons, Homer Designs a Car
Measure Cups & Automobiles What We Learned
Image Courtesy Bill Verplank
The Execution Gap: How do you do?
Image Courtesy Bill Verplank
The Evaluation Gap: How do you know?
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?
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.
Courtesy Bill Moggridge, IDEO
COMMAND LINE v. GUI
Shneiderman, B., "Direct Manipulation: A Step Beyond Programming Languages." IEEE Computer, 1983.
Direct Manipulation • Immediate feedback on actions• Continuous representations of objects• Leverage metaphor
Principle Command Line GUI
Visibility
Feedback
Consistency
Non-destructive
Discoverability
Reliability
Successful Indirection?
Courtesy of Takeo Igarashi
Eye to the Future: Gestures• The solution to menu creep?• Even more direct?
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
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
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
How about Tic-Tac-Toe?
These games are Isomorphs
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
Working Memory
David Allen
Getting Things Done
Don Norman, Things that Make Us Smart
Naturalness• Cognition is aided
when the propertiesof the representationmatch the propertiesof the thing being represented
Images courtesy of Proteus Biomedical
Proteus Ingestible Networked Pill
Thanks for Your Midterm Feedback
“I like”Lecture• lectures are engaging and helpful for learning
the design process• ‘each lecture is like a keynote’Labs• labs are fun, interactive, and insightful• practicality of the labsStudio• exposing us to presenting often
“I like”Overall• demonstration of design process• responsiveness of teaching staff• learning about heuristics — it puts terms to
everything I’ve thought about in products• team collaboration and interaction with
classmates
“I wish”Assignments• manage workload better• make the requirements for assignments clearLabs• more time to complete labs• more depth on concepts, less copy-pasteQuiz• make quizzes less ambiguous
“I wish”Overall• consistency across Piazza, course website• Piazza overload
Assignment 5