Navigation Tips To Improve Mobile Apps
Since the massive emerge of mobile interfaces and apps the hamburger menu concept was commonly used and being used till now. There are pros on cons of using it. I'll share my experience of designing Android and iOS apps for tech startups. And my thoughts on UX and logic of this concept.
One of the big advantages of using Hamburger menu is that you can put there a large number of navigation options simply because you're using most of the screen space for that kind of navigation.
The screen space is important in mobile apps. So having hidden navigation in the left or right drawer panel is useful if you want users to be focused on the content area and call the navigation when they need it.
Take a look at one of the example. I designed a web interface with the navigation that was in the top area, but for mobile devices I hide it behind the hamburger button.
It proves the concept of focusing on the content area and call the navigation drawer when you need to navigate somewhere else. This concept works on both responsive websites and apps.
However, this approach has its disadvantages. You can't see a navigation all the time because it's always hidden behind the button. So it's one tap away. Also, the hamburger button doesn't indicate your current location in the app and you can see your current location in the app if you open the menu.
Let's look at another concept of navigation.
It's a bar with several buttons that's always visible and placed in the bottom of the screen.
The biggest advantage of it is that it's always visible and you can see where you are in the app and quickly switch to another section. It's easier to understand this kind of navigation right from the start. Moreover, nicely designed icons make it self-explanatory. Also, it's very helpful to combine some of the tabs with a notification badge. Since this bar is visible all the time.
As you can see on this example I show the most important parts of the app in the tab bar. Everything else goes under the profile tab. This is something that is important in this kind of navigation.
Also, it requires more advanced approach to design the architecture of the app. I usually aim for a seamless user experience in navigation as much as it's possible. So people don't need to understand navigation, they just use the app without thinking too much on how to use it.
The tab bar limitation forces you to think about possible use cases of the app. I think it's something that should be designed as one of the first things in the app. Because it will be very difficult to add something later as in the case with the hamburger menu.
Action elements should be big enough to easily tap on them
The mobile navigation is slightly different from the web navigation in terms of the size of objects. Mostly we use fingers to interact with a mobile interface. So it's difficult to tap on let's say a link. Buttons, tabs, input fields and similar things should be easy to click on.
Floating Action Button (FAB)
Despite it came from Material Design it's being used in some of the iOS apps as well. Ultimately there is nothing stopping you from using a FAB, but you should probably expect users to not know what it is, or how to use it. Because it's something that's not commonly used by iOS users with the exception of Notes app.
Anyway, a FAB is useful in some cases and it instantly shows more actions without going anywhere else in the app. Similar to the Plus button in Notes app above.
It's a good idea to distribute a content by tabs to not overload the screen with a lot of information.
It's a huge part of the navigation and sometimes it's very convenient to have it in apps that have too much of data or options to process before making a decision. For example, it was easy for me to find something in Settings in early versions of iOS, but it's not that easy Today and often times I use search to find what I'm looking for. I like how it searches in all the categories and subcategories allowing me to minimize my time on navigation.
I believe it's a huge part of mobile app interfaces that often underrated. But if the UX is efficient then it adds a good value to the app. One of the examples of how search can be more efficient is to have examples of searches or trending searches instead of making the content part of this screen empty. Another great example is categorization of search results, and having the ability to run searches that you did earlier. In some cases when the content or data has many details and distinctions it can be useful to configure your searches by having a number of parameters like price range, location, and more specific search properties.
This is something we have from the beginning of using touch screens and it's getting more and more common when Apple removed the Home button.
You can swipe up from the bottom to see all your apps that are currently running or swipe down from the middle of the screen to search on your device and on the web.
Gestures became more as a standard. Because, once users understand the mechanics of essential gestures like going to Home screen or calling Multitask menu, basically swiping, it's easier to learn and use more complex gestures within different apps. One thing that is important here is to do intuitively. So people can expect to do certain gestures because they've used them before in iOS native or other apps.
Cards and Navigation
Card navigation is based on the card deck metaphor. Including card deck manipulations like stacking, swiping, flipping, and discarding.
Great examples of cards I found in Books, Podcasts and Google Maps apps. I think it's wise to user this pattern for navigation between instances of one screen. This interaction feels like you don't go to a completely new section in the app, but remain the same place, but go deeper into details to explore more options or additional information. It seems like a natural way of doing things like this and in some way it mimics the real world experience. Also, I believe this user experience is something that is emerging nowadays because of the bigger screens of mobile devices.
Force Touch or 3D Touch
There is one more layer of navigation that is invisible at all unless you know how to activate it or you experienced it earlier in similar cases. It's a Force touch options.
With virtual assistants as Siri, Google assistant and others people can start using an interface from different entrance points.
Voice control is still an emerging technology, but that's something that will be improved soon and we'll be able to control more things with a voice. Moreover, some tasks can be done without even interacting with an app as we used to do it on the screen. So that is something I think is worth to pay attention to.
Good navigation, like a good design, is invisible. Helping users navigate should be a high priority for almost every app. The easier for people to use and navigate a product the more likely they will be using it.