Overview

All applications that require user sign-in should employ a mechanism for automating user sign-out. Automatic sign-outs are a result of inactivity over a predefined period of time. Depending on the security level of the information presented, the period of inactivity may vary between 5 and 60 minutes. When the inactivity is about to reach that threshold, a session timeout dialog appears automatically to inform the user.

Look and Feel

When to Use

1
do
false

Recommended

  • Consider implementing session timeout warnings in all applications.
  • Set the idle session duration based on the security level of the application. The recommended is 15 minutes.
  • Set the time before the session timeout dialog shows. The recommended is 2 minutes.
  • Consider returning the user to the screen they were on after signing back in.
  • Consider implementing a countdown for the last 60 seconds.
  • Consider switching to another illustrated message when the session expires.
1
dont
false

Not Recommended

  • Avoid allowing end users to change session timeout.

Anatomy

Image
1
10.84; 39.64
Dialog Title
Contains the title of the dialog. A resume of dialog's content.
2
34.77; 60.56
Illustrated Message
A graphical representation of the situation. Attention grabber.
3
58.18; 67.13
Situation Message
A clear statement of the situation accompanied by a detailed explanation what is going to occur.
4
79.69; 76.49
Finalizing Actions
Presents the available choices for user interaction.

See also:

Fiori Design Guideline - Illustrated Message Design and Layout

Session Timeout Dialog Types

null

Session Expired

A dialog that appears when the session has expired. At this point to continue working with the application the user needs to sign back in.

null

Session Expiring

A dialog that appears before the session expires. This dialog counts down the remaining time before the session expiry. The last minute of the dialog should count down the seconds remaining in real time.

See also:

DemoKit Sample - Session Timeout Dialog

Dialog Setup

As the illustrated message comes with predefined size and responsiveness, it is important to set up the dialog in a way to properly support the content. Consider using the settings in the table below.

<div> <div>Property</div> <div>Recommended Value</div> <div>Notes</div> </div> <div> <div>Width</div> <div>width: 20.625rem;</div> <div>Recommended dialog width.</div> </div> <div> <div>Height</div> <div> <p>min-height: 24.5rem;</p> <p>height: auto;</p> </div> <div>Recommended minimum height. If the text starts wrapping due to internationalization, automatically increase the height.</div> </div> <div> <div>Padding</div> <div>padding: 1rem 2rem 0 2rem;</div> <div>Dialog content padding.</div> </div>

Idle Session Length

Depending on security implications, each application should consider the length of inactivity before the automatic session expiration. Consult the table below for recommended values.

<div> <div>Security Level</div> <div>Idle Period</div> <div>Show Dialog</div> </div> <div> <div>Very High</div> <div>5 - 15 minutes</div> <div>1 minute before session expiry</div> </div> <div> <div>High</div> <div>15 - 30 minutes</div> <div>2 minutes before session expiry</div> </div> <div> <div>Medium</div> <div>30 - 60 minutes</div> <div>3 minutes before session expiry</div> </div>