I have added an autosave feature to my web app, but I couldn't think of whether it's toggle place or default value on page load. I'm thinking of remembering it's state with localStorage when the user is not logged in or the database when I have a logged in user. The layout looks like this:

enter image description here

So, the questions,

  1. Should I include a save button? I coded it, because I want to keep autosave intervals long, like 30secs.
  2. Should the autosave toggle button be outside the dropdown? On the toolbar maybe?
  3. The autosave feature will be only available for logged in users, guests will have a live copy in local storage, and when they come back, they will see their last screen before they left. Logged in users will see the last autosave. So, what should be the situation when user login for the first time autosave: enabled, or autosave: disabled by default?

Thanks in advance. (The button placements are temporary, nevermind that. If you have some ideas about the toolbar layout, feel free to comment about that too. I need some fresh ideas ;)

2 Answers 2

  1. If the intervals are this long (a lot can happen in 30 seconds), you should definitely leave an option for the user to save their changes manually. Another thing - manual saving option is a good way to alleviate user's worry that their changes could disappear.

  2. Why do you need the dropdown at all? I'd probably try putting the autosave toggle right next to the save button, so the user can discover it when reaching to save (that'd work if saving manually is a natural action for the user). This way everything involving saving will be together in one place, which would allow user to think less (which is usually a good thing).

  3. This one is about user expectations: do they expect things to be autosaved? Probably not, especially, if that feature is not available to all users all of the time. For example, what if the user is making the changes, but just wants to cancel them afterwards? If you turn it on by default, there's a possibility that they'll save something they don't want there and won't even notice it. Google Drive solves it by having a full change history available with a possibility to revert to any point in that history. You could also consider showing a little walkthrough for that feature so the user is aware of how to use it.

Anyway, your job is to make sure that the user understands that their changes are saved and they have nothing to worry about. Consider displaying the current state, e.g. how Google Drive does it:

When actually autosaving (so the user knows what is happening):

When actually autosaving changes

And when saved (so the user knows that everything's ok):

When saved

You can make them more visible, depending on how much attention you want to give it (looks like Google is pretty confident nothing could go wrong, or that their users don't need to think about it, so it's a really low priority thing). Note that they don't really have manual saving button, because they push the changes as fast as you make them, not by 30 seconds timer.

  • 1
    Thanks for your answer. I'll keep the save button, I also have another settings in the dropdown which don't fit inside the toolbar, so I've added some of them to a dropdown. Maybe I should try to fit all of them inside the toolbar. I also have the blinking notifier when the user has an autosave happened. It should be visible to make the user understand what chances he/she has. Thanks.
    – Taha Paksu
    Commented Apr 16, 2019 at 12:58
  • 1
    I also have a undo/redo button as you can see on the toolbar, if the user wants to revert things, he/she can undo it and save manually. This will delete all the autosaves and saves before. I don't plan to have a "go to any history point, anytime" feature, so that should be enough for the user.
    – Taha Paksu
    Commented Apr 16, 2019 at 13:07

Should I include a save button?

Yes, you should! That will be a predictable requirement from the user side. Any application that has save/autosave option should have a 'Save' button.

Should the autosave toggle button be outside the dropdown? On the toolbar maybe?

Depends on what other things will be in/out of the dropdown section. Sometimes a predictable pattern is to have autosave enable toggle in the 'settings' or 'profile' section. Sometimes it can be shown in the main section. Since this toggle has no direct connection with the content of the document (where user is editing and saving things), you can put this autosave enable option aside of the main content area.

autosave: enabled, or autosave: disabled by default?

Autosave is typically enabled by default where autosave feature is enabled. That increases the predictability of the software. Besides, it has a business facilitation, pushing the feature from the start of any user journey. It's a matter of discussion with the business team though!

  • Thanks for the answer. This is my personal project, not related with any business :) Otherwise, I agree with your thoughts.
    – Taha Paksu
    Commented Apr 16, 2019 at 13:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.