Four quick directions for your app design

We all agree to the fact that navigation is the important element for any successful application as it will lead to a seamless path for the user to find out what he is looking for in the most efficient manner as I covered in my last article too. Thus, Good navigation is a vehicle that takes users where they want to go.
Navigation is crucial as it doesn’t matter how good your application is if users can’t find their way around it.
I thought to come up with some navigation patterns(which we might be using in one or the other way)specifically for mobile as selecting navigation is a challenge in mobile due to it’s small screen size and need to give precedence to content over interface elements. In this article, we’ll examine Four basic navigation patterns for main menu of mobile apps and describe the strengths and weaknesses of each of them to understand which one is apt for our next app design :)
Primary Navigation Patterns: Springboard, List Menu, Bottom Navigation, Floating Action Button
Springboard
The Springboard(OS agnostic)is characterized by a landing page of menu options that act as a jumping off point into the application. The Springboard pattern can be easily adapted for each operating system without feeling foreign or weird to the user. The app launcher is an example.

A visual design pattern which features a single page with multiple menu options.

Grids for 3x3, 2x3, 2x2, and 1x2 are the most common layouts but it can be in any proption in relation to menu items need to be shown.Though some options can be proportionately larger to impart greater importance.
Pros of Springboard pattern
- You can use this pattern when your app is content-focused and consists of ample of categories.
- Providing overview of your app content.
- Quick access to every category.
Cons of Springboard pattern
- Hidden navigation is less discoverable. You may only can shows up to 9 categories once.
- You may need to provide an indicator to tell your user to either slide left or up to view next set of hidden categories.
List Menu
This navigation approach usually devotes the home page exclusively to navigation. Users incrementally tap or swipe to reveal additional menu options as they scroll up and down. There can be numerous variations of this pattern including personalised list menus, grouped lists, and enhanced lists. Enhanced lists are simple List Menus with some additional features for searching, browsing or filtering.

PROS
- The full-screen navigation pattern is best for achieving simplicity and coherence. You can organize large chunks of information in a coherent manner and reveal information without overwhelming the user; once the user makes their decision about where to go, then you can dedicate the entire screen space to content.
CONS
- Prime real estate will be wasted. You won’t be able to display much content except the navigation options.

This pattern works well in task-based and direction-based websites and apps, especially when users tend to limit themselves to only one branch of the navigation hierarchy during a single session. Funnelling users from broad overview pages to detail pages helps them to home in on what they’re looking for and to focus on content within an individual section.
Bottom Navigation
Just like iOS, bottom navigation is accepted and recognised by Andriod too as it is most thumb friendly option.
The most important and common navigation options(preferably icons with text lables to reduce ambiguity)are shown persistent i.e visible at all times in bottom nav leading to easy access for the user and thus enhancing usability. It should be used for three to five destinations. On a single click of which, it will navigate directly to the screen associated with the item. The first tab/destination item has to be the home screen of the app. Almost all the big giants like Linkedin, Fasxcebook, Twitter, Airbnb etc. have already moved to this navigation pattern because of it’s usability.
Steven Hoober in his research of mobile devices usage, found that 49% of people rely on a one thumb to get things done on their phones.

PROS
- Navigation is generally the vehicle that takes users where they want to go. Placing top-level and frequently-used actions at the bottom of the screen, are comfortably reached with one-thumb interactions.
- The tab bar fairly easily communicates the current location. Properly used visual cues (icons, labels and colors) enable the user to understand their current location at a glance.
- Bottom Nav are easy to access, make navigation fast and save time.

CONS
- If your app has more than five options, then fitting them in a tab bar and still keeping an optimum touch-target size would be hard. It is also not adviced if you’ve fewer destinations in app.
Floating Action Button(FAB)
A floating action button (FAB) introduced with Material Design of Google, performs the primary, or most common, action on a screen. It typically has a round shape with an icon in its center that’s elevated above other page content.


Caution: Don’t display multiple FABs on a single screen.Occasionally two FABs can be used, if they perform distinct, yet equally important, actions.
PROS
- Easily tappable and its fixed position drew attention to the element. It’s like a signboard of what’s important.
- It takes lesser screen space than other patterns to get clear call of main action on the screen.
- It also improves effectiveness. A study by Steve Jones demonstrates that a floating action button slightly impairs usability when users first interact with the button. However, once users have successfully completed a task using the element, they are able to use it more efficiently than a traditional action button.
CONS
- The pattern is quite obtrusive. It stands out in an interface(they’re literally on top of every other UI element on screen.) and thus may distracts the user from an immersive experience by missing content. Its design is meant to draw the user’s attention. But sometimes its presence can distract the user from the main content.
- It can block the content. Take Gmail’s app example below, it blocked “favourite” star and timestamp of last row.

3. It is icon-only navigation. By design, the floating action button is an icon-only button, with no room for text labels. The problem is that icons are incredibly hard to interpret. Even a simple action icon like the pencil in apps can mean different things in different apps.(For Gmail, it is compose an email or others it can be Edit action).To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context.
Summary
Assisting users through our design, to navigate seamlessly should be at a high priority for every app designer. This further helps in adoption of the app if both new and returning users are able to figure out how to move through your app with ease. The easier your product is for them to use, the more likely they’ll use it.
Stay tuned with my articles, I will come back with tips on secondary navigation.
Thank You! Hope it helps finding better navigation pattern for your app :)