Design by subtraction: An adaptation series for the web
Minimalistic design is the hot new trend right now, and it’s probably here to stay for a while longer. As we see more and more websites and web applications transition to minimalistic design, it’s often a great refresher to take a step back and rewind to the beginnings of minimalist design.
Origin
Let’s take a look at the origin of design by subtraction. It’s a term for game design invented by Fumito Ueda during the development of his latest game: Ico. When creating Ico, he iterated on the first version of the game and concentrated on the key concepts that tell the story. He stripped everything away that didn’t immerse the player, like a health bar or navigational map. As a result, the game is a very minimalist and stripped-down version of the one designed for the PlayStation 1.
Ico was a big success, and even more so amongst fellow game developers and their studios. It was a major influence for games like Journey, Halo 4, Prince of Persia and The Last of Us. In an interview with The Guardian, Hidetaka Miyazaki (creator of Bloodborne and Dark Souls) said “That game awoke me to the possibilities of the medium”. So, needless to say, Ico did something right.
Minimalism
Now that we are in 2022 we know what Ico did right. It’s minimalism, saying more with fewer words. Right now, quietness is louder than ever. Major companies like Apple have taken this concept and improved upon it. So, let’s try and do the same.
I want to create something like a miniseries where we take certain aspects of a website or web application and take a look at it from a critical point of view to try to improve it. For this article, I want to take a look at the hamburger menu.
The Hamburger menu
The hamburger menu was created by Norm Cox for a Xerox Star interface. It got the name hamburger menu because it looked like a hamburger with 2 buns slapped around it. It did kind of a disappearing act for a while but when major tech players like Apple, Facebook (Meta) and Twitter used it again, it was widely adopted to almost every website out there. But was this the right move? Well, as with almost all things in life it always depends on your use case but a lot of evidence points to “no, not really”.
What is a hamburger menu?
It’s an icon, usually around the navigation bar of a website. It indicates a list of links that link you to another area inside the website. Typically, it looks like 3 flat stripes stacked on top of each other, but you’ll come across variations. A lot of websites use it to prop a bunch of links to different parts of their sites in there. This creates a suboptimal user experience for a couple of reasons. For example, the holding position of a phone can impact the reachability of your hamburger menu:
In the first image, you can see that the hamburger menu is in the top left corner. We can safely assume that the majority of people are right-handed, this means that it’s already harder for the majority of people to reach the menu and to select items inside the menu. In the Dribbble example (first image), we can see that the website has a rather large structure because there are 9 links inside the menu. But when opening the home page, we see nearly nothing of it. This doesn’t mean that you have to plonk every item on your website on the home page! You just have to find a good balance that fits your app style.
Hidden content
Another downside to the hamburger menu is that users that don’t click the hamburger menu, don’t know about nearly 80% of the website you serve. We can take a look at the website https://frank.net.au/ (I mean no offence to the web creators of the sites I mention, this is all just my opinion). On the desktop website, Frank shows you 4 images of buildings, I presume they created. But you can’t scroll anywhere.
I have zero information about Frank or what the business does, the website doesn’t help me a lot either. If you want to see their philosophy, team, projects or contact them, you have to click the hamburger menu and click each link separately to find out what it represents.
This is a great case of a website that could benefit from removing the hamburger menu. Instead of 4 static images, show a clickable carousel that takes you to the project page. When you scroll down, you could get a preview of the team and a couple of links to see the full team. At the bottom of the page, you could implement a contact form, but it’s understandable if you want to keep that behind a couple of clicks to different pages.
This way, the user sees a preview of every tab you offer. In each preview, you must include a link to the full tab (if applicable). When you preview the content, the user doesn’t have to change the holding position of the phone to go to new tabs. For the desktop experience, you should avoid hamburger menu’s when possible, you have a lot more room to work and be creative with.
Portfolio example
Imagine having a portfolio website where you show off the work you can do. Instead of having a link to “projects” in the hamburger menu, create a small preview of your projects on your home page. When the user scrolls, the users see a couple of projects. Take a look at the obys.agency website
On load, the website shows you a catchy heading and subheading, and after you scroll down, you immediately see some examples of their work. Probably the ones they’re most proud of are displayed here. The only thing I would recommend here is to include a sliver of the next section on load. This tactic is frequently used on social media sites to keep the user scrolling.
When you open Facebook, most of the time it will show you a post that only takes up about 2/3 or 4/5 of your screen. Underneath that you can already see a sliver of the next post, when you scroll down you see a small part of the next one etc… This keeps the user scrolling forever on social media. We can use this tactic more responsibly on our website by showing the user our projects.
A great example of this, are the products on the Apple website. Instead of immediately showing you a full list of all the specs of the MacBook, they walk you through the specs of the devices in a creative way. Although on the mobile version, they too use a hamburger menu for navigation. Again, a hamburger menu used right is not bad at all!
Removing the menu icon
Some large tech companies have seen the benefits of moving primary (navigation) elements away from the hamburger menu and moving it to the bottom of the screen. Instagram has completely ignored the hamburger menu trend and kept everything instantly available for the user in a bottom style navigation bar.
Safari on IOS has done the same with the URL search bar. It was at the top of the screen for years and now at the bottom of the screen. The change got a lot of attention, but after a relatively speedy “controversy” the change was accepted very well. I think Apple made a good decision, the search bar is more reachable. I expect to see more sites move the navigation down to the bottom of the screen.
The Pros of using a hamburger menu
I know I’ve been critical about the hamburger menu. So, let’s take a look at the good side of this menu icon. One of the main reasons people use it is because it’s a very easy way to tell a user about all the links on your website. It’s a centralized area that a user can trust to contain all relevant data and can search through.
Some layouts don’t support a lot of content on the home page. We don’t want to overwhelm the user with content, links, buttons, popups, cookies, updates… For this reason, a designer may choose to keep the layout of the home page simple and quiet or less cluttered. The designer can decide to “hide” a few links such as contact in the hamburger menu to prevent spam. The user would have to do multiple actions before being able to send a message through your contact form. If it’s just at the bottom of every page, it may increase the number of messages and thus spam.
The ideal balance
So, what is the most ideal balance in my opinion? I would mix primary features and links like onboarding, projects, team… In with the main content of the website. It should contain multiple links to the individual tabs for easier navigation (not having to move your hands). Be sure to give each section enough breathing room and the elements inside it. You don’t want to create a cramped space with all the features on one screen. We would just regress to web design like it was in the mid-2000s. A hamburger menu should be a support element in your layout. If you can work without it, you should at least give it a chance, as Instagram did with their UI.
Conclusion
The hamburger menu is also really simple to implement and simple for the user to understand. It takes a bit more design and programming work to move primary elements to different locations on your website’s layout, but I think it’s a great feature to have. The hamburger menu should not go away, but should not be solely relied on.