About
Here’s a mobile navigation pattern I’ve been experimenting with lately. It’s a mix between the hamburger menu, Facebook’s chat heads and material design’s floating action button.
Similarly to the hamburger menu, this menu is hidden by default. You have to click it in order to have it expand and show you where you can go. This is a usability drawback, but a compromise to save you screen real estate. In contrast to the hamburger menu’s infamous hamburger icon, the current state is always visible instead.
Ergonomics
The menu is placed in the bottom corner of the screen which makes it fairly easy to reach with your thumb. Clicking it will open the menu. Choosing another item will close the menu and send you to that screen.
Just like the hamburger menu, we’re able to fit quite a few items in here since we list them vertically.
However, the items at the top are still a bit tricky to reach. Luckily, the selection itself is draggable and you can toss it onto the options at the top of the list. It’s pretty fun. This also allows you to select a menu item in a single motion, thus saving taps.
Try it out yourself!
This is just an experiment and by no means a perfect replacement to more traditional ui patterns. Give it a try and see if it makes sense to you. And while you’re at it, check out Ralph Thomas “fluid touch design”, which share some of the same ideas. Luke Wroblewski also wrote a nice post on the subject of gesture-based controls.
