Undo/Redo in a product-painting-webapp shall be tuned by animation. If the user click undo/redo i have both painting's, the actual and the to-be-actual painting.

One painting is a multi-page painting area (like a book for left/right area).


Ok, i think about a animation either

  • transparent-appear shrink/grow
  • or left-swing for undo and right-swing for redo

Any other suggestions?

  • What do the lists either side represent? Different items to paint? The undo / redo stack?
    – Franchesca
    Jun 20, 2014 at 8:31
  • @Franchesca Nope, they are irrelevant to the question. They shall give a imagination behind what components the left-right-swing will flow.
    – Grim
    Jun 20, 2014 at 8:46

2 Answers 2


I am not sure about the "size" of redo/undo, i.e., the visual change in the picture. Nevertheless, I think that moving the entire image to left/right (which is what I take "left-swing" to mean) will not allow the user to recognize the change. This is more like the children's images where you need to spot differences between two, only here only one is visible at a time...

If you can highlight just the change, this will be of help. I'd start out by something like this:

  • scroll/zoom so that the changed area is clearly visible
  • circle the area
  • change the image (redo or undo)
  • "uncircle"
  • Too bad, i only have the image and dont know what exactly is changed.
    – Grim
    Jun 20, 2014 at 7:48

If you don't have a notion of what changed, you should still be able to subtract one image from another, and then use the difference to create a mask over the image that can be switched on and off with a checkbox (so the user can get back to the original image)? You can make the mask a flat colour that is different to the colours on the image.

  • Ok, sometimes they turned the pages to another site(1-200 sites). If they do not have turned the page, i can use a animation to show the exact difference pixel-by-pixel by substract colors. This is a good idea, but what if the user has turned into a differen page?
    – Grim
    Jun 20, 2014 at 9:44
  • I know that my undo/redo stack gets wiped, for example, when I close and reopen an MS Word document or a Visual Studio solution. In web app terms leaving the webpage could be considered equivalent to closing an application. If this assumption isn't one your target users are likely to make, you could prompt them with a warning when they try to navigate away from your page. I have seen many websites give warning prompts when you attempt to navigate away from their web app while in the middle of an edit.
    – Franchesca
    Jun 20, 2014 at 11:07
  • I meant a page from a book as part of the multi-page painting area, not a webpage. ;)
    – Grim
    Jun 20, 2014 at 11:31
  • If you have 2 pages, which one does the undo or redo button apply to?
    – Franchesca
    Jun 20, 2014 at 11:45
  • Both. ;D See, its a book (oldscool but our customers buy it). One page has two sides, in one view you can see on the left side the back of the first page, and on the right is the front of the second page. If are on the 1st page and turn to the 2nd page this "turn" can be undone (and redone). A substraction from zwo different pages makes no sense, maybe i must visualize the turning first.
    – Grim
    Jun 20, 2014 at 11:57

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.