Typical layout

Layout overview

Having a defined layout encourages consistency and form across various designs, platforms, and screen sizes. When all elements and spacing follow a uniform framework, the human eye groups elements into shapes, shapes into patterns, thus making UX easier to understand at a glance.

Case layout is visually segmented into the three questions people have when reviewing the work or business object.

  1. Data: What's the most critical or unique information needed to grasp this quickly?
  2. Activity: What's happened, and what must happen next to complete this stage of work?
  3. Utilities: Which relationships, files, and tools are needed to provide context?
Cosmos case layout flow

Visual layout follows the standard left-to-right reading order. On the far left is the Data region where the Summary panel lies. In the center is the Activity region containing the Case lifecycle and the Pulse feed. Finally, to the far right is the collapsible Utilities panel.

In right-to-left locales, this order is reversed.

Last updated: Feb 2020

Spacing

Whitespace enables the eye to group similar elements together not only for the benefit of establishing a figure-ground-hierarchy but also maximizing readability of content and data. The Pega Platform UI uses an 8px system (multiples of eight pixels) throughout the entire interface to define relationships with design elements.
  • 8px: The minimum horizontal padding in an interactive element (e.g., the distance from the border edge of an input field, from the text inside it).
  • 4px (8px * .5): The space between an icon and its related text (e.g., a back button with an image of an arrow and the word “Back”).
  • 16px (8px * 2): The space between sections of data inside the same container, the inner padding on the container itself, and the default desktop text size.
  • 24px (8px * 3): The space between unique sections of data (e.g., a case’s master details file starts 21px below where the Perform Harness ends).

Last updated: Dec 2019