1209551
📖 Tutorial

Designing with Empathy: A Step-by-Step Guide to Preventing Exclusion

Last updated: 2026-05-17 13:47:12 Intermediate
Complete guide
Follow along with this comprehensive guide

Introduction

Designers are good people—we all know that. No one sets out to create a website that’s hard to read, confusing to navigate, or impossible to use with a keyboard. Yet, day after day, designs hit the web that exclude real people. They miss life events like a child’s birthday or death events like saying goodbye to a loved one. The problem isn’t malice; it’s that we have too much to remember. This guide will help you shift from struggling to recall every accessibility rule to recognizing issues as you design. Follow these steps to make your work inclusive by default.

Designing with Empathy: A Step-by-Step Guide to Preventing Exclusion

What You Need

  • A willingness to question your own design assumptions
  • Basic familiarity with user interface design
  • Access to WCAG guidelines (bookmark them)
  • Optional: A copy of A Web for Everyone by Sarah Horton and Whitney Quesenbery
  • A simple checklist tool (paper, digital, or a whiteboard)

Step 1: Recognize the Hidden Impact of Design Decisions

Start by acknowledging that every design choice can have life-or-death consequences. Think beyond aesthetics—consider how your bus timetable app might prevent someone from reaching a dying grandparent. This isn’t hyperbole; it’s the core message from Aral Balkan’s essay This Is All There Is. Map out the worst-case scenarios for your project. Ask: “If a user struggles here, what could they miss?” Write down three examples and keep them visible. This step builds empathy, the foundation of inclusive design.

Step 2: Understand Why Good Intentions Lead to Poor Accessibility

You know that not everyone sees, hears, thinks, or moves the same way. So why do we still create exclusionary designs? The answer is cognitive overload. There are dozens of heuristics, dozens of guidelines, and endless articles (including this one). It’s impossible to hold all that in memory while juggling deadlines. Accept that you can’t recall everything. This frees you to adopt a different approach: recognition over recall.

Step 3: Shift from Recall to Recognition in Your Design Process

Jakob Nielsen’s 10 Usability Heuristics—though from the mid-1990s—remain gold. Heuristic №6 says: “Recognition rather than recall.” Apply this to your design workflow. Instead of trying to memorize contrast ratios or focus order, make that information visible when you need it. Pin a poster of the heuristics on your wall. Add a bookmark to WCAG quick references. When designing a button, have color contrast checkers open. By recognizing issues at the point of creation, you reduce mental strain and improve outcomes.

Practical Tactic: Create a Visual Cue for Common Barriers

Print or display a small card with the four key human differences: vision, hearing, cognition, and mobility. Glance at it before every design decision. Ask: “Will this work for someone who can’t see perfectly? Hear perfectly? Think the same way? Move the same way?” If the answer is fuzzy, pause and investigate.

Step 4: Use Heuristic Evaluation to Spot Issues Early

Conduct a quick heuristic evaluation of your own design before user testing. Take Nielsen’s 10 heuristics and mark where your design might violate them—especially №6. Go through each screen asking: “Is the information a user needs visible? Is guidance retrievable without guesswork?” Document your findings. This is not a full audit; it’s a rapid check that takes 30 minutes. Use a simple spreadsheet or paper grid with columns: Heuristic, Issue, Severity (low/medium/high).

Step 5: Reference Proven Resources Like “A Web for Everyone”

Sarah Horton and Whitney Quesenbery’s book provides a framework that aligns perfectly with this recognition approach. It breaks accessibility into patterns and principles that are easy to refer to. Keep a copy on your desk or as an e-book. Open the chapter on “Designing for Cognitive Differences” when you’re laying out forms. Use the “Designing for Vision” checklist when choosing colors. The strength of this resource is that it’s organized for quick lookup—recognition, not recall.

Step 6: Create Your Own Accessibility Checklist Based on Recognition

Once you’ve applied the first five steps, synthesize what you’ve learned into a personal checklist. It should be short (10 items max) and focus on the most common exclusion issues you encounter. For example:

  • Are all interactive elements keyboard accessible?
  • Is there sufficient color contrast for all text?
  • Are error messages clear and actionable?
  • Can content be scaled without breaking layout?
  • Is navigation consistent across pages?

Print this checklist and place it where you design. Before marking a task complete, run through it. Over time, you’ll internalize these checks, but the list ensures you never miss a critical step.

Tips for Long-Term Success

  • Make it a team habit: Encourage your whole design team to adopt the recognition approach. Pair reviews where you share checklists.
  • Test with real users: Recognition helps you avoid many pitfalls, but nothing replaces testing with people who have disabilities. Use the checklist to prepare for those sessions.
  • Iterate on your checklist: As you learn from user feedback, update your checklist. Remove what’s not needed, add what you discover.
  • Keep learning, but stay focused: Don’t try to absorb every new guideline at once. Stick with core recognition tools and expand gradually.
  • Remember the stakes: Every exclusion has a human cost. Let that motivate you, not overwhelm you.

By following these steps, you transform accessibility from a burden of recall into an integrated part of your creative process. Good designers don’t intend to exclude—but only through intentional, recognition-based practices can we ensure our designs include everyone.