This is the third part of our Essential Mobile Components series, and we will be focusing on all the design patterns and user experience concepts around the Navigation category.
Part 1 was about User Engagement and Part 2 about User Identity.
When developing a mobile application, there are some standard elements that are expected to be in place, functioning in a way that's intuitive to the user. It becomes counterproductive to divert from some best practices because it could cause confusion, making the user experience a hard one.
After a long time processing these books that changed the way we design mobile apps (Mobile Design Pattern Gallery and Designing Social Interfaces), we created a series of articles and resources to help you learn how to design better apps with Ionic Framework!
We know that sometimes it can be hard keeping up to date with the latest trends in mobile design. That's why we created a list of essential mobile components that you should use in when building your Ionic framework app.
Before we start thinking about navigation, we must consider the type and amount of data you want to display in your app. Don't forget you will use navigation to show and structure your data, that's why it should follow the information structure of your app and not the other way around.
Note: This post will be about Navigation best practices and not about implementing navigation and routing in our Ionic Angular apps. However, we got you covered! Ionic Navigation and Angular Routing the Complete Guide.
It's important to keep the best practices for navigation design to ensure that people will be able to use and find the most valuable features in your app.
Navigation is indeed one of the most important elements of user experience that every developer must include on its checklist while creating any kind of app. A bad navigation can frustrate users to an extent that they end up uninstalling the app and even posting a negative review about your app on the app store.
We can classify navigation patterns in many ways, but for this Ionic post we followed this convention:
- Primary Navigation
- Persistent
- Transient
- Secondary Navigation
Let's see the differences between both of them and some examples.
Persistent Navigation
Persistent navigation encapsulates menu structures like Tab Menu or the List Menu. When you open an app with this type of navigation, you will notice right away what are the options for the primary navigation.
Let's see some examples of Navigation Patterns in Ionic. The following screenshots were taken from Ionic 6 Full Starter App.
Springboard
The Springboard pattern, sometimes also referred to as a Launchpad, was the most popular navigation design pattern since 2011. The design is a landing screen with options that act as launch points into the application.
One of the reasons it enjoyed popularity was that it worked equally well across platforms.
At the time, the general thinking was still in terms of OS-agnostic designs that allowed for consistency and reuse. It was also popular because up to nine options (in a 3×3 grid) could be displayed, compared to the limit of three to five tabs imposed by iOS and Android tab bars. Also, by adding a paging indicator (the small dots at the bottom), designers could provide even more menu options.
This pattern is still widely used, both Android and iOS launchpads rely on this pattern to show all the installed apps on the device. It's the classical home screen of your phone.
Cards
Card style navigation is based on a card deck metaphor, and usually includes common physical card deck manipulations such as stacking, shuffling, discarding, and flipping.
This pattern has become popular again with the release of Google Now, which stacks information rich cards vertically to display a long list of launch points into the app, or quick context based actions.
Many recent applications use Cards as the main way to navigate and interact with content. E.g. when you swipe a card down to remove it from the screen — a new card replaces it.
Other styles of card interaction include swiping left on the top card in the stack to skip the content; swiping right to move the content to a new pile, the ‘keep' pile, the most well know example of this style is Tinder.
Ionic Cards are a handy UI component that serve as an entry point to more detailed information such as images, titles, content and actions. Ionic cards are super easy to use and can help you create a beautiful app. If you want to start a new Ionic 5 app with cards you should check the free starter template included in this guide to create your first Ionic app.
Also, in Ionic 6 Full Starter App you will find lots of cards examples using Ion Card component. You can get this starter template and reuse these cards to save weeks of development and design.
Lists
The List Menu pattern is a similar pattern to the Springboard as each list item is a launch point into the application. Switching between modules requires navigating back to the beginning of the list in the same way that the Springboard pattern functions.
In a hierarchical app a user navigates by making a single choice per screen until they reach the desired destination. To navigate elsewhere, users must retrace some of their steps, or begin again from step one and make different choices.
Consider utilizing List Menus when the use case is navigating within a hierarchy.
Lists also work well for menus with long item names, and in cases where items need descriptions added to the item titles. Follow OS conventions for implementing this navigation pattern.
Ionic Lists are made up of multiple rows of items which can contain other UI components such as text, buttons, toggles, icons, thumbnails, and many more. Lists generally contain items with similar data content, such as images and text. Ionic Framework has great support for List Navigation. Also, lists in Ionic support cool interactions such as swiping items to reveal options, dragging to reorder items within the list, and deleting items.
In Ionic 6 Full Starter App you will find lots of listing examples using Ion List component. You can get this starter template and reuse these pages to save weeks of development and design.
Gallery
The Gallery pattern displays live content such as news articles, photos, or recipes arranged in a grid format, a carousel or a slide show.
The Gallery pattern works best for showing highly visual content, where no hierarchy is implied, and content is frequently updated.
In Ionic apps the Gallery pattern can be implemented by using the Ionic Grid.
Tab Menu
Android, iOS, and Windows Phone each have their own specific naming conventions and design guidelines for Tab Menus. It is important to understand these, even if you choose to go in other directions in your design iterations.
In an app with an information structure, users can navigate directly from one primary category to another because all primary categories are accessible from the main screen.
Ionic Framework provides a handy Ion Tabs component. The ion-tabs Ionic component does not have any styling and works as a router outlet in order to handle navigation. In order to learn how to use tabs in Ionic framework apps you should read the tabs documentation.
Also, all of our templates include beautiful tabs navigation that you can copy and add to your own app. If you have any question about tabs navigation in Ionic, feel free to leave a comment on the comments section at the end of this post.
Transient Navigation
Transient navigation has to be revealed in an explicit way through a gesture or tap. This is because of the change in screen size with smartphones, which have made designers to think "outside the box", literally. These normally include Side Menus and other off-canvas elements.
Transient as a term means staying a short time, which is how the following navigation menus actually work. They are normally hidden until we make an action to reveal them; then making a selection, and they disappear again. The two important patterns we'll look at here are Side Drawers and Toggle Menus.
Side Drawer / Side Menu
There are two styles of Side Drawers.
The first is an overlay, meaning a swipe or tap gesture will reveal a drawer that partially covers or overlaps the original screen content.
The second style is an inlay; in this case a swipe or tap will open a drawer that pushes the original screen content partially off-screen.
The most popular orientation for the Side Drawer is on the left, but it can be on the right instead, or there can be drawers on the right and the left. If you plan to internationalize your Ionic app you should know that RTL languages will prefer the side menu on the right.
Ionic Framework provides support for Side Menu Navigation through the ion-menu component. The Ionic Menu component is a navigation drawer that slides in from the side of the current view. The Ionic menu support different types such as "overlay", "reveal" and "push".
Need inspiration to design your mobile side menu?
Toggle Menu
Like the Side Drawer, the Toggle Menu can be an inlay that pushes the content down below the menu, as with, or an overlay that appears as a layer above the content. It's a good-looking approach, scalable and user-friendly.
This pattern is not difficult to implement and allows you to keep your whole menu and for users to easily navigate with it.
The nice thing about the Toggle Menu is that it appears in place and keeps the users there, without the risk of disorienting them.
Ionic Framework provides a ion-menu-toggle component. By default, the MenuToggle, is only visible when the selected menu is active. A menu is active when it can be opened/closed. If the menu is disabled, or it's being presented as a split-pane, the menu is marked as non-active and ion-menu-toggle hides itself.
How to choose between Persistent or Transient navigations?
It's important to ask yourself these questions when deciding when to use Persistent and Transient navigation in your Ionic apps:
- Is your application "flat"?
- Are the menu categories equivalent in hierarchy, and are there just a few primary categories (i.e., three to five) in the app?
- Do your users need the menu to be always visible for quick access?
- Do the menu categories have status indicators, like the number of unread emails, for instance?
Did you answer any of these questions with a
You can combine a primary navigation pattern with a secondary navigation pattern to help you better navigate the information structure.
The primary navigation patterns may also serve as secondary navigation patterns. It's common to see Tabs with Side Menu, Tabs with Lists, Tabs with a Dashboard, a Springboard with a Gallery, and more.
Swiping
This pattern can be used to navigate through content in a fast and easy fashion by using the swipe gesture.
The important thing about swiping is that the user may not know it exists. This means that the user may not realize there is more content available. The most common way to communicate this information is via page indicators, which are the horizontal line of small dots usually placed near the top of the screen, although occasionally you may see these at the bottom of the screen. These dots that indicate further pages exist off-screen.
The card metaphor also works for paging. If the pattern is used in this fashion, partially visible background cards or pages prompt the user to swipe.
Swipping in Ionic can be achieved through Ionic Slider UI Component. The Ion Slides Component is a multi-section container where each section can be swiped or dragged between. In Ionic Full Starter App Template we use swipping pattern in different screens such as: onboarding walkthrough, ecommerce product page to showcase the product images, profile page to show a list of friends.
Scrolling Tabs
This pattern is useful when you need to display multiple categories or views within a specific module. Scrolling Tabs are usually thinner than standard Tab Bars since they don't necessarily touch targets and more often ask the user to swipe horizontally.
Don't use tabs for carousels or pagination of content as those use cases involve viewing content, not navigating between groups of content.
If you incorporate this pattern, make sure your design clearly indicates the selected tab. An example of this navigation can be found here.
Accordion
An Accordion lets the user see more information while staying on the same screen. In this way, it acts much like Navigation Tabs, as menu items are collapsed when a new panel is clicked.
Where Navigation Tabs are most often used horizontally, Accordion menus are usually vertically implemented.
Accordion menus can also function quite well as sub-navigation for a specific section of a website.
Hope I was able to throw some light on Ionic navigation patterns. You don't have to select just one of them, you can mix and match them depending on the content of your app. For example, in our latest Ionic template we implemented all the following navigation examples: side menu, lists, cards, gallery, swipping and tabs.
In this post we explained why navigation is one of the most important elements of user experience in mobile app. For this reason is so important to keep the best practices for navigation design to ensure that people will be able to use and find the most valuable features in your app.
Also, we went through different navigation patterns and showed how to implement each of them using Ionic Framework. This post was about Navigation best practices and not about implementing navigation and routing in your Ionic Angular apps.
Check out other Ionic tutorials to keep learning Ionic best practices.
- What's new in Ionic 5 — Migration and Free Starter
- Mastering Web Components in Ionic Framework
- Add Facebook Login to your Ionic Framework App.
- The Complete Guide To Progressive Web Apps with Ionic Framework.
Did you know that we also offer premium mobile templates and components that you may find super useful as they save you hours of development, time and effort, while giving your projects a great design from scratch?
Let us know if you liked this post with design tips to improve the user experience of your Ionic apps!
Liked this Ionic Tutorial?
Leave your comments below.