8

I'm building mockups for a site, where users can edit profile info, etcetera. After they submit the change, they get a green success message at top of screen, with an button option to undo their change.

If they click that, I created a new mockup where they get another green success message saying, essentially, "change undone." I started to put a 'redo' button, then realized I wasn't sure what was best practice here.

First, should that undo message be green, like the original success message? Second, should I have a 'redo' button? It creates an odd loop where a user could undo-redo-undo-redo... just to amuse themselves and take up server bandwidth. I was going to add a limited time for the undo/redo buttons to be available, but that still doesn't solve this possible problem.

Maybe I'm overthinking this, but I'd love to know what others have done, or what best practices might exist.

1
  • Perhaps in this particular case 'redo' can be replaced with simply resending the form, clicking send, apply, etc.
    – Pablo H
    Dec 15, 2023 at 14:04

3 Answers 3

4

This is highly context dependent.

Firstly you mention that the confirmation appears after they have submitted. I'm assuming that means after they have submitted a whole form full of profile info (which may include one or more changes to their info).

I think about problems like this from the perspective of trying to reduce the amount of wasted effort on the part of the user.

Undo is a great for this on the whole, but I don't think I've seen undo applied to a form submission before. The problem with that is the unit of change might be too big.

So if they have changed a lot of information and then hit submit, only they realising that they've made a mistake somewhere how do we minimise the effort to recover from the error?

It's possible that they've updated some info correctly, and some other info erroneously. Undo then takes them to a previous state where they still have to correct some information because they've now lost the changes which were correct.

It might be better to think about each field independently - and in fact this is an increasingly common pattern where form fields are saved automatically without the need for a submit. This lets you treat each field independently, but obviously at a complexity cost in implementation. This works especially well if you weren't navigating away on submission anyway.

Should you have redo? If you're going to the effort of implementing undo then you probably should. Any control can be used in error - even undo, so allowing a way to easily correct that makes sense. Should that undo message be green - I'd say yes, after all it's a successful operation. I'd reserve red for if the undo failed for some reason. Likewise for the redo. Although I think toast messages are an anti-pattern - better to put the confirmation right next to the control which caused them, since that's where the users eye is pointing. Putting them the other side of the screen risks them not being seen.

As for the undo-redo loop - if the user want to mess about - let them. It's their time they're wasting! Server costs here are probably trivial so I wouldn't worry about this until becomes a problem (it likely never will). If people can harm your system just by undo/redo you probably have much bigger issues to worry about! And there may be legit reasons why they want to flip back and forth - maybe they can't decide which version of their bio paragraph is better for example.

1
  • This is a short form of 4 fields on profile page. And in other scenarios outside the profile page, the undo is for a single action. Sorry for not being clear. I do like the saving changes with each field edit. Might work if time allows for implementation
    – turpentyne
    Dec 15, 2023 at 13:53
3

I generally aim for simplicity, and so I am questioning if an Undo button is even necessary. I can't think of any service I've used where I saved something and needed to Undo the form, but perhaps in your industry it is necessary.

If you do want to add a safety net for the user, you could add a popup asking the user if they are sure.

This could be done in two different ways:

  1. When the user presses the "Save" button it could ask them if they are sure, and understand their previous information will be lost. If the user accepts, it is not reversible.

  2. When the user presses "Undo" they are asked if they are sure, and ending the loop.

I hope this can be helpful!

2
  • 6
    Adding confirmation dialogs should be avoided wherever possible. Providing undo is a far better mechanism. The reason being that confirmation gets in the way of performing the intended action in all cases, whereas undo is only invoked when needed so in most cases undo is more efficient, and even in the worst case no less efficient. Dec 15, 2023 at 11:42
  • Good point @PeterBagnall I hadn't thought of it that way
    – Simon
    Dec 15, 2023 at 16:32
1

Make undo button return to the edit form, which is already filled in with previous submission.

Then if they only made a small mistake, they can edit it out and resubmit. If they decide they don't want to edit anything after all, the form presumably already has some logical way to navigate away from it without saving changes.

1
  • Exactly. The general principle is that "undo" should return you to the state you were in before hitting "submit". That prior state is one in which the server DB has the old (pre-edit) info, and the client web form has the edited info. Dec 16, 2023 at 23:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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