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.
(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.
(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.