Blog # Product Design # Fintech
Mobile app navigation design does not assume following one proven direction.
While there are certain mobile UI rules to keep in mind when creating your product, you are not restricted to selecting the single best navigation pattern. You don’t want your product to look like every other app in your niche, right?
Mobile UI is all about reducing the user’s learning curve and making your product appear intuitive and simple to use. Today we are sharing some app menu design inspiration from our vault, along with additional commentary on the benefits of different menu styles.
Great mobile app design goes beyond the good looks. It should also account for how users will engage with your product.
When it comes to app navigation design, you should keep the following principles in mind:
Minimal – the key difference between mobile and desktop design is the screen size. Efficient mobile navigation prioritizes the tasks the user is most likely to conduct. It should gently guide the user to the right direction, not overwhelm with the choices.
Consistent – you should not change the menu content or position on different pages. Do not confuse the users. They should clearly understand how to move around your product and get back to the point where they started. Don’t try to amaze them. Instead, it’s better to deploy “The Principle of Least Surprise” to match the user’s expectations and mental models.
Coherent – use proper visual cues and signifiers. App navigation should not require any additional explanations. A “Cog” always suggests access to “Settings” or similar functionality. A user may be unpleasantly surprised if it leads to something else.
Self-Evident – users should not think too much about accomplishing a certain action. The navigation should guide and prompt the next step.
These are the essentials of mobile menu design. Now, let’s take a look of how that transfers to different types of mobile menus.
Arguably, this is one of the most popular mobile app navigation patterns. It assumes having a fixed set of buttons on display at the bottom of the screen. Nike+ Training Club, Instagram, Airbnb have opted for this kind of navigation:
Reducing all the content to 5 key actions could be complicated for some companies. The savvy workaround here is to include a central “action menu” button, which will reveal additional navigational options after being clicked.
Here’s how Yelp does that:
List type menus are popular with content-heavy apps – online newspapers and magazines; or those offering advanced functionality.
Some of the best mobile menu designs in 2017 include a mix of the list type menus and bottom bar navigation. The bottom area is used to display the key product features, whereas the extras stay hidden within the list type menu, accessible with a left/right side swipe gesture or popping up after pressing one of the bottom buttons:
Presenting your navigation as a grid will eat up the whole screen, yet it keeps the user attention on all the options available, and instantly makes it clear what your product can do for them:
Custom top bar navigation is more native to Android apps, though there’s no rule prohibiting you from using it in an iOS app as a secondary navigational option. That’s what Facebook does:
Tinder has massively popularized the concept of gesture based navigation and basically made those swipes a product defining gesture.
Basing your navigation on gestures adds additional depth and a pinch of innovation to your product. This option is particularly worth considering for startups and gaming businesses.
Here’s another option for the bold companies. If you don’t want to cramp your app with loads of texts and lists, you can make it iconic instead ☺
You can present your key features and unique personality by organizing the content in a circle of icons. It could be a standalone navigation option or incorporated as part of your Action Menu. While using familiar icons, you can tweak them to match your unique brand personality and create a more memorable experience for the users.
If you are interested in learning more about mobile UX and UI design, check out the following posts:
Already have a project in mind? You can learn more about our UX/UI design services (we are 55% designers) or get in touch directly with Alty team through the contact form below!