Three lines that hurt UX
A short description of how a hamburger menu affects UX.
Is there anyone who doesn’t know the name of the above three lines? If yes, these three lines combined are called the hamburger menu and this icon is common in all mobile screens.
We can see these three lines on our mobile(mainly on the top left side) even on the website too.
Do you know what are the problems we face while using hamburger menus?
If your answer is No, then read the brief below.
Discoverability and efficiency are two important parts of a UX design. Here we are going to discuss how the hamburger menu negatively affects these.
- Discoverability is an important part that affects the user experience of a product. It is the ability for a user to find content or functionality present in a given experience.
How the hamburger menu negatively affects discoverability?
Navigation is an important factor while we using a mobile or web. Proper navigation reduces the friction of the experience. One of the major problem found with the hamburger menu is that it decreases the discoverability by hiding navigational elements inside it. By placing navigational links inside the hamburger menu, it reduces the discoverability and thereby increasing the time to achieve the users’ goal. ie, interaction cost (sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals) is higher for these cases.
2. Efficiency is the next factor that affected by the hamburger menu Efficiency is all about speed. How fast can the user get the job done?
How the hamburger menu affects efficiency?
In most of the mobile applications placement of the hamburger menu is at the top left corner. The top left corner is the hardest region of a mobile phone to reach with our hands. Due to this, time to reach the hamburger menu is high compared to other regions in mobile.
Also, if the navigation links are in the hamburger menu, it requires two taps to get that link. These two reasons will negatively affect the efficiency of a product.
Now we are going to take a look at the hamburger menu of the app Internshala. Internshala is an app used to find internships. This app is an example of the negative effect of the hamburger menu.
If users need to see internship posts or they need to see the status of their applications, they should rely on the hamburger menu in the top left corner. Placing of the navigational link of internship post and application status inside the hamburger menu negatively affects the discoverability and efficiency of the app.
How can we solve those issues of the Internshala app?
By replacing the main navigational links to the bottom navigation bar, the user can access that easily. Thereby we can solve the hamburger problems to a certain limit. Therefore navigational links are easily discoverable. Also, users can easily access that with their thumb. This will reduce the interaction cost and will help users to achieve their goals easily.
Conclusion
Including all navigational links inside the hamburger menu is less discoverable and they need high interaction cost too. If there are more than 4 navigation links, spend more time on thought processes and simplify the information architecture as you can.
Choose the most important 4 navigational links and place that on the bottom navigation bar. Thereby we can solve the problem of discoverability and efficiency due to the hamburger menu. This will increase the overall user experience.
That’s for all now, folks. Thanks for reading.
Reference: nngroup, Interaction Design Foundation
