Leveling Framework: a UI framework for three-dimensional space

Because most digital interfaces lay in two-dimensional surfaces, when we think about navigation, we usually think of two-dimensional transitions — where the user travels between paths along a single plane or level. However, a user can also navigate or transition in three-dimensional space. Each level or plane is an environment where the user typically has to complete a task. As they are elevated to a new level, fewer actions and distractions are available.

Actions initiated by the user connect three Levels on the z-axis.

Leveling is the movement of hierarchy between interface environments along the z-axis. It transitions a user’s attention upwards or downwards, giving hierarchy to each interface presented.

A Level is an interface environment or plane from which various actions can be performed. In most cases, they are tasks the user can carry out, resulting in a Change in Context.

Levels in front of others typically:

1. Concentrate the user’s attention by interrupting them and taking over Focus.
2. Contain more essential tasks or content.
3. Control other Levels behind it — such as when making a selection on a blocking (modal) Bottom Sheet (Overflow Menu) on mobile apps.

Typically, there are three Levels a user can transition to and from:

• Level 1: Primary App Experience
• Level 2: Focused
• Level 3: Precise

Levels have a parent-child relationship giving them hierarchy. The more elevated a user is, the fewer actions and distractions are available. It helps to visualize this concept in the form of a pyramid.

Level 1: Primary App Experience

Also known as the base level or primary app experience, the user spends most of the time in Level 1. Since the main app’s navigation is available, the user tends to navigate in non-linear ways as they may visit several main app’s destinations in the same session.

The user can navigate laterally through screens with the same level of hierarchy in Level 1 as when navigating through an app’s main destinations.

The user can navigate laterally through screens with parent-child relationships in Level 1. In mobile, each main destination of the app in the Tab-bar acts as a mini-browser where each tab keeps the chronological order of the pages visited.

Level 2: Focused

Level 2 is a self-contained environment where the user usually has one task to perform. When users are elevated to Level 2, they have two options; 1) complete the task presented, or 2) dismiss it before continuing using the app.

The user is elevated to Level 2 to complete a simple task. They can either dismiss or complete the task to navigate to Level 1.

A multi-step modal is more appropriate for more complex tasks that require actions or several inputs to be broken down.

Note: Because of the lack of real estate in mobile, a user could rarely see a second Modal (a modal on a modal) inside of Level 2. Exploring other solutions to avoid this is highly encouraged. As with web, stacking modals is an anti-pattern to avoid.

Level 3: Precise

On this level, the actions and content shown to the user should be highly focused and specific. Like in Level 2, the user is forced to dismiss the Level or perform an action to continue using the application or navigate down to the previous level.

Keep interactions short and easily accessed with one tap or click.

This Level is usually identifiable by using a Scrim or overlay that captures the user’s attention and blocks them from interacting with the rest of the application.

A full screen is opened (Level 2) and then a Dialog is open (Level 3)

You do not need to have a Level 2 present to show a Level 3. A user can be on Level 1 and have access to Level 3.

Physical Elevation

There is a difference between Physical Elevation and Leveling worth mentioning. An element could appear floating and casting a shadow on top of other elements or surfaces, but these elements do not always create a new Level. The Floating Action Button (FAB) is a good example of this, as this element usually appears floating in Level 1.

Positioning elements at the same physical elevation may indicate they contain content of equal importance as one another. For example, cards in a collection may have equal importance. Things that appear closer to the user are perceived as more important and, in some cases, actionable.

Minimize the use of Leveling

Only use the Leveling Framework when exhausted all other alternatives before elevating the user to a new Level. Make sure to try techniques such as inline sections or Progressive Disclosure.

The goal is to keep the user closer to Level 1 to avoid 1) losing user’s focus, 2) abandonment of a task, 3) confusing the user, or 4) intensive cognitive workload.

Remember Gravity

Everything that goes up must come down. When users are elevated to a new Level, they will have to retrace their steps to come back down to Level 1. Keeping the user closer to Level 1 and providing lesser options on the way up each Level, will make it easier for the user to come back down.

Stay safe,

Oscar.

If you have any feedback/comments/suggestions, please share them in the comments. Would love to hear your thoughts.