Design Success Ladder: Meaningful Products

Via design.org: The UX Design Success Ladder: Achieving Meaningful Product Design.

Design-Success-Ladder-The-Key-to-Achieving-Meaningful-Product-Design-1.png

Product success envisioned as rungs of a ladder, that you climb up from the bottom: functional, usable, comfortable, delightful, meaningful.

I first heard this concept last year at WordCamp Phoenix in a presentation by Ward Andrews; the article showcase examples of products or services at each level.

Takeaway message: don’t stop at functional and usable. Set the bar higher.

The Bias of the Absent Visitor

If your software product’s user interface doesn’t support _____, or support them well — your data won’t include _____ in your access logs. You could think they don’t visit often enough to include them in your team’s decisions about the interface. Instead, you can focus on segments of the population based on device, browser, OS, language and location, or any other criteria you feel are important and worthy of attention. It’s simple: make it work for the majority.

This is a blind spot. I call it the bias of the absent visitor. Since they’ve never come by, you can easily fall into assuming they don’t want to or need to use your interface. You might think you can just ignore them safely.

The reality is that they might have stopped by once or many times, had a terrible and unwelcome first experience, and have never come back. They could have seen a blank, white page instead of your carefully crafted design and content. Might have even told their friends not to bother.

This is one of my biggest blind spots. I hope that writing it down will motivate me to remember that the absent visitor is just as valuable as the typical one.

Design for Real Life

Real life is complicated.

Even after we’ve tested all the important user flows and polished the edges in our app or site, people still stumble. Why? Because we’re humans, and because our products still have:

  1. Broken flows: transition points or interactions, like a form on a site, that aren’t working correctly.
  2. Content gaps: someone needs a specific piece of content, but you don’t have it—or it’s not in the right place at the right time.
  3. Pain points: people get hung up and are likely to abandon the site or app.

Making digital products friendly isn’t enough to make them feel human.

For more on this topic, I highly recommend Design for Real Life from A Book Apart; the ebook is only $11.

design-real-life.png

Instead of treating stress situations as edge cases, it’s time we move them to the center of our conversations—to start with our most vulnerable, distracted, and stressed-out users, and then work our way outward.

The reasoning is simple: when we make things for people at their worst, they’ll work that much better when people are at their best.

Order Design for Real Life from abookapart.com. See also the WordPress.org Flow glossary for terms inspired by this book that we use in testing WordPress.

Video: Empathy and User-centered Design

Here’s a short talk I gave at WordCamp London 2015 on the topic of empathy and user-centered design. Reblogging from the vault of yesteryear since I haven’t published it previously.

The big difference between good and bad designers (and developers, copywriters—all of us) is how they handle people struggling with their design. In this lightning session Lance will argue why empathy is important to beautiful, engaging, and useful products.

View full-screen video starting at 17:04 minute mark, and read the description on wordpress.tv.

Full text below.

Continue reading “Video: Empathy and User-centered Design”

WordPress Core Responsive Image Support

Testing this plugin to improve responsive image support for WordPress is a great way for front-end designers and developers to get involved in core WordPress, modernizing the platform that powers almost 25% of the web.

Via WordPress › Update: Responsive Image Support for Core « Make WordPress Core.

Davide Casali: Gestalt Design Principles for Developers

Video on WordPress.tv, highly recommended. My colleague Davide “Folletto” Casali shares basic design and user interaction fundamentals. (Slides.)

Responsive Footnotes

harvard-footnotes

I love web design like this. Both beautiful and useful: footnotes in context so you can read and return without leaving your current place in the text. Two examples—that work in desktop down to mobile—from Upstatement: NPR Code Switch and the newly redesigned Harvard Law Review.

Hat tip: Jack Lenox.