Saturday, April 25, 2015

modal windows - Are "close" and "x" on a popup redundant?


I am working with a basic bootstrap modal popup which is a popular modal used on many sites. I noticed that the default template comes with both a close button on the bottom, as well as an x on the top, these two buttons essentially having the same purpose.


Are the two redundant and the close button completely unnecessary and just taking up extra space? Or, is having multiple usage options more user friendly?


enter image description here enter image description here


To make this even more fun, suppose I throw in a Save button:


enter image description here enter image description here


Is it now clearer that if you don't press save and just press the x, your changes will be canceled, or is there now more of a need for a cancel button for users who are scared that a mistake will become permanent?


Update:



To clarify for those who feel this question is similar to Can we expect users to close popovers by just clicking away? - That question is asking if a clickable background is sufficient to close a popup. I'm using buttons and it is just a matter of how many buttons to use. (I do also have a clickable overlay and ESC key enabled, but that is irrelevant to my question)



Answer



It may be redundant, but independently of this the real concern should be to evaluate if this redundancy is beneficial, harmful or neutral.


Different goals, different designs


Do you need a confirmation modal or just an informative one?


Confirmation: To start with you'd need a OK/Cancel pattern which will offer a clear binary option. You could avoid the X button here but I see no reason to to do it, since it can impact in the user flow if they are used to close everything with it.


Informative: Is it always necessary or recommendable for the users to actually read the message?




  • Yes: Don't place a X button nor a Close button, because you don't want to give the user the easiest and fastest way out. Place one "OK" / "Got it!" button so the user is less likely to pass over the message. Also you should take care of the "clicking outside the modal" in this case.





  • No: Place both an OK or Close button plus a X button. There are different types of users with different interaction habits, so there's not a good reason to cut off the natural flow for each one. Moreover if the message is not very important you should ask....




Is the modal really necessary?


If your goal is to inform the user, there are less obtrusive options such as notifications; try to limit modal use to when it is really necessary. Examples from the Nielsen Norman Group article:




  • The user is about to take an action that has serious consequences and is difficult to reverse.


  • It’s essential to collect a small amount of information before letting users proceed to the next step in a process.

  • The content in the overlay is urgent, and users are more likely to notice it in an overlay.



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...