No results.

Simplicity: Sparsity or Storytelling?

GD Star Rating

A tweet by @akumar prompted me to punch up this quick blogpost:

as with all controversial issues, there’s a positive in google trying bing/image – that they’re not afraid to learn from competition

What Amit is referring to is the recent addition of gorgeous photographic images as search page background.  See for example this writeup: http://blogs.abcnews.com/theworldnewser/2010/06/google-vs-bing-copycat-picture-on-prominent-page.html

He is of course correct; Google is learning from the competition.  But there is another issue at play here, one that I don’t want to overlook because I feel it is very important.  It is the issue of simplicity.  What is simplicity?  How is it defined?  How is it measured? Conversely, what is complexity?  What is clutter?

For over a decade now, Google has essentially defined simplicity as sparsity.  Sparse backgrounds, lots of negative space, sparse color schemes, sparse auxiliary information (e.g. query term suggestions on the SERP page have only started appearing in the last year or two, despite the fact that such features existed 15 years ago in search engines of old such as Infoseek and Altavista).  The reason given was that people didn’t like clutter, that people like simplicity.  And in Google’s definition, simplicity equals sparsity.

I agree.  People do like simplicity.  I don’t question the veracity of that general sentiment.  What has always bothered me, though, is the equivocation of simplicity with sparsity.  I think a much better definition of simplicity is not the amount of information or colors or negative space on a page, but the story that a design, interface, interaction, or algorithm tells.  Something with a lot of colors and links and words can still be simple…if it tells a clear story!  Conversely, something with fewer colors and links (sparser) can be more complex, if the story that it communicates is muddy and not as purposely focused.

This brings us to the Bing background image.  In my opinion, the even though the inclusion of a background image is less sparse and more “cluttered” (more colors, more shapes, more textures), it actually assists in the telling of a clearer story.  Why?  Because it more cleanly separates foreground and background, subject and frame.  It provides compositional balance to the page.  The white query input box on white background (10+ years of Google design) is sparser, but the story that it tells is less clear because foreground and background are not as cleanly separated.  A white query input box on a richly colored and textured background tells a clearer, simpler story because the background image frames and separates the foreground query input box.  Furthermore, because you can now distinguish background and foreground, you can more clearly see that the query input box lies near the pleasing “rule of thirds” line, which aids further in the overall storytelling.

In short, I applaud this move by Google, just as I applaud it from Bing.  I never liked the white-on-white, because sparsity is not the same thing as simplicity.  Simplicity arises through good storytelling, not through minimalism.  No A/B testing will tell you this, though.  It’s a definitional issue that must be defined before you start your A/B tests.  Google has learned from the competition, as @akumar says.  But I hope that the lesson Google has learned is not just that users like pretty pictures.  I hope the lesson is that, when it comes to simplicity, there is a difference between sparsity and storytelling.

See also my posts: The Tyranny of Simplicity, The Tyranny of Simplicity, Redux, and The Craft of Storytelling.  I also found this older discussion on Google’s Lively to be a fascinating read.  In my understanding, the issue of “necessary complexity” that the author of that post hammers home about is related to the issue of storytelling.  Too much sparsity (of interaction in Lively’s case) leads to an inability to tell a clear story.  Simplicity is storytelling, not sparsity.


Leave a Reply




You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>