02 Understanding Interaction Flashcards
Foundations of interaction design
Affordances Visibility Feedback Mapping Constraints Consistency Metaphors
What do most foundations of interaction design use?
Knowledge in the world
Affordance definition
Property of an object, which allows an individual to perform an action
- actions that the design of an object suggests to the user
- can be substituted with “is for”
Affordance physical examples
Chair: affords sitting and leaning back, stepping on it, moving it
Door knob: Push on handle, Pull handle, Push handle from the front
Teacup: Handle can be grasped, rotate cup
Subway door button: button can be pushed, slide door
Affordance bad examples
Faucet: rotate? push? maybe a sensor?
Instead of instructions, _ can provide strong clues
Affordances
Types of affordances
Real affordances: physical objects: grasp, push, pull -> Perceptually obvious
Perceived affordances: learned conventions of arbitray mappings
Affordance virtual examples
Scrollbar: move up and down
Trash paper bin: put objects inside
Button: to be pushed
Post-It: write on it, move and remove it
Visibility: Users should always be aware of … by ….
what is going on by providing visible clues, using knowledge in the world
Visibility is a major concern when
number of possible actions exceeds number of controls
there are invisible functions
there is a need for a reminder what can be done
Feedback definition
Information for the user about the current system state,
what has been done,
and current interaction possibilities
Feedback includes:
sound
highlighting
animations
haptic feedback
Subtle feedback for …
small, short, frequent interactions (key press, menu selection)
More noticeable feedback for …
main, long, infrequent interactions (saving, copying files)
examples for icons using feedback
folders that show if they contain files, recycler, …
Bad feedback example
wi-fi in iphone, which is not really turned off
feedback should be
meaningful and responsive
What opens the Gulf of Evaluation?
bad responsiveness
Examples of bad responsiveness
- Delayed response to button clicks
- Sliders and scrollbars lag
- Applications go „dead“ during disk operations or during network activity
Responsiveness: 3 human deadlines: 0.1 seconds:
- Perception of cause and effect
- E.g., delay between moving mouse and pointer following
Responsiveness: 3 human deadlines: 1 seconds:
- Turn-taking in conversation, min. reaction time for unexpected events
- E.g., you have 1s max to show progress indicator, open window or finish system-initiated
operations (like auto-save)
Responsiveness: 3 human deadlines: 10 seconds:
- Typical human attention span
- Max time for one step of a task. E.g., completing one step of a wizard
- Max time to finish input to an operation, like from selecting Print menu entry to sending off the print job
Mapping definition
Relationship between controls and the actions they trigger
How to provide natural mappings
- Use spatial and physical analogies
- Use cultural standards
- Use perception
Mapping: Examples for spatial analogies
Herd, faucet
Mapping: Examples for physical analogies
rising level: more/less -> volume, heat, line thickness, brightness, …
Mapping: Example for cultural Analogies
- Western cultures write from left to right, so an arrangement from left to right can be used to convey a linear ordering
Mapping: Perceptual Analogies
The input device for controlling something (or output device for monitoring its state) looks like the actual thing itself
Example: Mercedes car seat controls
Contraint definition
Restricts possible actions to prevent users from selecting incorrect options -> “inverse affordances”
Types of constraints
Physical Constraints:
the way physical objects restrict the movement of things
Cultural Constraints
cultural aspects and assumptions (e.g. red/green/yellow ordering).
Logical Constraints:
Exploiting people’s everyday common sense reasoning about the way the world works and how they encounter it.
Physical constraints examples
limits through physical shape (keys, lego bricks, usb stick)
limits through placement (controls not reachable by children, user must press two buttons simultaneously)
UI physical constraints to prevent making mistakes examples
selection instead of mistyping
prevent illegal input
automatic correction
Consistency definition
If it looks the same, it should act the same!
-> Similar operations should use similar elements for similar tasks
Examples for consistent interfaces:
short keys (always ctrl + first initial of command)
terminology ("save" always means permamently storing)Consistency design:
command design,
graphic design,
flow design
Metaphor definition
Interface is designed to be similar to something the user is already familiar with
Metaphors can be based on …
physical entity
activities
users knowledge
Metaphor examples
calculator,
iOS phonebook,
desktop (documents, folders, recycle bin)
Interface metaphors benefits
make learning systems easier
help understand underlying conceptual model
innovative
accessibility to diversity of users
Interface metaphors problems
break conventional or cultural rules
can constraint designers & limit imagination
transfer bad parts from existing interfaces
Interaction Types
Instructing
Conversing
Manipulating
Exploring
Instructing Interaction Type definition and benefits
User instructs system what to do
-> quick and efficient, good for repetitive actions
Conversing Interaction Type definition, problems and benefits
Like talking to humans, but with virtual agents
Benefits:
Interaction in familiar way
User feels comfortable
Hands-Free possible
Problems:
Parsing errors
Dialects and different languages
Privacy issues
Manipulating Interaction Type definition, problems and benefits
Dragging, selecting, opening, closing and zooming actions on virtual objects
Benefits:
Easy to learn
Benefit experienced users
Immediate feedback
Problems:
Not always applicable
Screen real estate
Possibly slow
Exploring Interaction Type definition and benefits
