2

I am looking at a redesign proposal for a close button on a modal window for a responsive web/mobile application. I have my own thoughts on this but would like the UI/UX community to weigh-in.

Please comment on the close button strategies below, A and B, and add your thoughts on which approach is best.

A

B

Improve this question
2
  • What are those thoughts you have? Why do you think other one is better than the other? What does your users think?
    – locationunknown
    Aug 16, 2018 at 5:17
  • I agree with the comments: ‘A’ yields an incorrect visual hierarchy that the close button is weighted as the primary action, and I agree that ‘B’ is the common convention. I also agree that a large close button is at times utilized for handheld devices but placed at the bottom – cleared from primary interaction points and/or the content. If a large button is used, the button would NOT span the entire width of the modal at larger breakpoints, and the button would not be the largest button in the modal (diminished weight in the hierarchy but at an obvious location when the user opts to close.)
    – vince-ux
    Aug 16, 2018 at 18:03

4 Answers 4

Reset to default
5

For Modals, the common practice is B for web apps. For mobile apps a larger button as seen in A is often used for ease of touch/tap interactions. However in that case, you're more likely to see the close button located at the bottom of the UI vs the top as it's a secondary action. Having the button located at the top draws attention to the close button before the rest of content in modal is viewed. Generally that's a bad practice if that is not the intent.

Improve this answer
1

The common convention for this is 'A', this is most commonly seen in modals.

Having the close button at the top is bad practice because:

  1. It is likely the first thing the user will see, and given a pop up modal is generally a sudden occurrence they maybe more inclined to tap it without any consideration for the content below it.
  2. The common convention for a close button is generally under the content so the user is more likely to actually read what has been presented to them. The cross is more subtle and less intrusive and doesnt command as much attention as the button so wont have the same effect.
Improve this answer
0

Closing a modal is not the first thing you'd expect your users to do. So give it proportionate importance in terms of size and placement. Top right is where most users would expect it. Couple of things to keep in mind:

  • Have a close button that is out of the way of primary user interaction on the modal.
  • Make the button keyboard accessible.
  • Make the button large enough that it's thumb-able.
  • Make sure that your modal works as expected on all screen sizes, as in some cases the close button is out of reach/ invisible, which is the most annoying thing to experience.
Improve this answer
0

B.

There is no need create something new here. "B" is what users are becoming universally used to, so there is zero need to to force the users to visual re-train their cognitive senses.

Remember the KISS approach.

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.