I'm working on a micro site which includes a profile section wit diverse pages. The pages allow the user to change their profile settings - e.g. update or complete personal details they provided during registration.

My issue is, that the form is quite extensive. And I've been thinking about different solutions how to let a user know that he has to actively save the changes he made and how to enable him to do it.

I have outlined and briefly visualized my approaches here - happy to get your feedback especially on the more advanced solutions. you may have an alternate approach.

In the basic approach (1) it's most likely that is will not be displayed within the visible area. So, the "Save" / "Cancel" buttons below the form are out of sight when a user makes a change on top of the form.

enter image description here

(2) The page will always warn the user that he forgot to save his changes, when he navigates away from the page without saving. however, I'd prefer to have a more subtle hint, that the user has to save changes he made.

(3/4) That's why I thought about a notification, telling the user that he has unsaved changes.

In (3) not in the visible area, so this wouldn't solve the problem. In (4) a box which fades in after a user made a change and fades out again. The box would always appear in the visible area - x pixels below the top browser frame.

enter image description here enter image description here

(5) Another version of the box would even take away the save / cancel buttons on the page. So they will be available only after a user has made changes. The notification would appear (in this case not fade out again) and directly enable the user to save or dismiss the changes he made.

enter image description here

  • 1
    whats wrong with your fifth approach?
    – sree
    Commented Jul 10, 2012 at 10:41
  • :-) I guess nothing. It just felt unfamiliar as I've never seen sth different that version 1, 2 or 3. Commented Jul 10, 2012 at 10:44
  • Agreed, option 5 seems fine - covers all the bases and doesn't have the "You've done something wrong" feeling of an alert box
    – TJH
    Commented Jul 10, 2012 at 11:39
  • Keep the save at the bottom, just incase users miss the save button. I have recently watched users miss a button just like this. Also not sure why save all changes. Can I save some of them then? Commented Jul 24, 2012 at 14:35
  • The question has been asked a while back but how about having a bottom fixed bar that shows you the buttons of "save/cancel" when change has been made. this way you are aware of the "save your changes" state
    – Milah
    Commented Mar 15, 2015 at 15:58

8 Answers 8


I would suggest keeping your save button at the bottom of the form so it is always visible and where the user expects to find it. Then once you have detected a inputs has changed, to highlight that row input row and to add a message to the top of the form. See mockup below:


download bmml source – Wireframes created with Balsamiq Mockups


I would put the Save/Discard buttons both first and last, clearly activated or disactivate based on if there actually are changes in the form.

enter image description here

Then I would make use of the browsers' built-in warning box, if leaving or closing the page without saving. This is how Chrome looks when changes are about to be lost in Gmail:

enter image description here


Can you not make it that for the user to leave the page, he MUST select 'Discard changes' or 'Save changes'? This way he will be forced to action and cannot forget not to save his changes.

It may also be useful as you have in Scenario 3 to indicate that changes have been made in order to assist the user in making his decision whether to save or discard.


Other than changing "dismiss" to "discard", I would go with the 5th option. It has familiarity and, unlike the others, keeps the information next to the actions.


If you can pin something to the view (meaning floating with the page scrolling), I would just pin the Save/Discard buttons on the top right, which should be clear enough to the user that the this is a required action.


Save on bottom with prompt if they didn't save and want to leave the page. Prompt has discard changes. I don't believe discard changes button on page is necessary if you are in the "My Account" section for instance. If you are in a checkout form I think a cancel is warranted as you may want to cancel the checkout process but it is kind of its own module and not really part of the site in a way. Cancel is better than discard I believe in that you are canceling a process. If you are in a section of the site I don't believe it's the same as you are not canceling a process. The user needs to be taken somewhere if they cancel. If you cancel a checkout process you can be taken to where you started. If you are in my account I think the only thing discard will do is allow for accidentally erasing your form like a reset or clear button. Same thing applies if you are adding data such as a comment on a social site or adding an email. A save or cancel for that item makes sense but for changing data a save on bottom left of the form works best I think. It's the most familiar design to people. Breaking up pages into logical chunks and having multiple saves on the page can work Web form design by Luke Wroblewski has some data on bottom left being the easiest to find with eye tracking data.


In my opinion versions 3, 4 & 5 don’t solve the problem of user forgetting to save changes. I suppose, that your profile editing form is used rarely (as other similar forms), so every nonstandard solutions will require some recognition (to understand them or even notice).

Messages on versions 3 & 4 can really be unnotice, but even version 5 will require a bit time to understand it — also the user can simply ignore it as something «secondary» and intrusive. Also it may have some technical problems on sensor and mobile devices (where scrolling of pages works not in the way as on desktops).

This intrusiveness of version 5 is the most weak part of the solution — it can really help not to forget changes, but may frustrate users as some blinking banners. The case is «I went here specially to change my profile, why are you talking to me this again and again?».

So, I suppose version 3 will be the most straightforward and clear.

But you may try another case — simply allow to user to go back without saving (maybe with some «gmail-like» hint on the top of page “your profile wasn’t changed”), but when he returns to the form, you may write at the top of it (where it will be noticable) the message «There are some changes you made to the form last time. Insert them?», where Insert is a link/button, that simply pastes saved data back to the form. This case will be as simple, as usual forms, but will help users to return to unsaved state in case of errors — without any additional messages & popups in process of “normal” (i.e. consciousness and error-free) form filling.


Leave the save button in the traditional location. With a webpage that's at the bottom of the form - on other platforms you should look up the best practice.

The form should have some form of auto-save. How that works depends on the use case, but here are some examples:

Local Storage

If you have no concept of a user account - just save to Local Storage in the browser. Specifics vary depending on the browser, but try to keep it less than 50MB and if the user doesn't come back to your website for 7 days it will be deleted in some browsers.

Cloud Storage for the User

If the user has a cloud account, save it on your servers associated with the user and somehow remind the user that they have unsaved data. Email clients often do a great job at this, with a "Drafts" folder that the user can easily use to recover a partially written email.

Cloud Storage for the Team

In a business context, if there's a team of people working on a project it's often appropriate to save drafts in the cloud somewhere everyone on the team can see it. A good example of that is a customer support team, where you might be waiting on details from a customer before the form can be completed. The original employee who partially filled out the form might be busy or at home when the customer provides those details. It should be seamless for another employee to complete the form.


The best user experience for saving is to not have a "save" button at all - automatically save as the user completes their work. Often in practice that needs to be saving to a draft, with a "Submit" button.

I would also avoid the term "Save" entirely - what does that mean? What's going to happen to the data when you "Save" it? In your specific example "Update Profile" is an appropriate name for the submit button.

PS: The issue with the button being lost below the fold is usually best solved by splitting the page up into multiple forms. That's outside the scope of this question - however it's generally bad to have any commonly used UI below the fold.

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.