Close button position: corner or inside?

Question

This is the modal dialog for the admin page. We had a discussion about the close button position. Which one do you think is better?

A is more common and can be seen in many great web apps (Figma, Twitter, Slack, Bootstrap, etc.). B somehow looks like an ad. (Big Sur is using it in notification, miro)

This is a general style decision for our design system, which means where do we put the close button on different modals.

Our survey ("which works best for you") shows that people prefer B more. The reason is clarity and discoverability.

My big question is, why do many great apps use the INSIDE close button instead of B. Why A is more commonly seen than B (maybe I am biased).

Answer 1

The reason why the close buttons are outside the windows is to establish a contrast with the content, which gives greater emphasis to its function, in this case contrast of shape and position:

If the close button is a simple symbol inside the window, it can lead to confusion by mixing with its content.

The question should be: which option offers better contrast in a window close button to make its function more understandable?

If it must be inside the window, I would recommend at least a figure/ground + shape contrasts:

I personally see this second option cleaner.

Why do many great apps use the INSIDE close button?

Integration

Incorporating all the elements that make up the design within the same graphic entity help to its consistency.

Consistency

The close button inside the window gives the design more consistency. The option out causes the button to be interpreted as a separate element with its own graphic entity beyond the function, breaking the design visual unity.

Answer 2

I won't go into the specifics of your example, but there are some generalities that could help explain why A is often prefered:

• In the old days, windows in a user-interface were always rectangles. They were defined by the (x,y) co-ordinates combined with width and height and you couldn't draw outside of that rectangular area without a large amount of extra effort (if it was even possible at all). This established the conventions for button placement.
• In most windowing systems, there is more than just a close button involved. Imagine how design B would look if we also needed to include minimize, maximize/restore and whatever other window-management buttons the system might provide. Therefore, this design doesn't scale to more than one button.
• Placing the close buttons outside the frame may be more technical difficult (e.g. on a desktop application it may require handling transparency, whilst on web applications it may cause positioning/clipping issues if overflow is hidden or for certain values of the display attribute).
• Implementing generic solutions with customisable button images may make positioning harder. Inside the frame you can just position top/right, whereas with an image you will need to 'center' it on the border, and the visual center may not be the physical center.
• Because of all of the above issues, general purpose UI libraries will provide functionality to implement buttons inside the frame, but are much less likely to put in the additional work to allow you to position them outside the frame. This increases the effort for users of those libraries to move a button outside the frame, thus further cementing the convention.
• In addition, placing the button partially outside the frame can be a usability issue when the background is busy - your examples use a plain background, but if it were on top of something more complex, the button might get lost.
• You might have layout issues on small screen sizes, where you want the modal to take up the whole screen. It would require additional margin around the whole modal (or the top and right edges, if you're comfortable with the modal not being centred). Or a responsive design that places the button inside the frame on smaller screens, which potentially doubles the work (as you need to account for two different layouts).

Answer 3

I'd bet a standard-colored close button would win. I think you're getting B because the close button isn't colored like the create button so users have to look at the X and figure out that it's a button.

Here's a close button that matches the create button:

Answer 4

There should be a "Cancel" button at the bottom, at the same level, color, and significance as "Create Account."

There are two choices for exiting that modal, and having them separated by distance, symbolism, color, language -- they're as different as can be -- is bad UI.

Answer 5

I love B.

It is so pleasant, stress-free, so grounding. It's because the button is so easy to spot: users have been conditioned to look in the top right corner for a close button, and you've broken up the outline of the modal there to superimpose the button on top of it. It couldn't be more obvious where the button is! No hunting needed.

The button is very visible and very distinct, you can tell it has a different function to anything inside of the modal, and also that it doesn't really belong to the modal: the button sits partway outside of the modal, and above the modal. This has a psychological effect: the user is able to call upon a superintendent-esque, external, reliable, force to close the modal, instead of having to trust (modal A) to forget its grievances that you wanted to close it, and wholeheartedly oversee its own self-destruction and make sure the residual remnants of its existence don't affect your continuation on the page. That makes the experience of clicking modal B's button more comforting and stress-free on a psychological level, because the close button is a power outside of the modal.

However, this may not actually be optimal design. Perhaps the question on your survey was "which close button do you prefer", or "which design do you prefer the look of". Of course the stress-free, easy-to-close design is preferable because it has better, more pleasant UX for all the functions it provides. However, as a business you may want to sabotage the UI to make the modal feel more stifling (option A), shepherding people towards completing the sign-up process. If your goal is more successful sign ups, then a survey is not the best way to evaluate which design is better.

Answer 6

As a user, B sucks. So does A.

There are quite a few web sites that use B for their pop-ups. I look inside the pop-up for a way to close it. There's nothing inside, so I then look at the outer top right corner - and find the "X" merged into the background image and hiding from me.

A is bad as well because your design hides the fact that the "X" is the close button. It looks like a misplaced letter rather than a button to click.

Put the close button inside the box with a contrasting color to make it stand out and look like a button.

Answer 7

Jakob's Law states that as users have spent most of their time outside your website or app, they prefer your website or app to work the same way those outside applications do.

It's fact that:

• almost all close buttons from the three major operating systems are within their window boundaries

• as you said, much larger services such as Figma, Twitter and Bootstrap also put the close button within the window boundaries.

With that underlying law, and these two facts, I suppose Option A is better because you're providing what users are used to.

Answer 8

My big question is, why do many great apps use the INSIDE close button instead of B. Why A is more commonly seen than B (maybe I am biased).

Choice A takes up less real estate and is less frustrating to design in CSS.

If you're not convinced then I would like to point out that the most popular CSS framework on the planet uses choice A.

---

Either one is fine. They're ubiquitous enough that your decision won't even be noticed. Albeit, I personally associate choice B with nuisance ads.

The key is being consistent throughout your app/website.

As long as you aren't this arsehat-ish then you'll be fine:

---

Here is how Stackexchange handles flag/close votes:

It's nice that they've contrasted it so well.

---

Bonue points

Let me close the pop-up with the Esc key or the back button when on mobile.