0

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.

Improve this question

5 Answers 5

Reset to default
5

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.

Improve this answer
1

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

Improve this answer
0

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!

Improve this answer
0

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

Improve this answer
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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