Description

Splitting a layout allows a screen to be segmented into two or more re-sizable areas or split panes, that can be shown side by side. This flexible layout option is suitable for comparison type-of-scenarios, or for working simultaneously on different items at the same time.

Usage

It is to use split screens and side panels in the same UI, as this will fragment the content area and the user's focus. Instead, use panes themselves as a kind of side panel.

• You want to display two or more re-sizable content areas side-by-side.
• Your content has a high degree of complexity and will require full screen attention for a considerable phase of the workflow. Use a workspace or flexible column layout instead.
• You want to focus on only one content area at a time. Use a wizard or page tabs instead.
• Your content and UI elements can be separated by white space alone.

Anatomy

• Split Panes, required; Split panes refer to the segments of a split layout. As containers, split panes may contain any type of content or controls. Split panes may interact with one another and respond contextually to one another.
• Splitter, required; Dividing and resizing control placed between split panes. They can be used in both horizontal or vertical orientations, or in a combination of both to create unique page layouts. Do no create splitters in a diagonal orientation.

So many ways to split a screen...

Behaviors & Interactions

Resizing

There are two ways to resize split panes:

• Click and drag anywhere along the splitters to drag them to a new position
• Double-click the splitter to toggle between their expanded/collapsed and original size.

When resizing a pane, the neighbouring pane will also be affected. Do not create the illusion split panes are layering over or covering other panes. Never use resizing as a means of closing panes.

Opening and Closing

Split screen layouts may use additional panes that can be opened and closed when desired. The pattern for these interactions depends on the usage of toolbars, whether a single global application toolbar, or localized header toolbars in each pane (See the Best Practices section for toolbar usage on spit screen layouts).

For example, if using...

• a global application toolbar, toggle panes on and off from view by using the View or Tools menu
• multiple localized header toolbars, open from an action/button inside another pane, and close from the corresponding header toolbar.

Never use splitters and resizing interactions to open and close panes.

Best Practices

Default to Split Form

Decide which pane should act as the main focus and how additional panes feed into or support it. Show as many opened panes as possible and in their most useful size by default. Users will benefit from understanding they are dealing with multiple resizable segments from the start and feel more inclined to resize split panes as desired.

If appropriate, consider an action button to return the layout to default. Occasionally, additional split panes may be opened and closed in progressive disclosure.

Enforce Size Caps

Consider minimum and maximum limits for panes, in terms of percentage of the browser window size, to avoid users pushing panes fully off-screen. Minimum sizes can prevent users from accidentally closing the pane or resizing the browser screen when they intended to grab the splitter instead.

Work with Responsive Controls

When resizing panes, ensure its inner contents can be resized responsively. This is especially important if the controls being used are custom design elements from outside of the Fiori UI5 component library. As such, consider responsive breakpoints to make content render optimally in all variations of pane sizes. Ignoring this principle will result in multiple sets of vertical and horizontal scrollbars in the same screen (yikes!).

Use Toolbars Responsibly

Prioritize headers and toolbars that can be placed inside panes themselves, instead of one global application toolbar, as this creates a more direct relationship between tools and the content they pertain to. If using a global application toolbar, avoid double-dipping with additional localized toolbars so functions aren’t scattered and cluttering the entire UI.

Split screen layout with localized Header toolbars

Split screen layout with an Application toolbar

Avoid 'death by scrollbar'

Horizontal and vertical scrollbars can be used inside a split panes, but because multiple scrollbars across the same screen can be annoying, reduce over-relying on them where possible. For example:

• Ensure a split pane has as much space as needed. Use this space efficiently and reduce clutter
• Design controls that are responsive and resize dynamically
• Enforce min and max size caps
• Navigate to other pages or components when a pane grows in complexity. For example, open a dialog box or go to an object page instead of showing object details inside a pane.

Specifications