The z-layer in mobile designs

There are several key interactions design innovations that solve for the constraints of mobile experiences with elegance. The physics of swiping is one. What is the first interaction shown on any demo? The elegant “you can swipe it” motion. Another key area for innovation is certain app’s usage of the z-layer – pretending this stuff is stacked in physical space.

20120514-080516.jpg

I was motivated to post this by the truly slick implementation within the Nat Geo app above. I was more excited than any single person should be upon discovering the transition. In this case you tap the stats icon and ‘sjoop’ your main experience dances back and ‘bloop’ the stats appear with big beautiful numbers. And here is an instance where a “done” button makes an appearance and is warranted. Until i previewed my post just now, i couldn’t remember the interaction to close the stats. That may be due to the lack of thinking i had to do to find it.

The windows OS is slick, but it focuses on the “there’s more stuff over there” metaphor. I think that is more limiting than endless ‘cards’ (also a nod to the early days of WAP programming). The “there’s stuff in front of/behind here” along with the right transitions has emerged as a great way to distinguish menus from content like on the increasingly prevalent Facebook menu interaction.

The z-layer can be effective and efficient as it is in the app above or even the Twitter for iPad app. But it can go wrong quickly. It would be hard for me to explain what a wrong implementation is, but i would most recently refer someone to the Google+ iphone app. They use it to zoom stuff in and it seems gratuitous after a few swipes.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s