CS 4963: UI Design
Interaction Design, Part 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
…so not a lot of images today.
design 1 to 2 iterations ahead
hardening iteration
(From Budwig, Jeong, Kelkar.)
story team is important
(everyone is figuring it out)
most important is having overall vision
SKETCHING AND PROTOTYPING
sketching is brainstorming
prototypes are interactive
“I can always animate that interaction faster than you can code it.”
—Chris Bernard, Microsoft UX Evangelist
thinking visually
low-fi vs. high-fi
sketching notations
doesn’t have to be on paper
participatory design
(choose your own adventure)
ideally want to carry over things
styles and resources
THERE ARE A LOT OF THEM
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
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
pick what’s appropriate to your project
processing.org& variants
if you’re making a web page, prototype in markup
jQuery, et al.ixedit
documentation is communication
think about the why
do what makes sense
old school: giant spec docs
detailed lists of assets on each screen
actions for every interactive element
states for screens and app
transitions between all states
all kept in a change-tracked word doc (or
series of PDFs)
new school: living documents!
still needs most of the same information
focus on patterns
show can be better than tell
what does your technology support for inline ixd patterns/documentation?
(pixelnovel = psd + svn)http://www.pixelnovel.com/
(dropbox = fileshare + versioning)
http://www.getdropbox.com/tour
how do you want to document?
screenshare/screencast can be
faster
comments and feedback
whatever works for your project
keep feedback manageable by sorting, organizing, or landmarking
remember( be fast! )
?
documentation is communication
now you know what to expect
ask your designers
For next time…
1. Next time is spring break.
2. Readings for next lesson: on the class blog.(May have guest lecturer.)
Contact Us
Matthias [email protected]
Jason [email protected]
http://huah.net/cs4963