XD Essentials: Layered Interface Techniques for Mobile Apps

The biggest difference between desktop and mobile screens is the size. Since mobile apps have less room, more and more interfaces are taking full advantage of the z-axis by implementing multiple layers, one on top of the other.

Creating an interface that seamlessly works across the z-axis requires two important elements: layers and transitions. In this article, we’ll review the foundations of layered user interface design and give you some practical examples so that you can add helpful transitions to your next mobile project.

Layered User Interface

Incorporating layers is key to designing on the z-axis, since layers are the way we differentiate levels above and below one another.

Here are some definitions of layer concepts critical to understanding layer hierarchy:

What is a Layer

A layer is a container that stores elements or content. A layer might contain a single UI element that sits above the rest of the view, or it might be a full screen that appears and disappears as necessary.

Layer Hierarchy

Layer hierarchy is a tree graph, where layers nest inside one another. Each layer has only one parent, but can have multiple ‘children’ or ‘siblings.’

https://blog.adobe.com/media_cb5bf4b177a0720ed8b3a372bd2a2fb07ccace84.gif

Why Layers Are Important

There’s a reason layers are so universally accepted and usable — they gives users a clear understanding of an app’s hierarchy and help users interact with its design. Dimensionality in mobile interfaces is absolutely real — the combination of depth and motion help establish a sense of hierarchy and intent.

The Z-Axis: Elevation and Shadows

Designing on the z-axis simply means incorporating three-dimensional physics into UI designs. Elevation and shadows play an important role in conveying this message. They are subtle details which add important visual cues to the UI design — objects with elevation and shadows feel like they have actual physical objects and respond in ways the human mind anticipates. This property creates a natural experience for users who can relate your UI to something they are already familiar with.

Hierarchy of Elements

Shadows help define a hierarchy of elements: the position of several objects in the z-axis makes the hierarchy visible.

Shadows are a tool that help create the illusion of three-dimensionality and suggest the spatial relationships of objects on the page. In the real world, shadows are created when an object blocks a light source from striking a surface that is behind it. This is the reason shadows make 2D objects “pop.”

Shadows help indicate the hierarchy of elements by differentiating between two objects, emphasizing the actual layering that exists. This properly helps visualize the position of elements within three-dimensional space.

The practical value of drop shadows becomes easier to understand when you have several objects grouped together. By overlapping objects there is the suggestion that each object is at a different distance from the background.

When your design has overlapped objects, you need to keep things natural so that people understand the metaphor without thinking about it:

• Without a shadow, nothing indicates the objects are separate from the background surface.

• When identical shadows are used for overlapping objects, the information conveyed by the shadows conflicts with the information conveyed by the overlap, undermining the illusion of dimensional.

• Only properly selected shadows are able to solve the problem of overlapping elements. In the example below, softer, larger shadows indicate the floating action button is at a higher elevation than the blue sheet, which has a crisper shadow.

In most cases, the higher something sits on the z-axis, the more important a shadow is. Elements such as primary navigation menus or primary action buttons are usually placed on a higher level than other elements.

Layers Relationships

Elevation can reinforce hierarchical relationships.

How you organize objects, or collections of objects, in a view determines how they move in relation to one another. The elevation of objects and their position in z-space depends on the content hierarchy you want to express and whether an object needs to move independently of other objects.

All objects which are part of a hierarchy can be described in terms of a parent-child relationships. The “child” in each of these relationships refers to an element that is a subordinate to its “parent” element.

Soften Moment of Change: Animation and Motion

When you use layers in an interface design, it’s important to include animations that smooth the transitions between them. Since motion has the highest level of prominence in a user interface, this makes it a powerful tool to keep your users oriented in your app’s layers — motion conveys hierarchy, meaning, and a sense of spatial relationship.

Transform Surface

Motion guides the user and makes it possible to avoid a surprising transition.

When change occurs without a motion, users might feel disoriented or unable to move about the interface efficiently. In the example below, you can see when a sense of hierarchy isn’t communicated properly; it is unclear how the new layer is related to the old one because no transition occurs and there isn’t a clear focal point.

Animation can be used to make transitions between layers more obvious, so it’s clear what happened between where the user started and ended up. By s_moothly_ transporting the user between navigational contexts, you help the user comprehend the change that has just happened in the view’s layout. In this example, the user can follow the motion of an element to understand how these two states relate to each other — zoom-in effect reinforces the notion that you’re going to a deeper level of information.

Spatially Meaningful Transitions

When using animation make sure that it actually helps your users: It’s important for the animation to be consistent with the information hierarchy you’re using.

Not all animated transitions can work as intermediaries between different UI states. Wrongly used animation often fails to explain changes in the arrangement of elements on screen.

Craig Dehner provides a great example of spatial relationship for Casts, an iOS podcast app. The structure on the left example brings the “Now Playing” page up from the bottom, then sends it toward user when dismissing. After that “Now playing” appears at the bottom of the screen, which might be very confusing for the user.

Comparing the original on the left to the reworked structure on the right, it’s clear that by keeping the entrance/exit animations consistent, you create a predictable interface: users know exactly where the element lives and can easily find it when needed.

A well-designed transition enables the user to clearly understand where their attention should be focused and it provides answers on following questions:

• What has triggered the change?
• How to initiate the change again later on if needed?

Conclusion

Mobile apps aren’t just a sequence of static screens, they are a series of dynamic views with carefully choreographed experiences. By building interfaces using a system of layers, we flexibly adapt to mobile screen sizes and at the same time create a more intuitive experience. However when you incorporate layers, each should have a purpose and be used consistently throughout your app in a way that helps users better understand your design.