7

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

2
  • 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 '20 at 16:20
  • 1
    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. Jun 2 '20 at 17:25
9

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.

5
  • Can you provide a reference for this statistic? For completeness of the answer. Thanks :)
    – Michael Lai
    May 30 '20 at 23:59
  • 2
    Updated my answer as per request.
    – Codesigner
    May 31 '20 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 '20 at 20:28
  • @It's Dylan great research! , could you please share your source. Where did you find those values?
    – Codesigner
    Jun 2 '20 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 '20 at 16:02
3
+50

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.

1
  • 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 '20 at 14:09
2

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.

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.