CS 4963: UI Design Interaction Design, Part 2. Today: What is Interaction Design, anyways? How do we do interaction design? – Fundamentals and Building.

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

(pixelnovel = psd + svn)http://www.pixelnovel.com/

(dropbox = fileshare + versioning)

http://www.getdropbox.com/tour

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.)

Contact Us

Matthias [email protected]

Jason [email protected]

http://huah.net/cs4963