Save confirmation on webpages

Question

I have a form on a webpage that is editable. The form unfortunately can be quite long and can go beyond the fold. Where is the appropriate location for a 'save' confirmation feedback message? Is there a better approach to showing feedback to the user that changes have been saved?

1. At the top and take user back to the top of the page.
2. Near/below the 'save' button and keep user on the bottom of the page.

Added

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

I assume that by "save conformation feedback message" you mean some sort of "Are you sure?" message. Stick with the traditional message box for this purpose.

To show that the changes have been saved, use a notification bar at the top of browser. I'd also reckon that you keep your save button on an overlapping ever visible bar at the top/bottom of the page if your form is too long.

Answer 2

A better understanding of the context would probably help, but the general strategies remain the same:

1. Apply the notification/message at a fixed area of the page (e.g. top or the bottom of the page) so that the user always know where to look for it.
2. Apply the notification/message at the point of need (e.g. where there is an action associated, or where the data being affected is located) so that the user gets feedback at the right place/time.
3. Apply the notification/message as a pop-up or in the status area so that the user needs to acknowledge or will definitely see it.

You may even decide to use a combination of these strategies, but it would be preferable to err on the side of caution so as not to annoy the user with too many distractions.

Answer 3

If you have a frame based layout (eg. google mail interface where you can scroll through the mails while the rest of the page is stationary) you may choose to display the message in the region between the address bar of the browser and the the top of the frame. So irrespective of where the user is on the form the message will always be visible.

If you have layout that scrolls all the components of the screen, try a message on a modal panel kind of approach.(similar to the ones in mobile apps)

Fix a location on the screen where the message is to be displayed (a good location will be as you have shown in the second screen). When required display the message on a small modal panel (minus the masking of rest of the content). So in a way it will be on the screen yet not a fixed section of the form. So irrespective of where the user is on the form the message will always be visible.

Based on the kind of layout for the application you may choose to consider any approach.

Answer 4

For many audiences, a more useful and less invasive UI would be to inform the user when the form was last saved. e.g. put "Last saved 8:23 pm" next to the save button.

Placing this next to save button gives in-context confirmation (the display changes after save completes) and it is also a robust location for locating the info.

If given the audience you want the event to be more obvious can change text to "saving..." while awaiting confirmation, or even an animation.

Even better for speed of user comprehension is to use relative time IIRC Google hangouts does this 'last chat' messaging very well with relative time e.g.

• "Saved moments ago"
• "Saved 1 min ago" ...
• "Saved over 1 hour ago"
• "Saved over 1 day ago"

but this approach needs a little AJAX to keep fresh.