An Event Apart: “Building More Expressive Products”

Val Head speaking at An Event Apart Orlando 2018 on October 9, 2018

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.

Notes

  • Ways to be expressive in design:
    • Type, copy, color, 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
    • The Penner Easing Equations
    • Aiming for: Calm, Soft, Reassuring
      • Use: opacity, soft blurs, small deltas, easing curves with gradual speed changes
      • easeInSine, easeOutSine, easeInOutSine
      • easeInQuad, easeOutQuad, easeInOutQuad
      • Too much blur looks rough, ugly
    • Motion studies — matching motion to an organization’s personality
    • Aiming for: Confident, Stable, Strong
      • Use: Direct movements, straight lines, symmetrical ease-in-outs. Avoid blurs, bounces, and overshoots
      • easeInCubic, easeOutCubic, easeInOutCubic
      • easeInQuart, easeOutQuart, easeInOutQuart
    • Aiming for: Lively, Energetic, Friendly
      • Use: Overshoots, anticipation, “snappy” easing curves.
      • easeInBack, easeOutBack, easeInOutBack
    • Aiming for: Playful, Fun, Lighthearted
      • Use: Bounces, shape morphs, squash and stretch
      • Easing is easier/better to do with JavaScript than CSS
      • For morph, use SVG
  • Expressing personality with sound
    • The bigger the display, the less need for sound — “Designing Products with Sound” by Amber Case and Aaron Day
    • 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
    • Sound can lower the cognitive load on the user
    • Alerts and notifications (when our attention might be elsewhere)
    • Navigating space — Apple TV
    • Confirming actions — purchase in the App Store
    • Marking positive moments — completing items on to-do list
    • 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
  • 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
    • Think of a product as a person
    • Most importantly: talk to your customers