DocuWare Design

DocuWare principles, design language, and market best practices

leaf leftleaf right

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:
Both for the web infra and plugin pages when loading states must follow the same: to have a blank page and a spinner
  Spinner message: “Please wait while your settings are loading”

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.”

When data of a plugin is loading:
  • 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

When data of a plugin is loading:

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:
Relates to adding a new item, editing an item and duplicating an item. There are 3 different stages of loading, as following:
 

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


When data of a plugin is loading:
 
  • 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.

Loading Patterns

Engaging users while waiting with Loading Patterns This section will expose the ...

Alerts

Keep users on their toes using Alerts Alert is a messaging tool used to notify u...

Banners

How inform and alert users with Banners ? A banner is a powerful tool for commun...

Bias-Free Language

General guidelines for writing about people without biases

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input

Chat Icon Close Icon