Building More Expressive Products by Val Head
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.
I’m going to attempt to live blog her talk. Here goes…
This is about products that intentionally express personality. When you know what your product’s personality is, you can line up your design choices to express that personality intentionally (as opposed to leaving it to chance).
Tunnel Bear has a theme around a giant bear that will product you from all the bad things on the internet. It makes a technical product very friendly—very different from most VPN companies.
Mailchimp have been doing this for years, but with a monkey (ape, actually, Val), not a bear—Freddie. They’ve evolved and changed it over time, but it always has personality.
But you don’t need a cute animal to express personality. Authentic Weather is a sarcastic weather app. It’s quite sweary and that stands out. They use copy, bold colours, and giant type.
Personality can be more subtle, like with Stripe. They use slick animations and clear, concise design.
Being expressive means conveying personality through design. Type, colour, copy, layout, motion, and sound can all express personality. Val is going to focus on the last two: motion and sound.
Expressing personality with motion
Animation can be used to tell your story. We can do that through:
- Easing choices (ease-in, ease-out, bounce, etc.),
- Duration values, and offsets,
- The properties we animate.
Here are four personality types…
Calm, soft, reassuring
You can use opacity, soft blurs, small movements, and easing curves with gradual changes. You can use:
- scale + fade,
- blur + fade,
- blur + scale + fade.
Pro tip for blurs: the end of blurs always looks weird. Fade out with opacity before your blur gets weird.
You can use Penner easing equations to do your easings. See them in action on easings.net. They’re motion graphs plotting animation against time. The flatter the curve, the more linear the motion. They have a lot more range than the defaults you get with CSS keyword values.
For calm, soft, and reassuring, you could use
easeInOutQuad. But that’s like saying “you could use dark blue.” These will get you close, but you need to work on the detail.
Confident, stable, strong
You can use direct movements, straight lines, symmetrical ease-in-outs. You should avoid blurs, bounces, and overshoots. You can use:
- quick fade,
- scale + fade,
- direct start and stops.
You can use Penner equations like
Lively, energetic, friendly
You can use overshoots, anticipation, and “snappy” easing curves. You can use:
- overshoot + scale,
- anticipation + overshoot
To get the sense of overshoots and anticipations you can use easing curves like
easeInOutBack. Those aren’t the only ones though. Anything that sticks out the bottom of the graph will give you anticipation. Anything that sticks out the top of the graph will give you overshoot.
If cubic bezier curves don’t get you quite what you’re going for, you can add keyframes to your animation. You could have keyframes for: 0%, 90%, and 100% where the 90% point is past the 100% point.
Stripe uses a touch of overshoot on their charts and diagrams; nice and subtle. Slack uses a bit of overshoot to create a sense of friendliness in their loader.
Playful, fun, lighthearted
You can use bounces, shape morphs, squashes and stretches. This is probably not the personality for a bank. But it could be for a game, or some other playful product. You can use:
- squash and stretch (springs.
The easing curve for elastic movement is more complicated Penner equation that can’t be done in CSS. GreenSock will help you visual your elastic easings. For springs, you probably need a dedicated library for spring motions.
Expressing personality with sound
We don’t talk about sound much in web design. There are old angry blog posts about it. And not every website should use sound. But why don’t we even consider it on the web?
We were burnt by those terrible Flash sites with sound on every single button mouseover. And yet the Facebook native app does that today …but in a much more subtle way. The volume is mixed lower, and the sound is flatter; more like a haptic feel. And there’s more variation in the sounds. Just because we did sound badly in the past doesn’t mean we can’t do it well today.
People say they don’t want their computers making sound in an office environment. But isn’t responsive design all about how we don’t just use websites on our desktop computers?
Amber Case has a terrific book about designing products with sound, and she’s all about calm technology. She points out that the larger the display, the less important auditive and tactile feedback becomes. But on smaller screens, the need increases. Maybe that’s why we’re fine with mobile apps making sound but not with our desktop computers doing it?
People say that sound is annoying. That’s like saying siblings are annoying. Sound is annoying when it’s:
- not appropriate for the situation,
- played at the wrong time,
- too loud,
- lacks user control.
But all of those are design decisions that we can control.
So what can we do with sound?
Sound can enhance what we perceive from animation. The “breathe” mode in the Calm meditation app has some lovely animation, and some great sound to go with it. The animation is just a circle getting smaller and bigger—if you took the sound away, it wouldn’t be very impressive.
Sound can also set a mood. Sirin Labs has an extreme example for the Solarin device with futuristic sounds. It’s quite reminiscent of the Flash days, but now it’s all done with browser technologies.
Sound is a powerful brand differentiator. Val now plays sounds (without visuals) from:
- Outlook Calendar.
They have strong associations for us. These are earcons: icons for the ears. They can be designed to provoke specific emotions. There was a great explanation on the Blackberry website, of all places (they had a whole design system around their earcons).
Here are some uses of sounds…
Alerts and notifications
You have a new message. You have new email. Your timer is up. You might not be looking at the screen, waiting for those events.
Apple TV has layers of menus. You go “in” and “out” of the layers. As you travel “in” and “out”, the animation is reinforced with sound—an “in” sound and an “out” sound.
When you buy with Apple Pay, you get auditory feedback. Twitter uses sound for the “pull to refresh” action. It gives you confirmation in a tactile way.
Marking positive moments
This is a great way of making a positive impact in your user’s minds—celebrate the accomplishments. Clear—by Realmac software—gives lovely rising auditory feedback as you tick things off your to-do list. Compare that to hardware products that only make sounds when something goes wrong—they don’t celebrate your accomplishments.
Here are some best practices for user interface sounds:
- UI sounds be short, less than 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 top or customise the sound.
When it comes to being expressive with sounds, different intervals can evoke different emotions:
- Consonant intervals feel pleasant and positive.
- Dissonant intervals feel strong, active, or negative.
- Large intervals feel powerful.
- Octaves convey lightheartedness.
People have made sounds for you if you don’t want to design your own. Octave is a free library of UI sounds. You can buy sounds from motionsound.io, targetted specifically at sounds to go with motions.
Let’s wrap up by exploring where to find your product’s personality:
- What is it trying to help users accomplish?
- What is it like? (its mood and disposition)
You can workshops to answer these questions. You can also do research with your users. You might have one idea about your product’s personality that’s different to your customer’s. You need to project a believable personality. Talk to your customers.
Designing for Emotion has some great exercises for finding personality. Conversational Design also has some great exercises in it. Once you have the words to describe your personality, it gets easier to design for it.
So have a think about using motion and sound to express your product’s personality. Be intentional about it. It will also make the web a more interesting place.
There’s nothing quite so tedious as blogging about blogging, but I came across a few heart-warming thoughts recently that it would be remiss of me to let go unremarked, so please indulge me for a moment as I wallow in some meta-blogging.
Marco Arment talks about the trend that many others have noticed, of personal publishing dying out in favour of tweeting:
Too much of my writing in the last few years has gone exclusively into Twitter. I need to find a better balance.
As he rightly points out:
Twitter is a complementary medium to blogging, but it’s not a replacement.
Twitter and Waxy Links cannibalized all the smaller posts, and as my reach grew, I started reserving blogging for more “serious” stuff — mostly longer-form research and investigative writing.
Well, fuck that.
Someone made an analogy that describes social networks very well. Facebook is your neighborhood, Twitter is your local bar, and your blog is your home. (I guess Instagram is the cafe? “Look what I’m eating!”)
This made me realized I’m neglecting my home. My posts and photos are spread out on different networks and there is no centralized hub.
That reminds me of what Frank said about his site:
In light of the noisy, fragmented internet, I want a unified place for myself—the internet version of a quiet, cluttered cottage in the country.
- If it’s a paragraph, it’s a post.
- Negotiate a comfort zone.
- Traffic is irrelevant.
- Simplify, simplify.
- Ask for trusted collaborator feedback.
- Have fun.
Indie Web Camp UK 2014
It was a problem because I’m no good at multi-tasking, and I focused all my energy on dConstruct (it more or less dominated my time for the past few months). That meant that something had to give and that something was the organising of Indie Web Camp.
The event itself went perfectly smoothly. All the basics were there: a great venue, a solid internet connection, and a plan of action. But because I was so focused on dConstruct, I didn’t put any time into trying to get the word out about Indie Web Camp. Worse, I didn’t put any time into making sure that a diverse range of people knew about the event.
So in the end, Indie Web Camp UK 2014 was quite a homogenous gathering. That’s a real shame, and it’s my fault. My excuse is that I was busy with all things dConstruct, but that’s just that; an excuse. On the plus side, the effort I put into making dConstruct a diverse event paid off, but I’ll know better in future than to try to organise two back-to-back events. I need to learn to delegate and ask for help.
But I don’t want to cast Indie Web Camp in a totally negative light (I just want to acknowledge how it could have been better). It was actually pretty great. As with previous events, it was remarkably productive. The format of one day of talks, followed by one day of hacking is spot on.
I’m looking forward to switching my website over to
https://but I’m not going to do it until the potential pain level drops.
Well, I’m afraid that potential pain level has not dropped. In fact, I can confirm that get TLS working is massive pain in the behind. But on the first day of Indie Web Camp, Tim Retout led a session on security and offered up his expertise for day two. I took full advantage of his generous offer.
With Tim’s help, I was able to get adactio.com all set. If I hadn’t had his help, it probably would’ve taken me days …or I simply would’ve given up. I took plenty of notes so I could document the process. I’ll write it up soon, but alas, it will only be useful to people with the same kind of hosting set up as I have.
By the end of Indie Web Camp, thanks to Tim’s patient assistance, quite a few people has switched on TSL for their sites. The https page on the Indie Web Camp wiki is turning into quite a handy resource.
I was in Düsseldorf last week, alas just a little too late to catch any of the talks at Beyond Tellarrand …which is a shame, because it looks like Maciej’s talk was terrific. Fortunately, I did get to see a lot of people who were in town for the event, and myself and Maciej were both participating in Decentralize Camp the day after Beyond Tellerrand.
Decentralize Camp had a surprisingly broad scope. As Maciej pointed out during his presentation, there are many different kinds of decentralization.
For my part, I was focusing specifically on the ideas of the indie web. I made it very clear from the outset that was my own personal take. A lot of it was, unsurprisingly, rooted in my relentless obsession with digital preservation and personal publishing. I recapped some of what I talked about at last year’s Beyond Tellerrand before showing some specific examples of the indie web at work: IndieAuth, webmentions, etc.
I realised that my motivations were not only personal, but downright selfish. For me, it’s all about publishing to my own site. That attitude was quite different to many of the other technologies being discussed; technologies that explicitly set out to empower other people and make the world a better place.
Now, don’t get me wrong, I must admit that one of the reasons why I write and talk about the indie web is that in the back of my mind, I’m hoping others will be encouraged to publish on their own websites instead of (or as well as) giving their creative work to third-party sites. As I’ve said before:
…on today’s web of monolithic roach-motel silos like Facebook and Twitter, I can’t imagine a more disruptive act than choosing to publish on your own website.
That said, I’m under no illusions that my actions will have any far-reaching consequences. This isn’t going to change the world. This isn’t going to empower other people (except maybe people who already tech-savvy enough to empower themselves). I’m okay with that.
At Decentralize Camp, I helped Michiel B. de Jong to run a session on IndieMark, a kind of tongue-in-cheek gamification of indie web progress. It was fun. And that’s an important factor to remember in all this. In fact, it’s one of the indie web design principles:
Have fun. Remember that GeoCities page you built back in the mid-90s? The one with the Java applets, garish green background and seventeen animated GIFs? It may have been ugly, badly coded and sucky, but it was fun, damnit. Keep the web weird and interesting.
During the session, someone asked why they hadn’t heard of all this indie web stuff before. After all, if the first indie web camp happened in 2011, shouldn’t it be bigger by now?
That’s when I realised that I honestly didn’t care. I didn’t care how big (or small) this group is. For me, it’s just a bunch of like-minded people helping each other out. Even if nobody else ever turns up, it still has value.
I have to admit, I really don’t care that much about the specific technologies being discussed at indie web camps: formats, protocols, bits of code …they are less important than the ideas. And the ideas are less important than the actions. As long as I’m publishing to my website, I’m pretty happy. That said, I’m very grateful that the other indie web folks are there to help me out.
Mostly though, my motivations echo Mandy’s:
No one owns this domain but me, and no one but me can take it down. I will not wake up one morning to discover that my service has been “sunsetted” and I have some days or weeks to export my data (if I have that at all). These URLs will never break.
Voice of the bot-hive
Creating telephone answering systems can be fun as I discovered at History Hack Day when I put together the Huffduffer hotline using the Tropo API. There’s something thrilling about using the human voice as an interface on your loosely joined small pieces. Navigating by literally talking to a machine feels simultaneously retro and sci-fi.
I think there’s a lot of potential for some fun services in this area. What a shame then that the technology has mostly been used for dreary customer service narratives:
Horrific glimpse of a broken future. I sniffed while a voice activated phone menu was being read out and it started from the beginning again.
There’s been a lot of talk lately about injecting personality into web design, often through the tone of voice in the microcopy. When personality is conveyed in the spoken as well as the written word, the effect is even more striking.
Have a listen for yourself by calling:
That’s the number for Customer Service Romance:
What happens when Customer Service bots start getting too smart? What if they start needing help too? How would they use the tools at their disposal to reach out to those they care about? What if they start caring about us a little too much?
The end result is amusing …but also slightly disconcerting. You may find yourself chuckling, but your laughter will be tinged with nervousness.
On the face of it, it’s an amusing little art project. But it’s might also be a glimpse of an impending bot-driven algorithmpocalypse.