Google Knowledge Carousel Sorting Animation

Summer internship project

Google Inc.   May 2013 - August 2013

The Knowledge Carousel is triggered when searching on for a set of related items. It displays the results visually in a carousel and encourages users to explore through the information.

Currently in production, if you sort on the Knowledge Carousel, the page refreshes and reloads with the new sorted order on screen. My feature (currently unreleased) animates the sort so users can actually see the tiles becoming sorted and falling into their new positions.

Technical/Design Challenges

  • 1. Prototyping animations to hide non-trivial sort time. Since sort orders were originally requested from the server, the sort-time was non-trivial. I prototyped animations that could hide that fact. For example, first collapsing all the tiles into a deck, then expanding into the next sort order once the data has come in from the server. However, upon meeting with our designers, there was a strong favoring towards the "shuffle" animation -- a simple animation where all the items immediately go towards their new positions.
  • 2. Moving server-side sort logic to client. In response to the designers' feedback, we decided it was worth moving the sort logic to client-side. Thus, the user can interact freely with the sorting logic, making the process more fluid and responsive.
  • 3. Prototyping a reverse-order sort animation. The shuffle sort worked well for going from "Most popular first" to "Newest first" or "Oldest first", but not so much from chronological to reverse chronological order. Often times, most of the list was hidden offscreen, and it looked strange as all the tiles flew off screen and then flew back in like an accordion. Therefore, I spent some time getting feedback from designers and prototyping a reverse-sort animation that would look the least intrusive and confusing.

Demo coming soon...