Why is there no "closing sidebar button" in the mobile world

Question

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.

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

...but not on the native mobile app:

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?

Answer 1

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.

Answer 2

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.

Answer 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.

Answer 4

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.

Answer 5

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

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?

Answer 6

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