Google’s Dead-Simple Tool For Making UX Decisions: 2 Jars Of Marbles

When the Android team wants to decide whether a design decision is good or bad, they turn to the least techie of tricks.

Nothing is perfect. So even for the most successful platforms, design needs to continuously evolve. But beyond mere gut instinct or that ephemeral talent of taste, how can you know when a design decision is good or bad? How can you be sure that change is actually for the better and not for the mere sake of change?

Editor’s Note

12/30/13

Happy (almost) New Year! We’re saying good-bye to 2013 by revisiting some of our favorite stories of the year. Enjoy.

As it turns out, Google’s Android User Experience team has a fantastic trick to settle these debates. In their presentation at Google I/O, the designers shared it with the rest of the world.

It takes 3 positive emotions to outweigh each negative one.

It starts with a mindset, that every design decision they make affects user emotion in a positive or negative way. Obviously, that means iteration needs to tip the scales to positive emotions, and to do that, the team follows the guiding rationale of psychologist Barbara L. Fredrickson, who discovered that it takes three positive emotions to outweigh every negative one.

With that 3:1 ratio in mind, Google sets up two jars (maybe metaphorically—we couldn’t quite tell). So when they go to tackle a problem, like, "How do you signal to a user that they’ve swiped to their final page of apps?" they examine the costs and benefits of this solution in a 3:1 ratio.

How do they know what’s good and bad? The Android team has actually published their guiding rubric of 17 design principles to "Enchant, Simplify and Amaze" the user. You can read about them all here, but the CliffsNotes version is that Google creates design mantras from the point of view of the user, like "keep it brief," "delight me in surprising ways," and "it’s not my fault." Each time an Android feature lives up to these expectations, they get a single marble in the good emotion jar. But every time they fail, that bad feature produces three marbles in the bad emotion jar. The marbles illustrate that bad ideas stack up quickly.

The marbles illustrate that bad ideas stack up quickly.

So let’s go back to that "How do you signal to a user that they’ve swiped to their final page of apps?" problem. Any solutions? Well, what if Google did nothing? Literally, just have the UI do nothing to communicate that final screen. That would break two of their design rules, creating two negative emotions. ("I should always know where I am"—because am I on the last screen or what?—and "it’s not my fault"—because why isn’t this working??)

Alternatively, they could have a pop-up notification explaining "this is the last screen." But that still clashes with "it’s not my fault," because, as the team explains, any pop-up notification is a bit like being nagged for doing something wrong. They also get three marbles for "only interrupt me if it’s important," since reaching the last page of your apps isn’t going to destroy the world.

Now—maybe you know how this is going to end already—but Google opted to create a glimmering animation when users reached the last screen instead. And not only does this solution eliminate the problems created by the other designs, it gains four positive marbles for delighting in surprising ways, sprinkling encouragement, using pictures instead of words, and becoming a UI trick that could work in other places. (I’m pretty neutral to the animation itself, but I’ll admit that such small pieces of design can improve the overall interface experience in extraordinary ways.)

So can the marble trick work without utilizing Google’s 17 principles of design? I’d like to think so. But even if you don’t want to get so granular in personal critique, I do think it’s a grounding visual to remind us of a simple truth: A bad solution to even a small problem can be a very big deal to someone using your product.

And if you enjoyed a bit of insight into the Android design process, watch the full video embedded above. Around the 20-minute mark, there’s a bit on the language behind Android that’s fantastic.

Add New Comment

29Comments

Some really good tools and great tips, thanks for the article. We are Towoglo a new British online freelance market place, We are offering all the pre-subscribers a free 1 year premium membership! Do join us at https://www.towoglo.com
Thanks..

Some really good tools and great tips, thanks for the article. We are Towoglo a new British online freelance market place, We are offering all the pre-subscribers a free 1 year premium membership! Do join us at https://www.towoglo.com
Thanks!

Before getting all happy-clappy on the Android teams approach it's maybe worth having a look at MJ Parnells article on 'Why so much “science” used in design is bullshit: Android, Losada and Frankfurt.' Doesn't undermine all the good work done by the team but it's a welcome interlude to the quasi-scientific nonsense that sometimes clouds UX.

This "last page" example was touted in a talk at the most recent Google I/O and it's a fantastic example of how the Android team seems to be designing well—but isn't.

Having spent time dissecting the physics of Android's scrolling implementations (on varying hardware), the fact is that none of them are as smooth, balanced, or natural as the one Apple developed—and then patented! As humans, we develop an innate sense of physics over the course of our lifetimes—something deep and intuitive. In the realm of color, there are so-called "memory colors" which we automatically identify: sky blue, grass green, etc. When we see images where the colors are incorrect, they immediately jump out at us. The physics of android are no different.

The 3d-perspective "glass" animation at the end of scroll is a patent circumvention hack. The iOS implementation matches our innate physical expectations, and is therefore the most natural approach—but it's patented.

I love design process pieces! Seeing other professionals going about their work is inspiring—however the end-of-scroll example is nothing more than a hack, and I wish they'd address that honestly instead of trying to dress it up in some high-minded design thought-process.

The scrolling images problem at the top of the page: In response to Mark Wilson's comment below re: ad blocker. You're saying it's my fault?? Yes of course I have Ad Blocker on. I hate bloody ads. If you design your page to ONLY work with ads then your method is broken. You just dumped a whole BUCKET OF MARBLES into the negative-responce side of your design decision workflow process. Practice what you preach.

@Mark, Unfortunately that's not how your comment came across. I've seen this coding problem mentioned before in the last few weeks on various articles and the response has been to suggest that users have a issue at their own end - OS or browser. In the context of these repsonses, unfortunately the gist of your comment was regarded negatively. I've just read another of your articles where you close with mention of this marble theory, and how in their actual application solutions can become problems. In that exact same way, the apparent solutions of the crowd-sourced magazine, where editorial and reader interaction is loosened and freed up (editorial and interaction control), can result in problems that arise BECAUSE of that loosening of control.

Hey so, for one, I wasn't blaming, I was collecting a data point. And secondly, that data point was being used to confirm our own bug that you helped us spot. Our tech team fixed this bug so now our readers can see galleries even when using ad blocker.

This page is badly in need of a rewrite. Which way am I supposed to read the content? Top to bottom or left to right? Why does the third slide not have an arrow? Why is the content slightly off center?

Here's an issue: I've hit the back button like 7 times trying to get back to twitter. Still loads better than the current mobile site with the weird scrolling & loading screens though. Chrome on Android 4.2.2