3

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.

  • I like the overlapping ever visible bar but I've never seen it in practice for long editable form fields on webpages; mostly in dialogs Do you think the experience is jarring that I take the user to the top of the page after they click a button? – Tingster May 13 '14 at 6:07
  • It's not jarring but, like other answers, putting the form in a frame is a better idea. Why are you fixating on taking user to the top? Any particular reason? – kBisla May 13 '14 at 7:59
1

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.

0

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.

0

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.

  • You don't need ajax to make this work. Just keep track of the datetimes and you can calculate it all client side. – Aust Jun 3 '14 at 15:43
  • @Aust True... for simplicity I conflated the file save UI described (which responds to result of async post of data to server) with the age display. – Jason A. Jun 3 '14 at 20:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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