March 29, 2013 in DesignFeaturedUX

There is a growing trend throughout the web community to embrace an understanding of behavioral science, and to apply its tenets to our designs. This progress helps us walk the delicate balance between providing an emotional and pleasurable experience for our users and communicating content and information through clear, intuitive patterns.

When the web was first developed, it functioned as a large database, a means of transmitting information from one server to another. Its design was, inherently, mechanic, and placed little emphasis on experience or enjoyment. However, its usefulness as a computing tool was quickly surpassed by its potential to connect. The act of browsing the web grew from a personal, targeted experience (one person looking for specific information) to a multi-user and multi-use phenomena (countless people across the globe exploring a myriad of information and interactions).

Today, the web is a primary means of communication, information-gathering, and enjoyment. Its users have as many interests, limitations, and characteristics as they have faces. I cringe when I hear web design referred to as a facet of “Human-Computer Interaction”, or HCI. Computers are mechanical and thus unable to elicit emotional responses to their users’ needs. If we inject a personal element to our designs, then we can provide an emotionally-driven interaction that is more than just a series of inputs and outputs.

When designing for humans, we recognize the innate differences that each person embodies while accounting for the absolute similarities that all humans share: a sensitivity to group dynamics, emotional stimulation, positive feedback, and familiarity.

The Clique Mentality

Try as we may to distinguish ourselves as unique, the scientific consensus routinely points to our willingness as humans to adopt a “herding mentality,” wherein our decisions are weighted by what our peers are doing. Indeed, as Nir Eyal aptly points out in UX Mag, the need to feel social connectedness informs our values and drives much of how we spend our time. Scientists have found that there is a distinguishable range in a social movement at which this instinct kicks in, outside of which our decision to adopt a product (or opinion, or trend…) is left more to personal instinct than group persuasion. Malcolm Gladwell famously refers to this as the tipping point.

Knowing that this social phenomena exists leads us to dissect how popular sites use it effectively, and gives us direction to apply the successful attributes to our own projects. Facebook and Twitter are obvious examples. Their users interact with the content based on a “my friends like this, so I should too” mentality. This social validation creates a sense of trust. Trust is also achieved when content is posted by a trend setter—a leader in an individual’s network. Either way, the individual endorsement adds value to the content, and that value increases engagement, bringing return to the site owner.

There is no algorithm to when something tips, so agile designers have to build products that provide adequate incentive for the trend setters to participate while keeping all users engaged. There are a number of strong examples of this across the web:

That button that says ‘2 retweets’ will be read as: ‘This is not so great, but please read it anyway? Please?’

Designing with Empathy

I am going to put it out there that empathy is the most defining of human characteristics, at least in so far that it distinguishes us from our robotic counterparts. It is that sensitivity to what others feel that forms the bedrock of our political, cultural, and social institutions.

Humans react to the emotional cues of their surroundings. Just as our actions follow a herding instinct, our emotions feed off of each other as well (e.g. “misery loves company”). Developing a content strategy that considers the user’s mood and disposition creates a personal user experience. As noted by John Caldwell of UX Mag, a consistent tone of voice makes a brand’s character believable and trustworthy. Without it, customers might have a contradictory impression of the brand.

An excellent example of a company who embraces a consistent, empathetic tone across their brand is Mailchimp. Their online document Voice and Tone provides excellent insight into how they combine friendly, useful micro-content with a strong brand identity.

screenshot of Voice and Tone, by Mailchimp
Mailchimp’s document Voice and Tone provides insight into how the company successfully combines empathetic copy with a strong brand identity.

We humans react to empathy in product design as well. Comprehensive user research and planning leads to products that are honest, usable, and meet our user’s needs and expectations. This applies to visual design as well as back-end design.

However, empathy requires more of designers than simply making decisions based on the user’s demographics or other characteristics. A fallacy manifests, Ralph Caplan of AIGA points out, when we as designers misinterperet empathy to mean making decisions based on the observered characteristics of an individual; truely empathic design involves understanding how that individual adjusts their behavior as a result of that characteristic, and compensating our design to meet their altered needs.

Empathy in design focuses on the user as a person, not just a consumer.

In his book Designing for Emotion, Aarron Walter explains this as a hierarchy of our user’s needs: that a product be functional, reliable, usable, and pleasurable, in that order. In this context, we understand that an empathetic designer considers their user’s physical, mental, and emotional needs.

For example, the designer of a site for children may well choose a bright, whimsical tone for the pleasurable effect it would have on its young audience. However, they also may have considered that a bright palette will keep a child’s attention for longer, that a child may need more obvious visual cues in order to differentiate actionable elements, and that large, simple typography is more readable for young people.

As food for thought, consider Comic Sans. While mocking its usage has become a bit of a game for designers, its creator never intended for it to be used as body text, or really for any purpose other than to provide a friendly typeface for children’s applications. Vincent Connare, the font’s designer, realized that there was a need for a kid-friendly typeface that was not only child-like in appearance, but more readable for them as well. Its usage made children’s applications more functional and usable. Indeed, as one teacher notes,

Comic Sans is one of the few (if not only) pre-installed typefaces readily available to the general PC user base whose lower-case ‘A’ is composed in the same manner that a child would learn to write (Comic Sans employs the latin character alpha, i.e. an ‘a’ without the hook on top). In terms of educational instruction, it’s the best available tool for the job; it literally helps to synthesize learning. In terms of its audience, it is perfectly designed.

Feedback Loops and Kudos

Social trends and emotional responses are both examples of passive feedback loops. A friend validates something, thus I trust it, thus my friends see that there is public support behind this thing, and so on as momentum builds. Likewise, if a website strikes an empathetic tone, it creates a more personalized experience for me, making me more likely to trust and engage with the website. As designers, we can take advantage of the strength of feedback loops and actively build them into our products.

Humans are naturally curious, and we respond strongly to positive reinforcement. Successfull feedback loops take advantage of both of these facts. Some of the best examples are found in gamification, the injection of game elements such as competition, status-building, achievement, and rewards.

I’ll forgo a thorough discussion of the components of gamification, since there are excellent examples available elsewhere. What is important is that game elements add fun and personality to routine or mundane tasks, increasing engagement and stickiness.

Trusting What’s Familiar

All of the aforementioned principles appeal to the human traits of emotion and trust. We trust the opinions of our friends. We prefer products that are personal and designed with empathy. We respond positively to game mentalities. Finally, utilizing familiar visual and interactive design elements provides the keystone to creating a credible, emotional connection between our users and our product.

The Standford Web Credibility Project found that

…a broad range of design decisions—ranging from visual elements to information architecture to the use of advertisements—can powerfully influence whether visitors are likely to find a site credible. Like human communicators, web sites benefit (or suffer) based upon their appearance. Part of the goal of our project is to understand which design elements have an impact on credibility.

Note that they compare web sites to human communicators, emphasizing our users’ tendency to draw an emotional reaction (for better or worse) from the outward appearance of a website.

Untrustworthy design may or may not be easy to spot. One creeping issue is the prevelance of Dark Patterns, an interface or component that is intended to trick a user into doing something. These include bait and switch tactics, hidden costs, and misdirection.

In addition to avoiding these common pitfalls, web designers can include common design patterns to help visitors feel comfortable with their interface.

In summary

Design for humans injects personality into the computer side of “human-computer interaction.” It uses emotional cues to inspire user behavior and make people feel comfortable and safe with our design, as though the web site or app were an extension of the person themselves. Like brands that have become household names—Kleenex, Kellogs, Google—we strive to make the usage of our products second nature. Creating an emotional connection between your site and your users leads to better retention, engagement, and trust.

You might also enjoy

The empathy paradox

What do top UI designers do differently?

This may be the best UX quote I have ever read