3 ways the Z-axis gives mobile content more than just depth


With such a wide variety of screen sizes on the mobile market, developers have been honing flexible mobile content strategies that adapt to an array of devices. There are plenty of best practices to ensure mobile content has the X- and Y-axis covered. But what about Z?

The space above and below the X- and Y-axis is the Z-axis, which brings a three-dimensional aspect to mobile content in the form of panels and layers that sit on top of and under each other. It's a great option for adding content when the space just isn't there on a mobile screen.

"We can count on the Z-axis to be there when extra pixels aren't," writes Wren Lanier, a designer and principal at San Francisco-based web and mobile app firm Neo.

In a blog post at A List Apart, Lanier highlights three ways the Z-axis can be used to solve design problems and create better mobile web and application experiences.

1. Menus – Menus can be a piece of design content on their own. If it's one of the most important functions on a site, which it often is, there's no reason it can't be placed on a higher level than other elements, says Lanier.

2. Action buttons – A layer of action buttons can remain in one place, "above" other content while everything moves around them. "Floating action buttons are an easy way to make them more prominent without taking up a lot of valuable screen real estate," writes Lanier.

3. Storytelling – Moving layers at different speeds on the Z-axis gives the illusion of passing time--a powerful tool for digital storytelling.

There are plenty more creative ways to use the Z-axis, but the layers of content are practically useless without smooth transitions to incorporate them into the user experience.

"They help soften what could otherwise be a jarring moment of change, they describe where you came from and where you've arrived, and they provide cues about how information on the new layer relates to everything else," writes Lanier.

Whether it's sliding, zooming, flipping or folding, using the Z-axis must also consider the transitions that reveal the additional information.

For more:
- read the A List Apart blog post

Related Articles: 
Is mobility making the web obsolete? 
Infographic: Mobile 3.0 offers mobile users 'super apps' 
Don't ring the QR code death knell just yet