I once worked for a client where I was the only Designer on the team and the only female involved in building the product. The client was obsessed with integrating ‘social.’ Despite my general dislike of arbitrary social functions, they were adamant it had to happen so I moved ahead with creating a heart icon to represent a ‘Like’ function. It was a small piece of a much larger UI redesign so I assumed it would be glossed over and I could focus on fighting the bigger battles.
I tested various animations for the action and a few hours later, the heart icon was axed by a developer. When further questioned, I found out that someone on the team decided it was too feminine (i.e. too tied to our emotions) and a man wouldn’t want to click on it.
My colleague’s refusal to add an emotionally-associated action to the app is a symptom of a pervasive obsession in the tech industry. The visual trend in interface design occasionally mimics interfaces out of past science fiction T.V. shows and movies. This is somewhat fair; the Designers who’ve spent their childhoods absorbing this media are now adults designing interfaces. We have been bombarded with imagery all the way back from the 70’s (albeit less frequent then) and this trend still persists today.
This visual concept was seemingly fully formed towards the end of the 90s. Design aesthetics became systems of mathematically arranged lines, geometric shapes, numbers and cold colour palettes. All interfaces were stripped of humanistic elements aside from the occasional AI human face.
In this dream from the 90’s, we hoped for a world where every computer knows us personally. We would wake up to them, have them around us all day, and they would be the last thing we interact with before we go to sleep. They would predict our needs and wants and all interfaces would (feel) as natural as having a conversation with a friend. Technology would become our primary means (or only means) of communication and we would form relationships with these objects which take care of us.
In other words, we’re expected to translate our emotions through emotionless interfaces.
All humans are capable of emotional depth. While emotions are influenced by culture, emotions themselves are universal. We use things because they are functional but we become attracted and attached to them because of how they make us feel.
Serving a need and having the user achieve what they need to do simply and quickly is only the first step. Now begins the pursuit of delight and this is what distinguishes good design from great design.
In Frank Chimero’s, “The Shape of Design” he writes (emphasis mine),
The warmth and exuberance of communication and the accommodation to the audience necessitated by delightful design also makes it easier for the audience to spot the presence of the designer in the work. The work becomes more humanized in its tone and effect, so it becomes easy to see there are people behind it.
Although technology has come a long way, it has not replaced face-to-face communication—we still need assurance that there is someone on the other side. While many users may not notice one or two details in a UI, they can feel the accumulation of those efforts.
So, what tools do we have at our disposal? Designers can look beyond basic aesthetics to embed personality. Let’s take a look at sound, animation, and copy.
Sound affects us physiologically, psychologically, cognitively, and behaviourally. While we are still discovering ways sound can be applied to application interfaces, there is an industry we can look to which has mastered the use of sound to provoke emotion—the gaming industry.
Journey is an indie video game showcasing a masterful use of sound. Austin Wintory, the game’s composer, based all the pieces on one theme which represented the player’s journey. The music dynamically responds to the user’s actions giving them immediate and personable feedback. The game designers’ efforts were rewarded with critical acclaim with many players describing it as “moving” or “religious.” Patrick Shaw, from Wired said the game made him feel a “wide range of emotions… wonder, fear, even sadness.”
While application interfaces probably don’t need to make use of immersive soundtracks, the addition of sound effects can add to a user’s experience (provided they have the option to opt-out.) Apps like “Clear”↗︎ and “Duolingo”↗︎ added cheery and triumphant sound effects to their completion actions. These sounds are a recognition of the user’s success and reinforces the visual mark of a, typically green, success state.
In UI design, we are afforded the luxury of using animation as a way to differentiate our products and interfaces from static billboards. When animation in a UI mimics movement we see in the natural world, we feel comfortable with it. Because we create emotional bonds to our physical environments, when we see this replicated in other mediums, we feel it’s more personable.
Pixar is one of the most successful animation studios of all time. They are at the forefront of their industry; masters at blending animation with human emotions. At Disney’s D23 Event in 2011, the Pixar Team panel was asked, “Is there one element in every Pixar film that makes a Pixar film a “special” film or “different” from any other film?” John Lasseter replied,
It’s the feeling you also got from the old Walt Disney films, like the feeling you got when Dumbo visits his mother who’s locked up, or when Bambi’s mother is killed, or the emotions we feel when Pinocchio is at Pleasure Island. It’s these deep emotions you don’t feel anymore in modern Hollywood films.
Pixar’s key to success is their understanding of the value of emotion and what drives someone to attach to their characters and stories.
What can we learn from the masters of animation and how can we apply it to our work in UI? Replicating what we see in everyday life reminds us of our personal experiences so the primary goal should be to make every interaction feel realistic.
In Disney animators Ollie Johnston and Frank Thomas’ book, The Illusion of Life: Disney Animation, they outline 12 basic principles to creating more realistic animations. While not the key point of an interface, we can apply these principles on a micro-level. Excellent examples of realistic and delightful animation can be seen in Tweetbot, Apple Maps and Vine.
While seemingly a very obvious way to communicate—copy and how we deal with inputs is often overlooked. In our rush to replace popular actions with iconography, designers often forget that copy can be just as powerful.
We can make use of copy to speak to users conversationally, eliminate the chore of form input or provide discoverable and fun easter eggs. All three ways give the illusion of a person behind the product or device.
“Codecademy”↗︎ encourages users not to shy away from development. Instead of leaving us with just their motto and brief description, they start a conversation asking potential students simple questions. This is a subtle yet effective way to teach users how to use their interface.
“Fantastical”↗︎ eliminates the tedious task of inputting meta data associated with your events by providing a smart input which automatically translates your conversational sentences into an event. Keeping organized is no longer a chore.
Lastly, Clear, which relies on a series of gestures for interaction, doesn’t require any additional copy to function well and provide value. However, the team has given us discoverable quotes only seen when you have a cleared list. This is not only fun but it serves as an reminder of why we’re using Clear. Clear celebrates our wins with us.
In the tech world where solid competition pops up on a daily basis, convincing a user they want to use your product is key. By using sound, animation and copy Designers can endue delight into interfaces providing users with opportunities to build attachments to our products. While we can learn a lot from our science-fiction dreams, we need to understand how to connect deeper with our users.
The future of interface design isn’t a dream from the 90s. The future of interface design is about emotional awareness; connecting us with products the way we connect with each other.
This post was originally posted on Medium and was in Medium’s Top 100 for February. It was received fairly well except for this one guy who noted that he disagreed with everything I said. (This is a joke, by the way. A joke rooted in my now terribly low self-esteem.)