Course summary,
Q3 review
IS 403: User Interface Design
Shaun Kane
1
Admin
• Assignment 9 extended from Friday until
Tuesday (our last class)
• Will accept resubmissions until Thursday,
December 12
• Q2 back at end of class
2
Upcoming events
• Thursday:
– Quiz 3
• Monday 1:59pm:
– A10: 3.5 minute presentation on your project
• Tuesday:
– Assignment 9 (final design) due
– Assignment 10 prez
– Participation form (optional, by email)
• Wednesday: FREEDOM!
3
Quiz 3 review
4
Quiz 3 preparation
• Covers content since the last quiz
– Interaction design
– Heuristic evaluation
– Usability testing
– Mobile UIs
– Accessibility
– Audio and UI metaphors
5
Q3: Interaction design
• Principles of interaction design
• Web site layout features (e.g. navigation)
• Norman
– Gulf of execution, evaluation
– Affordances, mapping, system status,
feedback
6
Q3: Heuristic evaluation
• Usability heuristics
– What are they?
– What a heuristic evaluation is
7
Q3: Usability testing
• Guidelines for conducting a think-aloud
• What a think-aloud is
• Krug on user testing (not covered in class)
8
Q3: Today’s class
• Principles of audio UIs
• UI metaphors (basics)
9
Q3: Mobile UIs
• Reading: Cui (what they did, high level
findings)
• How mobile devices are different
• Effects of mobility (at a high level)
• Responsive web design: what it is
10
Q3: Accessibility
• What accessibility is
• Types of disabilities covered in class (and
how to accommodate them)
• Assistive technology (screen readers and
magnifiers)
11
Q3: Today’s class
• Summary
• Using audio in UIs: when and how?
• UI metaphors
(whatever we get to today)
12
Today
• Summary of class topics
• Audio UI overview
• UI metaphors
13
Summary
• What have you learned from this class?
• What are the big ideas?
14
Big ideas
• Design methods
• Design principles
15
Design methods
• User-centered design process
• Research methods: interviews, affinity
diagrams, observation
• Ideation: sketching, storyboarding
• Prototyping
• Testing
User
research
Ideate
Prototype
Evaluate
Done!
16
Design principles
• Principles of visual design
– Grids, CARP, type rules, color theory
• Principles of interaction design
– Mapping, feedback, affordance
• Accessibility / universal design
17
The secret
• These principles can be applied across
many domains
– Designing audio
– Designing physical interfaces
– Designing databases
– Programming
–…
18
Quick example
• Designing for audio UIs
– What happens when we design for a device
with no screen?!
19
Case study: Roomba
20
Applying design principles to
audio feedback
21
Applying design principles to
audio feedback
• Contrast: major vs. minor key, tempo,
volume,
• Repetition: finding dead roomba
• Mapping: ascending, descending
• Feedback: button press boop
• Visibility: repeated light, beep
• Recognition vs. recall: speech
22
And finally…
Metaphors
23
What’s a metaphor?
Comparison between two things
Mountain of grading
24
Metaphors
• Metaphors: Use of concepts and
properties which are already familiar to the
user
• Usually interfaces that tie back to physical
artifacts
• Why are they useful?
Metaphors
• Why are they useful?
– Can help “jump start” user’s conceptual
models
– “Instant knowledge” about how to interact with
UI
– A way to introduce new technology
Common UI metaphors?
• Desktop computer
• Mouse -> eats stuff, scares people, makes
holes
• Inbox
• Facebook
– “Like”
– Poke
– Send gifts, post on walls
– Friends
27
Metaphor: Magic Cap 1994
• Desktop or hallway metaphor
– Information is on paper: letters, files, drawers,
roladex etc
“Skeuomorphism”
• Using visual identity
of a physical object to
convey a metaphor
29
Microsoft Bob, 1995
http://www.telecommander.com/pics/links/application%20software/microsoft/Microsoft_B
ob_1_0/Microsoft_Bob_1_0.htm
Microsoft Bob, 1995
Southwest Airlines
Examples of metaphors we see?
•
•
•
•
•
Desktop
Folders
Documents
Trash can/Recycle bin
Accessories:
– Calculator
– Clock
– Notepad
Shallow Metaphor
• Depth of the metaphor has to do with how
much of the metaphor you are capitalizing
on
• Shallow metaphors make use of the one
most recognizable aspects of something
– Example: Search dog (XP)
– Dogs are good at fetching things, so use
image of dog under search box
– But dogs do other things:
• Chew newspapers  eat files
• Not return object to you  share your search
with your friends
• Other ideas?
Broken/Inappropriate Metaphor
• Not informative, may just be
confusing
– Example: Use a cat (cats
don’t fetch on command!)
• Why is a paper clip talking to
me?
Mixed Metaphor
• When two or more different metaphors coexist
– May seem related, but not actually
– Can be confusing
• How do you eject a USB stick or CD in Mac OS X?
– Trashcan metaphor: put items you are
done with in the trashcan
– Empty trash when you are done
to delete them forever
– What happens when I drag my USB stick
to the trashcan?
What about Twitter’s metaphors?
When to use metaphor?
• Challenges:
– Cute vs. Functional
– Shallow, mixed, or broken metaphors make
understanding metaphors more difficult
– Can prematurely constrain interfaces
• But...with the right metaphor, learning
interfaces can be much easier
Metaphor Guidelines
• Do use metaphor sparingly, carefully, and respectfully.
• Do take metaphors far enough—but don’t take them
too far.
• Do make metaphors culturally appropriate.
• Do make metaphors brand appropriate.
• Do reinforce metaphors with visuals and media.
• Do test your metaphors.
Full list of Dos and Don’ts:
http://www.uxmatters.com/mt/archives/2008/10/themagic-of-metaphor.php
Good Examples of Metaphor
• Bump Top (CHI,
2006)
• http://www.youtube.
com/watch?v=M0O
DskdEPnQ
• Fold n’ Drop (UIST,
2004)
• http://www.youtube.
com/watch?v=VAW
nIGo9Kro
Activity (time permitting)
• Pair up with a partner
• Find examples of good and bad
metaphors on your mobile device
• Bonus: find examples of good/bad
audio design
41
Upcoming classes
• Thursday: quiz :(
• Tuesday: presentations :D
42
Q2 overview
•
•
•
•
•
Mean 85.6
Median 88.3
Max 106.7
Min 55.0
SD 15.2
• Up slightly from Q1, but spread is larger
43
110
106.7 106.7
100
100.0
98.3
96.7
93.3
90
90.0
88.3
88.3
85.0
80
80.0
78.3
76.7
75.0
70
68.3
66.7
66.7
60
0
5
10
15
20
44