Tag: user-interface

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 7/15: Roku and the 10-Foot Rule

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

“Solve for one, extend to many” is a key principle of inclusive design which I learned from Kat Holmes and her work with Microsoft.

Via fellow WordPresser Leo Postovoit, I learned more about how Roku followed this principle to achieve commercial success. “From a small hardware start-up to a publicly listed company with an estimated 2017 revenue of $500 million and a $5 billion market cap,” according to Variety.

hero-roku-homescreen.png
A typical Roku home screen. One click Netflix is as simple as it gets.

Roku is successful because of how user-friendly everything is. Along with Apple TV, Chromecast, Android TV, and others — the experience is a big improvement over traditional TVs.

CEO Anthony Wood explains in Variety:

Roku’s original user interface was anything but flashy. Wood instead aimed for simplicity, banning all but the most essential buttons from Roku’s remote control, and calling apps “channels” to help TV viewers in their transition to the new medium. “Companies commonly overdesign something and make it kind of pretty, but not easy,” he says. “Customers, what they really want is easy.”

Here’s what people love about Roku:

— The minimal interface takes full advantage of “10-Foot UI” principle by using simple, intuitive navigation based on a grid. Large and readable from ten feet because you have no mouse/keyboard, viewing from the couch. (The navigations options are limited to left, right, up, down — click to select). Requires no fancy 100-button or huge user manual. Setup is a breeze.

— A trimmed down TV remote with programmable buttons; plus dedicated buttons for popular streaming services like Netflix. No menus to scroll through, go straight to viewing.

— Voice commands to search via the remote, and the search matches available content quickly from your input. Leo says: “My favorite feature is the universal search, where it actually queries every channel for listings, fuzzy searches too. You can find every “Batman” movie, including the Dark Knight!”

— Packaged as low-cost hardware — basic streaming kit sell for $29 — Roku positions itself as an attractive alternative to regular TVs that require a cable or satellite subscription. Streaming requires WiFi, and increasing broadband speeds boost the value of high-quality, always available content.

— One of my favorite features is the earphone jack in the remote control — great for private listening and for those who need a little extra hearing assistance.

[More about the 10-foot UI, if you’re curious like me: Wikipedia article and a user design guide.]

Though I couldn’t find evidence for it, the person Roku seems to have in mind in solving the typical TV problems is a cost-conscious, non-technical person over a certain age. Your grandparent might prefer a simple gadget that does one thing well, for example.

Fewer cords to plug in. No need to tinker or walk through endless steps of complicated menus to set up the TV. They certainly don’t love or wish to understand how to operate 100-button remote controls. [That’s why they call you over! “Fix my TV again, please.”]

roku-homepage.png
Roku — a player for every kind of streamer; and more than a smart TV.
featured-packed.png
Featured-packed. Entertainment filled.

The beauty of “solve for one, extend to many” is that the same elegant UI and intuitive remote works well for seniors and the elderly — but also works great for everyone else.

As Leo told me, “It benefits all people.”

Erica Manfred explains her love for Roku as a hard-of-hearing senior citizen: Aging With Geekitude: Why Roku is My New Crush:

Roku has terrific little feature, a headset jack on the remote so you can listen to your favorite shows and movies without bothering anyone. For a hearing aid wearer like me this is a godsend. The Roku also supports closed captioning, another huge benefit for the hearing impaired and anyone who can’t understand current slang.

(Leo notes 30-40 percent of Roku content still isn’t captioned.)

Roku proves to me that simple and inclusive hardware+software is good design and good business.

For day 8 of 15 of inclusive design, I’ll share a business success story — how to expand your market by solving for one, extending to many. Because inclusive design is great for business.

About this Inclusive Design series — Coming up next 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 7 of 15. Read more about the series.

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.

Summit Hut Realign 2008

Update: Summit Hut did some redesigning this week, including a new logo, new color scheme, and some layout changes. I was not involved in these updates. Please see the screenshots below and on Flickr for a reference to the the site design before these changes.
—Lance, June 16, 2008

From the Recent Client Projects and I Should Have Blogged This Months Ago departments, I present a brief report on a website realign for Summit Hut.

I was fortunate to work with my great friend and mentor Aaron and several former coworkers from my days at the Hut (I worked there 2001–2005). The subject matter was close to my heart, and having worked on the website for a short period of time before leaving the company, I was thrilled to help with the task of realigning and recoding Summit Hut’s flagship website.

View screenshots, visit the live site, or for more details on the part I played in the realign, continue reading.

example screenshot 1

Disclaimer: Please note, I am not involved in the upkeep and production of code or graphics for Summit Hut; my role was to build a solid foundation for future development and visual merchandising. I did produce the first home page graphic (view screenshot), but the home page graphics and various and sundry sidebar callouts throughout the site have changed since the site launch in February 2008.

Notes and technical details

I was in charge of visual look-and-feel, basic interaction design, and coding the HTML and CSS for the page templates.

Visual

My goal was to create a mood that was simple, clean, and sophisticated with a subtle regional feel for Summit Hut’s location in the Southwest.

The visual tone took cues from Summit Hut’s in-store merchandising and signage. The chosen color palette, typography, and imagery were all tailored to match the wonderful feeling one gets when stepping into the company’s high-end retail shops. I intended visual chrome such as icons and buttons to produce a clean and professional look to match the company identity as a premier outdoor retailer.

Considerations included better readability, clearer navigation, enhancements to the display of vendor brands and product images, and improved product merchandising.

Merchandising an online store can be quite challenging, especially if you want to reflect how the real-life store works. There are really two parts to it: decorative and organizational. The first is extremely important since it conveys value and desirability to the products; the second provides a clear arrangement for easy searching, browsing, and choosing. My goal here was to remove obstacles and let customers figure things out easily while providing a pleasant, easy, and fun shopping experience.

Code

The recoded page templates were probably the most urgent need; the former summithut.com sported a table-based layout, spacer GIFs, and other typical markup-cluttering artifacts. Valid XHTML and CSS to the rescue! Building on Aaron’s solid programming and site framework, we worked together on producing lightweight and reusable HTML chunks (by reusable chunks I mean in the spirit of microformats). For the style sheets (CSS) I used principles of grid-based layouts and the excellent Blueprint CSS framework as a starting point for resetting and standardizing the layout, text treatment, and interaction messages.

All the benefits of standards-based development apply to the updated pages: faster loading times, code that is easier to read and update, improved usability and accessibility for traditional and non-traditional devices, as well as flexibility for future website features and visual changes.

Interaction

Interactive design tasks for the realigned site centered on product browsing, selection, and the checkout process.

For purposes of keeping this report as brief as I can, let’s take the example of the product browsing and navigation. The previous product navigation involved a clunky accordion-style navigation on the left of every page. The new site splits the top-level navigation into a horizontal dropdown menu on every page, improves the search tool, and provides multiple ways to visually scroll through products. Product browsing can be in a list view or thumb view, and the sidebar menus allow you to drill down and refine the offerings easily.

example screenshot 2

The dropdown navigation for products was an important piece of this realign (view screenshot). The amount of products and product categories in Summit Hut’s online store makes the product navigation interaction a complex and difficult one. The information architecture is based on the store’s internal organization, which doesn’t always mimic how customers shop. The dropdowns provided a great way to simplify the complexity, and with Aaron’s excellent choice of jQuery (with the Superfish plugin), this interaction works wonderfully.

There were many, many, more improvements to Summit Hut website; I can’t list them all here, but you can view the old site on archive.org and then browse the current site to see for yourself.