How to Web Design with Humans in Mind

March 14, 2017

How to build a design a great website, from a person who has designed many great websites.

“We know what the user wants” might be the most dangerous sentence in the design industry.

While well intentioned, it reveals deeply rooted cognitive biases that stand in the way of a simple reality: Design is a conversation, and successful communication relies on an ongoing effort to understand your partner as well as yourself.

You are not your user

Recently, I taught a two-day workshop on user experience design for the web at a local college.

“By being in this room,” I told them, “you are removing yourself from the group of people we refer to as ‘users’. From now on, your opinions of what is good design and what the average user wants and understands is not relevant. You simply know too much to make true statements about how the general public understands the web.”

I always start my workshops with a version of this statement, and it always starts a heated debate. What I’m looking for is a response along the lines of, what do you mean our opinions are not relevant? The whole point of being a designer is to know what is good design and what is not.

This is the starting point for understanding how to design human-centric solutions on the web and in the world.

Design from the inside out

Working as a designer, it is easy to get caught up in great ideas and technical solutions. When I started out as a web designer, I would create advanced layouts and design intricate interactive components that looked great and got lots of praise for their visual appeal.

But when I paired my designs with content and put them in front of real people, the air quickly went out of my ego bubble: While my designs looked great, they didn’t do their job. Rather than work with the content to meet the needs of the end-user, they were elaborate pieces of art that often stood in the way of successful communication.

My educated opinion on how to make good looking websites was at odds with the needs of the people using those websites. I simply knew too much about design to see the world through the eyes of my audience. What I thought were true statements about how the general public understands the web revealed themselves as statements of my own preferences and biases, based on my privilege of being a web designer.

It took years to learn how to work past some of these biases, and when I did I realized my opinions do matter, just not in the immediately obvious way:

What makes a great designer is not the ability to create something beautiful or captivating or challenging or provocative. What makes a great designer is the ability to identify why something is beautiful or captivating or challenging or provocative to the people at the other end of the conversation, and then creating it.

A great designer identifies an opportunity or challenge or sticking point in an interaction between people and information, asks why this interaction happens, why the user is making it, why it creates the situation it does, and then gets to work designing a new experience. Design from the inside out.

Setting the stage for designed communication

“The whole point of being a designer is to know what is good design and what is not.”

Absolutely. But as far as I’m concerned, “good design” isn’t synonymous with “nice looking graphics”.

Design goes deeper; it creates flow, or tension, or challenge, or discovery in the conversation between the creator and the person we call the “user”. The question of course is how to make this happen.

Here is my approach, a mélange of tools and techniques gleaned from many people wiser and more experienced than myself:

First, ask “why”: “Why are we doing this? Why does it matter?” and more deeply “Why are people going to want this?” This is the planning and ideation stage where we identify possible design projects and match them to the real people at the other end of the conversation.

This stage is driven by questions: What is the challenge? What is our solution? Are there other solutions? Do people need this? Do people want this? Can we make people want this?

What emerges is an idea for a designed communication. But so far it is our idea, and as we’ve established, our opinion is not relevant. This brings us to the second stage: Research.

Before any real design is done we need to know if our idea actually resonates with the people who will interact with it. That means reaching out to people in the world and talking to them. Explore their relationship to the matter the idea aims to address, understand the contexts in which they may interact with the idea and look at how they are influenced by their context networks.

What are their needs and goals? How do they measure success? Who influences them and who do they influence? Build personas, empathy- and affinity maps, explore user journeys and flows, and establish the baseline for successful communication.

This is also where accessibility and stress-cases come into play: How do we ensure everyone can interact with our idea in spite of the stress cases they may encounter in their lives?

Only when we know the people who make up our audience and understand their role in the conversation can we move on to the preliminary design stage. This is when our idea merges with the real world to create a prototype interaction.

During this first round of iteration, it’s important to keep the design low-fidelity through wireframes, paper prototypes, and other simple tools. Before the experience gets too shiny we need to make sure our new understanding of people’s interaction with our idea actually matches reality.

Which brings us to the fourth stage: Validation. Every hypothesis, every hunch, every gut feeling and sensation of something “just working” needs to be exposed to the harsh light of real users before they are formalized in design and tooling.

If the testers find their way through the interactions we create and the journey results in successful communication, we can loop back to the planning stage and lay the groundwork for more advanced design stages like style tiles, Element Collages and eventually style guides. After a few more rounds through the iteration loop, we can start building the real solution.

If, on the other hand, our audience can’t figure out how to use a low-fidelity prototype, there is likely something wrong with the interaction or the idea itself, not the quality of the visual design. By following the process I’ve just laid out, we’re still in an early design stage, so returning to the planning stage is not a costly endeavor [loss bias].

The siren songs of bias and cognitive dissonance

This is where we as designers encounter the siren songs of bias cognitive dissonance: When we start design and redesign projects, it is tempting to start with high-fidelity designs based on our own assumptions. After all, we are experts, and we have experience working with people so we should be able to make educated statements about how the general public understands the web, right?

If this is where we start our journey, and a user can’t figure out our carefully crafted designs, it’s easier to blame the user than accept that in spite of our skills we may have created a bad solution. We say things like, “they just need more time” or “the design is better, even if they don’t see it right away”.

Giving in to the siren song of cognitive dissonance can lead us down the dark path of selection bias: It is not uncommon to see design teams perform user test only on peers or advanced community members claiming these are the “power users” and good representatives. This is rarely the case, and when this approach is taken, the chance of communication breakdown increases dramatically.

Put bluntly: unless we build our designs for, and test them against, the real people at the other end of the conversation, we are making designs for ourselves, not our audience.

The only way to avoid this is to use our skills to design with humans in mind, and remembering that in this context, we can’t count ourselves among them.  

Want to learn how to design with the user in mind? Check out these LinkedIn Learning courses: