An Event Apart: Building More Expressive Products
At An Event Apart Chicago 2018, Val Head, Designer Advocate at Adobe, argues that we should know our product’s personality then use the tools at our disposal to convey that. Here are my notes and to-dos.
- Some websites and apps really clearly know which type of personality they are and use all aspects of their design to express this.
- Some personality types: friendly, irreveverant, or smart, knowledgeable friend.
- TunnelBear, Mailchimp, Authentic Weather, Stripe.
- We can express personality with motion through easing choices, duration values and offsets, and the properties we animate.
- Easing functions specify the rate of change of a parameter over time. Use Penner Easing Curves as a reference for quick-start animations.
- Calm, Soft, Subtle can be achieved though opacity fades, small scales, easing curves with gradual speed changes
- Confident, Stable, Strong can be achieved though direct movements, straight lines, symmetrical ease-in-outs and by avoiding blurs, bounces, and overshoots.
- Lively, Energetic, Friendly can be achieved though overshoots, anticipation, “snappy” easing curves.
- Playful, Fun, Lighthearted can be achieved though bounces, shape morphs, squash and stretch.
- We can express personality with sound but must take care to do it appropriately and to give the user control.
- Calm app for meditation uses combined sound and animation that gives the feeling of breathing deeply.
- Slack employ Earcons: icons for your ears (e.g. Slack notifications).
- Think about your product’s personality: what is it trying to help users accomplish? What is its mood and disposition? What is its area of expertise? Think of words to describe what it is and what it is not.
My next actions
- Introduce motion into my sites/workflow. Try it with hover states, navigation, CTA buttons, illustrated elements. Use easings.net and GreenSock‘s Ease Visualiser for easing references.
- Use the website calm.com for reference.
- Sound: try to introduce it subtly and effectively, e.g. in alerts and notifications, for confirming actions (think payment using Apple touch), marking positive moments, animated elements. See Blackberry‘s guidelines
- Try the sounds from these UI sound libraries: 8ve (free) and motionsound.io (commercial)
training, roadtrips, animation, sound