getButterfly Logo getButterfly code wrangling since 2005

I have designed several mobile menus lately and I am working on two more. I’ve used three different ways, including snap.js, jQuery and pure CSS3 translates. I am most happy with the CSS3 approach, as it’s the most fluid one and doesn’t require any external libraries. I’ve been (ab)using FontAwesome for various icons, such as the hamburger menu, the close icon, the social icons and, sometimes, specific menu item icons.

Mobile Menu Design

Mobile Menu Design

Mobile Menu Design

What I’ve learned when designing the menus was that users need a way to quickly close the menu, either by swiping it left (easiest method) or by clicking on the site (the right hand site, about 20 to 40px wide). Depending on how the menu is designed, the close icon becomes redundant, as the menu’s purpose is to take you to another page, where it is closed by default. So, if you’re using a close icon/symbol inside the menu, rethink its usefulness. That screen real estate can be used for a small logo or to pull the entire menu up.

Another thing is the “fat fingers” syndrome, when, on certain mobile devices, the touch action is not precise, and users usually tap on adjacent links or buttons. Menu items should have enough padding to allow tapping the screen without touching the adjacent elements. Common sense, I know.

I’ve recently noticed that many sites are ditching their regular menus in favour of a hidden one, activated by the hamburger menu icon. I’m not a huge fan of this behaviour, it’s like the site owner is favouring the mobile user instead of me, when I’m using a desktop computer or a notebook. Jumping off topic, I’ve recently read a usability study about using instead of MENU.

Notice the addition of a help element, so that the user would spot the menu on his/her huge desktop screen. The use of a word brought a 27% (or something like that, correct me if I’m wrong or point me to the actual study) increase in menu clicks/opens. I’m sure that’s useful for desktop screens, but on a mobile device, the addition of a nice top-positioned bar with a menu icon to the left and a profile/search icon to the right would be most beneficial.

On to my topic, I’ll post more mobile menu designs soon, as I finish them.

As an end note, I’m not a fan of full screen menus, I don’t like to lose focus/control over the site. It may become confusing and lose track of where I was on the site.

// end of rant

Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.

If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a reply

Love programming?

Learn about the most amazing things. Get smarter everyday!