The tools that weave themselves deepest into the way humans communicate, do so with our help. The designer releases their invention into the world with a few bold statements, and then it’s up to us to tell them what the significance of the tool is, and how best to use it.
Google+ is no exception: it’s a relatively compact first release of just a few core concepts. Like many, I look forward to watching millions of people build on these concepts with improvised hacks, shorthand and other homemade enhancements, to complete a product story started by what may have been just a few dozen in Mountain View.
When taking a look at some of the decisions Google made, I found five ideas worth keeping in mind when designing any new service.
Pluses everywhere.
“+” is a completely unimaginative and entirely appropriate name for what Google+ is aspiring to be. It is not a new, independent product. It’s a layer of social tools built to enhance what Google already is to billions of people.
Some have complained that the symbol is too small; tacked on to the Google logo you barely notice it. But this isn’t a 20th century branding exercise: tacked onto the Google logo in the bottom left corner of a subway poster is not how we will see it most of the time.
Its compactness allows it to inhabit any corner of the product interface, taking on different forms and nuances as needed. As “Google+” on the website it means “the Google you known with an added benefit”, as “+Chris” in my Google toolbar it tells me “Add yourself to the conversation”. As “+1” in my search results, it means “raise your hand in support”. Nothing particularly original here, but the flexibility of it will allow the product to be whatever and wherever Google needs it to be, next year and the year after.
Circles couldn’t be more elegant. It’s a common noun, and Google is using a common definition pulled straight from the language of offline relationships. It requires no learning to understand its purpose or how it functions. It does what it says. It’s a one word opinion paper on what Google thinks is the primary nature of online social relationships: loosely bound, transient, non-binary, and founded on shared interests.
The web interface for circles may be clumsy, but it's a smart communication tool.
The drag-and-drop interface for managing Circles is a great piece of communication to introduce the concept of circles. The large circles containing rings of small portraits leaves a memorable image of the feature, an image you might retrieve as a mental model to explain the feature to a friend.
Okay, the usability is not optimal. Web designers have yet to get users to master drag and drop within a web browser. Maybe Google will, if by brute force, but in its current form, manipulating the large contact cards and circular targets feels like dragging boulders across a beach to drop them into the sea.
Even in its first week, Google+ contains many better tools with which to organize social relationships, so this is not the one most of us will use most of the time. However, if it helps sear the concept of Circles into our collective understanding of online social networks, it will have done its job.
Designers and users have managed a consensus on the superiority of “simple” tools. In reality however, most of the truly simple tools were invented by our ancestors, leaving us mostly with simple looking. A spoon is simple. Google+ is not, but it looks simple because it has been designed to optimize focus.
The stream, for example, has been designed for focus on the presentation of content, making it one of the most elegant pieces of visual design on Google+. Like Twitter’s timeline and Facebook’s Wall, Google+ stream includes many tools for the manipulation of content. These tools remain quiet in flat whites, pale greys and thin lines until you show interest, when they spring to the foreground: text fields take on a comforting size and visual heft, buttons and icons, now ready to be clicked, blush in full-color saturation.
My favorite focus detail in the stream’s design is a hairline vertical rule, which appears when I click in the vertical space of any content item in the stream, or use the j/k keystrokes to toggle focus between content items. This little line helps the user tame the uneven height and visual texture of content blocks, find their place after scrolling, and understand where content begins and ends.
While Twitter and Facebook use similar techniques of progressive disclosure, neither has reached as comfortable a balance of visual focus.
Google+’s smartphone browser interface is a full-featured manifestation, conceding very few functional limitations imposed by the cramped screen size, while taking advantage of the extra bits of information a user on the run can provide about their environment. Whether or not the product designers started Google+ from mobile remains unclear, it is clearly a “mobile first”-class experience.
Where Google has refused difference in functional richness, it has embraced difference in aesthetics, as the smartphone interface bears almost no visual resemblance to the PC site. The PC interface seems inspired by the quiet aesthetic of the printed page, while the smartphone interface takes all its cues from the pumped-up visual language of iPhone apps:
Large, beveled, bold icons we can identify out of the corner of one eye, while the other monitors our overfilled take-out coffee as we barrel up the stairway towards the next subway transfer.
Zooming and sliding animations that let the user know that they’ve changed levels of detail in the hierarchy of information, even if we weren’t fully paying attention.
Shadows, highlights and layering that encourages clicking.
The total of these details isn’t a realistic, consistent world of 3D beauty, nor should it be. These details have been added to reduce mistakes and increase confidence as the user manipulates the interface, within the multisensory distractions of the real world.
These days, people know they are making an investment whenever they try new software, even free software. If they aren’t investing money, they are investing effort, attention, social influence or one of any number of finite resources at their disposal. When Google decided to enter the crowded social network business with Google+, they took on the unenviable extra burden of inciting a mass brand switch. As Instapaper creator and tech writer Marco Arment pointed out, Google+ has to do this quickly for any of its key features to be useful to its first wave of users.
Google made several smart decisions to make this likely. By far the most important of these decisions was to chop the user’s investment size into tiny pieces, offering the user modest returns of happiness for those tiny investments, and removing as much friction as possible from the transaction, via kick-ass interaction design.
The best example of this was the organization of social relationships with Circles. Google didn’t force us to upload and organize our entire contact book on day one. Instead, they added a tiny interface to Google+ and Gmail that allowed us to describe social relationships piecemeal, when we felt like it. This investment occurs via the frictionless repetition of a tiny cursor movements and just one click, a flawless specimen of interaction design.
And what does Google give you in return? At this point, who knows. The “Rolodex card” we clicked on disappears and seconds later, is replaced with another. Not particularly valuable, but satisfying enough the first dozen times. Before long we notice your Circles begin to grow. Friend’s photos appear next to their emails in Gmail. The next time we share something with a group of friends, it takes 2 clicks instead of 20. Whether these little transactions add up to the loyalty of a handful or a billion of us is a question a few years off from being answered, but in the meantime, Google buys themselves a little time to observe and adjust, and complete the circle.
July 20, 2011
