Location of the close button in a modal window

Design Thinking
#1

The upper right corner of a modal window is the common place for the close button X in desktop experience.

I don’t know why Apple put the X in the upper left instead on their website ! Maybe for consistency with the MacOS close window location!

Personally as a mac user I don’t like to follow the Apple approach.

What are the best practices for location of this button?

2844×1570 139 KB

#2

Go with your gut. Upper right because that is where it usually is.

5 Likes
#3

This is by no means tested or verified by statistics, but it could be due to the way
people operate on the touch pad. Like in this picture:

The left top corner looks like an easier spot to reach compared to the right top corner.

Though I do agree this is probably because of mac left side close button or just plain desire to “think differently” :slight_smile:

1 Like
#4

I tend to go right aligned - probably because I’m right-handed. In particular, the right side of my phone seems to be easily reached than the left with my right hand - if that makes sense

1 Like
#5

Like many have said, upper right corner would be better.

1 Like
#6

I would go with the upper right corner because of the following reasons,

  1. Most common pattern that exists at this point
  2. Most of the people are right handed so we take a most users
  3. And the common direction of writing and reading is also towards right
2 Likes
#7

I think it used to be top right as a common ux probably derived from standard windows modals, idk. But I found myself a bit more comfortable when it’s on the top left and I was wondering why… tried to find reasoning behind it but couldn’t find any clues.
My personal explanation would be x is a navigational element just like arrow back and it make sense to keep the placement the same based off of functional purpose.