It seems this pattern is quite common in mobile apps, but not so common on the web.

(Assuming that most people use their right hand to control the mouse)

screenshot of Airbnb Modal

  • 1
    Unless someone from Airbnb answers, it would not be possible to answer this question actually. There's no absolute grammar to approve or disapprove this design-pattern, you see. – onosecond Jun 2 at 16:20
  • As @onosecond stated, top-left and top-right are both common placements for the close button. Why they may have picked one side versus the other is unable to be surmised without their explanation. – maxathousand Jun 2 at 17:25

Airbnb is a US-based company. Most of its revenue generated in the US itself. Statistics shows that ios is the topmost OS used in the US where the close button is located at the top left. By placing a close button to left they have persistence and familiar UI across different devices which will reduce cognitive load for ios users.

| improve this answer | |
  • Can you provide a reference for this statistic? For completeness of the answer. Thanks :) – Michael Lai May 30 at 23:59
  • 2
    Updated my answer as per request. – Codesigner May 31 at 1:22
  • I don't think those statistics actually add up to your conclusion. The US has more airbnb users than any other country but most airbnb users are outside of the US. Across desktop and mobile most users aren't using ios even in the US. If we pin down on mobile it's still pretty close (60/40) inside the US, too many non-ios users to not take into consideration. With most users being non-US ios is nowhere close to tops (75/25) for the airbnb user base. – It's Dylan Jun 1 at 20:28
  • @It's Dylan great research! , could you please share your source. Where did you find those values? – Codesigner Jun 2 at 14:03
  • The ios user numbers came from your link, I just played with different toggles a bit. Airbnb info mostly came from here ipropertymanagement.com/research/airbnb-statistics but I was also looking around a few other places – It's Dylan Jun 2 at 16:02

There are several reasons working together that make this close button on the left side the optimal deicion in this case:

First - Why put close buttons on the left side in apps:

  • One of the most common uses of a close button is in the navigation bar of a screen in the app. It can be thought of as a 'back button' for screens or dialogues that come on top of the existing flow your user is currently in. This is why most of the back gestures work on screens with close buttons.

  • With apps there are always short on screen space. Almost always you have relevant buttons you need to put on the navigation bar, since they usually propagate the user forward (instead of backward like the close button) - such as save, share, comment, report etc. You want to have these on the right side because more people use their right thumbs to operate their decides. (Big exception here - forward and backward propagating flows with the close acting as a 'cancel flow' button)

  • This leaves the left side of the navigation bar as the most likely place you would want to have the close button (or back button), especially with large products. Why?

Second - Because consistency.

Even if you really want to have the close button on the right side, if you have a large product, you will inevitably have a couple of screens where it is on the left side. Since you don't want to confuse your user, you will likely fallback to the most common place where this button can be - the left side of the navigation bar.

Third - The specific case in your screenshot.

While it would be logical to deviate from your mobile design system in order to serve your desktop users better, you need to consider two additional arguments for sticking to the left side close in this case:

  1. Since your web mobile version will probably follow the mobile app pattern, you have to do the exception just for desktop. And most of the developers I've worked with usually aren't very happy to support an exception if it doesn't have a large enough impact.

  2. The impact of having the button on the right side for desktop web is questionable, since all of the interaction elements can be accessed on the left side of the dialogue. edited screenshot of modal

TL;DR: Because close is back; too much stuff on mobile navigation bars; and product and platform consistency.

| improve this answer | |
  • 1
    Seems like you are an Apple user as the most commonplace for a button is considered as the left side of the navigation. I found your first point interesting but still, a popup is considered as secondary content on the page. – Codesigner Jun 2 at 14:09

It may be a result of their design system consistency across platforms combined with a mobile-first approach.

In this article, you can see that although the main navigation are different across platforms (adjusting for conventions), page navigation is consistent.

enter image description here

Using the same design system, we can see how it applies to iOS, Android and Responsive website:

enter image description here

And here it is applied across languages as well, since Airbnb has to account for global usage of their app.

But there is nothing to say that the close button cannot be in the right, as shown during their React Conference.

Finally, it seems that the consensus agrees the button should be on the right side due to familiarity. The definitive answer might change per product and what the target audience is used to. Whether someone grew up with Mac or Windows, how OS instincts translate to web, the types of website they frequent, etc.

| improve this answer | |

The action button has always been put at the right corner, like 'SAVE' or 'ACCEPT', people are familiar with this. For most people read from left to right, the next step is always at the right side. Thus the designer put the cancel button and back button at the left, and this make sense.

And if you make a rule like this in your design system. All pages should follow the rule for consistency.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.