Autosave design pattern

Join the early bird Black Friday list

Black Friday is just around the corner, and we’re excited to offer early access to our best deals of the year at shop.learningloop.io. If you’re looking to elevate your brainstorming sessions and streamline your team’s workflow, our printed card decks are here to help.

Want to get in before everyone else?
Join our Black Friday Early Bird list to be the first to know when discounts go live! We’re launching the sale early this year, so you can grab your deck and start putting it to use before 2025 even begins.

Join the list

74% of 254 votes liked this

Problem summary

The user wants to keep their data safe and saved while focusing on working without having to remember to do so.

Example

Usage

Use when you want to help the user focus on producing great content without worrying about whether their data is safe and saved.

This card is part of the UI Patterns printed card deck

A collection of 60 User Interface design patterns, presented in a manner easily referenced and used as a brainstorming tool.

Get your deck!

Solution

Prevent accidental data loss by automatically saving user input at fixed intervals or at events of interest.

Consider at what frequency it makes sense to auto-save inputted content for your application, and at what events it makes sense to trigger an auto-save. The most obvious event is clicking the save-button, but the event of moving the focus to another field might also be interesting to observe.

The save button

To better guide users as to what state their document is in, consider changing the label of the save button from “Save”, when the form contains uncommited changes to “Saved” when the current form represents what has been saved in storage.

Rationale

Let users worry about creating great content rather than about loosing it. Removing the save button entirely can create fear, so consider keeping it around to make users feel safe. Leave an unobtrusive trace of conducted user actions and consider complementing with the Undo pattern.

Discussion

When implementing auto-save functionality, consider not removing the “Save” button. Users tend to panic, when there is no “Save and close” button. Even though the “Save” button does nothing or only closes the window, it provides confidence and reassurance in users that their data is safe. It’s an issue of trust. Did the system hear me? Am I sure that I am sure?