Best UX Patterns for Navigation in iOS Apps

By Max Snitser on Jan 11, 2019

I think the navigation in apps is one of the most important things. Because even if you have a cool idea of the app and everything is done right with a great performance of using the hardware of mobile devices the app can be hard to use due to poor navigation. In this article, I'll try to cover all the navigation elements and patterns mostly for iOS apps including emerging technologies like voice control and having big screen resolutions that we can use smart to build seamless navigation within an app.

Hamburger Menu

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 in 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 just 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.

Hamburger menu example

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 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.

Tab Bar

It's a bar with several buttons that are always visible and placed at the bottom of the screen.

Menu Drawer vs. Tab Bar

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 in 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.

You can't place more than 5 tabs in the bar. Otherwise, it will be hard to use it. So the common solution here is to use first 3-4 slots for essentials and the last one for more navigation options that can be shown on a separate screen. It can be like settings, account details, support, terms of use and similar stuff.

Also, it requires a more advanced approach to design the architecture of the app. I usually aim for 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 tap on them easily

The mobile navigation is slightly different from the web navigation regarding 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)

Even though it came from Material Design, it's being used in some of the iOS apps as well. Ultimately nothing is stopping you from using a FAB, but you should probably expect that users do not know what it is, or how to use it. Because it's something that's not commonly used by iOS users except Notes app.

Floating Action Button Example

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.

Tabs

It's a good idea to distribute content by tabs to not overload the screen with a lot of information.

Search

It's a massive part of the navigation, and sometimes it's very convenient to have it in apps that have too much 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 I use search to see what I'm looking for. I like how it searches in all the categories and subcategories allowing me to minimize my time on navigation.

Search in Settings and an app

I believe it's a huge part of mobile app interfaces that often underrated. But if the UX is efficient, then it adds 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 a 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 some parameters like price range, location, and more specific search properties.

Search configuration

Gestures

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.

iOS Gestures

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 the 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.

Card navigation

Great examples of cards I found in Books, Podcasts and Agora apps. I think it's wise to use this pattern for navigation between instances of one screen. This interaction feels like you don't go to an entirely new section in the app. It remains the same place but allows users to 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.

Popover Navigation Elements

In most of the cases it looks in the same way as cards that appear on top of a screen, but sometimes it can take fewer spaces and use a small fraction of screen space. So it's not necessary to dim down the main screen in cases like this. This concept is similar to drop-down menus that we have on the web and using bigger mobile screens and resolutions make it possible to use a similar idea in mobile design as well.

Popover examples

Great examples with popover menu are Books and Skyscanner apps. Using this type of navigation, you allow users to stay on the current screen, but explore more options or change the content using view criteria to customize it for users needs.

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 3D touch option.

There are 2 common things people can do with 3D Touch: quick actions or peek at a content inside or outside apps.

3D Touch and Long press examples

With the 3D Touch, it's possible to save mental energy and go straight to what you need right now. Apple has a lot of actions for their native apps like quickly set a timer right from the control center drawer or go straight to Wi-Fi or Bluetooth settings from the Home screen.

Some of the apps like Pinterest are successfully using the 3D Touch for quick actions on pins. You can do operations with files and folder in the Dropbox apps without opening them, but just pressing hard on them and then swiping up.

There is also a similar interaction that called the Long press. It can be useful for showing some additional actions without opening something in a new screen.

However, the Long press and 3D Touch can be quite frustrating for users. Because they are not aware of these interactions when they start using an app unless they experienced it earlier in other apps and willing to try new things or you somehow educate your users about use cases of the app. Moreover, there are rumors that this is a sunset technology. Meaning it can be removed from new devices. True this or not, we need to be ready for any outcome. Some of the techniques are transient, and you always can test things out in your design and if you're not sure in the sustainability then do not rely too much on it.

Voice Queries

With virtual assistants as Siri, Google assistant and other people can start using an interface from different entrance points.

Interacting with Siri

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.

Conclusion

Good navigation, like a good design, is invisible. Helping users to understand navigation should be a high priority for almost every app. The more natural for people to use and navigate a product the more likely they will be using it.