9

When I'm using a google product, I'm always wondering why there is no "closing sidebar button". For example in gmail I have to swipe the sidebar or click outside it's area to close it.

enter image description here

More interesting is that twitter web app on mobile device view has a close button...

enter image description here

...but not on the native mobile app:

enter image description here

I guess for some users it is clearer to click on a button with a cross to close the sidebar than to click on the small dark area outside it. So is there a reason why many interfaces do not have this button on mobile?

6 Answers 6

19

Being a mobile app or web app, I think the question omits a couple of important bits of context:

  • The new interface opens with an animation, a slide-in from the left
  • The background of the application is partially covered with a dark veil

For any user who wants to exit this element, the immediate and almost instinctive action is:

  1. Reverse the animation (finger swipe)
  2. Click on the original field where he/she was working on, the darkened part of the screen

I think both options are much more immediate than wasting time looking for the closing button.

In the case of the differentiation between the Twitter app and the web application, the immediate answer is that the app occupies the entire screen, while the web app is included within the browser window, where the user is more subject to the browser window actions.

1
  • 7
    "where the user is more subject to the browser window actions" — yeah, swiping to the left might potentially move the user to another tab, for example. Some phones also have the back button swipe gestured on the edges. Jul 8, 2022 at 1:32
8

In fact, it's a stretch to say *" there's no sidebar close button in the mobile world". There are many apps that have such a thing.

However, you're correct that many (probably most) don't have such a button. There's one main reason for this: space requirements and cognitive load. Adding more controls to an element increases cognitive load and visual noise. Playing devil's advocate, you could also argue that not having such controls adds even more cognitive load and friction, but as Ritesh Gupta said in his answer: these are highly tested products.

Now let's dive into this a little bit. Your first example is from an app based on Material Design. Material Design has its own specifications, and these don't include a close button, as you can read in the Material 2 Guidelines and Material 3 Guidelines. Since Google Material Design is widely used among developers, this behavior will affect many mobile apps, especially those for Android.

You may wonder why this is, but the reason is simple: discoverability. User Discovery (not to confuse with discovery process at early design stages) is a process by which a user can discover the affordances of a product or elements through their own experience. If a user touches anywhere on the screen (even if only by accident) and sees the sidebar close, they'll say "oh, if I do that, I'll get this result ". The user's discovery is usually transmitted as well. For example, a friend says "why don't you do X to get N?" and you say "oh, how cool, I didn't know that".

So that's the reason for that behavior.

4
  • 3
    I'm not sure what you're saying about discoverability. An icon is much more discoverable than an unspoken gesture, right? I wouldn't call "if the user accidentally taps here" a good instance of discoverability. If I were to guess, the discoverability really comes from the nearly universal design language idiom that tapping something makes it more detailed, focused, or available. Jul 8, 2022 at 13:26
  • 1
    @TheRubberDuck, this is a common misunderstanding between affordance and discovery. In short, an affordance is visible and obvious, while a discovery is the process of discovering something that is not visible or perceptible at first glance. A known example is the appearance of hamburger menus: They did not convey affordances, and most people did not know what they were. Now everyone knows without further explanation because users have discovered what they are. There is plenty of literature on this topic, but a comment is too short, just ask a question if you need more information
    – Devin
    Jul 8, 2022 at 18:17
  • There's some inconsistency in your definitions. The answer says users can "discover the affordances", while your comment says "an affordance is visible and obvious" but that you discover "something that is not visible or perceptible at first glance" (emphasis mine). In any case, if understanding your point requires a separate question, consider simplifying your point. Jul 8, 2022 at 20:02
  • I'm sorry, I don't understand where you see the inconsistency, because both the comment and the answer say the same thing. But I guess that's because of my poor English, so I invite you to do a Google search so you can find sources that are clearer, this is the best I can do.
    – Devin
    Jul 8, 2022 at 21:04
3

In Android, there's no need for an app to include a back or close button because there of the universal back button in the button bar at the bottom (and indeed Google/Android's Material design guidelines discourage it). This provides a uniform experience -- users know that they can use the universal back button in any app and expect a consistent behavior.

This was based on a UX design philosophy pioneered by Apple's introduction of standardized keyboard shortcuts like Command+C, Command+X, Command+V, and Command-Q for copy, cut, paste, and quit. All Apple software makers were encouraged to adopt the same shortcuts across all applications so that users didn't need to relearn the mappings for each software, as was customary before that time. If you are familiar with old text editors, like Emacs or Vim, you will be aware of some nonstandard shortcuts, like Control+Y for paste in Emacs, or P to paste in Vim.

Web apps, on the other hand, can't take advantage of the universal back button because the browser usually uses it for browser-back, and are tharefore more likely to have a close button on the side menu.

It's been a while since I've used an iPhone, but I remember back buttons within apps being more common on that system, even to the point where the same app will have a back button in the iPhone version but not in the Android version, because iPhones lack a standard back button. I believe that was done because Steve Jobs liked the visual aesthetic of having only one button without regard for functionality, leading to a hodgepodge of different visual designs from one app to another, an ironic reversal of their design philosophy from decades prior.

2

The precise reason is hard to say, as the teams who designed it would have gone through multiple A/B testing, but all these designs are mostly backed by usability testings. The current trend is to make the product mobile first designs. On mobile the position of your finger, how much extra efforts you have to make to move to the top of the screen, can you do with one hand by tapping outside or swapping left or right makes a huge difference in making a call. That is the reason why native version can be different. Also sometimes native versions use the inbuilt capability of the OS and hence the designs might vary, although for me the experience should be the same ideally.

1

It becomes easier to understand when you gain the knowledge from its core design system, Material Design, link given below:

https://material.io/components/navigation-drawer#anatomy

enter image description here

Google calls it "Navigation drawer". If we think from the physical world perspective, a "drawer" needs to be pulled back to open. Once it is opened, pushing back is the only option to close the drawer. Now, think about the navigation drawer and compare both perspectives. Awesome, isn't it?

enter image description here

1
  • 1
    Definitely make sense with this affordance point of view Jul 15, 2022 at 15:40
0

There are two main reasons in my opinion:

1-there is no window in it so you don't need a close button.

2-pushing a small X button by finger will be annoying

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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