Alternatives to cascading modal popups

Question

We are currently looking at reworking one of our web-apps.

At the moment, all editing is done in modal popups. It would be simple enough to replace a single modal with an inline edit mode or something. However, our app presently allows multiple levels of dependent data to be entered at the same time.

For example:

1. The user clicks on a day in the calendar view and selects "enter new journey", which opens the "new journey" popup
2. One of the fields on the new journey form is to select which client is travelling on that journey. The field shows the currently selected client (probably blank) and a "Select" button, which opens a popup to select the client. This popup has a list of available clients to choose from, and a simple search box to narrow down the results.

3. However, as you can see they can also add a new client from this window. If they click "New", it opens the "New client" popup.
4. One of the fields on the new client form is to select the surgery/doctor for the client. Again, there is a "Select" button which will open a popup to select the surgery. It looks much like the select client popup.
5. If the surgery is not already in the system, there is another "New" button, which opens the "New surgery" popup.

So at this point the user has a stack of 5 popups:

• New journey
• Select client
• New client
• Select surgery
• New surgery

As they click Save/Select on each popup it will close and fill in the appropriate field on the popup underneath, until they get back to the first popup. When they save that, the system goes to the screen for the journey they just created.

Is there any alternative approach that does not use popups? Or are popups the best tool for the job here?

Answer 1

I strongly hold the opinion that pop-ups are almost never the best UX for CRUD operations. I would recommend looking into some of the following components:

• Slide in panels
  • These scale well for mobile contexts, and allow for scrolling on larger forms without "leaving" the context of the current page/action
• Advanced Dropdowns
  • Show more than one line of information about what is being searched/selected
  • Allow for searching on more than one property of an object
  • Allow search to "filter" results, rather than seeking to options who's value starts with the search term

Using these two components, your new scenario would look like:

• The user clicks on a day in the calendar view and selects "enter new journey", which opens the "new journey" slide in panel
• User searches for and selects any existing items from the appropriate dropdown
  • Click "Add New" next to any drop-down causes a small form to appear in-line with the current flow and disables drop-down.
    • Clicking "Save" adds the item, removes the form, and sets the drop down to the selected value
    • Clicking "Cancel" clears the form and enables drop-down

I hope this makes sense. The biggest differences are:

• You remain in the same context (entering a new journey)
• You're using more "mobile/responsive friendly" components
• Selections are simplified and provide more information to make a decision