1

I'm working on a new approach to my modals that when a user opens multiple modals they merge with tabs for each one.

enter image description here

This works great to switch between modals without having to close one or drag them off to opposite corners of the screen to see both.

One problem I'm noticing however is if you click too fast multiple times (which people tend to do for no apparent reason example 1 example 2) they can end up closing multiple windows because the 'X' from the next modal slides to where the closed one was.

enter image description here

I was thinking about either adding a delay or slow transition to the tab sliding over but that just feels slow and adding unnecessary lag. I could also disable the second 'X' for a short time, but what if the user wants to rapidly close them all.

Is there a better solution or will this just have to be something the user has to learn not to rapidly click.

Improve this question
6
  • What is your targeted devices? Desktop with Mouse + Keyboard only? Or touch devices also?
    – 6220119
    Aug 25, 2015 at 3:37
  • Do you really need multiple modals?
    – Lex
    Aug 25, 2015 at 5:16
  • 3
    That GIF is oddly satisfying to watch. I think the transition would work best as long as it's fast enough to not feel laggy
    – Oztaco
    Aug 25, 2015 at 5:45
  • @6220119 targeting mouse with this, mobile will have different style atleast but likely different implementation.
    – DasBeasto
    Aug 25, 2015 at 10:31
  • @Lex I'm working more on a series of "plugin" type elements for different use cases, so I personally wouldn't like to go the multiple modal route but there are people that do.
    – DasBeasto
    Aug 25, 2015 at 10:32

3 Answers 3

Reset to default
5

You don't want to prevent your users from closing multiple modals rapidly, every approach in this direction will be a fail.

What you want to do is preventing your user to close any tab by mistake. As it is a mistake use case, do not design for it from the beginning (except if it does not disturb any 'normal' use case).

Rather than doing that, just add the feature to re-open previously closed tab. A little rubber with 'undo' action should be enough.

If you can user test it I would be happy to know if it was enough.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • Interesting an undo action never occurred to me, I'll certainly be adding an undo function on it, perhaps a little more subtle though as modals are closed rather often.
    – DasBeasto
    Aug 25, 2015 at 11:55
  • +1 The undo would be definitely my answer too.
    – Alejandro Veltri
    Aug 25, 2015 at 12:54
3

You could use a percentage based approach regardless of the number of tabs. meaning the sum off all the tabs is 100% of the total width. this way the location of the close button at the edge of the tab will rarely be at the same point.

enter image description here

Improve this answer
1
  • I was considering this, in my opinion not the most visually appealing but is a simple solution to the clickthrough problem.
    – DasBeasto
    Aug 25, 2015 at 10:34
1

Firefox had the option to move tab close button to the end of the tab row, effectively removing it from the tabs themselves. Option was removed on version 31.

I used it and it eliminated the possibility to close multiple tabs by accident. It was kind of small button, possibly very far from where your mouse usually were (Fitt's law). And you really had to know what it was and where it was.

But if you make it clear somehow that there is a tab close button that isn't on the tab itself, it could solve your problem.

Mozilla removes tab close button preference from Firefox

Improve this answer
1
  • In that article "I can also use it to quickly close multiple tabs without having to move the mouse button." sounds like it would have the same issue just pushed to the side. Moving the close button is certainly something to think about but without moving it to a different place for each tab I don't see a way yet.
    – DasBeasto
    Aug 25, 2015 at 10:51

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.