Google I/O: Responsive Apps Across Web & Native

by Luke Wroblewski June 26, 2014

In their Going Responsive with the Google Play Apps Suite presentation at Google I/O 2014 Kirill Grouchnikov and Marco Paglia walked through how they built a consistent application experience across the Web, native applications, and a variety of devices. Here are my notes from their talk:

  • Google Play was inconsistent across apps and Web. This meant the same feature had to be implemented and designed multiple times for each platform.
  • The goals of the Google Play redesign were to create a consistent experience that worked across a wide range of layouts/screens/devices, and to dynamically serve appropriate content.
  • The key component of the UI was the card. The card was a great common denominator to display content like apps, magazines, music, books, etc. A common container allowed interactions to be consistent as well.
  • Cards were designed with a series of sizes from tiny to big and could be grouped into clusters (of multiple cards).
  • The other key component was the canvas which was defined as columns that expanded as additional screen space became available.

Interaction

  • Users shouldn't have to start over when they switch between native apps and the Web.
  • The Google Play menu is off screen within apps and visible by default on the Web but it is displayed int he same area and contains the same features and content.
  • On the Web additional menu options are exposed on mouse-hover. On Android they come using pop-ups. On iOS they show up in Action Sheets. The expression is different but the core functionality is the same.
  • The same hierarchy can be preserved across different device sizes through a combination of card sizes and clusters.
  • The sidebar navigation (off-canvas menu) should have about 5 top tasks/destinations. It can appear off screen on small sized devices but be revealed on larger screens. When the drawer is open, the rest of the content is faded out and recedes so people can focus on menu options.
  • Results of going responsive: increased speed of execution, more platforms supported without need for more designers, more collaboration between designers.