Designers know that design is more than good looks. Design also covers how users engage with a product, whether it’s a website or app. It’s like a conversation. Navigation is a conversation. Because it doesn’t matter how good your website is if users can’t find their way around it.

In this post, we’ll help you better understand the principles of good navigation, then show you how it’s done with some of creative patterns. But first, let’s start with a quick overview of mobile navigation fundamentals.

The Principles of Mobile Navigation

Navigation UI patterns are a shortcut for good website usability. They do wonders for learnability, since there’s less your user has to figure out on your site. While thinking outside the box is usually a good idea, there are some rules that you just can’t break.

Simple

First, and the most important, a navigation system must be simple. Good navigation should feel like an invisible hand that guides the user along their journey. Also the obvious difference between mobile and desktop design is the screen size. Mobile screens are smaller, so all parts of the screen become more valuable.

Coherent

The function must be self-evident. Visitor should know how to go from point A to point B based on their first glance and without any guidance from the outside. You should use the proper signifiers (such as a sound, printed word, or image) so that the navigation doesn’t require any explanation. Also it’s a very important to provide an orientation for your visitors by letting the visitors know where their current page is in relation to other pages.

Consistent

The navigation system for the all pages should be the same. Don’t move the navigation controls to a new location on different pages. You should choose which type of navigation system will work best for your site, but once you make a decision, stick with it.

Be Creative

The problem with patterns is that it’s hard to stand out when you’re doing the same thing everyone else is doing.

Sliders

Sliders (not carousels!) work especially well for progressive or closely related pages. If you have only a few elements to go through, sliders are a great navigation tool.

Sliders (a.k.a. carousel) vs Slider (a.k.a. selector). For example, the Uber app allows users to navigate between different types of services. The beauty of Uber’s slider is that users can use the *same context* (map view) for each type of service.  Uber slider is a very practical solution — you can see the most valuable information on the same screen. **Downside:** Sliders have *a very limited range*. If you’re navigating between more than 6 or 7 pages, the slider will become harder to navigate.

Pictorial Icons

Pictorial icons is one of the most interesting solutions to the problem of saving mobile screen space. The picture on the icon should explain where it will take user. Everyone knows that an envelope icon represents email, but how you choose to draw the envelope is up to you. This makes navigation simple and easy-to-use, but still with enough freedom to separate you from others.

Material Design Navigation with Pictorial Icons. Tumblr application has both nice pictorial icons and *proper labels for them*.  Tumblr mobile application **Downside:** Many [researchers](https://www.nngroup.com/articles/icon-usability/) have shown that icons are hard to memorize and are often highly inefficient. Have you ever struggled to figure out what an icon meant? Users do this all the time with icons they’re not familiar with. Only universally understood icons work well (e.g. print, close, play/pause, reply, tweet). That’s why it’s important to make your icons clear and intuitive and introduce text labels next to the icons. ##Card Grid Cards are fast becoming the best design pattern for mobile devices. Card UI is driving the web away from many pages of content linked together, towards *individual pieces of content aggregated together into one experience*.  Google Material Design is for cards. Cards are a great medium for communicating quick stories. Each card representing a scene. And the most important thing about cards is that they are almost infinitely *manipulatable*.  Card is simply manipulatable. Last but not least, *cards are perfect for mobile devices* and varying screen sizes. And mobile devices are the heart and soul of the future of your business.

Pinterest and many other popular services are built around cards.

Pinterest user interface for desktop. **Downside:** Sometimes hierarchies are good — complex processes often benefit from guiding users along a path rather than allowing them merely to wander randomly. Also Card UI format should encourage content exploring.

Full-Screen Menu

While many apps and sites are struggling to minimize the space their navigation systems take up, the full-screen pattern takes the exact opposite approach. It unobtrusively dishes up lots of data, neatly displaying text and multimedia and at the end it has one major benefit — it is very easy to use.

Cookly has a massive navigation system with menu that takes up the whole screen in order to handle image links more efficiently. The simplicity of the navigation ensures that the user will get where they want to go.

Cookly via Dribble **Downside:** You won’t be able to display any other content on the home page, except the menu itself. Also click/tap requirement for showing a content isn’t good in most cases, because it’s one more user interaction before an actual result.

Conclusion

There’s nothing necessarily wrong with more traditional navigation UI patterns like navigation drawers, tap bars and pulldowns except that they’re used quite a lot. Sometimes you need to stand out from the crowd and bring creativity in user flows. Just remember that you can’t sacrifice usability.

The only thing worse than getting lost in the crowd is being clever for the sake of being clever. You need to find that sweet spot (golden mean) right between familiarity and creativity.