2

I'm working on a page editor where you have the ability to insert images from an external/third-party source. The library of images will be displayed in a modal that sits on top of the page editor. This way, it doesn't disrupt the page editing process if you wish to insert an image to your page.

The issue with the third-party image though is that it might take a while to load. Since we'd have to load the image fully first before we can insert the image into the page, we display a progress bar - this is an ok solution, however, since the progress bar is within the modal, should the user get impatient and dismiss the modal, or if they don't notice the progress bar at all, they might inadvertently dismiss the modal and this breaks the process.

1
  • 1
    Not sure I understand. A modal typically blocks any interaction with anything else on screen. So the modal is always shown? Or is it shown on demand? Can you add a mockup or screenshot? – Izhaki Jun 4 '20 at 21:44
3

If the modal has a generic close button in the upper corner, remove it. Use only one close button that is disabled when upload is in progress. Add the option to cancel the upload.

enter image description here enter image description here

This workflow can surprise some users and can be experienced as obstructing. Consider moving the image library and upload to a section on the page or a different page.

2
  • 1
    I like how clear your progress bar is and cleanly connected to the actions taking place. I would argue that disabling the close button goes against Usability Heuristic #3 nngroup.com/articles/ten-usability-heuristics Also I think the post is about the time it takes to load a 3rd party app not uploading the images themselves – It's Dylan Jun 5 '20 at 16:03
  • @It'sDylan I agree, this is the best I could come up with. Modals are problematic in general, hence the note below the images. Hmm really thought it was about uploading images to insert them in the page ;-) – jazZRo Jun 5 '20 at 16:13
0

On the modal, until progress bar ends, show button with title "cancel image upload" and remove all other options to close modal. Once progress bar ends, automatically close modal with short status saying "image upload done". This way, whenever users would close modal, they will have to click on the button which clearly says, what will happen.

0

Let the user cancel; they might have selected the wrong image, and want to exit the task as quickly as possible. Or, the third-party service might be unresponsive.

Instead, you can either work on something that will keep the user engaged, like a more exciting image loading experience, or allow the upload to happen in the background while the user goes on with other tasks (like a progress bar that stays at the top of the screen after the user dismisses the modal, a la Slack.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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