21

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

enter image description here

9
  • 6
    What question was on your survey? "Which close button do you prefer?" Sep 27, 2021 at 23:36
  • Were your survey respondents (and there demographics) representative of your actual user base (specifically admin users)? If not, then it matters a bit less their opinion. Sep 28, 2021 at 2:02
  • 10
    Whenever asked "which is better?", I'd reply "better for what?". :-)
    – Pablo H
    Sep 28, 2021 at 16:00
  • 3
    The intention matters, not just the design. It it were an ad or nag, which main function is to be dismissed without even looking at the content, then B would be preferable; in fact, the close button should be even more prominent. But if the form is to be used for its stated purpose and rarely dismissed, then A is better and more elegant.
    – Zeus
    Sep 29, 2021 at 3:17
  • 4
    I think there is a third option you haven't considered. Have a seperate "cancel" button on the bottom row. See also material.io/components/dialogs#anatomy. Cancel clearly communicates the intended purpose of the interaction and is generally a well known and established workflow that users should be familiar with from other applications. You can demote the button to a flat style, so that it doesn't have the colored background to diminish its importance.
    – Drise
    Sep 29, 2021 at 19:21

8 Answers 8

31

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:

enter image description here

enter image description here

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:

enter image description here

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.

7
  • Thanks for the answer! Do you know why A is more common? as it in Figma, Twitter, Bootstrap, etc. Sep 27, 2021 at 14:49
  • 3
    @yellingbytes A is more common because: they haven't caught on yet ;) Your survey and side-by-side comparison exposed a truth that's just not mainstream. B also turns out to be my preferred. Why was B not mainstream from the start? Because it's a graphical statement and may not fit in with every design language, especially older web design before everything became so rounded and tactile. As Danielillo said, something about option A is "cleaner", A seems "one-size-fits-all", perhaps because we're used to it but also because it may be incongruous with fewer design languages. Sep 27, 2021 at 23:30
  • 10
    Another aspect of it is effort to create it. Option A is usually included in any default framework. I also have to say option B isn't really objectively better, it looks to me like a misplacement.
    – Big_Chair
    Sep 28, 2021 at 8:13
  • 7
    @yellingbytes A is likely more common due to history. For most of our computer UI history a close button has been a part of an actual window frame, which by nature must contain all its controls within itself. Thus, the close button is bound by it. And as Big_Chair points out, it's much easier code wise. Web design for a long time was constrained to "simple" grids and nesting, and going outside that with CSS was iffy.
    – Logarr
    Sep 28, 2021 at 18:45
  • 6
    @yellingbytes B is "much harder" to code. As an engineer unless the B design was explicitly specified I would opt for A. I would have to search how to do B and fiddle with the CSS for a few hours, probably. Sep 28, 2021 at 21:02
14

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).
6
  • 1
    Windows supported non-rectangular application windows far longer than you think - the combination of SetWindowRgn and WM_NCHITTEST message processing has been there for more than 20 years.... Sep 30, 2021 at 0:07
  • 2
    20 years is not particularly old. I don't remember this being possible on Windows 3.x or earlier, nor on early Mac/Xerox machines - if it was, it was incredibly rarely used. The conventions were set long before Windows 95 came out and, to be honest, even when custom window styling and shaping started appearing in aplications, the window controls were still generally inside the visible area of the window.
    – HappyDog
    Sep 30, 2021 at 10:04
  • @HappyDog But Windows 3.x was 20 years ago… wasn’t it? :-\ Sep 30, 2021 at 16:00
  • @TimPederick 20 years ago, the most recent home Windows operating system was Windows Me (released September 14, 2000). By this time next month, Windows XP will be 20 years old (released October 25, 2001).
    – A. R.
    Sep 30, 2021 at 20:59
  • 1
    Yeah - I mean, Windows 95 was released in 1995. Clue's in the name. Windows 3.0 came out about 5 years before that, so it's been over 30 years. But GUIs using the window paradigm have been around since the early 70s. All told there were about 30 years to establish the conventions before non-rectangular windows were introduced. See en.wikipedia.org/wiki/History_of_the_graphical_user_interface if you're interested in finding out more.
    – HappyDog
    Oct 1, 2021 at 9:24
5

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:

enter image description here

2
  • "C" looks passable because the "Create account" color is themed in red. What if it were themed in a different color scheme, like blue? I don't think the close button should be blue, or gold, or whatever other non-red color a design might use for its default buttons. Sep 29, 2021 at 8:07
  • I agree with @CodyGray the primary color emphasizes it pops up too much. i think more common is the grey color while mouse hovering on it, like in Figma Sep 30, 2021 at 13:03
5

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.

3
  • That depends on whether you're working for the best interests of the user, or the best interests of the client (i.e. the website owner who wants you to click a particular button). In this case, I doubt the easiness of closing a dialog box would affect someone's decision as to whether to create an account or not, so your point holds some weight. In fact, if a user can't figure out how to close our dialog, you may find them closing your site altogether, which is definitely not what you want!
    – HappyDog
    Sep 29, 2021 at 13:58
  • See also material.io/components/dialogs#anatomy
    – Drise
    Sep 29, 2021 at 19:19
  • I agree that some uninformed clients want to discourage users from easily backing out of some forms. Of course, they are wrong. Frustration with interfaces is a major problem. In fact, since our entire interactions with some companies is now through interfaces, it can be a primary problem in overall customer satisfaction.
    – user8356
    Sep 29, 2021 at 20:32
4

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.

2
  • It's a general decision on the modal components for our design system. Our goal is to have a consistent style through the app. I understand that B is better. yet I am struggling with A is more commonly seen in the web apps, including some of the greatest (Twitter, Bootstrap, Figma) Sep 28, 2021 at 6:18
  • 8
    Can you point to certain facts or resources to back this up a little? Especially on the psychological effect you describe. Without it, it is more like a personal opinion or feeling that you describe.
    – jazZRo
    Sep 28, 2021 at 7:14
3

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.

2
  • 1
    I agree; both are terrible. Mostly because my default instinct, pressing Ctrl+W or Alt+F4 to close the pop-up, backfires horribly. This is one of the many reasons why web apps provide an intrinsically bad user experience, one which cannot be solved by a designer. The solution requires a project manager. Sep 29, 2021 at 8:06
  • What did you feel to be insufficient about moot's answer? Sep 30, 2021 at 21:37
3

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.

2
  • 1
    Today my colleague posted me the notification in Mac OS. surprisingly they are B on the top left edge Sep 30, 2021 at 13:08
  • @yellingbytes OK, I concur. So, with the exception of Mac OS notification close buttons, the vast vast vast majority of close buttons are within the window boundaries. Oct 1, 2021 at 16:18
1

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:

enter image description here


Here is how Stackexchange handles flag/close votes:

enter image description here

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.

9
  • In the StackExchange example, I am immediately confused as to what the difference between 'cancel' and 'x' is. Probably none, but in that case, why two buttons?
    – HappyDog
    Sep 29, 2021 at 13:59
  • @HappyDog I didn't design it myself so you'll need to seek out that person and ask them but my best guess is convenience. It let's you change your mind easily right before clicking. If you're complaining about redundancy then you probably dislike the capturing of the Esc key as well?
    – MonkeyZeus
    Sep 29, 2021 at 14:02
  • @HappyDog And you'll really go ape-poo when you find out that the most popular CSS framework on the planet behaves the same way.
    – MonkeyZeus
    Sep 29, 2021 at 14:07
  • "you probably dislike the capturing of the Esc key as well?" Not at all! You should be able to navigate with either keyboard or mouse. This is vital, really. To your other point, redundancy isn't inherently a problem, so long as it is clear that two actions do the same thing. In this case, maybe it's not ambiguous, but I've seen edit forms where it's not clear whether closing the window by methods other than the labelled action buttons will commit my changes or discard them.
    – HappyDog
    Sep 29, 2021 at 14:26
  • Classic example - if the buttons are labelled 'Yes' and 'No', what does the X do? Answer - probably depends on the question.
    – HappyDog
    Sep 29, 2021 at 14:28

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.