Layout

A layout offers versatile ways of presenting and structuring content to create a balanced user experience.

Overview

The layout and app structure is the foundation for designing applications in MindSphere.

A layout consists of several regions which in combination form several layout patterns for different scenarios.

The following layout patterns are recommended and described in this document:

General app layout

App layout: general construction of the app layout
Schematic app layout

layout-usage-typ-three-col-extended-layout
Example app layout

General construction

A layout consists of combinations of the following elements:

  1. Global region: The global region is reserved for the MindSphere OS Bar (only).
  2. Local region: The local region is reserved for the app bar and used as the first level navigation within an application.
  3. Leading region: The leading region is mainly used for the content navigation and selection.
  4. Main region: The main region contains the main content of the application.
  5. Context region: The context region is used for additional information and components.
  6. App header: The app header can be used to display hierarchy in form of a breadcrumb, display information that has to be visible at all times and contains the region toggle buttons.
  7. Item region: The item region is only visible when an item is selected. Information regarding the selected item is displayed to the user.

The global and the main region are required in all parts of an application. All other regions are optional and depend on context and pattern.

App layout: general construction of the app layout
1. Global region, 2. Local region, 3. Leading region, 4. Main region, 5. Context region, 6. App header, 7. Item region

Patterns

Overview-detail pattern

The overview-detail pattern is used when you want to initially display a set of domain objects with moderate amount of details for each object. Users can interact with the object to navigate or reveal more details in the item region to the right side. The objects in the main region can be arranged in any of the following ways: cards, list, tables, etc.

animation of overview-detail pattern
Animation of the overview-detail pattern, sliding in detailed information of an object from the right.

List-detail pattern

The list-detail pattern is used when you want to initially display a big set of domain objects without additional information in the first step. Selecting an item in the item region then reveals all information of this item in the main region, thereby making this pattern ideal for navigation between objects. This pattern is recommended for navigating through hierarchical structures of domain objects. The objects in the leading region need to be arranged in form of a list-navigation.

animation of list-detail pattern
Animation of the list-detail pattern, selecting an object in the leading region displays its properties and possible ways of interaction in the main region.


Region behavior

Desktop and tablet (landscape) screens

layout-usage-behavior-region-desktop
Region behavior on desktop and tablet (landscape) screens

Mobile and tablet (portrait) screens

layout-usage-behavior-region-mobile
Region behavior on mobile and tablet (portrait) screens: 1. Main region visible, 2. Leading region active, 3. Context region active, 4. Item region active

Responsive behavior

Mobile size and tablet portrait size

To use the limited screen area of a mobile device, there are two options for the sidebars - overlay the main content or push the main content. The smaller the device, the more the overlay mode is used.

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top