Overview Page – UI Text Guidelines

Intro

Texts for the overview page include:

Page title
Card title
Card subtitle
Actions

The sections below describe the guidelines for each of these texts.

Note: These guidelines do not cover the texts for imported elements shown on the card body, such as tables or graphics.

Basics

Ensure that the card texts on the overview page are easy to read. Users need to grasp the information on each card at a glance.
Be clear. If necessary, provide context for the information you are showing, such as an explanation or filter criteria.
Be consistent. When you work on an overview page, always consider the texts for each card in the context of the overview page as a whole.
Bear in mind that other languages may need more space.

Guidelines by Text Type

Page Title

The page title appears on the launchpad tile and in the application header for the overview page itself. Where possible, use the same text for both.

Guidelines

Use a noun-based name (for example, “Procurement Center”).
Use title case.
Choose a name that best fits your use case and the conventions in your business.
For example, do your users think in terms of the role, or the business area? What terms are they most familiar with? Look for a name that fits for all the cards you are including. Also consider the terms already used in your application area.
Do not use the term “Overview Page”. This is just the name of the floorplan. However, it’s OK to use “Overview” on its own.

Launchpad tile an overview page

Overview page title in the launchpad shell bar

Card Title

The title is the top element on all cards and is always required. The title for a stack of cards is also used as the heading for the detail view.

Guidelines

Use title case.
Be concise. Aim for one-line texts, which are easier to scan. If you need more space, try not to exceed 2 lines.

Concise title (eyecatcher)

Don’t overload the title with too much information.
If the title is short, consider including qualifying information in the title.
If the title is longer, or the qualifying information is more complex, use a subtitle for the qualifier.
Recommended: Use a consistent pattern across all the cards on your overview page.

Titles can also include qualifiers - if they are not too long

Card Subtitle

The subtitle is optional. You can use it to qualify the title, offer an explanation, or show a status. The use of the subtitle can differ, depending on the card type.

Guidelines

Use title case.
Exception: Use sentence style for longer explanations, or statuses involving time periods or numbers.
If you have a mixture of subtitles in sentence style and title case, consider changing them all to sentence style.

Subtitle with simple qualifier

Explantory subtitle (sentence style)

Subtitle with relative time period (sentence style)

If your subtitle contains multiple qualifiers, separate them with commas.

Multiple qualifiers

If you need to qualify amounts (unit, currency), use the following format:
(<Unit> <Currency>)
If the subtitle contains multiple qualifiers, place the currency at the end. Use | to separate the preceding qualifier from the currency. Do not write “in <Currency” (for example, “in EUR”), as this doesn’t translate well in all languages.
If you are using both a title and subtitle, ensure that both texts can be translated independently.

Subtitle with scaling factor and currency

Actions

Actions can appear at the bottom of the quick view card.

Guidelines

The action buttons on cards follow the same text conventions as all other action buttons:

Use title case.
Start with a verb.
Keep the text as short as possible.

Resources

Want to dive deeper? Follow the links below to find out more about related resources.

Elements and Controls

Overview Page (SAP Fiori Element) (guidelines)

Implementation

No links