Answer cards – a great visual analogy

Here’s a post I wrote for The Real Adventure blog last September.

Search cards

Google has long been a company known for dealing in data. Be it collecting, analysing, sorting or presenting data, it has largely maintained its position as the gateway to the world’s information. It’s mission “ organise the world’s information and make it universally accessible and useful” is a noble one, and it is continually improving its offering to deliver on this promise.

But dealing with huge amounts of data leads to a challenge – how do you deliver exactly the right data at the right time?

With billions of possibilities, how do you deliver a search result that is both easily digestible and as useful as possible? One of its recent moves to improve the experience of its search product has been a continued shift towards the semantic presentation of data in an initiative it now calls the Knowledge Graph.

The aim of the Knowledge Graph is to resolve queries without the need to navigate to other sites to assemble the information

For example, if I search for ‘How tall is Mount Everest?’, Google should tell me how tall the mountain is – answering my query, rather than providing me with a selection of links about mountains in Nepal. This makes search faster, more powerful and most importantly – more useful.

The difference is context, or knowing the intent of the search

If Google can decipher why you are searching for something, it can provide more relevant information. This is the move from providing search results to answering questions.

Whilst it’s hardly a new idea (‘Ask Jeeves’ anyone?), there has been a steady evolution towards question answering within Google’s desktop search results for many years now. And the company recently made a giant leap in that direction on mobile, perhaps more than a little bit spurred by services such as Wolfram|Alpha and Apple’s Siri.

Mobile provides Google with more clues to the context of your search than on desktop

For example by knowing additional details such as a your precise location, it has a better chance of returning an answer, rather than a search result.

Providing these search results as answers within the context of mobile has presented Google with an interesting set of design challenges. Answers need to be delivered quickly, in an easy to digest format, within the small space of a mobile phone display.

And while they have improved their search experience across mobile, neatly displaying answers at the top of search results, it’s in their Android app that I believe they’ve hit upon a great solution: a simple ‘card’ based metaphor

For a company not always known for great design, it’s a clean and elegant solution, utilising white space showing just as much detail as you need, with no visual noise or fluff getting in the way.

Upon initialising a search, a card showing the answer instantly slides in from the bottom of the screen – as if it was being slid across the table by an invisible helper. This transition feels quick and slick enough to add to the user experience rather than detract from it.

The card its self is a simple white rectangle, displayed on a neutral grey ground, with a clean typographical treatment, key details picked out and enlarged, whilst other information is communicated through the use of icons.

The emphasis is on speed and readability – it’s just the answer I was looking for, delivered in a beautifully simple manner

This simplicity also makes it a perfect design for repeat usage. There’s minimal thinking time required to process the information, as it’s delivered in a bite sized nugget each time.

You keep searching for things, and it keeps sliding you cards with the answers on

Voice search is an option, but it doesn’t rely on it (I personally feel far too self conscious voice controlling my phone), and it uses device features such as GPS to get a bit more of the context behind my search. For example if I search for ‘weather’ it gives me a card with a local weather forecast for my current location, as you might expect.

This ‘answer card’ design utilisies something I’d describe as ‘abstract skeuomorphism‘. It utilises real world metaphors, using things already familiar to us to help make it feel more intuitive, but it doesn’t seek to visually imitate the real world. For example, it doesn’t use a faux cardboard texture or use the layout of a Top Trumps card – its skeumorphism for usability, rather than for decoration. I personally find this visual restraint and minimalism pleasing, and a nice counter point to iOS, which sometimes goes a bit OTT with decorative skeuomorphism.

The metaphor of having a card with an answer on is also a psychologically strong one. It’s reminiscent of having prompt cards that you can peek down at for reassurance in a presentation, or being in a position of power asking a question in a board game or quiz.

The answer card is something we can hold close, and feel empowered by

Google appear happy with it too, using the same card design in Google Now, their new ‘predictive’ virtual intelligence service, serving up cards with traffic information, flight times and meeting reminders.

Perhaps Google are at a turning point and are starting to find their own way, design speaking. Rather than imitating their competitors, they are maturing with their own visual language and design sensibility. This is something echoed in Google Creative Lab’s activities, and the recent Nexus range of devices.

I like that it all harks back nicely to that mission statement – “ organise the world’s information and make it universally accessible and useful”, it’s great to see a unified vision across such a large company – something that would no doubt help other parts of their business.

This entry was posted in apps, mobile, search, technology, UI, UX. Bookmark the permalink.

One Response to Answer cards – a great visual analogy

  1. Pingback: Google Glass | Phonic

Leave a Reply

Your email address will not be published. Required fields are marked *