Designing for Humans

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:

• Dribbble lists shots by popularity, and a popular shot can propel a user’s status skyward. Members of the community have an incentive to post high-quality content, be active in the community in order to gain followers, and post often to increase their chances of reaching the popular page.
• Yelp relies on social validation as its core value. If someone you are connected to recommends a restaurant, that recommendation holds far more weight than a static review, and thus makes you more likely to try it out. Then, there is less social risk to posting about the restaurant after your visit since someone you know has already created a review, making you more likely to return and interact with the site again.
• Alternatively, social media buttons may act as a negative social indicator. As noted by Oliver Reichenstein of Information Architects, a low “tweet”, “follow”, or “like” count can communicate that your content is not worthy of your reader’s trust or time. A high count may be seen as a personal advertisement, which can be just as much of a turnoff. Medium’s approach to the “tweet if you like it” button walks a perfect balance between class and effectiveness.

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.

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.

• A site for children will likely have a whimsical, friendly tone, while a news or financial site will showcase a more formal visual aesthetic.
• Sites that are optimized for mobile may serve lower-resolution images and utilize a simple, stripped-down interface in order to reduce strain on the user’s bandwidth.

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.

• Mint uses positive reinforcement in the form of goals and visual graphs to make managing finances less of a chore.
• Code Academy and Treehouse are two examples of companies that use goals and badges to help motivate and encourage users to attempt the daunting task of learning to code.
• Quora, Designer News, and Stack Overflow award points to users for contributing content. They further incentivize users to ensure that their contributions are meaningful and relevant by letting other users award them points based on the quality of their contributions.

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.

• Use consistent styling, content, and metaphors across your site and apply accessible fallbacks. It’s easier to trust a site that is usable over one that is not. Consistent styling of links, navigation, and other interactive elements ensure that a user can interact with the site with confidence. Likewise, adhering to code standards and accessibility best practices leads to providing a seamless experience for all of your users, regardless of the device that they use to access your content. A site that is well-designed from the inside-out naturally seems more professional, and therefore more credible.
• Take advantage of common patterns. There are things we absolutely know about how people browse the web, and designing with these standards in mind will make your site feel familiar. For example, we know that people’s eyes track in an “F-shape” as they browse a site. Knowing this, you can place navigation horizontally along the top of the page or vertically down the left of the page. We know that people expect the site logo to link to the homepage, and for content to be listed from most important to least. As responsive design continues to proliferate, users may come to expect enhanced readability without sacrificing content on a mobile device. Your design does not have to be unoriginal or overly trendy in order to adopt common visual standards.
• Make your interfaces clear and your interactions understandable and learnable. There are a lot of catch phrases being tossed around the design community right now: intuitive design, invisible interface, honest design, to name a few. Don’t get caught up in the hype. Interfaces can be both visible and useful if they are simple and straightforward (read these two articles for fantastic discussions on the shortcomings of the “no UI” movement). It’s ok to introduce new interactions, even if they aren’t inherently intuitive, as long as you teach them effectively.

---

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.