Designing More Expressive Products (with Motion and Sound)

Slide 1

DESIGNING MORE EXPRESSIVE PRODUCTS Val Head Design Advocate, Adobe Author, Designing Interface Animation

Slide 2

Tunnel Bear example

Slide 3

Mail Chimp example

Slide 4

Authentic weather example

Slide 5

Stripe example

Slide 6

Ways to be expressive in design: T ype, Copy, Colour, Layout, Motion, Sound…

Slide 7

Expressing personality with motion

Slide 8

How we style animation: • Through our easing choices (ease-in, ease-out, ease-in-out, bounce, springs…) • Duration values, offsets • The properties we animate

Slide 9

Personality type: calm, soft, reassuring

Aiming for: Calm, Soft, Reassuring

Use: opacity, soft blurs, small deltas, easing curves with gradual speed changes

Slide 10

Slide 11

Quick tip on animating with blurs

transition: filter 200ms $ease-in-quad, opacity 150ms 50ms $ease-in-quad; blur opacity

Slide 12

The Penner Easing Equations can make some great defaults

(Some of) The Penner Easing Equations See them in action on easings.net

Slide 13

Slide 14

Aiming for: Calm, Soft, Reassuring

Slide 15

Aiming for: Calm, Soft, Reassuring !”#!$%&’”( !”#!)’&’”( !”#!$%)’&’”(

Slide 16

Personality type: confident, stable, srong

Aiming for: Confident, Stable, Strong

Use: Direct movements, straight lines, symmetrical ease-in-outs. Avoid blurs, bounces, and overshoots

Slide 17

Slide 18

Aiming for: Confident, Stable, Strong

Slide 19

Aiming for: Confident, Stable, Strong

Slide 20

Personality type: lively, energetic, friendly

Aiming for: Lively, Energetic, Friendly Use: Overshoots, anticipation, “snappy” easing curves.

Slide 21

Slide 22

Aiming for: Lively, Energetic, Friendly

Slide 23

Aiming for: Lively, Energetic, Friendly

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Personality type: playful, fun, lighthearted

Aiming for: Playful, Fun, Lighthearted

Use: Bounces, shape morphs, squash and stretch

Slide 30

Slide 31

Greensock Ease Visualizer

Easing curves that aren’t cubic-beziers but some are still Penner easing equations too

Slide 32

Expressing personality with sound

Slide 33

Slide 34

Slide 35

Size of physical display Importance of auditive & tactile display Source: Designing Products with Sound, Amber Case & Aaron Day, O’Reilly

Slide 36

When sound is annoying: • Not appropriate for the situation • Played at the wrong time • Too loud • Lack of user control

Slide 37

What sound can offer design (with or without visual UI)

Slide 38

Slide 39

Slide 40

Sound is a powerful brand differentiator

Slide 41

Slide 42

Slide 43

Earcons: an icon for the ears

Slide 44

developer.blackberry.com/design/bb10/earconography.html

Slide 45

Alerts and notifications (when our attention might be elsewhere)

Slide 46

Slide 47

Navigating space

Slide 48

Slide 49

Confirming actions

Slide 50

Slide 51

Slide 52

Marking positive moments

Slide 53

Slide 54

Best practices for UI sounds: • UI sounds should be short, < 400ms • End on an ascending interval for positive feedback or beginnings • End on a descending interval for negative feedback, ending, or closing • Give the user controls to stop/customize

Slide 55

Emotional effects of intervals: Consonant intervals Pleasant, positive Dissonant intervals Strong, active, negative Large intervals Powerful Octave Lightheartedness howmusicreallyworks.com/Pages_Chapter_4/4_4.html

Slide 56

Slide 57

http://raisedbeaches.com/octave/

Slide 58

motionsound.io

Slide 59

How to find your personality?

Slide 60

Defining a product’s personality: • What is it trying to help users accomplish? • What is it like? Mood and disposition • What does it know? What is its area of expertise

Slide 61

Slide 62

Most importantly: talk to your customers

Slide 63

Slide 64

Designing Interface Animation designinginterfaceanimation.com