Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
1  
whats wrong with your fifth approach? –  sree Jul 10 '12 at 10:41
    
:-) I guess nothing. It just felt unfamiliar as I've never seen sth different that version 1, 2 or 3. –  John Sample Jul 10 '12 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 Jul 10 '12 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? –  The Question Jul 24 '12 at 14:35
add comment

7 Answers 7

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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