I have designed a widget for a Web mapping aplication that takes a .csv containing coordinates as input and has 2 output options :

enter image description here

Business logic :

  • Both output options require a .csv to be loaded and the form below to be validated
  • None of these output options require extra steps, they are executed in background.

But now I was requested to add a new output :

enter image description here

This "Upload to URL" button requires extra steps, like typing a URL and some other configuration, so basically it will require a intermediate form to finish the output.

My first instinct was to make this extra form as a modal, but the widget is already a modal so... that can't be good.

So maybe just append the intermediate form below the first one? But then it's not clear that this second form depends on the first one being validated.

In the end the only feasible solution I could think of was to add a side-transition to this form (with a back button), the only problem with this is that all other output buttons on the modal footer have no transition, but this one has so it kinda breaks the pattern.

I'm looking for solutions/ideas on how to better design the flow of things here.

If I understand this correctly, "Upload to URL" is similar to the others (uses all the existing fields) but adds some additional fields that are required before submitting the form.

Don't make this another "submit" button. Instead, add it as another option - e.g., a checkbox (Check here to upload to URL) or make a radio button selection with all 3 options and an ordinary submit button at the bottom instead of the 3 options. Then if the user selects/checks Upload to URL, the rest of the fields open up. You can also have the fields show all the time but with them grayed out/disabled unless/until Upload to URL is selected/checked.

You can also use Accordion or Tabs to show/hide certain forms part of the same multi-step submission process.

Instead of having your three options as the culminating point of the modal, why not have them asked as a question within the content as: an accordion; conditional reveal; or stepped modal? That would remove the layer of complexity and additional steps that you are worried out.

It would also provide a better base for your modal's navigation - have only two buttons: 'Cancel' and 'Export' (whatever verb suits the purpose best). At the moment what is also confusing is having a hierarchy to the buttons without knowing (it seems) what the hierarchy is supposed to be.

As an aside, a modal is already a layer of complexity on the page (which I like!) but therefore you should avoid adding too many more as they quickly become hard to understand which is why something like a modal from a modal doesn't work!

You can split that in two steps / layers. Instead of classic modal I would use move from left animation and Overlay...
Then for second step I suggest place additional layer on top.
Close icon on first layer closes the "modal" / overlay. Back icon on second layer reverts to first layer.
enter image description hereenter image description here

One thing that might help would be to add "..." to the end of the button text (i.e. "Upload to URL...") to indicate that more information is needed.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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