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)

    Don't try to invent your own UX - just use OK, the way all your Windows users are used to :) There's a lot of lessons you can take from Windows design - for example, always have Cancel as the default button, always have X do the same as Cancel (OK is treated as Cancel - but it must be the only button on the dialog), never give a "Yes-No" question without a Cancel option. Not only is it a very good UX, it's also the one your users are most likely the most familiar with by far - that's a huge item on the "pro" side.

    And don't forget that people may have trouble clicking the X. Maybe they're elderly, or disabled. Or they're using a touchscreen, or a touchpad. Having a nice, big "OK" button will help those people tremendously.

    @Luaan Just pointing out that bootstrap is the one who invented this UX, not me. Also, depending on the purpose of the popup, it does not always make sense to use OK since that is more of a confirmation language.

    Yeah, when you need the user to make a decision, you provide either Yes-No-Cancel or OK-Cancel. But Cancel is always the default, and always the thing that happens when you press Escape or click X. Cancel is basically the "Whoa, whoa, what's this popup doing here? I didn't order this!".

    Yes, they're redundant. And neither of them are unnecessary. Sometimes redundancy is the right thing, as your answers are showing.

    When I look at these, I see them as different. The button is in the language of the app, telling the app I would like to close the window. The X in the corner is in the language of the OS, a meta-language, telling the OS that I would like to close the window, potentially against the app's will (I can still click the 'x' when the app is frozen, and force-quit the app). While, in reality, the app intercepts both messages, they seem like different streams of communication to me. If I didn't have an 'X', I would feel as though the app was trying to take control from me.

    No close button, to me, would suggest the app was done talking to me, and I needed to rely on OS features to get the blasted dialog box out of my way.

    @CortAmmon What you say might be true for annoying confirmations. Many times however I use modals as a way for users to simply view items in more detail or perform different actions without leaving the main page. At these times, users *choose* to open the dialog and they *want* to see the information. Many times they can even interact with stuff on the modal. When they are done working with the data on the modal, it is not "Get me out of here!" It is more "I finished using this information and now I am ready to go back to the main page." I don't see anything menacing with the 'x' in this case.

    @CortAmmon Also, let's not confuse closing a whole app and closing a popup inside an app. When an app crashes, the internal popups usually freeze as well. In these cases, the 'x' does not have any additional functions over a 'close' button. I'm not talking about using the 'x' in the corner of the entire screen which is sometimes used to force close things.

  • 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.

    I like that you made a clear distinction between cancel and close.

    Model is almost always not necessary.

    +1 for your reasoning and highlighting objectives of user

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM