A presentation at An Event Apart San Francisco 2018 in in San Francisco, CA, USA by Val Head
DESIGNING MORE EXPRESSIVE PRODUCTS Val Head Design Advocate, Adobe Author, Designing Interface Animation
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
Aiming for: Calm, Soft, Reassuring
Use: opacity, soft blurs, small deltas, easing curves with gradual speed changes
transition: filter 200ms $ease-in-quad, opacity 150ms 50ms $ease-in-quad; blur opacity
(Some of) The Penner Easing Equations See them in action on easings.net
Aiming for: Calm, Soft, Reassuring
Aiming for: Calm, Soft, Reassuring !”#!$%&’”( !”#!)’&’”( !”#!$%)’&’”(
Aiming for: Confident, Stable, Strong
Use: Direct movements, straight lines, symmetrical ease-in-outs. Avoid blurs, bounces, and overshoots
Aiming for: Confident, Stable, Strong
Aiming for: Confident, Stable, Strong
Aiming for: Lively, Energetic, Friendly Use: Overshoots, anticipation, “snappy” easing curves.
Aiming for: Lively, Energetic, Friendly
Aiming for: Lively, Energetic, Friendly
Aiming for: Playful, Fun, Lighthearted
Use: Bounces, shape morphs, squash and stretch
Easing curves that aren’t cubic-beziers but some are still Penner easing equations too
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
The products we design today must connect with customers across different screen sizes, contexts, and even voice or chat interfaces. As such, we create emotional expressiveness in our products not only through visual design and language choices, but also through design details such as how interface elements move, or the way they sound. By using every tool at our disposal, including audio and animation, we can create more expressive products that feel cohesive across all of today's diverse media and social contexts.
In this session, Val will show how to harness the design details from different media to build overarching themes—themes that persist across all screen sizes and user and interface contexts, creating a bigger emotional impact and connection with your audience.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.