Another way to think about it:

Primary-Content area (TL + primary content) is all about what the user is looking for. In each screen there should be a designated primary-content, so in each screen you need to have a primary-content area.

(TL + primary content) is all about what the user is looking for. In each screen there should be a designated primary-content, so in each screen you need to have a primary-content area. Context-aware area (ML + elements about content) is the place where the user can find the elements to interact with the content area or are related to it;

(ML + elements about content) is the place where the user can find the elements to interact with the content area or are related to it; Navigation area (ML/BL + navigation controls) is the place where the user discovers how to navigate through the app;

(ML/BL + navigation controls) is the place where the user discovers how to navigate through the app; Home area (BL + home controls) is the place where the user can be confident, and find the roots of the app (account, settings, search, etc.).

Principles

Now that we’ve set the main tools, we can talk about how the architecture works. The layering and the rules for it are important to help the user understand how the app is built, and how to use it.

This is why each area has a purpose.

Before, we’ve used the z-axis (layering) to structure the hierarchy of the content, and now we will use x/y-axis to make the interface come to life.

First, lets define some characteristics of areas:

Areas are surfaces that display the content;

the content; Areas are living elements: they can move and resize;

elements: they can move and resize; Areas transform themselves to adapt to the content they display;

to the content they display; Each area has a purpose, and it sticks to it;

So here is a quick example of a moving content-area when navigating through the app:

YouTube app example

This example is a YouTube-app (layout inspired by the myTube app), navigating:

from the home-page (with a primary-content area which displays a grid of videos; a navigation area with a list; and a home area with a home-button, account-button and search textbox),

(with a primary-content area which displays a grid of videos; a navigation area with a list; and a home area with a home-button, account-button and search textbox), to the detail-page (with a primary-content area which displays the video and it’s details; a context-aware area with a list of comments about the video; and the same for the home-area)

In this example, only the primary-content area moves and resizes to adapt to the new content (reducing its size to display just one video and giving more space to the context-aware area; and moving to the left to hide the navigation area and reveal the new content of the context-aware area).

So, even if there is no brutal transition-animation, by changing the layout, the app helps the user to understand that he’s moving into the app and gives to him a better suited layout to enjoy watching the video.

Because changing the layout when navigating through the app isn’t always necessary, here is another example of a transition without moving the content area:

Groove Music Concept

In this last example, as you can see, the primary-content area stays at the same place, and only the primary content is changing on this area, from the list-view of the recommendation-page to the detail-view of an artist.

So areas are living elements that display the content, but they are not constraigned to move when navigating.

Only the content impose to the area to change in size or placement.

Example case

This last example also gives me the opportunity to talk about the layering in a concrete example: the Groove Music app (and its redesign concept).

Current look of the Groove Music app

From this screen, it is possible to distinguish (from top to bottom, and from left to right):

A search textbox

Navigations controls (Explore, My Music, Recommendations, etc.)

Account button

Settings button

A right part with the artist and its content (picture, bio, albums)

A bottom bar with controls of the current playing song (play/pause, next, volume, etc.)

This case is pretty simple, based on the areas we’ve defined before. We can set four groups:

Home area, with the search box , the account button and settings button

, the and Navigation area, with all the navigation controls (Explore, My Music, Recommandations, etc.)

(Explore, My Music, Recommandations, etc.) Primary-content area for the artist-related content

Context-based area for the controls of the current playing song (play/pause, next, volume, etc.)

So here is the concept based on the guidelines we’ve created: