Tag: twitter

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.

Photo of a story in The Economist about WhatsApp and Facebook
Screenshot from a story in The Economist about WhatsApp competing with Facebook in certain markets, winning there in part because of low bandwidth and connectivity.

In more ways than one, WhatsApp is the opposite of Facebook… whereas Facebook requires a fast connection, WhatsApp is not very data-hungry.

As a result [of this and other reasons], WhatsApp has become a social network to rival Facebook in many places, particularly in poorer countries. Of the service’s more than 1.3bn monthly users, 120m live in Brazil and 200m in India.

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.”

Automattic Inclusive Design Checklist item about designing for low bandwidth.
Screenshot from the Automattic Inclusive Design Checklist about designing for low bandwidth.

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:

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.

Is Calypso Fast Yet website screenshot
Screenshot from the Calypso project performance status site: iscalypsofastyet.com.

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!

mind-the-mobile.png
Wapuu says: “mind the mobile.” (Background image: Pexels; Wapuu illustration by John Maeda.)

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.

Exclusion Example: Emoji in Twitter Titles

A thread this week about emoji in Twitter titles provided me an instant treasure trove of design exclusion lessons — broadening my perspective and building empathy for non-visual people using Twitter.

First, though, let me back up a step to explain why it’s a gem. Why it illustrates the need for first thinking about exclusion when approaching inclusion.

Inclusive design became a major learning trend for me in 2017 — starting with fresh perspectives arriving in my life via the designers and developers at Automattic, especially our Head of Design John Maeda.

In April I jumped straight in via the Design and Exclusion conference we launched in collaboration with Twitter, NextDoor, Airbnb. Listening to debiasing stories where people shared intimate details of feeling excluded rocked my boat a bit.

My mind really cracked open in August when I become aware of Kat Holmes and her work on this crucial topic. Previously with Microsoft and now via her own company, Kata, Kat presented the foundations of inclusive design internally at work over a video call. She then presented a longer, in-person version at our Grand Meetup in September; and later in 2017 Kat became an official advisor to Automattic, also. Hurray to that!

20171011_173515z-4.jpg
Photo showing the Design.blog page on inclusive design.

For a great introduction to Kat and her work, see Kat Holmes: Who Gets To Play? on design.blog.

OK, back to the Twitter emoji in titles thing.

What. The. Heck. Like most lessons I’m learning about building inclusion into designs, this one hit me straight in the temple. Painfully. Why hadn’t I thought of this before? I mean, “duh.”

The author, a blind person named Sassy Outwater, not only points to something incredibly real and timely — but then proceeds to share a master class in accessibility in the reply threads that follow.

Here are a few highlights; check out the full thread for more as they come in.

Memes and GIFs are hard because the screen reader technology can’t figure out any optical character recognition (OCR) on the moving bits:

Tips and tricks for including blind people using screen readers:

Here are the current screen readers people love best:

Here’s the survey she mentioned: Survey of Preferences of Screen Readers Users on WebAIM.

Shedding the light on the fact that in today’s world, mobile devices are the most universally accessible devices because — they’re small and with you always — and they have default voice-over utilities:

And then a question I had, she answered perfectly, which in my mind was, “OK, so how does it sound when the screen reader comes across the non-text symbol?”

Hah! (smile) (laughing)

Learning, not shaming:

I don’t expect everyone to use the word please but I appreciate those who do. Common courtesy is society’s problem, not an issue to drop on developers. That’s ableist. Universal design says we are all sharing the same space. Courtesy goes a long way. — Sassy Outwater

 

Eye-Mind-opening, thank you Sassy — and Kat, John, Ashleigh, Lori, Anne, Cate, Maria, Davide, DK — and many others who’ve taught me so much about this topic.

I mentioned that this is timely — one reason is for learning and improving. The other is sharing what I’ve learned: if you’re in Arizona come to my talk about inclusive design at WordCamp Phoenix 2018 in February.

 

You Should Start a Blog

You blog whether you know it or not—even without a blog or website. You might not think of it as blogging. Yet, it is. Tweeting a photo or sharing an update on Facebook. A funny quote or story you see in your daily life. A beautiful sunset. Clueing in friends and family back home to a fun experience when you travel.

Blogging on your own website is much better than directly using services like Twitter and Facebook because you own your own content; it’s your online hub that you control. When people read your content, it will link back to you. Not some third-party site.

To spread the word to your social network—in case they don’t happen to know about or follow your blog—simply use features like WordPress.com’s Publicize and Sharing to share out the content to popular services (see Jetpack Publicize if you host your own blog).

To understand what I mean by publishing your content on your own blog—then push it from there to any social media service easily—I recommend watching this video: WordPress as Your Publishing Hub by Andrew Spittle (about 25 minutes long).

A few examples of my own blogs—several of which are brand new in the last few months.

Lance On the Go

Lance on the Go — A “moblog”, which is “mobile blogging” for quick things on the go, like from your phone, not long-form essays or big picture galleries. Not too polished or curated, just point-and-shoot and post.

Bad Français

Bad Français — My “Bad French” blog. As a language major (French & Spanish) I often find it hard to resist poking fun at misspelled foreign words—it’s a habit. Please don’t take offense if you or your business make it to this blog.

Theme Spotting

Theme Spotting — Geeky WordPress themes blog, fun with theme names. When you spot a theme in the wild, you post a picture of it. (Want to join the fun? See theme names at WordPress.com Theme Showcase and WordPress.org Theme Directory and then look for them as you are out and about.)

What to blog? Photos of things you see on your daily journey. Put up random notes. Whatever is on your mind. Quotes. Fun songs or videos you see online.

Why blog? Express yourself! Clue in your friends and family to your experiences. Importantly, you own the content you post—not a company like Facebook or Twitter. For me (any anyone in the WordPress community) it is good practice using WordPress itself: helping find bugs and suggesting improvements to the software. Using the mobile apps more, helping them be better.

Don’t just take my word for this, though, that you are a blogger and should blog. Matt Mullenweg, co-founder of WordPress, recently explained the “why blogging” succinctly when echoing Ernest Hemingway’s expression “write for two people: one specific person and yourself.” See also The Intrinsic Value of Blogging and Short-form blogging by Gina Trapani.

Let me know when you start and I’ll follow your blog. ):}

WordPress for Collaboration

I gave a ten-minute talk on this topic for the Tucson Digital Arts Community WordPress Workshop on January 14th, 2009. The talk could have been titled “How to Build a Private Twitter for Your Group With a Custom WordPress Theme” since that is the main idea. This is the text of my talk.

wordpress-for-collaboration001

I want to share with you an example of a non-traditional use for WordPress. As I’m sure you may know, WordPress is the most popular blogging software on the market. It is easy to use and customize, makes web publishing simple—it gets the job done. What you might not know, however, is that it does more than just blogs and simple CMSs.

I’d like to share one specific example of how I use WordPress to collaborate with a remote team. I figure I can kill two birds with one stone: I am going to show you how to use a WordPress custom theme for collaboration in a work environment, and at the same time I hope to encourage you to explore alternative uses of WordPress.

I live in an RV and travel around the country, so most of the time when I’m working with my colleagues, I am working remotely. That means that how I collaborate with a dispersed group of people is extremely important since we don’t have lots of face to face time. Even if you aren’t a stay-at-home or remote worker, you still have to collaborate, right? Even if it means sending an instant message to the guy in the cubicle five feet away from you.

dcr0744l

Who’s done that before? I think we all have. My point is that even if you are in a traditional office environment, it doesn’t mean that all your interactions happen face to face.

We all know that good communication is the key to getting things done. And I think my example tonight applies to in-house web design and development teams just as much as it does to freelancers or remote workers like myself that typically use email, instant messaging, and project management software to collaborate; those technologies take the place of the face-to-face interaction.

What I am doing right now?

Collaboration might not be the right word… I’m not going to cover what it means to manage projects with clients and how to collaborate on tasks and timelines. Instead, I want to talk about the simple communication that happens all day long. Answering this question, “What I am doing right now?”

How do you normally share that type of information with your group? And how do you keep tabs on your coworkers’ updates as well? Typically that would be done via email, phone calls, short meetings in the hallway, putting colored cups on top of your cubicle (hey—don’t laugh at that one, it works really well in some situations).

My sister once worked in an office where one way of saying “what am I doing right now” was exactly that: they had a red cup that meant “I’m busy”, and a blue cup that meant “I’m free.”

When these traditional methods don’t work, or if they aren’t practical, we often look to other tools for sending out quick and simple updates. Updates that are sent without much preparation or the need to open software. Updates that are asynchronous—meaning other people don’t have to respond right away—the message will be there for them when they are ready to read it.

Twitter

Lately it seems like there are more and more products being created to handle this type of communication. One great example is Twitter. It’s awesome, right? You get 140 characters to describe what you’re doing or how you’re feeling, or to post a link. Twitter is extremely popular because it gives you that “chatroom” feel of constant conversation. It’s quick and easy to post but can be engaging and effective.

It can be a really great way to simulate being in the same room with someone.

wordpress-for-collaboration0081

Twitter users share their personal updates with each other by answering the question, “What are you doing right now?” That question is typically a label on the text entry field on the Twitter website, for example. It’s the same action as updating your Facebook status to say you are having a bad day, or what you movie you are going to see that night. You just want to share a quick update without writing an epic saga or opening up your blog software to write a new post.

Twitter has changed how people interact. It’s effective precisely because it’s so simple. No tags or categories, no spellcheck, no formatting, just post it and it’s out there for all the world to see.

But what if you just need to communicate with one small group of people?

wordpress-for-collaboration0091

About a year ago, right here in Arizona, the makers of WordPress (Automattic) were having their yearly company gathering just north of here, in Oracle. They were thinking this same thing, and there they came up with a theme called Prologue that replicates Twitter-like interactions within a WordPress website.

Just like Twitter, Facebook, and other social web apps promote lifestreaming, Prologue promotes workstreaming for your team. Workstreaming is the publishing of work-related activities and events to your remote colleagues. Some might say that it’s also a way to convince your boss that you’re actually working!

What are you working on right now?

Prologue helps you answer the question, “What are you working on right now?”

My work as a consultant sometimes means being part of a small team—for one team I work with often Prologue has become one of our most-used communication tools. Besides constant updates on what we’re doing, we use Prologue as a scrum tool: every morning we all post our daily goals and roadblocks.

We also use it for sharing links and tips. But the main purpose for using Prologue is to update each other on our status.

Prologue helps you collaborate

How does Prologue help you collaborate better? Prologue is successful because it requires almost no work to post an update. The easier you make it for your team to post, the more they will use it.

  • It encourages short updates.
  • It allows a quick post on the home page—there is no need to view the admin site.
  • It allows comments so you can create a conversation around what you posted.
  • You can add tags and categories just like normal blog posts in WordPress, but you don’t have to. Like Twitter, you can just type and post.
  • You then use RSS feeds to track your coworkers’ updates. Or if your the boss, you sit there all day and hit Refresh! (Just kidding!)

Prologue is free, and easy to set up and use. All you have to do is download and install the theme, then enable it. It’s that easy. Even easier, you can sign up for a free WordPress.com account—it’s a default theme there, so you don’t even have to download it.

Here’s how easy it is to start using Prologue with a free WordPress.com account.

  1. After you’ve signed up for a free WordPress.com blog, log in and enable the theme.
  2. Then go to the blog home page, and post an update.
  3. Invite other users to join by adding them to the account.

That’s it!

Based on the default WordPress privacy settings, your Prologue setup can be public, or password-protected (meaning available only to your group). The password-protection is available with WordPress.com by default—if you are running your own WordPress site, then you’ll need to implement password protection on your own.

Try it for yourself

View the Automattic team’s live Prologue demo, and I’d encourage giving it a test run on your own WordPress site.