Meaningful Motion in UI DesignAdrian Zumbrunnen / @azumbrunnen_

Flow

– Mihaly Csikszentmihalyi

The holistic experience that people feel when they act with total involvement.

“

Aiming for delight is not enough.It’s about creating smart interactions

Thinking in spatial terms

our perception of the world

spatial orientation

spatial orientation

The story continues off-screen

Write App

Elements Of Meaningful Transitions

Orientation

Moving from one information space to another takes a certain amount of time.

Motion is not a detail. It makes or breaks the experience.

Motion creates orientation through relationships.

http://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design

http://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design

“What’s your plan after chatbots take over, and designers are no longer needed?”

Raphael Leiteriz

Director Product Management Google

“Fire you!”

Motion creates orientationTakeaway:

Responsiveness

Elements Of Meaningful Transitions

anticipatory techniques

optimistic action: twitter

interactive animation

fade / reveal

Progressive disclosure

Good animation is responsive and tells a storyTakeaway:

Time

Elements Of Meaningful Transitions

Spatial time perception

🙃

Spatial time perception

Duration interpretation

The sweet spot

If motion slows down the experience, you’re doing it wrong

Motion affects time perceptione=mc2

Duration adds significanceTakeaway:

Easing

Elements Of Meaningful Transitions

– Laurian Gridinoc, Creative Technologist

Out of all hand-throwable things, socks have the most unpredictable trajectory.

“

adapted from Pasquale D’Silva

Linear computer garbage

Animation curves

💩

Animation curves

Animation curves

If the motion curve isn’t right, the animation won’t delight.

Focus in motion

If the motion curve isn’t right, the animation won’t delight.

Takeaway:

Personality

Elements Of Meaningful Transitions

OS X Aqua

animation as rewards

facebook paper

facebook paper

https://dribbble.com/shots/1901531-Loading?list=users&offset=1

personality isn’t the experience. it enhances it.

Takeaway:

Meaningful Motion in UI DesignAdrian Zumbrunnen / @azumbrunnen_

Orientation

Placebo choices

Why moments matter

The importants of sequence

Default behaviors

Orientation

Responsiveness

Why moments matter

The importants of sequence

Default behaviors

Orientation

Responsiveness

Time

The importants of sequence

Default behaviors

Orientation

Responsiveness

Time

Easing

Default behaviors

Orientation

Responsiveness

Time

Easing

Personality

Meaningful Motion in UI DesignAdrian Zumbrunnen / @azumbrunnen_

Takeaway:

Thanks!Let’s keep the good times rolling.

I tweet about design and UX @azumbrunnen_