Tag: usability

Inclusive Design, Day 12/15: Improved Publishing Confidence on WordPress.com

This is day 12 of 15 in a short series on inclusive design. If you missed any of the earlier posts, see day 1 here or view the full list.

The pre-publish confirmation step in the WordPress.com editor.
Screenshot of the pre-publish confirmation step in the WordPress.com editor.

I’d like to share another example of solving for one case, extending to many. This one comes from my team at Automattic. We’re called “Delta” — and we focus on making the editing–publishing flow for WordPress.com as smooth and pain-free as possible.

The WordPress.com blog in English.
Screenshot of the WordPress.com blog in English. This blog is read by 40-plus million people.

From our own experience, we know that publishing content to the entire world can be nerve-wracking! This “publishing confidence” experience started out with a specific case in mind: the WordPress.com announcements blog. With 43 million email subscribers as of the latest count, the authors at Automattic writing for this English-language blog never want to accidentally hit that “Publish” button before a new announcement is polished and ready to go.

That’d be a total disaster, right?

Many years ago, we solved this by placing a tiny plugin created for our VIP customers on the WordPress.com blog. It’s super simple, a JavaScript alert() dialog intended to add a quick warning before publishing. Developed for use on high-end client sites running on WordPress.com, it looks like this:

View of the VIP plugin for publish confirmation.
Screenshot of the WordPress.com VIP plugin for “are you sure?” publishing confirmation.

Fast-forward to 2017 — the Delta team starts revamping these same publishing flows as we upgrade many of the key features in the new WordPress.com interface. As we researched the pain points in the experience, we realized that this same feeling of anxiety could be shared by many other people. In fact, our customers often wrote in to request this exact thing for their own blogs.

There needs to be an “Are You Sure” button on the publish section, I’ve accidentally published a blog post too early so many times. — A WordPress mobile app user, writing it to support in 2017.

What if we could make a product change to reduce that same anxiety for everyone? Well, yes — it makes sense. The team also upgraded the blog post preview pane to add in a switcher for screen sizes — mobile, tablet, and desktop — to further improve the confidence in the end result.

Solving this in the WordPress.com editor experience means making it much harder to accidentally publish on any blog. The change enables all of our customers to breathe easier. Like us with the WordPress.com announcements blog — they can now feel more confident that the changes they’re sharing are ready for the world.

The WordPress.com editor screen
Screenshot of the WordPress.com editor screen, showing the confirmation step in the sidebar. Note the opt-out checkbox to remove this extra step if it’s not helpful.
The WordPress.com preview pane.
Screenshot of the WordPress.com preview pane, showing screen size options. This way you can review your post before it goes live: in mobile, tablet, and desktop sizes.

See also Publishing on WordPress.com for a project-level report on improving this publishing experience written by colleague Shaun Andrews.

For day 13 of 15 of inclusive design, we’ll look at speed and connectivity as an exclusion example. How the trend of “Lite” apps built for certain markets to drive adoption brings needed improvements to everyone.

About this Inclusive Design series — In 3 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 12 of 15. Read more about the series.

Inclusive Design, Day 11/15: OXO Figured It Out

This is day 11 of 15 in a short series on inclusive design. If you missed earlier posts, see day 1 here or view the full list.

The “OXO Good Grips Story” is an astounding example of inclusive design, solving for one and extending to many. An opportunity that grew from one person’s kitchen solution into a $60 million business.

A view of the original kitchen vegetable peeler made of metal.
The original peeler is made of sharp metal.

Sam Farber — who created Copco enamel cast-iron cookware in 1960 — later developed what is now the quintessential OXO kitchen peeler from seeing his wife struggle with the classic shape and size of metal kitchen tools. He solved her pain by creating an ergonomic and comfortable grip that even people with arthritis could use. Turns out everyone else loves it, too.

The idea was always, from the start, to make useful products for people of all ages and levels of dexterity. We can improve every day life for people, without them even knowing or thinking about it. — Sam Farber

Watch the video, “Objectified: Smart Design OXO Good Grips Story,” for a behind-the-scenes look at OXO’s product development process and inclusive mindset.

Read more history in a case study from The Center for Universal Design: OXO International Becomes a Universal Design Icon (2000).

A view of the OXO peeler with an ergonomic handle.
The OXO version of the peeler in good design for everyone.

For day 12 of 15 of inclusive design, I’ll share about reduced anxiety when publishing to WordPress.com websites. A problem solved originally for one use case by adding an extra step for confidence.

About this Inclusive Design series — In 4 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 11 of 15. Read more about the series.

Inclusive Design, Day 10/15: Making Your App Accessible Benefits Everyone

This is day 10 of 15 in a short series on inclusive design. If you missed earlier posts, see day 1 here or view the full list.

Making your app accessible to visually impaired users benefits all your users. — Ayesha Zafar on the Invision blog

Taking the principles of inclusive design from idea to action means changing how and what we design. A reminder that technical details matter as much as the intention.

Via the design.blog/inclusive checklist under “Building inclusion into designs” we see how this relates to accessibility, “There’s no inclusion without accessibility.”

build-inclusion-into-designs.png
Screenshot of the “Building inclusion into designs” section on the design.blog/inclusive checklist.

The amazing thing about doing the hard work for universal access is that the changes benefit everyone. Design for slow bandwidth? It’ll load faster for all people.

Here’s the full text for this checklist section, for reference:

There’s no inclusion without accessibility. Accessible designs will present differently depending on the medium you’re working in; consider physical, visual, auditory, financial, and other factors as well as an individual’s temporary or permanent limitations to accessing each. Is your video accessible to someone with hearing impairment? Is your website accessible to someone with a low internet bandwidth? Is your copy readable by individuals with different education levels, for whom the text is in a second language, or who are new to the subject matter? The more contexts you consider, the more accessible and inclusive your designs will be.

For a real-life example, I love this in-depth look at providing an accessible mobile app experience for visually impaired users by product designer Ayesha Zafar. Written for Invision, makers of software for digital designers. To understand inclusive design at both the highest level, the why — means you then need to deliver at the detail level, the what and how.

Read the full article to learn about: How to Design Mobile App Experiences for the Visually Impaired.

Screenshot showing the Invision app experience of inclusive design
Screenshot showing the Invision blog article about inclusive design applied to visually impaired mobile app users.

Ayesha also wrote a similar guide — focused instead on blind users — that’s also full of accessibility tips and inclusive design principles: How to design accessible mobile experiences for the blind.

Image of Ayesha Zafar saying
Ayesha Zafar says “empathy is key when designing app experiences.”

On a digital product team it is everyone’s responsibility to have empathy for users and thus all users, no matter their ability, should be considered in the design process. — Ayesha Zafar on the Willow Tree Apps blog

Thank you, Ayesha. 💯

For day 11 of 15 of inclusive design, another example of “solve for one, extend to many — accessibility and usability considered first in the design: the story of “OXO Good Grips.”

About this Inclusive Design series — In 5 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 10 of 15. Read more about the series.

Inclusive Design, Day 9/15: Review of Principles

This is day 9 of 15 in a short series on inclusive design. If you missed earlier posts, see day 1 here or view the full list.

Today I’d like to pause, take a deep breath, and review the principles of inclusive design as I’ve come to understand them.

Here’s the working draft we’re using in Automattic, with a nod to Kat Holmes’s work on Microsoft’s inclusive design toolkit.

1. Recognize exclusion.
2. Broaden perspectives and build empathy.
3. Bring diversity into teams and processes.
4. Solve inclusively for one, extend to many.

 

Kat herself describes these principles of inclusive design superbly in this brief video, from an O’Reilly design conference in March 2017.

For day 10 of 15 of inclusive design, I’ll share a story about making an app accessible to visually impaired users — which then benefits all users.

About this Inclusive Design series — In 6 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 9 of 15. Read more about the series.

Inclusive Design, Day 8/15: Expand Your Market By Solving One Case First

This is day 8 of 15 in a short series on inclusive design. If you missed earlier posts, see day 1 here or view the full list.

Adopting inclusive design isn’t just about being a good person. It’s a solid foundation for good business — focused on solving real needs for real people.

Barclays Bank understands this and is putting it into practice. Thanks to Beatriz Lonskis for pointing me to this example of smart business and good design.

We’re committed to inclusive design and accessible services — using new technology to make banking easier for you. — “Barclays Access” statement

The full case study is in The Guardian — Barclays Bank learned that embracing inclusive design, starting with accessibility, creates a better solution for all their customers. It’s a commercial opportunity when meeting a real need — not an expensive compliance issue.

 

Another Barclays accessibility piece in The Times, Smarter technology is improving the lives of disabled people.

Today, I manage all my financial affairs by smartphone,” she says. “It has genuinely transformed my life, cutting out all those frustrating trips to the bank.” — June Maylin (a blind customer of the bank).

June’s story provides an insight into how the technologies designed to make banking easier for everyone can be particularly effective for people with disabilities, and are steadily giving people much more control over their money. Even small, relatively low-tech initiatives can make a big difference.

By the way, I love this aspiration for leadership in this emerging practice on the Barclays Access Twitter profile: “One of our ambitions is to become the most accessible & inclusive FTSE org. Tweets about accessibility & disability issues.”

Small changes make a big impact, and inclusive design can have a major impact on revenue and business success by solving for one and extending to many.

For day 9 of inclusive design, we’ll review the principles discussed so far: 1/ Start with exclusion, 2/ Broaden your perspective to gain empathy, 3/ Bring diversity into teams and processes and 4/ Solve inclusively for one, extend to many.

About this Inclusive Design series — In 1 week I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 8 of 15. Read more about the series.

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.

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.

Benefits of Plain English URLs

In Benefits of Plain English URLs, the folks at Gadgetopia have added more fuel for the fire of why you should use beautiful URLs. For me, any two of the many reasons should enough to convince the maker or your CMS or weblog software to make nice URLs a default in their setup.

When picking URLs, we envison [sic] someone at the client’s firm reading the URL to someone over the phone. How easy is it going to be?

I especially like this idea of reading someone the URL over the phone and asking them to write it down, remember it, or type as you read. Great URL design and implementation makes this interaction painless and pleasant.