Updated: September 28, 2017

Overview

Intro

The overview floorplan is a hub that provides previews of larger bodies of information sourced from different parts of the app. It contains details important to the user and provides quick access to items relevant to the user’s tasks.

Overview in regular view
Overview in regular view

Usage

Do’s

  • Use the overview floorplan if you want to highlight information that matters to the user. This can include data the user needs to track, or key information around the user’s day-to-day work.
  • Use the overview floorplan if you want to provide the user with quick access to urgent items or frequently-used objects.

Don’ts

  • Do not use the overview floorplan if you are providing information around a single object; in this case, use the object floorplan instead.
  • Do not use the overview floorplan if the information is duplicated from other tabs (in an app that use a flat navigation style).

Structure

Basic Structure

The overview floorplan consists of a header area and a content area. With some exceptions, it may also include a footer area.

The header area usually displays numbers that demand the user’s attention and provides quick access to these items.

The content area contains multiple vertically-stacked content sections and provides users drill-down access to these objects. It also contains facets as a menu for the user to navigate through the app.

The (optional) footer area can contain either a toolbar or a tab bar, depending on the app’s navigation style. With a hierarchical navigation style, the overview floorplan is normally used as an entry screen, and a toolbar can be used when there are actions that are applied globally to the app. In apps with a flat navigation style, a tab bar can be used to allow the user to switch between different sections of the app.

 

Anatomy

A. Exceptions and urgent items

Tapping on each number will bring the user to a filtered list. You may display up to four numbers in regular view, and three in compact view. If more than three numbers need to be shown in compact view, consider including page controls for the user to swipe for more information.

Or performance indicators

In some cases, it will be helpful for the users to keep track of their progress or performance.

B. Previews of selected facets

The preview section provides quick access to objects that require attention as well as the most frequently-viewed objects.

C. Facets

The facets is a menu that contains links to every object in the app. This section will always be placed at the bottom of the overview floorplan.

Overview Floorplan Anatomy
Overview Floorplan Anatomy

 

Example 1

A. Exceptions and items that are urgent

In this example, the numbers in the header provide the user with quick access to items that either have issues or are urgent. Tapping on urgent baskets, for example, will take the user to a list of baskets filtered by urgency.

B. Previews of selected facets

If the app involves business objects that move through various phases, consider providing a preview of any objects currently in phases that are particularly important to the user. Be careful, however, that these previews are not simple duplications of the numbers in the header. In this example, “basket” is a facet, and is therefore too broad to have its own preview section. On the other hand, the preview sections for clean baskets and packed baskets provide the user with important details at a glance.

C. Facets

The goal of this section is to provide users access to all objects in the app.

 

Example 2

A. Performance indicators

In this example, while it’s important for the user to keep track of his/her daily performance, it’s not critical to always have these metrics visible on screen. As the user scrolls, the header therefore does not stick to the top of the screen, instead making way for other content to fill this valuable space.

B. Previews of selected facets

This section should always be contextually-relevant to the user’s needs. Instead of providing previews of all customers, for example, in this example it is more useful for the user to see only recent customers.

C. Facets

This section provides the user with access to every object in the app.

Flat Navigation

In general, the overview floorplan is most common in apps that use a hierarchical navigation style. There are some exceptions: for example, it may be appropriate to use the overview floorplan in flat navigation apps that provide the user with analytics.

When using the overview floorplan within a flat navigation style, make sure the information that is presented to the user is not simply duplicated from other tabs.

A. Segmented Controls

Segmented controls allow objects to be categorized, and can be accessed by tapping to switch between categories.

B. Previews of selected facets or analytics

This section should always be contextually-relevant to the user’s needs. Instead of providing previews of all customers, for example, in this example it is more useful for the user to see only recent customers.

C. Facets

The facets section contains links or categories of objects for the user to access.

D. Tab bar

The tab bar allows the user to easily navigate to main objects within the app. Since the tab bar acts like a menu for the app, facets are optional.

Compact & Regular

The overview floorplan supports both regular and compact views. Sections in the content area maintain the same vertical structure across views, and individual cells expand horizontally to fit the actual screen size. The header may behave differently based on different header styles. For more details on the header, please refer to header views.

Behavior & Interaction

Nav Bar

Actions taken in the overview floorplan are generally global in effect. The user may be able to search within the whole app, for example, or make a change to user settings. Other actions may be included, depending on the use case.