Layouts are common configurations of structural pieces. With a consistent and cohesive set of layouts, Harmony strives to support some of our most important design principles:
- Establish a familial resemblance
Choose layouts that are predictable and familiar. Structural and visual consistency creates an experience that is recognizable across products, which provides users with a high level of familiarity and comfort. Also ensure that layout choices are consistent in your work and the work of others.
- Maintain user context by staying in place
Use inline forms and controls where possible… don’t introduce new views if you don’t have to. Avoid complex layering. And be thoughtful and purposeful about which areas of the app to connect, when to connect, and how to surface it to the user in a way that keeps them rooted in their original context.
- Guide the user where appropriate.
Use layout to show the user what comes next. Some examples: A popout browser implies that the user will need to reference that information while they use the app, which is why we use it for the help section and for chat. A Split View implies a need for quick browsing of items in a long list, pertinent to something like a Messages section. A Trowser sliding down over the content implies that there is a task to complete.
Structural pieces and layering logic
To provide stability and predictability, global structural pieces like the navigation and the header are always the base layer. Trowsers, drawers, and popouts are dynamic, contextual structural pieces, and always layer on top of the base layout. No matter how we layer, we always keep our users in a single context.
Example: The user could be in their transactions section (1: base), editing an invoice (2: trowser), adding a customer to that invoice (3: drawer), and referencing a help topic on invoices (4: popout).
Mobile & Vertical Tablet
Base layouts on mobile and vertical tablet devices include a permanent header with access to the navigation drawer and optional drawer. A bottom bar can be added for primary actions, and a stage can be added to highlight charts and important information.
Horizontal Tablet & Desktop
Base layouts for horizontal tablet and desktop devices include a permanent header and a fixed left navigation. A stage can be added to highlight charts and important information. A drawer can slide in over the content for small tasks that keep the user in place. A popout can overlay the content to provide help via documentation or chat.
There is no maximum width, but applications should be designed with tablet resolution in mind (1024px). Lines of text should be a maximum of 75 characters (roughly equivalent to 600px for 14px body text).
All layouts start with the basics: navigation to the main sections of the app to the left, and navigation to global elements like settings in the header. The default layout can have a stage when there is important data or information to visualize.
Breaks out a list of items and the selected item’s details. The split view can have a stage when there’s a list of items, and the selected item’s details include important data or information to visualize. On a mobile or vertical tablet device, the list (which would be in the left panel on a horizontal or desktop device) shows in its own screen, forcing the user to navigate from list to detail and back. We still need to define what the animation is when rotating a tablet from horizontal to vertical.
Slides down over content. Keeps the user in context when the completing a task (example: creating a transaction) or task flow (example: setting up an account). Can have a stage to highlight important information or to highlight the task flow navigation, or a panel to show progress as the user completes the task. Right now, the layouts look and feel differently from mobile to tablet to desktop. We’re working on it.
Slides over content from the right. Keeps the user in context when the completing a quick task (example: adding a customer).
Provides information that is handy to reference while using the app. Moves independently of the app, and is always on top. This layout does not work on a mobile or tablet device due to minimal screen real estate.
This layout illustrates the most common page type. It consists of a Stage and a content area.
A Drawer is a panel that slides in and out from the right. It’s used to help users complete a task faster and in context, such as to add charges or attachments to a transaction or to complete a quick sub-task.
An In-page Preview consists of two side-by-side panels: a working area and a preview.
A Browser Pop-out Window is a new, compact browser window, accessible by clicking a Pop-out Icon.
The Split View consists of two side-by-side panels: an item list and the selected item’s details. Each panel scrolls independently.
The Trowser is a full-width modal. The Trowser always has a header and a sticky footer, but does not have Left Navigation.