Design for Emotion
Humans have feelings, thoughts, and emotions — we all have them. Some of the best sites, apps, and experiences i’ve seen over the years have been designed for emotion — not simply performing a task but along the way they are coaxing a response. That reaction can be a simple ‘that’s cool’, could be a ‘wow’, or even provoke sobbing into your keyboard.
When film directors are crafting a scene they want their audience to feel something: fear, sorrow, empathy, something. They painstakingly choose the right lighting, sounds, location, set arrangement, and camera lenses to create a scene. In the film world this is known as ‘Mise-en-scène’ and is an integral part of the film aesthetic and feeling.
Now, you might be wondering how this might apply to digital design. Crafting emotional responses may not always be first of mind for the modern digital designer who often wants users to perform task A or task B. Of course this all depends on what we are designing for and the context. However, users are humans too! They are our audience — not just a demographic that happen to be using your site or app. We offer up our own ‘Mise-en-scène’ with UI elements, imagery, type, and interactivity, we create the mood and craft the entire user experience.
Examples from the digital world
Here are a few nice pieces of digital design that I feel offer a great experience to their users.
A Trip out to Sea
What sets this apart is the first person perspective the story is told from and the simplicity of the experience. The premise is simple, the character ends up overboard and you are placed in his shoes — use your scroll wheel to stay on the surface. You really feel like you are struggling to stay afloat, combine this the simple interactive mechanic — the sensation of getting tired, the sounds, the choking, the cold looking sea. Little UI moments hint at the character’s energy and your relationship to the surface. You feel fear, tired, despair and sorrow.
What’s the site for? It’s promoting marine clothing for Guy Cotton, through the lens of promoting safety at sea. They could have done another one page promo site that shows the features of the clothing and technical data on the waterproof material. Instead they told a story of how things can go wrong at sea, they took the user on an immersive experience that involved participation. It draws you in and makes you feel emotion, something more memorable and hopefully more meaningful.
Citymapper
A little more tactical example of how this app helps people navigate their city. There are a multitude of mapping apps out there and Citymapper stands out as one of the best partly due to being very use case driven. Where Citymapper injects some emotion is through some great features with a sprinkling of personality along the way. For example the ‘get me there’ feature enables users to start a step by step process of getting from A to B, little cues like vibrating when you should get off at a certain stop and changing design slightly with context (walking vs. on train) vastly help the user understand navigate.
It enables users to explore a city with confidence and makes it simple to use — addressing the feeling of fear/the unknown. Pair that power with personality — for example when using the get me home feature — ‘hoverboard’ is an option which triggers Marty McFly to jump on his hoverboard which you control using tilt on your device. Previous versions have included catapult mode / rocket mode. None of this is necessary of course, many people maybe asking why they took the time to implement these features, but these little things make it interesting and fun to use. Again a little bit of personality paired with strong features that address feelings go a long way in provoking an emotional response.
24 Hours of Happy
Another example of a great idea paired with a simple mechanic. In what other medium can you stream a 24 hour long music video?! When the user lands on the site the music video begins at the timezone in their location, with dancers performing along to the song, these dancers change out every few minutes, and no two are alike. The idea itself is delightful, 24 hours of happy!
Users can drag the circular UI scrubber to jump around the 24 hr video — the UI represents a 24 hr clock — nice, or by clicking next. This simple interaction model encourages exploration, by dragging around you get a preview of the scene you might see — at the top of the hour Pharrell makes an appearance (or you can use the P button), and there are a whole host of cameos from people like Magic Johnson in his trophy room and Jamie Foxx with his daughter. The experience draws you in and lets the user explore and discover the content — no lengthy intro video / copy to explain — and each time you launch the site you are likely to see something new.
They could have simply put the whole 24 hr long video up on YouTube, or implemented a simple ‘regular’ scrubber. But they had the vision to create something new, which leveraged the medium, injected a fun and exploratory mechanic — in short the whole experience makes you smile, might even make you feel happy.
Paper Planes
A great example for Google and a way for people to have fun during the 2016 I/O event. Another simple premise — allow people to throw and catch airplanes from all over the world — best viewed on mobile. After the short intro you place a stamp and fold your plane using the drag mechanic, the user is then prompted to rotate their phone and mimic throwing a paper plane! You have to get it just right, but when you do your device buzzes and you get a ‘wheee’ noise — awesome right? Once you have released your plane, you can catch others and place your stamp on them — a little net appears and, you guessed it, you have to shake your phone to mimic catching something in a net. When you catch a plane your device vibrates and you get to reveal where the plane has been — place you stamp — and release it again.
What I love about this experience is the elegance and utilization of the user’s device in the interactivity. You can’t help but smile at the unexpected behaviors, gesture based interactivity, simplicity — all with a playful personality. In its original release for Google, you can’t help feel that on a brand level it promotes positive vibes for Google; the experience is simple, delightful and technologically advanced — all attributes we know and love the brand for. We’ve all seen these type of ‘concept’ where users can create something and pass it on, what sets this apart is the personality and technology all which provokes feelings of wonder and delight.
Why is designing for emotion important?
You might be asking — why does it matter? I’ll refer to this small chart which is a reinterpretation of Mazlo’s hierarchy of needs. You’ve probably seen it before, in many guises, essentially you could see this chart as a guide for whatever product / site you might be working on.
At the bottom is the baseline characteristic of functionality — does it work, does it do the thing it’s supposed to do? Then we have reliability — does the thing work reliably, without errors, is it fast? After this we have usability — is it usable, easy to use, is it use case driven? Then we have the final two, the hardest to reach, pleasurable and meaningful. So is our experience pleasurable to use, does it put a smile on your face, is it engaging, fun? And finally, meaningful — does it offer meaning to the user, does it provoke emotion?
This is the line that not many digital products / sites cross — it can often be a struggle, once that MVP is made, to keep pushing to make your offering not only a joy to use, but to offer meaning. This is the hallowed ground that few tread: if users connect with your design, site, experience, or product on an emotional level it makes them want to use it, remember it, and maybe even love it.
In summary
One of the main reasons I love the interactive medium is because almost anything is possible, we have audio, visual, VR, interactivity all at our fingertips. But it’s the interactivity that sets it apart, and if you put your mind to it, you could design almost anything. Increasingly designers are taking the easy road, playing it safe and just about designing usable experiences. You don’t have to go crazy, but some thoughtfulness and vision will go a long way:
Ask yourself: Is this experience a pleasure to use, does it offer meaning, does it provoke an emotion?
After all we call it human centered design for a reason. If you want to create something memorable, inspiring, and meaningful tapping into emotion provokes a powerful response, and can lift even the simplest of experiences into something people love to use.
