The user is editing a form element on the RHS flyout panel and the editing is not completed. In the middle of the process, the user decides to undertake the following actions:

  1. Click outside the flyout panel.
  2. Click in the search bar.
  3. Click on one of the tabs inside the flyout
  4. Clicks on the flyout close button.

Right Hand Side Flyout Panel

What is the best way to notify the user that their changes will not be saved? Here are some of my iterations:

iterations of notifying users about unsaved changes


I would recommend having a pop-up modal asking the user that there is unsaved information that he will lose.

It's weird to click somewhere on the platform and have a warning somewhere else. Don't make the user chase warning messages on the platform. Make messaging contextual.

Facebook has a good example of this interaction here if you try to navigate to another page without posting your comment or status.

enter image description here

And here is a default browser warning triggered by StackExchange:

enter image description here

| improve this answer | |
  • 1
    Thanks for the answer! I have read a lot of posts saying that modals are distracting and annoying for the users if they come up too often, and I anticipate that in this interaction this could be the case. Could there be a 'softer' way of notifying users without popping a modal? – harshikerfuffle Apr 29 at 14:39
  • I totally agree. Here is the tradeoff that you need to do as a designer between: 1. User will lose information and be super annoyed 2. Annoy user with a modal to save the information and not be super annoyed – Lonut Apr 29 at 14:40
  • 1
    True! that's a good way of looking at it! – harshikerfuffle Apr 29 at 14:43

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.