2

I have an asp.net-mvc site and a page that has a large number of editable fields table rows, etc that all can be edited. Because the page is quite long the save button often is not visible on the screen given screen size.

We have run into issues where people have said they go in an make changes but they forget to click "save" because its not obvious on the screen. I want a solution that visibly reminds the user once they make changes that those have not been persisted yet until they click save.

Is there any recommended best practice / examples for doing something like this?

  • 2
    Just want to point out, the optimal solution would be to create a system where the user don't have to remember to save. i.e. Auto-save changes if the user leaves the field/page. This might not be easy to do, so answers below might be acceptable solutions. – nightning Oct 1 '15 at 20:34
  • I wouldn't assume that auto-saving is a good solution -- it will help users who forget to save, but it will harm ones who close the page as a way of canceling changes. – octern Dec 27 '15 at 1:22
1

I think a proper solution here would be to display the save button inside a "floating bar" at the bottom of the screen. That bar is as wide as the page, and simply sticks/snaps to the bottom of the page.. it will scroll up/down along with any field that is in focus.

Additionally, you could choose to only show this bar in case changes were made.

1

You could have a persistant panel (e.g. either across top, across bottom, to the right of the form) that contains the status of the current saved version compared to the form being edited:

For example, the two statuses could be:

  1. If a save is required - [warning icon] Changes have been made, [SAVE button (enabled)]
  2. If up to date - [tick icon] Saved form is up to date, [SAVE button (disabled or hidden)]

N.b. Have a think about the wording of the text as I quickly put that together :)

1

Take a tip from the admin interface of Magento eCommerce. This is an old interface, essentially unchanged since 2008 when it was written. Sure much could be improved on, however, in my experience of working with clients over the last five years the 'failure to save' problem just is not a problem.

Why is this?

The save button is always in the same place - top right. If you scroll down through a form it still stays there. This is consistent whether editing customer details, order details, product descriptions, product categories, product attributes AND EVERYTHING ELSE!!!

Furthermore there is usually a 'Sae and Continue Editing' button right next to the 'save' and 'back' buttons. The back button is crucial as it takes you back to the grid listing those customer details, or products or anything else.

This top right area effectively becomes a 'macro navigation' for the task in hand - usually you want to edit a few products and the buttons facilitate this.

Consequently new users are not hunting around for where the save button is - they know the drill.

When does this fail?

On big sites you can have lots of teams editing product pages not knowing who else is working on the page. So the sales team could be marking down prices not realising that the guy who puts the images on is also working on the same pages. As a consequence some things get over-written with changes getting lost.

To date I have only worked on one site where the users have had this problem.

This can also fail if the session timeouts are too short. This is a configuration issue, but, if the session is - say - PHP's default 25 minutes or so, in a busy office one phone call could take up a lot of that time and, come 'save' time, the login screen appears and all changes are lost.

This is a simple fix - increase the session to something like 86400 seconds...

So cover off those scenarios - the way to solve the multi-user on same page problem is to embed a last saved timestamp in the form and have an ajax save. On the back end of the form simply compare the time stamps and return a 'uh oh' code, then in the ajax result code, throw a message to the user saying that the page has been edited by someone else with a 'reload' button. The user can then decide what to do, e.g. open the form in another tab and check what has changed due to other users saving the form in the time they have had it open.

A further advantage of the Magento approach is that it is simple as far as the user is concerned - there is a speed advantage in not having 'do you want to navigate away from this page' nag screens.

Many web agencies have Magento demo stores with admin areas you can have a dig around in. Have a look at how it works:

https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=magento%20demo%20store%20admin

Sometimes the simpler solutions are best.

  • Upvoted, but one comment: remember that "users spend most of their time on other sites." It's not enough that there is a convention within the site; quite a few people think of the web as a unit and do not really distinguish between sites that are part of "the website." The asker needs a solution that will work with users that spend most of their time on other sites and may not notice internal proper consistency like a "Save" or "Save and continue editing" button being in the same place on every page, helpful as that may be. – Christos Hayward Dec 26 '15 at 22:22
1

What about setting up an OnChange method for saving, and having your form save the information as the user goes along if possible.

This removes the need for your users to have to remember to click a save button, and at the bottom of your page you can give them a link/button to move on to the next page or whatever the functionality is.

  • I want to avoid this because i send emails out on the backend on project changes and if i save on any field update then there would be an insane amount of email . . i don't want to save more . . just highlight to the user that they have unsaved changes – leora Dec 26 '15 at 21:44

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.