Saving progress UX design guide

Manual save via "save" button and toaster notification

When to use it

When a user is saving a file

Example:

View reference

Manual save via "continue" button

When to use it

When a user moves from screen to screen in a process, saving can ocurr by pressing the continue button

Example of saving via trigger (button):

Example of snackbar indicator:

If the user will remain in the same screen when saving, a snackbar should prompt indicating the change.

View reference

Auto save triggered by events

When to use it

Autosave mode is dependent on the technical specs of the app. Some applications require a trigger to save (button) but other applications can handle autosave events. Autosave can be configurable with events such as time intervals (save every X seconds) or modifications made (save after 2 edits). Autosave is indicated via "snackbar" a component available in the UX Library

Example:

Example:

A snackbar prompts from the bottom of the screen after 5 seconds.

View snackbar component

Saving confirmation under header in next page

When a user clicks "save" or "continue" from a page, a confirmation message shows up in the next page.

Example trigger:

A user enters some data and clicks on a button that takes the user to anew page or screen

Example of the next screen:

A saving confirmation message appears in the next screen with details of the saved information.

Saving alert on exit

When to use it

When a user exits the appplication via "exit" link, a modal prompts indicating the user about the saving status of the app.

Example:

View modals