Screen Structure, Hierarchy and Grouping

Application Design Team

This chapter defines how to structure Board screens to support clarity and focus. It introduces principles for organizing content on Board screens, establishing clear visual hierarchy and priority, grouping related information, and using size, position, and spacing to communicate importance and relationships. 

The goal is not to prescribe pixel-perfect layouts, but to provide designers with simple principles and best practices for organizing information in a way that is readable, predictable, and aligned with how users scan and interpret screens. 

1. Defining the Screen Context 

1.1 Screen Purpose 

Every screen should have a clearly defined primary purpose. Before placing any objects, designers should be able to answer: 

• What is the main user goal on this Screen? 
• What decision, action, or understanding should this Screen support? 
• What type of screen is this, and what expectations does that type create? 

A screen should guide users toward one dominant activity or outcome.

Secondary content must support and not compete with the primary purpose. 

If multiple areas of the screen demand equal attention and compete for the user’s attention, the screen is likely trying to serve multiple purposes. The screen’s content should be either simplified or redistributed into several screens.

1.2 Common Screen Types 

While screens can vary widely, most Board applications feature a set of recurring screen types. Identifying the screen type helps clarify its purpose and the expectations users bring as to what the screen must prioritize and how much information and interaction it should reasonably contain. 

 

Common examples include: 

Home and Navigation screens 

These screens provide orientation and entry points into the app. Their primary goal is to help users understand where they are and where they can go next. They prioritize clarity and clear structural grouping.   

 

Dashboards / Overview screens 

These screens are designed for monitoring and situational awareness. They provide a consolidated view of key metrics, trends, and summaries, enabling users to quickly assess performance or status. They feature limited interaction and support scanning and rapid comparison. 

 

Analytical / Detail Screens 

These screens support review, analysis, and data entry. They allow users to examine data, apply filters, and explore relationships in depth. They often center on charts, tables, and filters, with a strong primary exploration area. 

1.3 Screen Areas

Board screens are commonly composed of different structural areas. A screen area is a defined region of the interface used to organize navigation, interaction, and content. 

Consistent use of screen areas helps users: 

• Know where to look for specific types of information. 
• Predict how content is organized across screens. 
• Build familiarity and confidence when using and navigating the application. 

While layouts may vary and not all screens include every area, most Board screens rely on a small set of recurring structural areas. 

 

Highlight of different screen areas

Platform Header 

The topmost structural screen area provided by the Board platform. It contains the screen title and supports branding. Its design (logo and background) is shared across applications within a Board environment. 

 

Top Bar (Navigation Area) 

Located below the Platform Header, this area supports orientation and navigation across screens. It may contain menu objects, breadcrumbs, section identifiers, or action buttons. Its presence depends on the screen type. 

 

Side Panel 

A vertical area frequently positioned on the left side of the screen. It hosts interactive and contextual components that support exploration and filtering. It may contain selectors and pagers, contextual information (e.g., active selections), KPIs or statuses, or action buttons. Its presence depends on the screen type. 

Consistent placement and structure of the Side Panel help reduce the learning curve and support faster user adoption. 

 

Working Area 

The primary region of the screen. It contains core analytical content and information, and it represents the main focus of user interaction. The contents of this area will change according to the screen's purpose and type. It may host KPIs, detailed tables, charts and graphs, textual information, drill-downs, and other components.

 

Different screen types use different screen areas

Home screens will often only use a main work area with some navigation items. Dashboards feature a prominent working area with KPIs, charts, and tables, combined with top bar navigation. Detailed screens will include tables in their working area and add a side panel to filter and modify the contents of the main area. 

 

Screen areas should be used to support the main purpose of each screen type.

1.4 From Context to Visual Organization 

Once the screen’s primary focus and general structure are defined, the screen layout must support these decisions. Two complementary design principles shape the screen layout: 

• Hierarchy, which establishes what is most important and guides attention. 
• Grouping, which establishes what belongs together and relationships. 

 

Hierarchy determines the order in which information is perceived. Grouping determines how information is understood. Together, they determine how users scan, interpret, and interact with the screen.

The next sections explore how these principles should be applied when designing Board application screens.

2. Structuring the Screen: Hierarchy 

2.1 Establishing Visual Priority 

Visual hierarchy establishes priority. It determines what users notice first and how attention progresses across the screen. 

Users scan rather than read in detail. Attention is drawn to elements that appear more prominent. Clear hierarchy ensures that: 

• The primary purpose of the screen is visually dominant. 
• Secondary elements support rather than compete. 
• The order of attention aligns with the intended user's flow. 

If multiple elements demand equal prominence, users must work harder to interpret the screen. Hierarchy reduces this effort by clearly differentiating levels of importance. 

2.2 Creating Hierarchy: Visual Weight 

Hierarchy is created through differences in visual weight. Visual weight refers to how much attention an element attracts relative to its surroundings.  

The greater the difference between the elements, the stronger the perceived priority. In other words, hierarchy depends on contrast. The visual weight of an element in isolation is not as important as how strongly it differs from what surrounds it. 

 

Perceived priority of screen objects

Important elements should be represented with greater visual weight. Hierarchy provides an entry point for users and guides their attention through the screen. 

Hierarchy is created through contrast in visual weight, using size, typography, color, framing, and position. 

Size 

Larger elements are perceived as more important and attract more attention. 

 

Using size to add hierarchy

When elements share the same size, visual weight is equal and hierarchy is unclear. Increasing the size of primary content establishes a clear focal point. 

Typography 

Variation in text size and weight communicates structural levels and importance.

 

Using text size and weight for hierarchy

Varying typography scale and weight establishes clear levels of importance and hierarchy, improving readability. 

Color  

Elements with stronger color contrast or more saturated colors stand out relative to desaturated or neutral elements.

 

Highlighting content with color

Introducing strong color contrast establishes clear emphasis and guides attention. 

Framing 

Placing an element within a visual boundary, surrounding it with white space or applying distinctive styling, such as filled backgrounds or borders, increases its prominence.

 

Using framing to create emphasis

Without framing, elements blend into their surroundings. Clear visual boundaries increase prominence and establish focus.

Position 

When visual weight is similar, elements placed higher or earlier are perceived first. 

 

Perception order of elements of similar visual weight 

Scanning Patterns 

For elements where visual weight differs significantly, prominence overrides position. However, when visual weight is similar, position and natural reading patterns influence attention order. 

 

Visual flow of a Board screen
 

Natural scanning tendencies (such as left-to-right and top-to-bottom in Western cultures) influence perception when elements carry similar prominence. 

Design your screens so that they can be scanned and perceived following a logical order and flow.  

2.3 Progressive Disclosure 

Not all information requires equal visibility. A screen where multiple elements demand attention can overwhelm the user. The interface should not present a wide array of choices and elements. 

Progressive disclosure reduces visual competition by presenting essential information first and revealing secondary details only when needed. 

 

Using tabs to disclose detail tables

By limiting what demands attention at once, progressive disclosure makes it easier to understand what is important, strengthens hierarchy, and makes priority clear. 

2.4 Maintaining Clear Priority

Common hierarchy failures include: 

• Flat hierarchy: When elements carry similar visual weight, nothing stands out. Users must read and interpret the entire screen to understand what matters. 
• Overloaded hierarchy: When several elements demand strong attention, everything competes for prominence. If everything appears important, nothing is. 
• Misplaced emphasis: When secondary elements receive stronger visual weight than primary content, attention is directed away from the screen’s purpose. 

Poor use of hierarchy and contrast causes the screen to lose clarity. Primary content should stand out, and secondary content should remain visually subordinate. 

Use hierarchy and visual weight to prevent competing focal points. 

Clear grouping (see Section 3) can reinforce hierarchy by separating content and reducing unnecessary competition. 

2.5 Key takeaways 

3. Structuring the Screen: Grouping

3.1 Establishing Structural Clarity  

While hierarchy defines importance, grouping defines relationships. It communicates which elements belong together and how content is structured within the screen.  

Clear grouping:  

• Reduces cognitive load. 
• Improves scanning of the screen. 
• Makes relationships immediately apparent  

Grouping relies on spatial organization. It is achieved through spacing and proximity, closure, and alignment. 

3.2 Spacing and Proximity 

Spacing is one of the primary ways to communicate structure. Elements placed close together are perceived as related. Spacing should reflect conceptual distance:

• Small spacing for closely related elements  
• Larger spacing for conceptual breaks  

Consistent spacing 

Spacing consistency makes structural relationships easier to recognize. Similar relationships should use similar spacing patterns. This reinforces grouping by making these relationships visually repeatable. 

 

Modular Spacing Systems 

Spacing scale using predefined 8px increments

To support consistency, spacing values should follow a defined visual rhythm. Modular spacing systems (multiple-based scales such as the 8px rule) simplify spacing decisions, improve consistency across screens, and make layouts easier to maintain and extend across a Board application. 

 

Applying a spacing scale to a Board screen

Unrelated elements are separated using the largest spacing in the scale, while related elements are placed closer together. Similar relationships should use the same spacing so that consistent distance between elements reflects how they are connected.

3.3 Alignment

Alignment supports grouping by creating visual continuity. When elements share vertical or horizontal reference points, they are perceived as belonging to the same structure. 

 

Using alignment to reinforce grouping

Consistent alignment strengthens structural clarity and improves readability and predictable scanning. 

  

Grid system 

12 column grid system

Grid systems provide an underlying framework that supports consistent alignment and spacing. They simplify design decisions by guiding the placement of screen elements and reinforcing overall consistency. 

3.4 Containers and Closure  

Visual containment strengthens grouping by enclosing related elements within a shared boundary. Closure can be created using dividers, borders, and fills. 

Containers make group boundaries explicit and reduce ambiguity. Without visible containment, layouts may feel fragmented, lacking coherent groups. Containers improve the screen’s scan efficiency. 

While effective screens can exist without explicit containers, they are particularly valuable in complex or data-dense layouts. 

Cards and Tiled Layouts 

Using cards and tiles for modular layouts

In Board screen design, cards and tiles serve as structural containers for related objects such as KPIs, charts, or data views. Cards use independent containers with spacing between the modules. Tiles use edge-to-edge modules with shared borders or gridlines. 

These layouts support modular design by grouping related content into reusable units that can be applied consistently across screens. 

3.5 Key Takeaways

4. Bringing It All Together

Effective screen design begins before objects are placed on the canvas. It starts by defining the screen’s purpose and understanding the type of experience the screen must support. Once this context is clear, designers can structure the screen intentionally, using hierarchy to guide attention and grouping to organize relationships. 

Together, these principles transform collections of elements into coherent screens that are easy to scan, interpret, and navigate. Hierarchy and grouping allow designers to present complex information clearly, improve understanding, and reduce cognitive effort for users.