Next-level mobile menu design options that may solve your predicaments

By Jerod Greenisen | March 2017

Mobile experiences are changing, and if you or your business is considering a redesign you could be in an exciting position to take on some cutting edge design solutions. This is specifically true in menu design. Navigation of your site is perhaps the most important area of improvement that businesses can consider when redesigning. Despite the popularity of the ol' hamburger style, there are several ways to design a mobile navigation menu that take your design to that next level. Below I'll show you some of the newest and most exciting user experience design decisions being made for mobile.

Tabs + "Show More"

As we talked about in this article, tabs are a great design choice to organize your mobile experience. However, you can take them to the next level with this simple yet brilliant addition. As you consider your navigation options for your website, you might come to the realization that you have more than just 3-5 topics. Including a "show more" tab allows you to still include these.

Ideally, you'll be able to clearly call out the major items and display them on the tabs most immediately accessible. Then in the "show more" tab, you'll place the less popular, but still important, items. To understand how to prioritize these menu options, take a quick glance at your Google Analytics, click mapping or heat mapping tool to see what menu options users currently most often use. 

tabs-more-navigation-design.jpg

UI Design is an approximation. See furthest right menu option.

 

Inline Navigation

This type of navigation is quickly becoming popular with many apps. It could prove to be a strong option for your website, especially if you have a lot of content. Inline navigation organizes the mobile experience with clear headers and an interactive way of displaying content beneath it.

Apple's News app is an example: each news topic is assigned a distinct color, then the news items are represented by a card beneath the header. The card includes a description, allowing users to quickly skim the news for stories in which they are most interested. 

ios-10-preview-news.jpg

UI Design is an approximation. Photo Credit: Apple.

 

Floating Action Button

This might be the most exciting menu option at the moment. Developed by the Material Design team at Google, it's now finding its way into mainstream popularity.

The Floating Action Button is featured on a lot of Google services. It has actually seen a fair amount of criticism regarding usability as it's not an ideal option for more complex digital experiences. The icon chosen to represent actionable options can feel ambigious in meaning. Google recommends you use it for more singular actions – like writing an email. That way, the icon can be simple but makes sense in context  (ex: a pencil in the email application means "write an email"). In short, FABs can work well as they simplify the options, but only when used for more simple user experiences. 

menu-design-FAB.jpg

UI Design is an approximation.

 

Conclusion

If your wanting to ensure your next site is cutting edge, keep an eye on your favorite, innovative mobile design options. For more practical and still fresh ideas about mobile menu design check out a few options here.

It's crucial to provide customers the most appropriate experience on mobile devices. Designing a website with responsive scaling was just the first step into an amazing mobile experience for users. Now with more so many menu design options, businesses can meet people wherever they are, and in ways that are more optimized for those quick and easy interactions.

Considering a redesign? Click the link below to see how ArcStone can help your business reach more customers in more places.

Topics: Web Design

New Call-to-action