Buttons, Audits, and Outcomes

What I'm Listening To

'Had a feeling that there was something in the water…'

Story From The Week

A few months ago, our product manager approached me with a new challenge: lead an accessibility project for our company. Historically, accessibility wasn't at the forefront of our product development, but with an upcoming compliance audit, we needed to show progress in meeting WCAG 2.1, Level AA standards.

Excited about making the web a friendlier space for everyone, I delved into researching the tools needed for the audit and crafting a comprehensive process for our team to design, write, and test accessible code. After a few days of research, I presented the plan and collaborated with our engineering leaders to fine-tune it. Here's what we landed on:

Audit with a Purpose: Perform a thorough audit on our React application using tools like VoiceOver (built-in screenreader on my Mac), manual keyboard testing, and axe DevTools for automatic browser scans.

Designing for Inclusivity: Integrate plugins like Use Contrast and Adee Comprehensive Accessibility Tool into Figma, ensuring that accessibility is embedded in our design process from the start.

Empower the Team: Once the fixes are in, introduce axe DevTools to the entire team. This way, they can independently perform scans before merging their code.

Team-Wide Skill Boost: Provide training for the QA team on using screen readers and conducting manual keyboard tests at regular intervals.

As I started the audit today, I couldn't help but appreciate the efficiency of axe DevTools. For those keen on testing their sites against WCAG 2.1 guidelines, I highly recommend giving it a spin.

What Did I Learn?

A few weeks ago I mentioned I was reading Lean UX by Jeff Gothelf & Josh Seiden. Admittedly, I hit a roadblock when my notes on five chapters vanished into the digital abyss. However, this week I delved back into the book, uncovering more about the importance of emphasizing outcomes over output.

In the Lean UX philosophy, an outcome is a tangible, measurable change in human behavior that adds value. On the flip side, an output is merely a deliverable or feature—an instrument leading to an end rather than the end itself.

Prioritizing outcomes offers a profound shift in perspective. It prompts us to delve deeper, understanding the true impact of our work on users and the broader market. It encourages us to shift from simply delivering features to actively seeking solutions that address users' pain points and result in meaningful changes in behavior.

What Made Me Confused...

As I was designing a new feature for both mobile and desktop this week, I realized that we don’t have consistency in the placement of our buttons in modals. Sometimes the “Cancel” button is on the left, sometimes the right… The “Okay” and “Confirm” buttons are mainly on the right, but sometimes on the left. An alarm went off in my head — is this okay? Why aren’t we consistent? Is there a right way or a wrong way?

While crafting a new feature for both mobile and desktop this week, I stumbled upon a realization — our modals lack button placement consistency. The "Cancel" button occasionally sits on the left, sometimes the right. "Okay" and "Confirm" buttons, for the most part, are on the right, yet occasionally they’re placed on the left!

The alarm bells went off. Is this acceptable? Why the inconsistency? Is there a definitive right or wrong?

Turns out, the internet is very opinionated on this topic! Some bloggers insisted one way, while other insisted the opposite. A few designers argued that as long as it's consistent, it doesn't matter. I was confused.

I still don’t know how we’ll move forward, but I did find this argument from Nielsen Norman compelling. TLDR: Following platform conventions is more important than optimizing an individual dialog box.

An Interesting Link From The Internet

I just have to... there’s nothing like the sound of AOL dial up internet that gets me more in the mood for this holiday season.