UPM Style Guide for Digital

Banners

Introduction

Banners can display important information with less interruptions than popups and present concise call-to-actions or offer shortcuts to other pages or services. Nevertheless, banners are interruptive by nature, so they should be used sparingly, usually a maximum of one banner in a single view.

 

Paper banner

 
 

Banners are visually strong elements for grabbing user’s attention

Image is the main element in the banner. Choose one which communicates the idea and the destination of the banner clearly.

 

A banner has a clear message and self-explanatory naming in the button

Button’s copy explains the action it triggers
 
 

You can use up to three banners horizontally aligned on desktop

Even though a banner is a convenient element for presenting various content or options for users, try to be moderate. Too many banners may confuse the user and make the experience unpleasant, especially on mobile where all the cards will be stacked vertically. 

 

If you use several banners, try to make the view a coherent whole

Quaternary internal

A banner has a clear message and self-explanatory name for the button

Quaternary internal
 

A banner has a clear message

Quaternary internal

A banner has a clear message

Quaternary internal

A banner has a clear message

Quaternary internal
 
 

The attention banner may be a good method to stop user while she’s scrolling the page

But preferably use only one of these in a view. Excess use of very strong elements is usually a bad idea. In addition you may use light or dark overlay on the photo if it makes the text more readable.  And again, mind the mobile users!