Well-designed tools determine the efficiency and success with which users can complete their workflow and achieve their goals. Because everything a user sees in a screen should fully support this effort, selecting the right layout becomes a critical design decision. The better users and their workflows are understood, the easier it becomes to layout a new feature, space, screen, or application.

Getting Started

Designing good layouts is an exercise in designing structures that are usable, accessible, and logical. At some point in its lifecycle, an app that grows in functionality will need to have its contents divided and organized into logical and easy to understand parts for the user. The following is a framework for how to achieve this, and how to leverage content in order to optimize a layout, and by extension, the user experience — whether one is designing a new space or a adding a new feature to an existing one.

Before considering any type of UI or layout solution, consider the nature of the content you have:

What type of content is it?
What information should go where?
Which elements are most important and should be prioritized?
What organizational structure should be used to guide a user through it?

guideline

Give thought to how different kinds of content contribute to different levels of information, and carefully consider which level would be the most appropriate for your content and your features. Remember: There is no effective user experience without good information architecture!

Level 1 – Application Shell

The Application shell is the foundational structure of our applications and appears in every screen. It contains high level content that impacts the entire user landscape, and is foundational to giving the user a sense of place and orientation. The two main component of the Application shell include:

Shell Bar — The horizontal bar at the top of the screen. This bar indicates the current application state, breadcrumbs, and back navigation. It also includes actions related to the active file on screen, user settings, global search, notifications, and the discussion panel.
Side Navigation — The side navigation is the vertical bar on the left side of the screen. It contains a list of all module and utility apps represented by their unique icons and acts as the navigation system of the application.

The biggest area of the application shell is the content area, a large open space reserved for screen content that comprises levels 2 to 4.

<div> <div>What is the application shell used for?</div> </div> <div> <div> <ul> <li>Navigating between different applications (shell bar)</li> <li>Navigating between different modular or utility apps in an application (side nav)</li> <li>Navigating back to <em>Home</em></li> <li>Orienting the user through product breadcrumbs</li> <li>Accessing global search, notifications, and collaboration panel</li> <li>Setting user profile, settings, and defaults that will impact the entire user landscape</li> </ul> </div> </div>

Shell Bar.png

Shell BarContains standard cross-applications features (search, collaboration, etc.).

Side Navigation.png

Side Navigation

Contains the applications and areas users can access.

Level 2 – Main Content

At the conceptual level, main or primary content refers to all core items related to the module app’s main workflow. This is where a clear connection between all pieces of information belonging to the main workflow must be made explicit and understood by the user.

At the UI level, select a that can best support the workflow and help users anticipate how they will interact with the contents of that space. A floorplan is a type of layout that occupies the fullness of the content area. It predefines the structure and placement of controls and how to handle different use cases.

Prioritizing the main workflow
Occupying the full content area
Becoming the default space or view

Thinking of the main content area and its floorplan simply as a holding place or a staging area for stagnant objects is underutilizing it for its full potential. The main content area should be where the most interactions of a space are performed, with ample options for acting inline and in-place. Users should be able do most of their workflow on the main content area, regardless of how many other features a module app may offer.

The main content becomes the priority of a workflow when the core of its functions can be performed in it, and where a user’s focus ends up most of the time. When the user needs to be continually navigated to different pages, content areas, and dialogs to complete their workflow, the main content’s floorplan is not being used efficiently.

When designing floorplans, consider how frequently certain information needs to be made accessible. If it needs to be accessed and retrieved from another content area every few minutes, consider allocating space for this in the main content’s floorplan instead.

<div> <div>What is main content used for?</div> </div> <div> <div> <ul> <li>Executing the main workflow of a module app</li> <li>Creating, monitoring, and managing object files and their dependencies</li> <li>Administrating assets and key resources</li> <li>Detailing and developing complex plans and goals</li> <li>Configuring system-wide settings and specifications</li> </ul> </div> </div>

Application Toolbar.png

Application Page

Support simple content and interactions

Calendar

Display schedules, events, or plans in a chronological format.

Canvas

Present, support, and structure a variety of content of a visual or graphical nature.

Diagram Builder.png

Diagram Builder

Build a model with the use of a diagram.

Flexible Column Layout.png

Flexible Column

Display multiple floorplans at the same time side-by-side

Module Start Page.png

Module Start Page

Create new files, access existing ones, and onboard users to module tools

Object Page.png

Object Page

Focus, display, and categorize all relevant information about an object.

Table

Make lists and grids organized into rows and columns.

Wizard

Guide users through long or unfamiliar tasks or processes.

Level 3 – Support Content

A variety of patterns and components that create additional content areas make up the third level in the layout design framework. These are considered secondary because they support the main content and its floorplan with additional tools and interactions housed in supporting content areas.

The content inside support areas doesn’t always need to be in view, and so can be more suitable for side or sub tasks, sub workflows of lesser importance, or even optional. Support content should be easy to access, easy to remove or dismiss from view, and always return users’ focus to the main content’s floorplan and workflow.

Contextual
Conditional
Optional
Fully removable from view

Look to layout options for supporting content when the main content’s floorplan is exhausted, or when it would be a burden on the user to have it there. When used properly, supporting content can help push a workflow forward and reduce the amount of work necessary on the main content. This can also reduce the tendency to over-design or clutter the main content’s floorplan.

However, use caution when considering the right layout option for supporting content as their misuse can have an impact on the natural discoverability of features, their findability later, and an increase of interaction cost and effort demanded from the user. Be aware of these issues in order to make design decisions that can prevent, mitigate, or offset their potential harmful impact on the user experience.

<div> <div>What is support content used for?</div> </div> <div> <div> <ul> <li>Supporting the main workflow with subtasks and sub-workflows</li> <li>Creating and managing small objects or items</li> <li>Editing different aspects of the object file and its lifecycle</li> <li>Carrying out supportive tasks and procedures</li> <li>Orchestrating, scheduling, and automating processes</li> <li>Using alternative ways of interacting with the main content</li> </ul> </div> </div>

Page Tabs.png

Page Tabs

Create different content areas used in the same context.

Split Screen.png

Split Screen

Partition a page into multiple segments used side-by-side.

Views

Provide different ways to represent and interact with the same content or data.

Workspaces

Divide a workflow into different portions that are carried out in separate spaces.

Level 4 – Accent Content

At the highest and final level of the layout design framework are a variety of modals and non-modal components. These assistive components are used to accentuate, stress, or emphasize content at any of the previous levels contextually. However, they comprise the final level because they should be considered last.

The nature of modals and non-modals make them ideal for simple, self-contained, and straightforward tools and tasks, instead of full workflows or complex interactions in and of themselves. When used properly, they become a useful and integral part of a workflow, but when overused, they easily become a disruptive annoyance.

Modals refer to UI components that overlay on top of the screen, fully blocking the UI beneath it from view or interaction. As subordinate to the main content, they must be interacted with and closed before returning to the main content. Because of their high visibility and disruptive nature, modals are best used for focusing the user’s attention on timely, critical, or otherwise important information that justifies such a disruption.

Examples: dialog boxes in all varieties and full-screen wizards.
Non-modals refer to UI components that also overlay on top of the screen but don’t fully block it. This makes them less severe because users can continue their activity and ignore them until they become relevant. However, non-modals can also be quite disruptive because, like modals, they may also cover important content beneath them. Non-modals are used for simple interactions and lose their effectiveness when they are pushed or distorted beyond their simple use case.

Examples: contextual side panels, non-modal dialogs, quick views, popovers of all types, action sheets, date/time pickers and all their variations, contextual tile menus, and so on.

<div> <div>What is accent content used for?</div> </div> <div> <div> <ul> <li>Containing simple and straight-forward tools and tasks</li> <li>Executing selections, filtering, settings, options, configurations, and so on</li> <li>Downloading, uploading, and sharing files and resources</li> <li>Requesting confirmation or user input in critical or time-sensitive tasks</li> <li>Creating, naming, and saving files, objects, and items</li> </ul> </div> </div>