Empathetic Design

The awareness and art of exercising empathy through the design process to improve user experience.

LVL99
Digital Mundi Homines Cogitare
7 min readJun 2, 2014

--

Original article: Empathetic Design

Maybe the title of this article seems weird, but I consider empathetic design to be a key philosophy of any form of user experience, either aesthetically or functionally derived. I define empathetic design as design which takes the objectives of the design purpose and the perspective and concerns of the user into its application, and influences the decisions of the purpose’s solution to aid and/or encourage a user to best comprehend and engage (gosh, what a mouthful). Basically, empathetic design helps people do what they do by taking their needs into account more than the system’s.

In my previous article I talked about responsive design, whereby a site/app responds and adapts to the varying visual and functional constraints the user’s technology presents. The aim of responsive design is to aid the user in interacting and absorbing the information across a number of different technological applications, better improving the potential of user engagement. But what about the intellectual and emotional concerns of a user? The beginnings of empathetic design have always been around since design first started and its presence has been slowly unearthed from our collective consciousness and unconsciousness with the advent of User Experience, but I’d like to put some thoughts out on what I think empathetic design constitutes, how it applies to us as design practitioners and users of experiences, and how it can improve how we interact with and understand each other.

The definition

“You never really understand a person until you consider things from his point of view… Until you climb inside of his skin and walk around in it.”

Harper Lee, To Kill a Mockingbird

Empathy is a wonderful human quality in which one can understand and share the feelings of another. It’s wonderful because it helps a person feel a connection to another via a mental/emotional link, by explicit (“I’ve experienced that too and know how you feel”) and implicit (“I haven’t experienced it but I can imagine/accept how you feel”) means. It helps us understand another from previous experience or from a perception/acceptance of an emotional state. It means we can laugh together and mourn together, whether we fully comprehend the reason why, or not. I feel empathy is a unifying factor between all beings and forms the basis of trust and relationships.

In the design application, empathy can be something like using a kind of common level of language to sufficiently describe a particular action. The opposite would be to use a level of language that is below or above the intended audience, potentially creating unease or discomfort if it cannot be adequately comprehended. Another example is using typographic or visual conventions to encourage a user’s comprehension of what you’re conveying. Such conventions like punctuation, bold and italic styles for writing allow English language users the ability to understand rhythmic cadence and emphasis, highlighting keywords for better retention, or by creating a memorable rhythm to a sentence (the length and choice of words help too). I would describe these as emotional signifiers, which can aid a user to detect whether some words or concepts have more or less significance in the context of the whole. We can also illustrate this through tone of language, size, colour and position, which could all represent differing levels of meaning, contributing to a hierarchy of form and functionality. Most aspects of design comprise of low, mid and high-priority levels of information or function, and all such levels aren’t entirely necessary for all such peoples to comprehend nor pay attention to, so how that balance is represented is important.

It’s all about communication, baby

Ever heard the saying “can you tell me that in layman’s terms?” or “explain it to me like I’m five!” ? The cause for reaction being that the subject doesn’t fully comprehend and will need some further assistance from your explanation that is more geared toward their level of understanding. This is what I’m getting at with empathetic design, although it’s not just how we communicate via words, it’s also how we communicate via imagery and functional processes, too: through metaphor and symbolism; through a common foundation of understanding, regardless if one is more or less knowledgeable or experienced than the other. If one is less knowledgeable, then good empathetic design would encourage learning.

Design, of varying visual and informative fields, is often representative — as in it’s more often an illustration or characterisation of something else — for the purpose of communicating or eliciting an emotive or intellectual response. If I had an icon of a pencil and encased it within a rounded coloured square on this page, you may be inclined to think that it represents a button that when pressed would allow you to edit some kind of text content.

Obviously the context would define its assumed function and representation as well (surely you’d understand that it is representative within an article and not functional — but perhaps you clicked it anyway) and no doubt your previous experiences of websites with similar iconology in that particular context would fuel your understanding too. But where is the line drawn? At what point do we consider our arbitrary assumptions of representation — in this example iconology, placement and experience — and how does it fit into our knowledge and assumptions of our audience using our designed solutions? (It’s called user testing, tee hee!)

At some point in your technologically-led lives you must have stumbled across a button whose meaning you couldn’t quite decipher. At that point of confusion, did you interact or ignore? Was its purpose ever alluded to in the information architecture of the page? Or was there a miscommunication through words, imagery or colour that made you think it was something else? I can’t tell you the number of times I’ve been confused by sites with a “cancel”, “close”, “done” or just plain “X” button labels. Sometimes “done” means save or close, sometimes things are saved when I press “close”. Sometimes things are automatically saved after a certain period of time and “cancel” doesn’t revert back to the version before the save. “X” often represents close, cancel or delete functions depending on where its used or what colour it is. It can be really annoying to deal with if not adequately thought through or user tested. With that said there is a particular user tolerance level, but nevertheless a designer should be encouraged to be considered and consistent with all their decisions.

We all experience many things in our day-to-day lives, and often they comprise of known experiences. When something unknown is introduced or occurs, it will often take us a moment to process. Our imagination can go wild, or more commonly we try to refactor the ambiguity into something more known to us to better deal with it. The other unwanted aspect is when we’re greeted with something that seems known, but then acts in a way that diverges from our expectation — a truly frustrating experience, especially if it keeps occuring. An important aspect in empathetic design is to consider these varying levels of interpretation and aim to be direct and explicit when communicating actions and objectives.

An approach (?)

Good design often incorporates a series of consistent factors. Defining a visual style guide, for instance, is like setting a vocabulary of hierarchical values to types of content. For instance, affirmative actions could be represented in blue or green, negative or destructive actions in red. In that sense, design has multi-dimensional systems much in the same way as linguistic elements of grammar, punctuation and dialect compliment the literal written word.

By attuning a sense of design empathy into a consistent sensibility, a value of expectation can be nurtured and exercised within the user from a design point of view. This value of expectation is one which assuages the user and allows them to perform actions with confidence. Deviations from this sensibility at pivotal points could potentially elucidate anxiety or questioning of a form or function’s responsibility or result, so be aware when deviating without providing any particular meta information or justification, or without any adequate communication or training for the user to expect such a change. Often this particular machination of deviation is used for great effect in moments of tension in horror movies, or ways of subverting a player’s expectations of a gameplay system to give them new challenges to solve. When dealing with user flows in productivity settings it can often be a burden, frustration or an unnecessary trouble. It’s up to the designers to consider their user’s perceptions and build in a quality of design which can either address or allay any worries, or be responsive to a user’s lack (or abundance) of existing knowledge.

Some users will need their hand held, and that’s not a bad thing. If you have built in particular restrictions within your site/app, justify them to a user so that they may learn why and can build on their knowledge. Importantly, keep these choices consistent throughout other similar interactive situations in the experience, so as not to elucidate dreaded anxiety, which may cause a user to disengage with your designed solution.

It makes sense that you meet people at the level that they are and help them to grow than it does to make people feel small by towering over them and reprimanding them for not adequately performing. By establishing a more human tone and level of respect through the languages of design and the interactive process, we can improve how humans interface with our designed systems so that people can concentrate on performing the tasks at hand with speed and confidence, and not wasting time on deciphering the interface.

--

--

LVL99
Digital Mundi Homines Cogitare

UI/UX design, front-end & WordPress dev, digital strategy. Writing by @mattscheurich