0

We need to display a download button to get a template document and upload button to upload the filled document, for some reason we want to have these two buttons in a single Modal window.

Any ideas and a reference screenshot would be much appreciated.

Sample illustration

4
  • 2
    not really sure what you want help with, are you saying you want someone to find or do a modal design for you? Could you please be a little more explicit about what the problem is? Also...you don't need a 'close button' and a 'close cross' in the corner on that screenshot you've included
    – Chris
    Jul 22, 2015 at 11:42
  • Modals stop the user flow - one forces the user to interact in a specific area. Simple modals are ... simple modals. You may be overthinking the problem.
    – Mayo
    Jul 22, 2015 at 13:13
  • 1
    Help us understand more about the context of this problem. Why did your team decide to place both download and upload action into a modal? Are these two actions supposed to be performed one after another? Also what's behind the modal? How does the user arrive at this modal? What might they want to do afterwards?
    – nightning
    Jul 22, 2015 at 16:30
  • In answer to a question you didn't ask: you're implying that the two functions MUST be in the same modal dialog box, so, if true, let's make it super clear what the user can do. I say this because the embedded assistance ("Before editing your template, … save a copy …"), while a helpful tip, is distracting from the main choices. I recommend you make it clearer that there are two distinct functions. For example, add a heading that asks: "What do you want to do?" and then subheadings "Download the template" and "Upload your modified template"—or whatever wording is appropriate for your audience.
    – JeromeR
    Jul 22, 2015 at 22:04

3 Answers 3

1

Ideally, the template should be introduced to the user before they fill out the form and the upload button at the end of the journey. However, if you do want them in the same modal, I would suggest using different styles of buttons & call to actions according to the importance of the CTA task. In simpler words, you could emphasize the uploading feature by using an icon + suggestive text and a bigger touch/click target area, while the template could be a smaller textual button link.

Sharing an example from SE itself - enter image description here

0

'For some reason' you want to have these two buttons in a modal window...

You can have the two call-to-actions in a screen, but it seems strange to have them in the same modal window because if you click on one button or the other you still have to expand the modal window or open a new one to accommodate the action.

If there is a specific set of requirements that means you have to design things this way, then perhaps a solution can be provided, but otherwise the lack of such interfaces and design patterns suggests that it is not really suitable in general use.

2
  • Why would the modal window require expanding to accommodate the action? Downloading anything simply triggers the OS wizard where you can define where to save the file in your computer. Uploading usually only showcases the filename, and a progress bar of some sort to make the upload progress status visible. I don't see any reason why the modal would require expanding in either of the cases.
    – ikartik90
    Oct 7, 2021 at 14:14
  • @ikartik90 one reason why the modal window might expand is if you are uploading a file and it shows the file that has been uploaded. If you upload multiple files and want to reflect the status then at some point the modal window may have to expand.
    – Michael Lai
    Oct 7, 2021 at 23:14
0

The question is lacking relevant information: Do both actions need to be taken in the same context or only one? If both are required then having one modal dialog makes sense, in which case I would clearly label the two actions as Step 1 and Step 2 and change the layout to show them horizontally (like tabs) with a vertical divided separating the step steps.

In case these two actions are not required to be taken together, then you need to only keep on the action in one modal dialog window.

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.