1Direct manipulation
Feeling like you control the object itself
2Invisible interface
One you don't notice, so you focus only on the task
3Two parts of directness (Hutchins, Hollan, Norman)
Distance and direct engagement
4Semantic distance
How hard it is to know what to do
5Articulatory distance
How hard it is to do it
6Example of semantic and articulatory distance
Command line: must know and type the move command. Touchscreen: just drag the file
7Direct engagement
Feeling like you're handling the objects, not the computer
8Two ways an interface becomes invisible
Learning and design
9Example of invisibility by learning
Steering wheel when driving
10Example of invisibility by design
Stylus on a tablet feels like paper
11Which invisibility should designers aim for?
Design, because users won't spend long learning our interfaces
12Affordance
The look shows how to use it
135 tips for invisible interfaces
Affordances, know your user, differentiate your user, let the interface teach, talk to your user
14Three human systems
Input, processing, output
15Design rule about color
Never rely on color alone
16Three kinds of memory
Perceptual store, short-term, long-term
17Parts of the Baddeley and Hitch model
Visuospatial sketchpad, phonological loop, episodic buffer, central executive
18How much can short-term memory hold?
4 to 5 chunks
19Chunking
Grouping info into one unit
20Example of chunking
Phone number split as 555-123-4567
21Example of recognition over recall
Menus and toolbars
22Procedural vs. declarative knowledge
Knowing how vs. knowing facts
23Cognitive load
How much mental effort a task uses
24Example of cognitive load from outside the interface
Driving while using a GPS
25Motor system
What users can physically do, like precision
26Example of a motor system problem
Spotify close button next to skip
27Biggest design mistake
Designing before understanding users
28Second biggest design mistake
Picking one idea too early
29Problem space vs. design space
The problem vs. all possible solutions
30Why brainstorm individually first?
Groups agree too early
31Thompson's group brainstorming blockers (4)
Social loafing, conformity, production blocking, performance matching
32Social loafing
People work less hard in a group because no one feels responsible
33Fix for social loafing
Brainstorm alone first, then go through everyone's ideas
34Conformity
People want to agree, so the group ends up with fewer and similar ideas
35Production blocking
A few people talk the most, so others' ideas don't get heard
36Fix for production blocking
Timer limiting how long each person talks
37Performance matching
Everyone's energy evens out, and the group slowly loses momentum
38Osborn's brainstorming rules (4)
Expressiveness, nonevaluation, quantity, building
39Expressiveness
Say every idea out loud, even weird ones
40Nonevaluation
Don't judge or criticize ideas yet
41Persona
A made-up character representing a user
42User profiles
Lists of user traits that map all your users
43Timeline
A persona stretched over time
44Scenarios and storyboards
Specific situations, good for edge cases
45Example of a scenario
Fire truck drowns out the audiobook. How does the user recover?
46User modeling
Comparing designs objectively with task analysis
47Goal after brainstorming
Narrow to 3 or 4 ideas to prototype
48Fidelity
How complete a prototype is
49Main prototyping tradeoff
Low-fi is easy to change; high-fi is detailed
50What fidelity should the first prototype be?
Low fidelity
51Horizontal prototype
Whole design, shallow
52Vertical prototype
One part, deep detail
53Card prototype
One screen per card to simulate use
54Wizard of Oz prototype
A hidden person acts as the system
55First prototype for a voice interface
Wizard of Oz
56Wireframe
A detailed digital mockup
57Multi-level prototyping
Different parts at different fidelities
58Distance
Distance is the mental effort to know and do
59Example of direct manipulation
Pinch to zoom on a photo
60Example of not direct manipulation
Typing a command to move a file, or two-finger tap to right-click
61Why not rely on color alone?
Many users are colorblind (about 1 in 12 men)
62Example of designing around color
Red error field plus an icon and error message
63Center of vision
Best for detail, color, tracking movement
64Peripheral vision
Good at noticing motion, bad at detail and color