This post is not about kebabs, or pizza, or fish and chips. It's kind of about housework and a lot about options ... more specifically, making options clear on the small screen version of your website.
A Hamburger menu
Does it look appetising?
What is a 'Hamburger' menu?
The Hamburger menu button is often used on small screen versions of websites to provide access to the navigation list. It contains three parallel horizontal lines.
Unfortunately the template for my website (built in Squarespace — a great product but with some design limitations for non developers) uses Hamburger menus but my 'best practice' advice is to avoid them.
Choices should be visible
I was behind on my vacuuming this week and finally got around to it today. Normally I keep on top of it so wondered what went wrong. Then I realised that I had tidied my vacuum cleaner away instead of leaving it out, in plain sight, to remind me to use it.
Imagine if you go to your local fruit shop and all the produce is presented in closed boxes so you can't see what is available till you open the lids. I love seeing the dazzling array of fruits and vegetables. It would waste my time and be inconvenient if everything was hidden away.
This is the visitor point of view when they visit your website using a mobile device and encounter a Hamburger menu. They have to:
- recognise it's where the menu is hidden
- click on it to see the options ... every time they want to review the options.
Seconds count online and if you don't make it quick and easy for visitors to see what information is available on your website then you make them work harder and this affects their user experience.
This post by Kenan Yusaf shows some elegant ways to make menus visible on small screens — A couple of alternatives to the hamburger menu (kyusuf.com).
If you have a small amount of navigation options you don't have to hide them — see the EastDaySpa website.
If neither of the above is possible then consider labelling the Hamburger button by adding the word MENU (see the Ministry of Health NZ website) or just using the word MENU on the button (see the Abletech website) to make it clearer. I'll try to convince my developer partner to figure out how to amend the Squarespace template code to do this. Wish me luck!