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 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 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 Shapiromatthias.shapiro@gmail.com
Jason AldermanJason.alderman@utah.edu
http://huah.net/cs4963