Inclusive Design, Day 13/15: Mind the Mobile, Design for Low Bandwidth

This is day 13 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.

---

Bandwidth is a Precious Resource

Speed and connectivity should be considered be a major factor in exclusion. Just ride the BART in San Francisco. 😀

Joking aside, much of the world does not enjoy the wonders of high-speed bandwidth yet.  Like William Gibson famously said, “The future is here, but it’s not evenly distributed.” Kansas City Google Fiber gigabit on one end, on the other Tegucigalpa less-than-Edge with wires hanging off a string.

As evidence of the disparity consider the “lite”* apps built by tech giants for markets where they want to drive adoption. The need for a reduced-weight experience in places with low-speed wired broadband and tenuous mobile broadband highlights the case of exclusion. Where large populations are left out of the “modern web” due to connectivity limitations, cost of entry, archaic device types, and many more reasons both cultural and political. (*Side note: what the heck is with that spelling?)

One story I noticed recently that mentioned speed as a leading tech market indicator involved WhatsApp’s growth in India even as Facebook lags behind them, via The Economist, January 27, 2018. Sluggish web app performance is a factor in Facebook’s lack of adoption in India. People who pay by the megabyte or gigabyte prefer to use a service that is leaner, faster, less bloated. They’re voting with their app choices.

Extend the Benefits to Everyone

On the plus side, designing for speed brings about broad improvements to everyone else in the world. People should love the simpler interface with fewer settings and menus, alongside the bandwidth savings and reduced footprint for the app’s data storage needs.

Logically, “Design for low bandwidth” is on the Automattic Inclusive Design Checklist under “Bringing inclusion into designs.”

Back to the trend of tech giants creating lighter versions of their apps. When I take a closer look at the apps like “Twitter Lite” and “Facebook Lite” — at first they appear to be primarily designed for speed on slow connections. Yet the changes bring a new and different experience to many people who are mobile-first or non-technical.

The design enhancements resulting in a simpler and more intuitive app extends the benefit to a wide variety of people. For example, better readability from larger text size and the usability win from simpler navigation and clearer labels. That sounds like something the AARP crowd would all buy or click on or subscribe to.

If you’re curious about the “lites” — here’s further reading.

Twitter Lite:

• Introducing Twitter Lite and How we built Twitter Lite (April 2017)
• Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage, via Google Developer Showcase (May 2017)

Facebook Lite came out two years earlier: Announcing Facebook Lite (June 2015).

With Facebook Lite, our goal is to provide the best possible Facebook experience to everyone, no matter their device or connection. And we hope that by sharing how we built the app, we can encourage more people to build for the next billion coming online. — via How we built Facebook Lite for every Android phone and network

The next billion coming online! Ambitious.

Is Calypso Fast Yet?

WordPress.com teams pay a lot of attention to improving the user interface with a focus on speed, yet still have a long way to go to catch up. Much of the improvement happens “below the hood” in the Calypso React app — developers improve how the app bundles assets such as CSS files, images, and external JavaScript libraries. Loading files asynchronously when needed and not on the first page load, finding ways to remove extra weight from each page load, caching data in more places — all to make everything look, feel, and load ultra-fast.

Goal: Calypso is the WordPress Lite.

Calypso designers also pay attention to the user interface, of course — recently we’ve made the text size larger and improved the color contrast for readability. My team at WordPress.com is now digging into label changes and interactions needed for a refreshed, simpler navigation for managing WordPress websites.

For those curious, we track speed improvements in Calypso on this data-rich website: iscalypsofastyet.com. And, we’re hoping to improve both the mobile web performance and the usability of the app even more in 2018.

In a blog post Speed is a key design attribute John Maeda highlights two strong voices in recent web history — speaking out on the value of speed and performance: Marissa Mayer and Lara Hogan. They’ve both been preaching this same topic for years. I’m sure today no one argues the pivotal role of speed in Google’s early success and how it led them to market dominance.

Feel the Slowness to Build Empathy

Testing bandwidth limitations even on a fast network is a great empathy challenge. I’m grateful to John Maeda for sharing two ways to do this: Chrome has a throttling setting in developer options to try out slower speeds with your site or web app, and the Network Link Conditioner for XCode 9.2 for macOS.

I’ve felt this slowness most times I travel, even in the US — in airports, hotels, taxis, trains. Most definitely when in other countries, because I’m limited by my data plan’s built-in speed limitation. Or, as when I visited a WordCamp in Nicaragua, the slow mobile “broadband” is the reality for everyone living there.

Keeping in mind much of the world now sees the web only through a mobile device. Which brings us to a message from Wapuu: Mind the mobile!

For day 14 of 15 of inclusive design, I’ll share behind-the-scenes details of the work Automattic designers put into our inclusive guide and checklist.

---

About this Inclusive Design series — In 2 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 13 of 15. Read more about the series.