Page 1
CS 4963: UI Design
Interaction Design, Part 2
Page 2
Today:
• What is Interaction Design, anyways?• How do we do interaction design?– Fundamentals and Building Blocks– Heuristics and Patterns
• Wrap up Agile UX• Deliverables and practices• Documentation
Page 6
…so not a lot of images today.
Page 8
design 1 to 2 iterations ahead
Page 9
hardening iteration
Page 10
(From Budwig, Jeong, Kelkar.)
Page 12
story team is important
Page 13
(everyone is figuring it out)
Page 14
most important is having overall vision
Page 15
SKETCHING AND PROTOTYPING
Page 16
sketching is brainstorming
Page 17
prototypes are interactive
Page 18
“I can always animate that interaction faster than you can code it.”
—Chris Bernard, Microsoft UX Evangelist
Page 20
thinking visually
Page 21
low-fi vs. high-fi
Page 22
sketching notations
Page 23
doesn’t have to be on paper
Page 25
participatory design
Page 29
(choose your own adventure)
Page 31
ideally want to carry over things
Page 32
styles and resources
Page 35
THERE ARE A LOT OF THEM
Page 36
shootout of prototyping tools
htt
p:/
/ww
w.s
lidesh
are
.net/
suze
ingra
m/s
poilt
-for-
choic
e-w
hic
h-p
roto
typin
g-t
ool-
is-r
ight-
for-
you
Page 37
shootout of prototyping tools
htt
p:/
/ww
w.s
lidesh
are
.net/
suze
ingra
m/s
poilt
-for-
choic
e-w
hic
h-p
roto
typin
g-t
ool-
is-r
ight-
for-
you
shootout of prototyping tools
Page 38
pick what’s appropriate to your project
Page 40
processing.org& variants
Page 41
if you’re making a web page, prototype in markup
Page 42
jQuery, et al.ixedit
Page 44
documentation is communication
Page 45
think about the why
Page 46
do what makes sense
Page 47
old school: giant spec docs
Page 49
detailed lists of assets on each screen
Page 50
actions for every interactive element
Page 51
states for screens and app
Page 52
transitions between all states
Page 54
all kept in a change-tracked word doc (or
series of PDFs)
Page 56
new school: living documents!
Page 58
still needs most of the same information
Page 59
focus on patterns
Page 62
show can be better than tell
Page 64
what does your technology support for inline ixd patterns/documentation?
Page 66
(pixelnovel = psd + svn)http://www.pixelnovel.com/
Page 67
(dropbox = fileshare + versioning)
http://www.getdropbox.com/tour
Page 72
how do you want to document?
Page 75
screenshare/screencast can be
faster
Page 77
comments and feedback
Page 85
whatever works for your project
Page 86
keep feedback manageable by sorting, organizing, or landmarking
Page 87
remember( be fast! )
?
Page 91
documentation is communication
Page 92
now you know what to expect
Page 93
ask your designers
Page 96
For next time…
1. Next time is spring break.
2. Readings for next lesson: on the class blog.(May have guest lecturer.)
Page 97
Contact Us
Matthias [email protected]
Jason [email protected]
http://huah.net/cs4963