Banners

Estimated reading: 7 minutes 307 views

How inform and alert users with Banners ?

A banner is a powerful tool for communicating important information or alerts to users on a website or application. It is a prominent message that appears at the top or bottom of the screen and persists over a session, making it highly visible and hard to miss.

Principles

Should be placed at the top of the screen, before the top app bar (DocuWare Logo), to ensure that they are easily visible to users.

For banners to disappear the user must interact with them.

Should be placed at the top of the screen, before the top app bar (DocuWare Logo), to ensure that they are easily visible to users.

For banners to disappear the user must interact with them.

Banners should remain available on every page throughout the user interface, making it easy for users to access and interact with them.

Banners do not require user initiation and can appear without the user taking any action.

It is important to limit the number of banners displayed at a time, to avoid overwhelming users with too much information. Show one banner at a time.

This flexibility makes banners a great choice for communicating important information that needs to be seen by the user but does not require immediate attention.

Specifications

Anatomy

The anatomy of a banner component consists of six elements, which can be combined in various ways to create a total of four different variations for the structure, four colors, and four types of icons. These elements work together to effectively communicate information, changes, or errors to users within an application.

Color

For information messages

For success messages

For warning messages

For danger messages

Our design includes specific colours for both the container and text elements, ensuring a cohesive and visually appealing layout.

Banner’s container:

Four different variations to represent different types of messages:

Banner messages:

The text in all messages must be clear and easy to read. They can be displayed in either black or white:

For messages displayed in blue, green and red (information, danger and success) banner containers, the text should be in white (#F1F1F1).

For messages displayed in yellow banner containers, the text should be in black (#000000)

Typography

Text messages style name: R5-Navigation-Label

				
					font-family: Tahoma; 
font-weight: normal;
font-size: 14pt;
line-height: 17pt;
color: #f1f1f1; /* or #353535 */

The following are different structural options for a banner component:

Variations

Variation 1

BANNER CONTAINER+ BANNER MESSAGE + BANNER BUTTON CLOSE (ICON)

When use it? Do not use the icon when the accompanying text is lengthy or the icon does not effectively support the message, in which case relying solely on text may be a better option.

Variation 2

BANNER CONTAINER+ BANNER ICON+ BANNER MESSAGE + BANNER BUTTON CLOSE (ICON)

When use it? This banner variation two when the icon can effectively support the message.

Variation 3

BANNER CONTAINER+ BANNER ICON+ BANNER MESSAGE+ BANNER TEXT BUTTON + BANNER BUTTON CLOSE (ICON)

When use it? Variation three is used to redirect users to another page to get more information.

Variation 4

BANNER CONTAINER+ BANNER ICON+ BANNER MESSAGE+ BANNER BUTTON + BANNER BUTTON CLOSE (ICON)

When use it? Variation 4 is used when users need to perform an action such as update the system, renew license etc.

All variations in a nutshell…

Layout

Following you find the best practices and musts when defining layouts for banners:

The banner text message should be centered within the banner container, both horizontally and vertically.
The “Banner Button Icon Close” should be positioned on the right side of the banner container, centered vertically. Exceptions for this placement apply for larger desktop screens, as shown in image “3. Exceptions Button Icon Close”.
To align multiple elements within a banner component, group them together and center the group within the banner container, as demonstrated in images 2, 3, and 4.

Guidelines

Use cases:

Banners are divided into two categories: primary and secondary. Primary banner, Blue Banner is used for generic messages, while secondary banners Yellow, Green and RED are used for specific messages that require immediate action, such as indicating a successful completion or warning of potential system disruptions or service interruptions.

Primary banner:

The Blue Banner is the primary banner for conveying information to the user without requiring immediate action.

E.g.: The new version of DocuWare will be available in December 2005.

Secondary banners:

The Yellow Banner is a secondary should be use to reminder the user.

E.g.: Attention: Your license is set to expire soon. To avoid interruption of service, contact support to renew your license.

The Red Banner is a secondary banner Banner should be used to convey important and urgent messages to the user, and the user need to take immediate action. This type of message should be prominently displayed and clearly distinguishable from less critical information.

E.g.: License expired. Please contact support for assistance in renewing your license.

The Green Banner is a secondary banner and must be used in specific cases where the outcome is positive.

E.g.: Congratulations! Your license renewal was successful.

Usage:

Whenever it’s possible use the component in the following contexts:

Follow

Banners must be be used just for very important message. Its not research to overused;
Banners must be placed on top page 1st position, follow by the navbar with Docuware logo;
Keep the message short and consistent;
Always show the X close button;
Banner should have the full width of the screens.

Avoid

Do not write block of text to use as a banner message;
Do not use more than one banner at time;
If you use a banner inline button do not use an icon in your message.

Behavior:

Appearing: Banners typically appear when a screen loads content.
Dismissing: Banners must remain on screen until dismissed by the user. User must click on close button X

Microcopy

Follow

Be concise and clear
Highlight the main benefit/value proposition
Use an active voice
Avoid jargon or technical terms
Be attention-grabbing and actionable
Match the tone and style of the brand

Examples:

Banner Blue/Info: Get ready for an improved experience with the upcoming release of Docuware in December 2005!

Banner Yellow/Warning Attention: Your license is set to expire soon. To avoid interruption of service, contact support to renew your license.

Banner Red/Danger: License expired. Renew now – contact support.

Banner Green/Succeed: Congratulations! Your license renewal was successful.

DocuWare Design

Banners

How inform and alert users with Banners ?

Principles

Specifications

Anatomy

Color

Banner’s container:

Banner messages:

Typography

Variations

Layout

Guidelines

Use cases:

Primary banner:

Secondary banners:

Usage:

Behavior:

Microcopy

Examples:

CONTENTS

Loading Patterns

Alerts

Banners

Bias-Free Language

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input