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 that 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 that a man wouldn’t want to click on it.

The Matrix (1999)

My previous 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.

Minority Report (2002)

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 that 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.

The pursuit of delight is in the details

Let’s assume for a bit that the product you are working on is purposeful and functional: it serves a need and the user can achieve what they need to do simply and quickly. This 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 that 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

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 that has mastered the use of sound to provoke emotion—the gaming industry.

Journey, developed by Thatgamecompany

Journey is an indie video game showcasing masterful use of sound. Austin Wintory, the game’s composer, based all the pieces on one theme that 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.

Clear (left) and Duolingo (right)

Animation

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.

Relating inanimate objects with human traits build emotional bonds that can last for days, months or even years

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 that 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.

Tweetbot’s modal dismissal mimics the movement of a falling board. Image source: http://ui-animations.com
Apple Maps’ pin drop feels like it would if you placed the pin there yourself. Falling slowly at first and then quickly pinning into place. Image source: http://ui-animations.com
While simple, the animation in Vine feels more like a drawer opening than just a menu. Image source: http://ui-animations.com

Copy

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 sometimes 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.

Codecademy’s conversational approach to education is approachable and unintimidating
Fantastical’s smart user input

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.

Clear’s discoverable copy inspires and serves as a small reward for a hard day’s work

In the tech world where solid competition pops up on a daily basis, convincing a user that 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.


Thank you to Verne Ho, Evan Dinsmore, Travis Hines and James Wood for their feedback and encouragement.

If you like this post or have found it useful, hit “Recommend.”