Last Update: Jan 17, 2023
Platform: Mobile
Designer: Joyce Lian
Failed to load
Intro
Failed to load is a status when content cannot be retrieved from the backend server.
Usage
If services from the backend server are not accessible, content cannot be loaded or refreshed. When the status occurs, the user should be informed of the status by a message on the UI.
For instance the message will be displayed the text: "Looks like the data isn´t loading". An icon or a pictogram can be displayed to the user for support the message.
Types
Structure & Components
Behavior & Interaction
The Failed to learn information should be clearly displayed in the middle of the screen. Next to the information, an action button (Retry) should be displayed, which can trigger the reloading process.
If there are multiple UIs in a stack within a tab strip, the information and action button must be displayed on each tab.
Responsiveness & Adaptiveness
The Failed to load pattern builds on existing UIs elements and behaves according responsive.
Application-specific examples
Accessibility
Both screen flows for iOS and Android are based on standard controls. The scenarios have passed the A11Y review checks and without any accessibility issues.
Resources
Information about loading errors in the Fiori for Android 5.0 Stencils:
Information about loading errors in the Fiori for iOS 8.0 Stencils: