Mobile navigation, and its many options, is part of what make mobile design such an interesting venue of ideas. There are different approaches that stand out, and continue to be innovated, over time, many of which seek to take the idea of gesture-based navigation into new territory that engages users and keeps them coming back. The key, though, is in functionality and appropriateness of placement.
If your site doesn’t have the right functionality in mind for its mobile functionality, you could create some damaging overlap or feature hiding that basically renders the work you’re putting in as a waste of time and effort. If you don’t have the right placement, you could also hurt your user’s flow of movement throughout the site, or cause them to overlook why they came to the site in the first place. That’s why there are a few very popular choices for mobile site navigation, which are:
- Top and bottom menus are a popular choice, because they allow you to keep navigation present without sacrificing the limited amount of space you have for content and images. With bottom menus, you’ll need to keep in mind that most mobile operating systems also keep their own menus around the bottom of the screen as well. Some have hard buttons, but most have software buttons placed around these areas, including swipe gesturing from the corners of the screen. Your choice of a top menu may be a good call as well, but you may want to keep it as slim and trim as possible.
- Expanding lists and wheels are another nice type of mobile navigation that plays well with gestures. These options make it simple to tap a button or wheel, and see a growing list of places to navigate or functions to perform. When combined with ideas like flat design, or even Material Design, you can also have some interesting interactive UI elements happening, including animations of elements growing or shrinking from expanding and collapsing menus. Just be aware that you may need to create sub menus as well, which means you won’t want to go too far horizontally.
- The list menu, different from the expanding list, in that you start off with a static list of buttons and options to choose from. These lists are very popular with mobile applications, user setting pages, and more. They’re exceptionally easy to apply Flat Design to, with differences in color standing in place of solid button bordering, and they can also help you to play on variations of your own branded color in the process. With the list menu, you may find that there are fewer options of how they can actually be applied to the mobile experience, but that they do get exceptionally fast to the point.
As advances in areas like animated user interfaces and Material Design continue to develop, we may see even more exciting ideas applied to mobile menu navigation.