Embed Size (px)
DESCRIPTION
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. BUT FIRST. …so not a lot of images today. - PowerPoint PPT Presentation
Citation preview
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
BUT FIRST
…so not a lot of images today.
agile ux
design 1 to 2 iterations ahead
hardening iteration
(From Budwig, Jeong, Kelkar.)
(not yet right.)
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
sketching
thinking visually
low-fi vs. high-fi
sketching notations
doesn’t have to be on paper
video sketches
participatory design
design jams
prototyping
paper prototypes
(choose your own adventure)
code prototypes
ideally want to carry over things
styles and resources
animation (!!!)
tools
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
I <3 SketchFlow
processing.org& variants
if you’re making a web page, prototype in markup
jQuery, et al.ixedit
DOCUMENTATION
documentation is communication
think about the why
do what makes sense
old school: giant spec docs
each screen
detailed lists of assets on each screen
actions for every interactive element
states for screens and app
transitions between all states
etc.
all kept in a change-tracked word doc (or
series of PDFs)
new school: ?
new school: living documents!
guess what?
still needs most of the same information
focus on patterns
common elements
common behaviors
show can be better than tell
how to record?
what does your technology support for inline ixd patterns/documentation?
version control
word doc
wiki
blog
bliki?
how do you want to document?
lots of images
walkthroughs
screenshare/screencast can be
faster
( be fast! )
comments and feedback
…from whom?
timestamps
design decisions
DESIGN DECISIONS
design journal
time-based?
feature-based?
whatever works for your project
keep feedback manageable by sorting, organizing, or landmarking
remember( be fast! )
?
be detailed
detailed enough
be clear
documentation is communication
now you know what to expect
ask your designers
that’s it.
CLASS PROJECT
For next time…
1. Next time is spring break.
2. Readings for next lesson: on the class blog.(May have guest lecturer.)
