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

Tunnel Bear example

Mail Chimp example

Authentic weather example

Stripe example

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

Expressing personality with motion

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

Personality type: calm, soft, reassuring

Aiming for: Calm, Soft, Reassuring

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

Quick tip on animating with blurs

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

The Penner Easing Equations can make some great defaults

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

Aiming for: Calm, Soft, Reassuring

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

Personality type: confident, stable, srong

Aiming for: Confident, Stable, Strong

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

Aiming for: Confident, Stable, Strong

Personality type: lively, energetic, friendly

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

Aiming for: Lively, Energetic, Friendly

Personality type: playful, fun, lighthearted

Aiming for: Playful, Fun, Lighthearted

Use: Bounces, shape morphs, squash and stretch

Greensock Ease Visualizer

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

Expressing personality with sound

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

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

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

Sound is a powerful brand differentiator

Earcons: an icon for the ears

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

Alerts and notifications (when our attention might be elsewhere)

Navigating space

Confirming actions

Marking positive moments

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

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

http://raisedbeaches.com/octave/

motionsound.io

How to find your personality?

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

Most importantly: talk to your customers

Designing Interface Animation designinginterfaceanimation.com