UI Pattern: Interacting with Logos

CSS 3D transforms are great for creating snazzy effects but the really interesting thing about them is what they mean for interaction design and information design, and that’s the opening up of an additional dimension for placing information.

David DeSandro touches on this in the introduction to his Intro to CSS 3D transforms:

Switching between these two views is done with a 3D flip transition. This affords the user that the interface has two and only two views, as they can only exist on either side of the same plane.

This is the killer feature of UI cards.

I wanted to apply this to an idea I blogged about a few years ago, an idea about grouping brand-connecting actions (social following, registration, etc) together and using the logo as the access point. In the example I gave, tapping the logo would reveal a panel like this:

Instead of a sliding panel, I wanted to see how it felt to use a 3D card flip. In addition to the business card connotations I liked the idea of using the space behind the logo instead of triggering a surprise off-canvas event.

Here’s a demo using the New York Times logo.

One of the things I like about it is that it conceals some of the more cluttery UI elements, e.g., the Twitter and Facebook logos, without banishing them from the page. It also provides a logical access point for certain basic site functions.

To ease concerns about removing the familiar logo-links-to-the-homepage behavior, I included a homepage link in the set of available actions.