For the complete documentation index, see llms.txt. This page is also available as Markdown.

Headers & Model Structure

Headers help organise your ROI Model or Calculator into clear sections

Use Input Headers and Output Headers to give users context about the information they're entering and the results they're reviewing.

A clear structure can make even a sophisticated business case easier to understand.

Input and Output Headers

ROI Studio provides two Header components:

  • Input Header

  • Output Header

An Input Header appears above the Input section.

An Output Header appears above the Output section.

Use them to describe the purpose of each area rather than relying on individual component labels to explain the entire model.

Add a Header

To add a Header:

  1. Open Show Components.

  2. Find Headers.

  3. Select Input Header or Output Header.

  4. Enter the Display Label.

  5. Configure the available display options.

  6. Select Save.

The Header is added to the appropriate section of the model.

Set the Display Label

Use Display Label to define the Header text.

Keep Header labels short and descriptive.

For example, an Input section might use:

Business Inputs

or:

Costs & Assumptions

while an Output section might use:

Business Case Results

or:

Financial Impact

The Header should help someone understand the purpose of the section before they start reviewing its individual elements.

Show or hide the Header

Use Display Header to control whether the Header itself is displayed.

This lets you retain the Header configuration while controlling its presentation.

Add an icon

Headers can optionally display an icon.

Enable Display Icon and choose the icon you want to use.

An icon can provide additional visual context, but it isn't required.

Use icons consistently and avoid relying on them as the only way of communicating what a section represents.

Header colours

You can configure supported Header presentation settings including:

  • Font Color

  • Background Color

Use these controls to establish visual separation between sections while keeping the overall model consistent.

For more information, see Styling, Icons & Number Formats.

Use Headers to establish hierarchy

Headers are most useful when they reinforce the structure of the business case.

For example:

Current Environment

Annual Volume Current Cost Current Performance

Assumptions

Expected Improvement Adoption Rate Implementation Cost

Results

Annual Benefit Net Benefit ROI Payback

The exact structure will depend on the model, but the principle is the same:

group related information and tell the user what each area represents.

Input and Output structure

Inputs and Outputs have different purposes.

Inputs contain assumptions and values that can drive the model.

Outputs present calculated results.

Headers can reinforce that distinction by clearly separating the areas where users adjust assumptions from the areas where they review results.

For more information, see Adding & Configuring Inputs and Adding & Configuring Outputs.

Keep Headers concise

A Header isn't intended to contain a detailed explanation of the section.

Prefer:

Operational Assumptions

rather than:

Enter all of the assumptions associated with your current operational environment below

Use component labels, supporting detail and tooltips when individual assumptions need further explanation.

Don't overuse Headers

Headers should make the structure clearer.

Adding too many can have the opposite effect.

Prefer a small number of meaningful sections over creating a Header for every small group of components.

A useful question is:

Does this Header help the user understand a meaningful change in context?

If not, it may not be necessary.

Headers and single-page models

Input and Output Headers apply to the single-page canvas layout.

They provide section titles for the Input and Output areas within that layout.

If your model uses a straightforward single-page experience, Headers are a useful way to establish its major sections.

Headers and multi-page Calculators

When multi-page mode is enabled, the single-page Input and Output section Headers are not used in that layout.

Multi-page Calculators use their page structure to organise the experience instead.

If you need more substantial separation between different stages of a Calculator, consider whether separate pages provide a clearer experience.

For more information, see Multi-page Calculators.

Headers vs layout components

Headers and layout components solve different problems.

Use a Header when you want to identify a major Input or Output section.

Use components such as Columns, Accordions and Micro Tabs when you need to organise content within the model.

For example:

Results ← Output Header

Annual Benefit | Net Benefit ← Columns

ROI | Payback ← Columns

This creates both semantic and visual structure.

For more information, see Columns, Accordions & Micro Tabs.

Structure before styling

It's generally better to establish the logical structure of the model before spending significant time on presentation.

A useful sequence is:

  1. Identify the Inputs required.

  2. Build the calculations.

  3. Identify the Outputs that matter.

  4. Group related information.

  5. Add Headers where they improve understanding.

  6. Introduce layout components where needed.

  7. Apply styling.

  8. Preview the complete experience.

This helps ensure that presentation supports the business case rather than defining it.

Preview your structure

Use Preview to check whether the model's organisation makes sense from the user's perspective.

Ask:

  • Is it obvious where assumptions are entered?

  • Are related Inputs grouped logically?

  • Is there a clear transition from assumptions to results?

  • Are the most important Outputs easy to find?

  • Are Header labels concise and meaningful?

  • Is any section unnecessarily fragmented?

If the model feels difficult to navigate, simplify its structure before adding more visual elements.

Best practices

When using Headers:

  • Keep Header text short.

  • Use business-friendly terminology.

  • Match the Header wording to the purpose of the section.

  • Prefer one clear Header for a meaningful section.

  • Use icons only where they add useful context.

  • Apply colours consistently.

  • Don't use Headers to compensate for unclear component labels.

  • Remember that multi-page mode uses a different structural approach.

Last updated