Loading Patterns
Engaging users while waiting with Loading Patterns
This section will expose the usage of the loading behaviour in configuration plugins, including the use of loading patterns to communicate the state of content loading to the user, so that users will have a clear indication of when content is loading, and be able to better understand how the application is functioning.
Specifications
There are different loading standards depending on the part of the product, loading patterns also different depending on if a user is accessing a plugin or interacting with a plugin. Following the guidelines are:
When accessing a plugin:
Interactions: only with the top bar (DocuWare logo, Grid Icon, User information
Success: move on to “Plugin loading” step action has been completed successfully.
Error state:
-
The spinner changes into an error state (consult Web Infra team to know what exactly can cause an error)
-
Error message: if possible, write the reason for the error and how to recover from it, e.g. “The connection has timed out. Please, check the connection and refresh the page.”
-
Show the structure of the page as soon as it is available (cards, table, etc.)
-
If individual data is still loading, leave it blank (no individual spinners)
-
Overlay with a spinner
-
Spinner message: no message
-
Interactions: only with the top bar (DocuWare logo, Grid Icon, User information)
-
Error state:
-
The spinner changes into an error state (see example animation)
-
Error message: if possible, write the reason for the error and how to recover from it, e.g. “The connection has timed out. Please, check the connection and refresh the page.”
-
-
Success: remove the overlay and move on to “Plugin additional data loading” step
If only additional data is loading, do not show any UI elements
-
Spinner: do not use it
-
Interactions: all items are interactive (users can delete them, edit, copy, open a new one, etc.)
-
Error/success state: none
On entering any of the configurations inside the plugin, while additional data is still loading, show immediately the next screen and perform the loading there
When interacting with a plugin:
1. Empty screen with a loading spinner:
spinner message: “Please wait while your settings are loading”
interactions: only with the top bar (DocuWare logo, Grid Icon, User information)
2. Overlay with spinner on the content:
Spinner message: no message
Interactions: only with the top bar (DocuWare logo, Grid Icon, User information)
3. Loaded content
Overlay with a spinner, no message
When the saving is done, show a success alert
Go immediately to the plugin view and perform the loading there, if necessary
(follow the opening the plugin guidelines)
Overlay with the spinner on the item
Spinner: no message
Interactions: interactions on affected item are disabled. Every other interaction is enabled
No success/error state
Performing individual actions inside the plugin (without entering the configuration), should affect only the element that the user is interacting with
Short-time loading: deactivate only the UI element (checkmark, toggle)
Long-time loading:
Overlay the whole item with a spinner
No message on the spinner
Disable interactions with this item
Examples of these actions:
Publish checkmark in Forms
Active checkmark/toggle in Document Processing
Active checkmark in Deletion Policy
etc.
