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

3
  • 2
    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, 2020 at 16:20
  • 2
    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, 2020 at 17:25
  • Any answers posted below will be speculation based on the question as you have asked it - no one except the Airbnb design team can know exactly what they were thinking when they chose to place anything anywhere. If you were to ask the question of where is the best place to put a close button on a modal/dialogue... then we may be able to give you better answers. Jun 8, 2022 at 4:38

4 Answers 4

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, 2020 at 23:59
  • 2
    Updated my answer as per request.
    – Codesigner
    May 31, 2020 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, 2020 at 20:28
  • @It's Dylan great research! , could you please share your source. Where did you find those values?
    – Codesigner
    Jun 2, 2020 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, 2020 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, 2020 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.

2

I think the Material Design Guidelines are helpful to explain why. In short, this follows a natural UX for a left-to-right language: things on the left are going back and things on the right are progressing. This should be mirrored for right-to-left languages.

Material design guidelines recommend that you place navigation (or close icon for contextual navigation) on the far left, titles to the right of navigation, contextual actions and overflow menu to the right of the title.

Contextual action bar example

  1. Close button (instead of a navigation icon)
  2. Contextual title
  3. Contextual actions
  4. Overflow menu (optional)
1
  • This is the best answer. Also, if you think about it, why would X live in the top-right, aside from it being a legacy idea from desktop operating systems? The only reason many desktop OS's have X in the top-right is because on the left is a title and icon. As well in this context you aren't navigating between windows; there is no navigation, just a static window title bar.
    – Kalnode
    Oct 27, 2022 at 17:43

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.