Calm Tech UX & Inclusive Design Principles at Microsoft

Interruptions are inevitable. Some alerts are helpful and others distract during inopportune moments.

How do we design a system that empathizes with its users and adjusts the way it communicates?

 

Last year, Microsoft Design invited me to Redmond, Washington to consult on their accessibility and inclusivity initiatives.

Millions of users means hundreds of thousands of edge cases, and mobile products only increase temporary, situational and permanent frustrations. The team was interested in Calm Technology because it offered them a new way to address ongoing issues experienced by existing and future customers.

amber-case-microsoft-design-user-experience-calm-technology

After a number of interviews and workshops about attention and notification fatigue, I worked with Microsoft to help adapt some of Calm Tech principles into their organization and their inclusivity toolkit.

The guide introduces a reframing of the concept of disability, how user experience intersects with the goals of inclusivity, and an overview of permanent, temporary and situational exclusions.


How do you achieve focus? from Microsoft Design on Vimeo.

1. Increased Mobility of Technology equals Increased Moments of Disability:

Interactions with technology depend heavily on what we can see, hear, say, touch, learn, and remember. Mobile technologies can make situational limitations highly relevant to many people today. Mobile puts in focus questions like: Are we forced to adapt to technology, or is technology adapting to us?

2. Disability happens at the points of interaction between a person and society.

Physical, cognitive, and social exclusion is the result of mismatched interactions. As designers, it’s our responsibility to know how our designs affect these interactions and create mismatches. Points of exclusion help us generate new ideas and inclusive designs. They highlight opportunities to create solutions with utility and elegance for many people.

3. Sometimes exclusion is temporary or situational.

Even a short-term injury or context affects the way people interact with the world around them, if only for a short time. Think about trying to order a drink at a noisy bar, using your cell phone in direct sunlight, trying to write with a broken arm, or ordering dinner in a foreign country.

As people move through different environments, their abilities can also change dramatically. In a loud crowd, they can’t hear well. In a car, they’re visually impaired. New parents spend much of their day doing tasks one-handed. An overwhelming day can cause sensory overload. What’s possible, safe, and appropriate is constantly changing.

The toolkit also expands on some Microsoft Inclusive Design Considerations influenced by Principles of Calm Technology:

  • Understand urgency and medium: Can you be more mindful of the relative importance, and design appropriate levels of urgency? If everything looks urgent, nothing is.
  • Adapt to the customer’s behavior: If a customer consistently interacts with one type of notification, and ignores another, can your system react and adapt?
  • Adapt to context: Does your experience change if the sun’s out, or if there’s a crowded room? An isolated environment? Time of day? Can it respect and change in different types of environments or customer contexts?
  • Enable the customer to adapt: Can the customer personalize the experience, so it works better for their particular needs?
  • Reduce mental cost: How can you make your experiences simpler, clearer, and less costly to understand? Are there parts of the journey that are unnecessary or overly complicated?

I’d like to thank Microsoft for their ongoing efforts to make it easier for people to use their technologies, and for taking a step forward in trying to build Calm Technology for the future of our attention! You can read more about Microsoft’s Inclusivity efforts from Doug Kim.

If you want to start designing smarter, more empathetic systems, download the booklet for more questions to guide your thinking. Check out the Microsoft Inclusive Design site for more resources, toolkits and ideas.

This Week: Guest Posting for Wired Magazine’s Change Accelerators Blog

Greetings! I’m taking a break from my usual blogging routine (and by routine I mean a post every month or so) to write a post every day this week for Wired Magazine’s Change Accelerators blog. It’s a practice round leading up to the release of A Dictionary of Cyborg Anthropology.

Let me know if you like the posts and I hope you enjoy tuning in! Several have already been posted. Their titles are below:

Wired Magazine Posts

Monday: Why Do Makeshift Solutions Persist?

Tuesday: Does Your Tech Make You Feel Superhuman?

Wednesday: How Social Networking Is Extending Our Nervous System

Thursday: Your Brain is Full of Junk: Here’s Why

Friday: Calm Computing

Full Archive of Wired Magazine Guest Posts

Looking for more?

More about each of these subjects will be released in the release of A Dictionary of Cyborg Anthropology! It’s slated to be released in October, though probably around the end of the month.

The Need for Superhuman Interaction Design

Here I’d like to rant about something that’s been bothering me for a long time. Skeuomorphs and their contributions to friction-filled, annoying interfaces. This reduces the ability for people to feel like superhumans when they use an interface. If you already know what a skeuomorph is, skip down to “The Most Annoying Skeuomorphs”.

What is a Skeuomorph?

“an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material.

Basalla, George (1988). The Evolution of Technology. Cambridge, UK: Cambridge University Press. p. 107. ISBN 0-521-29681-1.

“a derivative object that retains ornamental design cues to a structure that was necessary in the original”.

The Compact Edition of the Oxford English Dictionary. Oxford University Press, 1971. Volume II, page 4064.

Skeuomorphs in the Wild

When done well, a skeuomorph helps a user to feel comfortable with an interface. Slight textures in digital interfaces help them to feel tactile. Good skeuomorph take cues from an analog world to help a user navigate a digital one. when done poorly, the skeuomorph forces the user to deal with an interface in an outdated way by blatantly ignoring the fact that the interaction is being done on a platform that is capable of handling new and improved interactions.

The Most Annoying Skeuomorphs

There is one place in particular where skeuomorphs aggravate me the most. This is the book reader or “page turn” skeuomorph. A book in real life takes some effort to hold, and some effort to flip a page. Many designers keep this effort around when they translate a book into a digital format. This results in the following annoying user interface experiences. Have you ever tried one of these badly designed pager turners out? When you try to flip the page, you have to physically press down on it and drag it over to the other side of the screen! And this is supposed to help people relax and enjoy reading on a digital device! Not if I have anything to do with it.

I first struggled with these annoying interfaces that blossomed during the 2000’s with the advent of quick Flash design. One or two people figured out how to program a page turner, released a tutorial and everyone was off to the races to copy it. The problem did not solve itself when the iPad came out. Instead, users saw and unfortunately experienced a increased bevy of ostentatious and distracting skeuomorphs. Things that made them feel bad while using a device.

Superhuman Interaction Design

Look at this interface for Flipboard. When you use it, you get an entire new page of content with the touch of a finger. Content pre-loads on either side in a visually pleasing way, taking a neurologically stressful set of RSS feeds and presenting them in a way in which the human has implied control over the data.

Flipboard presents a very important turning point in Skeuomorphic interaction design. It takes the best parts of the page turn, reduces them by half (the page pivots from the middle, not the side) and presents the reader with more information instantly. It is seamless. It is empowering. And because of that, it is relaxing.

People are excited to use Flipboard because it is not just a mentally joyful experience, but a physiologically joyful one as well. It is because of this that I consider Flipboard to be a part of what I’m calling “superhuman interaction design”. In order for an interface to be considered superhuman, it has to have the following characteristics:

  • Minimize visual skeuomorphic cues and reduce the interaction to action ratio. Flipboard reduces the page curl to a centralized pivot, and allows a page to be turned with the touch of a finger.
  • Make the user feel physiologically empowered. Present information in a way that makes the user feel more powerful than the information, not overwhelmed.
  • Make the user feel exhilarated when using the interface, as if they had suddently turned into a superhuman and they are able to do this because you’ve made them an excellent interface that empowers them instead of frightens them and makes them run away from data.

Other Superhuman Interfaces

Do you know of any other superhuman interfaces? I really like Skitch for its ability to quickly capture and store information, as well as it’s slick flipping interface. Least stressful tool on my machine.

JumpCut allows one to store up to 50 clipboard objects and access them with a tiny set of keyboard shortcuts. The interface is invisible until one needs it. It makes me feel like my short term memory is suddenly 50 memories long, instead of just 4 or 5.

DML – Demographic Markup Language

The Current State of Demographic Advertising

Are you sick of all of the irrelevant advertising you get on various websites like Facebook, YouTube, Hulu and blogs? On Hulu I’ve set my gender to Male and birthdate to 1973 in order to get advertising that I actually like. This is because I like ads for technology and ads with funny jokes in them. I’ve begun to do this on many other websites so I can get ads that aren’t as obnoxious. The issue is that my interests don’t match what I am on paper. I’d like to be able to define them myself, and I’m sure many would agree.

DML – Demographic Markup Language

There needs to be a markup language so that you can define your own demographic. No more irrelevant online ads. Did these one-size-fits-all-thinking people get an online marketing degree? Brian Ledger, brought this concept up today. It made me happy to know that other people are experiencing this annoyance.

If you change your demographic, your entire user experience could change for the better. Content would be more relevant and interesting, and the content you received would not be based on very small data points such as age or sex. Those two data points often skew people into groups that don’t mean anything at all.

What there needs to be is standard for defining demographics. There needs to be a demographic markup language and then a query language on top of it. For the user, this would be an extra set of metadata one could attach to their profile that would inform ad engines of the type of ads you’d like to see.

Brian pointed out another concept that might be interesting. “What if you log into your own demographic and say “this isn’t me” or change it? One one could keep their own demographic file and preview the type of ads you might receive because of it, tweaking it until it was relevant”.

What Next?

I’ll be writing more on this later and hopefully working with Brian Ledger on how this might look. What do you think? Would you use something like this if it meant you could curate your ad experience to something more relevant? What we need is a textbook that defines a certain vocabulary to use and map that into a subset of XML.

Microformats

It might make sense to have DML be a part of Microformats.org as a sort of demoformats. Reasons for this is because microformats are already known and used, and demoformats would simply be another extension or option set within microformats. Another curious thing to look at is schema.org

On Welcome Screens and Dashboards

Reuse the welcome screen as a notification system.

Allow cancellation of these notes. Color code them according to their need to be dealt with. An error is red, a note or caution is yellow.

Get users to the Next page (or next thing). Get people off of the home page and into re site as quickly as possible.

Give users something to do every time they log in

Whether it is updating their profile, adding information about themselves or clicking on a new piece of content, people won’t know to click through to do something unless you present it to them. And when you do, they’ll be happy to have the direction. Often they won’t even notice it; they’ll simply click on it.

Twitter’s homepage provides all of these things and does then well. Not only does it use the homepage as an alert box, but it provides a blank empty space for the user to add data every time they open it: also, all data on the page is new, meaning there’s always something new and different to see.

Facebook functions in exactLy the same way. Both systems place ultimate value on displaying data of others before the user’s own data. For instance, onemust click three times to look at their own data on Facebook, and once onTwitter (clicking on one’s username will pull up only their tweets). With so much content available, it no longer becomes a choice whether one will participate or not, but rather what one will participate with. That same amount of choice is present to the user, no matter where they are on the website. A click on Twitter almost always shows more content choices. Even the settings page invites toggling and updating. On Facebook, every click has multiple options arise: more people’s updates – more advertisemets and images, and even chat. Even the privacy settings require a 30 minute commitment, all leading the user to spend even more time on the site.

Give them a new thing to update every time they log in and they will eventually get around to it: it took me a year to completely fill out my linkedin profile, but it did it…eventually. And the interface waited for me the entire time. Often a user might fill out all of the information just to get the notifications to go away.

User Rewards

Offer a prize upon completing a start up task. Dropbox gives an extra 250 megs for completing the introduction to Dropbox.

The Mozilla Foundation and Foursquare are similar in that they both have leaderboards that display top ranking referrers or users. The rewards are often intangible. They are often points, not karma, not ‘squiggles’. Points are points. They do not need to be called anything other than that. The idea of points has worked out for hundreds of years. Points are points. They allow one to run a game. Their name does not get in the way of gameplay. Just call points points and get over it. Don’t be inventive.

The welcome screen can also be used as a guide for a three step process that the user does not have to complete during one sign-in session. Having 3 steps that stay in the dashboard or homepage allows the user to immediately know what they need to do when they log in on subsequent sessions.

If the user must set up storage for the system to be able to work, then the first step of the dashboard should be to set up storage. Once storage is set up, that notification should disappear and be replaced with a new one, or, if it is part of a list, it should be crossed out and or grayed, illuminating the next step in the process.