1

I have a modal that contains a table of items. Each item is in a row and a user should be able to edit/delete each item.

When deleting an item, there needs to be a confirmation dialog asking the user to confirm the deletion.

The problem with that is a dialog box will be sitting on top of the modal - so it's essentially a modal on top of a modal.

Is it ok to just display the dialog without the modal behind it?

Please note that time is limited for this issue, so we couldn't spend a lot of time on a more complex, albeit better, solution.

Improve this question
2
  • Editing/deleting a table full of items seems like a lot of actions for a modal. Any chance the table could become its own screen?
    – Izquierdo
    Aug 26, 2021 at 19:56
  • Not at the moment. As mentioned in the original post, we couldn't spend so much time on this issue as much as we wanted to. We're currently migrating all of our code into a different framework, so a way to delete a row within the table is what we could only implement.
    – J Bo
    Aug 26, 2021 at 21:17

2 Answers 2

Reset to default
1

I see several ways to solve this problem:

  1. I agree with Izquierdo you should not design a table inside a pop-up window. But whatever the reason you have to do that please follow the next options.

  2. Design it as you described earlier and then test it (the simple one). If users are frustrated consider another interaction. It shouldn't be real code implementation, a simple Figma prototype would be enough. Can be useful here: Framework to Evaluate and Improve the User Experience.

  3. Design it as a nonmodal popup. Which appears as a dialog above the popup, but it won't be one more popup on top of the previous one. More about that Nonmodal popups

  4. Do not ask for confirmation of deleting, but provide undo option. This decision should be considered with the front-end and backend teams because it solves the UX problem but can cost too much.

Improve this answer
5
  • The big problem I see is users deleting a row from the table, then clicking Cancel in the modal, expecting that the deletion was cancelled (even after confirmation). Another problem is the chance that a user would accidentally click outside the modal and close it, losing their edits/deletions. Undo might be a good temporary solution if a modal absolutely has to be used.
    – Izquierdo
    Aug 26, 2021 at 21:14
  • Thank you. We currently don't have any bandwidth to support other changes. With regard to number 4 (an undo option), I'm assuming that would disappear after x seconds, correct?
    – J Bo
    Aug 26, 2021 at 21:15
  • You could persist the deleted row with some visible indicator that it will be deleted once the modal is submitted, and provide Undo as the only action in the row.
    – Izquierdo
    Aug 26, 2021 at 21:18
  • Slack has a nice way of dealing with this. This is a pop-up but does not look like so. prnt.sc/1ql1cuk
    – Swapna
    Aug 27, 2021 at 2:19
  • @Beans how long the undo button should displaying depends on how critical the absence of the undo can impact on user flow/journey there. If the User has to fill in a few fields, let it disappears after 3-5 seconds (I recommend 5). On the other hand, if that deleting interaction affects highly do not hide the undo button at all (it doesn't increase the user's cognitive loading, so you can keep it there).
    – Roman Videnov
    Aug 27, 2021 at 6:24
0

Dialog box on top of a modal should be avoided. From what you have described (i.e that you can't change the structure of your page and modal windows at the moment) I concur with Roman and Izquierdo that "Undo" option would be the best way to go in this situation of yours:

enter image description here

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.