This chapter defines how screen space should be allocated between the working area and supporting areas in Board applications. It provides practical guidance for sizing navigation and filter areas, organizing content through cards and containers, and structuring different screen types to balance information density with clarity.
While the previous chapters focus on screen structure, responsive behavior, and readability principles, this chapter focuses on how available space should be distributed once those foundations have been established.
The goal is not to prescribe fixed layouts or exact dimensions, but to provide designers with practical recommendations for organizing content, allocating space effectively, and creating predictable screen structures that support efficient navigation, analysis, and decision-making.
By defining clear roles for supporting areas and using cards and containers consistently, designers can create screens that remain scalable, readable, and easier to understand across different application contexts.
1. Supporting Areas and Space Allocation
Most Board screens are composed of three layout regions:
Top Bar
The Top Bar provides orientation, navigation, and screen-level actions. It may contain breadcrumbs, navigation controls, contextual actions, or application-specific information.
Because it is primarily a supporting area, it should remain compact and avoid competing visually with the working area.
Recommended allocation:
- Approximately 5–10% of the available screen height.
- About 48–80 px height on a 1920 px layout.
- Prioritize navigation and contextual actions.
- Avoid placing large amounts of analytical content in this area.
Side Panel
The Side Panel provides access to filters, selectors, actions, and contextual information that support the analysis performed within the working area.
A consistent Side Panel helps users quickly locate controls and reduces the effort required to interact with the application.
Recommended allocation:
- Approximately 15–20% of the available screen width.
- Typically between 280–360 px on a 1920 px layout.
- Avoid using wider widths that reduce the space available for primary content.
Working Area
The Working Area contains the primary content of the screen and should receive the majority of the available space.
Its structure should reflect the purpose of the screen and prioritize the information users need to understand, analyze, or act upon.
Recommended allocation:
- Typically, the remaining available screen width after allocating space for the Side Panel.
On layouts with a Side Panel, this typically represents 70–80% of the available screen width. - Should remain the dominant visual region.
- Supporting areas should complement, not compete with, the working area.
Once the purpose of the screen and its primary content have been defined, available space should be allocated accordingly. For guidance on defining screen purpose, establishing hierarchy, and prioritizing content, refer to the Screen Structure, Hierarchy and Grouping chapter.
Navigation and supporting controls should remain easily accessible, but primary content should always receive the largest share of available space.
As a general principle:
- Supporting areas should facilitate interaction without dominating the layout.
- Primary analytical content should occupy the majority of the screen.
- Space allocation should reflect the importance of content rather than organizational convenience.
- Additional functionality should not reduce the visibility of critical information.
2. Designing the Working Area
The working area contains the primary content of the screen and should receive the majority of the available space.
Its structure should reflect the purpose of the screen and support the user’s primary task. The working area is not simply a container for content; it should guide attention, support efficient scanning, and help users understand where to focus.
Effective working areas prioritize the most important information while organizing supporting content in a predictable and structured way.
Not all content within the working area carries the same importance.
Designers should distinguish between:
Primary Content
The information or component that directly supports the screen’s main purpose.
Examples:
- Main analytical chart
- Data View or Data Entry table
- Dashboard KPI summary
Supporting Content
Additional information that provides context, filtering, explanation, or secondary insights.
Examples:
- Secondary charts
- Explanatory text
- Supporting KPIs
- Alerts and messages
Primary content should receive the largest share of the available space and remain visually dominant.
Supporting content should complement the primary content without competing for attention.
Working Area Structure: Competing Content Areas vs. Clear Content Prioritization
The example above illustrates how working areas can either reinforce or weaken hierarchy. When multiple components receive similar space and visual emphasis, users may struggle to identify what is most important. Allocating more space to primary content helps establish a clear focal point and improves scanning efficiency.
Cards and containers can be used to divide the working area into clear content regions. By creating visual boundaries between related elements, designers can make screens easier to scan and understand.
Visual containers help users recognize relationships between components, distinguish different topics, and identify where to focus their attention.
In Board applications, modular layouts are particularly useful for organizing:
- KPI summaries
- Charts and graphs
- Data Views
- Contextual information
- Supporting insights
The goal is not to maximize the number of containers, but to create meaningful content regions that improve clarity and reduce cognitive effort.
Not every component requires its own container. Containers should be used to reinforce meaningful relationships rather than to separate every individual object.
Clear content regions improve scanning and understanding
The example above illustrates how visual containers can reinforce content organization and improve readability by creating clear boundaries between different types of information.
While the same principles apply across all Board screens, the way content is organized should reflect the primary purpose of the screen.
Different types of screens benefit from different content structures. The examples below illustrate how cards and content regions can be used according to the primary purpose of the screen.
Home Screen
Home screens primarily support orientation and navigation.
Working areas should prioritize navigation cards, entry points, and high-level contextual information. Analytical content should remain secondary and should not compete with the primary navigation paths.
Recommended characteristics:
- Navigation cards as primary content.
- Minimal information density.
- Clear entry points to key application areas.
- Limited analytical content.
- No scrolling whenever possible.
Home Screen Content Organization
The example above illustrates how navigation and orientation content can become the primary focus of the working area while maintaining a simple and predictable structure.
Dashboard Screen
Dashboard screens support monitoring and situational awareness. Their primary goal is to provide a quick overview of performance, trends, and key indicators.
Recommended characteristics:
- KPI summaries and charts as primary content.
- Multiple analytical views visible simultaneously.
- Clear separation between content regions.
- Balanced use of cards and containers.
- Supporting controls kept outside the primary analytical area whenever possible.
- Avoid screen scrolling whenever possible.
Dashboard screens should prioritize rapid scanning and immediate recognition of key information rather than detailed analysis.
Dashboard Content Organization
Analytical Screen
Analytical screens support investigation, planning, and detailed analysis.
The working area should prioritize large Data Views, Data Entry tables, or detailed analytical components while keeping filters and contextual information accessible.
Recommended characteristics:
- Large primary analytical component.
- Supporting KPIs and contextual information.
- Side panel for filters and selectors.
- Greater emphasis on detailed data exploration.
Analytical Screen Content Organization
3. Balancing Space and Content Density
Allocating space effectively is not only about defining supporting areas or grouping content. It also requires balancing the amount of information displayed with the space available to present it.
When too much information is placed within a limited area, screens become harder to scan and relationships between elements become less clear. Conversely, excessive empty space may reduce information efficiency and force users to navigate unnecessarily.
Effective layouts balance information richness with clarity, ensuring that important content remains visible while supporting content does not compete for attention.
White space should be considered an active design element rather than unused space. Appropriate spacing improves readability, reinforces hierarchy, and helps users distinguish between content regions.
The amount of space assigned to a component should reflect its importance within the screen.
Not all information deserves the same amount of space. Primary content should receive the largest share of available space, while supporting content should provide context without dominating the layout.
Space allocation should communicate priority. When all components receive similar space and prominence, users may struggle to identify what matters most.
Effective layouts use size, positioning, and content allocation together to establish a clear focal point and guide users through the screen.
Increasing the amount of information displayed may compromise usability when it reduces clarity or makes content harder to interpret.
When too much content competes for attention, users require more effort to identify priorities, compare information, and understand the screen.
Effective layouts use hierarchy, grouping, content regions, and progressive disclosure to manage complexity while maintaining clarity.
Board makers should resist the temptation to maximize information density at the expense of readability. Additional content should only be introduced when it supports the user’s task and can be presented without reducing overall clarity.
In many cases, splitting information across tabs, dedicated views, or secondary screens provides a better experience than forcing all content into a single layout.
Balancing information density through prioritization and progressive disclosure.
4. Key Takeaways
- The working area should remain the primary focus of the screen.
- Supporting areas should facilitate interaction without competing with primary content.
- Component size and space allocation should reflect content importance.
- Group related information into clear, meaningful content regions.
- Balance information density with clarity to support efficient analysis and decision-making.
