Is Google (finally) killing the navigation drawer?
A couple of months ago Google has celebrated with enthusiasm 15 years of Google Maps, one of the most used and appreciated services worldwide from the company.
On the occasion of the birthday, some changes were made to the app — the one that most stands out is certainly the new icon — but one in particular has created a sensation: burgers and drawers have apparently disappeared.
What are hamburger and drawer?
Excellent question! These two names could create a bit of confusion, however I’m simply talking about two graphic elements that we already saw in many everyday applications that we used for years.
For hamburger menu, or, more precisely, hamburger button, I refer to that icon with three horizontal bars that is usually always in the top left corner in applications. The name “hamburger” comes from its resemblance to a hamburger sandwich, with the two lines at the top and bottom to indicate the slices of bread, and the central one to indicate the hamburger.
The drawer, or navigation drawer, is that graphic element that usually pops out from the left when we click on the hamburger. And it contains a lot of interesting things, like links to other pages of the app or information on the account logged in.
It’s true! I have that button too! / Wait, I don’t see that button in the app!
The hamburger button and its drawer are elements that are easily found in Android applications, Google itself has included them, for several years, in a multitude of applications. And so many Android developers.
They are not exclusive to the green robot, however, and can therefore also be found in some iOS applications: Apple has always preferred a tabbed approach, rather than the use of a drawer, no app developed by Apple has in fact a drawer (well, maybe the mail app has a very similar thing), or a hamburger button.
The guidelines for the development of apps also change according to the operating system: the specifications for the Android apps include the Drawer component, the Apple ones for iOS do not. This is why many apps have different styles based on the operating system for which they are developed: for example the Telegram app has a drawer on Android but itdoes not have it on iOS.
Finally, drawers and hamburger menus are not exclusive to mobile applications: they can also be found on websites, especially in their mobile versions.
So, is Google removing the drawer from its applications?
Well, maybe. Obviously this does not mean that apps will be poorer in content from now on: everything that was in the navigation drawer has been moved and made available in other parts of the app.
But there are some changes in progress. We have already talked about Google Maps, which removed this graphic element a few weeks ago, but it is not the only Google app to have done so.
We don’t know if YouTube was the first on the list, certainly one of the firsts though: back in 2015 (yes, five years have already passed) the drawer was replaced by some tabs positioned just below the appbar. In the meantime, the app has been updated again and now the tabs are at the bottom, more easily accessible.
Even Google Fit once had the classic hamburger button that opened a drawer once. It has now been replaced by a bottom navigation bar. Other apps are still changing: for example Google Ads shows the drawer in some cases, while a bottom bar in others (in these situations Google is likely to be testing server side, releasing the new layout gradually and in a limited way).
What’s wrong with the drawer?
Well, to be honest there is more than one reason why the drawer, but especially the hamburger menu, is a slightly outdated design pattern. The gentlemen of the Nielsen Norman Group (great experts in the sector) say it, and their article is pretty long, so something obviously is wrong.
We try to explain it in a slightly shorter way:
- The hamburger button is difficult to reach
Of course it is: most of the times it is in the upper left, the furthest point to reach with our beautiful right thumb. Furthermore, even the most important items in the drawer will always be at the top. Maybe once the problem was less pronounced, but in recent years smartphone displays have gotten bigger and bigger, and now this thing has become a problem. - There are multiple operations to do
This too may seem like a small problem, but a drawer forces us to make two taps on the screen instead of one: one on the hamburger button to open the drawer and one on the item we want to click. Third millennium problems, but still problems. - We don’t see immediately what we need
The elements we need are in the drawer, and where is the drawer? Hidden behind the frames of our display. And as long as we don’t tap on the hamburger button it doesn’t pop out. - In the latest version of Android, opening the drawer by dragging it is almost impossible
To open a classic drawer you can also swipe (drag your finger, for non-professionals) from the left edge of your smartphone to the right. This has been possible for a multitude of years BUT … in the latest version of Android, the same action, the swipe from left to right, also is used to go back. And so it happens that you want to open the drawer and exit the app instead.
This is an accessibility problem, but not caused by the drawer itself; simply Google likes to experiment without solving the problems it creates.
What are the alternatives?
Now that the reputation of drawer and hamburger (button) has dropped a lot, let’s see together some alternatives or some improvements that can be made to significantly improve the usability of an app.
A nice Bottom Navigation Bar
It shows only the most important elements, it is at the bottom and therefore easily accessible by fingers, it is always visible. It is also the solution that many are adopting to replace the drawer, and Google is also implementing it extensively (for a while it has become part of the official Material Design components).
However, Apple has been using it since iOS 3. More than ten years ago.
A Bottom Navigation Drawer
It doesn’t sound like a big innovation, does it? To be fair, this solution maintains all the graphic elements we have talked about so far, drawer and hamburger, but with many advances towards the problems they had: the hamburger button is at the bottom and much more accessible, and the drawer, popping up from the bass, it shows first of all (and not too far from the bottom) the most important voices, and only then the secondary ones.
Two clicks remain to be done instead of one. A solution therefore suitable only for apps used by people who are not in a hurry.
Conclusions
At the end, we don’t know if Google will take the plunge by removing the drawer from its applications. But we saw that he would have more than one reason to do it, or at least fix some problems.
And all developers or owners of applications should do the same: nobody likes to use an application that limits us in use instead of helping us.
Many are already doing it: apart from Google and Apple (which has taken a lot of care in this since the beginning) there are a lot of apps that over the years have changed their user interface to be easier to use. I’m talking about Spotify, Facebook, Instagram, Netflix, and many, many others.
Who we are?
We are a team of developers and designers based in Padua, Italy.
We make mobile applications and web apps, using Flutter, React and React Native. We are always ready to create something great!
Our website | Dribbble | Instagram | Linkedin
Are you interested on what we do? Drop us a few lines!
