I'm working on an application.

In this application we've got a page and in this page there are 2 different areas.

The top area is used to define information and has a radio select group where we have 3 different statuses.

  1. Prospect
  2. Tentative
  3. Definte

The bottom area is used to add value to the information used in the top area. Here we can add date ranges with information.

Right now it's possible to edit both of these area's and when doing so and saving information can get lost when switching to another status.

The solution provided by our product owner was the following:

When either area is touched, top or bottom the other will be disabled with an overlay until the first one is saved.

I find this really annoying and would like an alternative solution.

Can you guys help me with this?

  • So the user needs to select one of those radios, then click save and then edit the bottom. If they decided they want to choose a different radio they click save (is this the same save button as previous?) and then they can change radio?
    – Alvaro
    Jan 2, 2017 at 16:48
  • 1
    What does this overlay contain?
    – JonW
    Jan 2, 2017 at 17:05
  • To alvaro: there is the possibility right now when creating a new item to give it either of these 3 states. The most common use case is that a new item starts with the status prospect and can only go one direction from there. When switching from the prospect to the tentative and then saving you can no longer go back to prospect, same when going from tentative to definite. But when creating a new one they can select all. To JonW: Overlay is a blocking container on top that disables either the bottom or top part. Jan 3, 2017 at 8:40

2 Answers 2


There are a few different ways of handling this:

  1. Put in an auto save feature that triggers saves when the status selection changes. If there is a risk of saving bad data this way then include an interrupt prompt to act as a confirmation of the intent to save changes.
  2. Just disable other options if the user makes a change to any of the fields related to the current selection and only re-enable once the work has been saved.
  3. Change the radios selections into tabs and preserve all changes across all tabs in a local change file that upon user save writes all changes to the server.

You can implement the process in two steps. After the first section is edited, the second appears or you can just make the sections collapsible and disable the second one initially.

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.