If HTML5 “cards” were listed on the share market, you would have seen a sharp increase in their price yesterday. While Google was exciting us at I/O with talk of enhanced photo features, interface-free search, and a new Hangouts app, it also gave a huge boost to cards, a relatively new information-delivery mechanism that are essentially digital boxes of content. As per Google’s announcements, cards are now a major feature of Google+ and Google Maps, complementing the existing experience on Google’s newest and most innovative projects, Glass and Google Now.
The Google boost for cards reinforces the format’s rise on Twitter, Facebook, which uses a flip animation for status update cards on its iPad app, and Kik, which uses cards for rich media in its mobile chat app, among others.
Since the invention of the Web browser, the consumer Web user experience has centered around a body of content that is meant to be consumed from top to bottom while using a mouse to scroll up or down. Blog posts and news stories have long been laid out as pages, with comments and sharing functions pasted below while ad units and links to other content are stuffed into sidebars. Social media, from MySpace to Facebook to Twitter, carried on the tradition, assuming the page-based unit was the most natural way to consume digital content. In many cases on the desktop, where you can use a mouse to move down a page quickly and screen sizes tend to be larger, “pages” continue to make sense.
But touch screens and, more recently, Google Glass, are beginning to change the dynamics of content consumption. While most apps for smartphones and tablets still ask us to use our fingers and thumbs to scroll down pages of content and poke at buttons, they are now increasingly favoring gestures, recognizing that swiping, pinching, tapping, and even clawing feel more natural than dragging. Take, for instance, HotelTonight‘s diagrammatic booking gesture; or Twitter’s tap-to-dismiss pictures feature for iPad; or Dolphin‘s search-by-gesture functionality. That impulse for gesture controls translates neatly into an Internet media environment that is filled with cards.
If you consider how we primates have used our hands for non-computery actions over the last few million years – holding branches, throwing stones, wiping dust from the table, brushing hair off our cheeks – the move to a gesture-based navigation framework seems logical. However, it took the arrival of the iPad to really spur the development of gesture-based navigation. Now, many of the apps and systems designed for the iPad are starting to influence the way we design for the Web in general. That effect is most visible in cards, which are flippable with a short, sharp swipe, and potentially friendly to voice commands. (Imagine saying to a news story, “Show me the back,” and then being presented with comments and added features on the rear of the story.)
There is something about the action of flipping a card that is satisfying on an elemental level. Perhaps there is a primal satisfaction in sending an object into a spin with just the flick of a finger. Thanks to touch screens, we now have the ability to feel powerful with just the slightest exertion of our pinkies. Part of it also may be that it reminds us of paper, a two-sided medium that is still one of the best content delivery devices ever invented.
Whatever the reason, the advent of cards opens up exciting and perhaps underestimated opportunities in Web design. For a start, by loading contextual content onto the “back” of a card, designers can design a distraction-free front side that well shows off the anchor content. If, for instance, the card is a Google+ status update, the entire card can be given over to the text or image, while hashtag-related content and perhaps other comments could be accessed simply by flipping the card over. This seems like a reasonable way of getting a mix between clean design and deep context.
Many of these HTML5 cards will ultimately be portable, meaning they can be transported intact from app to app, platform to platform without losing their design context or in-built architecture. In that sense, then, some cards will start to take the place of links. Where in the past some links have served as texty gateways to other content, with cards, users can get a more contextual information and a more visual representation of the content being showcased or referenced.
If similar technology were applied to stories and blog posts, comments could be tucked away neatly on the “back” of the original story, freeing up white space for designers, and keeping the physical length of a story under control. In such a scenario, other information, such as social sharing options, Wikipedia summary boxes, image units, and video slots, among other things, could also be incorporated into the back side of a “card,” giving producers and readers more options for interacting with a piece of content.
Even if designers choose not to avail themselves of the options for adding content to the back of cards, they at least get to lay out the content in a space that is going to hold its shape no matter where it is on the Internet. As much as the card is an attractive content unit, it is also a frame for the artistry contained within.
What we saw at Google I/O yesterday is likely just the beginning of a wider push towards a card-oriented design philosophy – one that works across all platforms, be it on the desktop, mobile, or on Glass. The advance of cards is a positive development for Web design: it not only serves as a clutter clearer, but it advances the art of adding context while ensuring that content can move freely around the Web in atomic units that retain original design intent.
And besides, it’s about time we found a way to escape comment threads that stretch out below a story for a length even longer than the original piece.