5 UX Patterns to Help your Users Navigate

Dec 22, 2017 · 5 min read

Perhaps the most important thing to keep in mind when designing a mobile application is to make sure it is both useful and intuitive. If the app is not useful, it has no additional value and no one has any reason to use it. If it is useful yet entails a steep learning curve, people won’t bother learning how to use it. Good UI design addresses both of these design problems, the formalized best practices for solving common design problems are known as design patterns. Understanding and recognizing today’s newest and most trending design patterns can give you a huge leg-up in the industry of mobile application design, so that your next app will be fresh and competitive.

This post focuses on design patterns used for navigating a mobile application. Regardless of what kind of application you are designing, you will need users to navigate the different features of the app effectively and efficiently — how users navigate through your app may determine whether they will like it enough to keep using it.

Examples of how various apps implement walkthroughs

1. Walkthroughs & Coach Marks

Usefulness is key to a successful app. However, sometimes this means a rather complicated application with many different types of tools and content. A good way to address this problem is through an initial walkthrough or tutorial to demonstrate how each function works. Secret and Youtube highlight important sections of the user interface with coach marks that explain what they do, while Carousel and Duolingo show a slideshow walking the users through the typical user experience. This design pattern can also be utilized to collect additional information from the user, allowing for an easier initial registration/sign-up experience and more intuitive integration into the app.
If the different features of your app are not immediately obvious to the user, walkthroughs and coach marks are great design patterns to simplify user experience and app complexity.

2. Content-Based Navigation

No matter what kind of content you want to include in the design of your app, you always want to make the user experience and flow of that content as fluid as possible. Content-based navigation is a design pattern used for incorporating seamless transitions between overview and detailed states. Tinder provides a great example of this pattern: you can toggle between two states on a user profile — the main overview state that is essentially a picture filling up most of the screen, and a detailed view that makes the picture only slightly smaller and includes some factual information. You can transition between either state by simply clicking the screen in either view, as well as swipe through pictures in whichever state you choose.

3. Sliders

In Uber, you can see that there are four types of ride services, and instead of requiring four separate screens to deliver the necessary information, Uber uses the slider design pattern to allow for easy toggling between each ride service. This generates a seamless transition between options with the swipe of a finger, making the display of these features very intuitive for the user.

4. Popovers

Sometimes notifications or additional information in the middle of using the app may help users better interact with the app. In this case, users might want to view the relevant information without losing their current place in the user interface. The popover design pattern can solve this problem in several ways:
Popovers “pop-up” when the user performs a certain action or gets to a specific place in the app, showing the relevant information/controls associated with that particular action/place in the UI.

The original content or place in the app is still visible in the background, but the popover gives you the option of tweaking certain things or learning about what comes next. The popover gets the user’s attention and provides important notifications where needed. At the same time, however, users can easily dismiss the popover and return back to whatever they were originally doing by simply tapping or swiping the screen

An example of popovers can be seen in the official TED app, which has a popover playback control that fades out the background, allowing users to interact with this control without losing their place in the content browser. Secret and Swarm use popovers to explain what will happen next if users continue with a certain action.

5. Slideouts, Sidebars, & Drawers

When compared with computers and TV’s, mobile phones have relatively small screens, which means that one of the challenges of mobile design is to fit a lot of information on a small UI. In order to avoid clutter of a large amount of information on a single screen at once, you can use slideouts, sidebars, and drawers to navigate between different parts of the app. These patterns are secondary sections of the application such as maps, chat, user profiles, etc., tucked away in collapsible “hamburger menus,” arrow buttons that slide out, or side drawers. In this way, users can interact with the most important information on each screen by selecting the section of focus from these hidden panels.

Have you used any of the patterns that we have mentioned above and have they helped increase your daily active user count? Let us know.

You can follow us on Facebook / LinkedIn / Twitter

Originally published at monsoonfish.com.

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by 277,994+ people.

Subscribe to receive our top stories here.

The Startup

Get smarter at building your thing. Join The Startup’s +792K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.


Written by

We combine data driven insights and design thinking to generate innovative ideas and turn them into amazing products that are used by millions.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store