This is the criteria we based the below patterns on: familiar enough that the controls are recognizable, but flexible enough that you can customize them as needed.<\/p>\n
First, let\u2019s start with a quick overview of mobile navigation fundamentals.<\/p>\n
The Principles of Mobile Navigation<\/h2>\n
While we\u2019d like to think of design as a sandbox where anything goes, there are rules \u2013 or at least logical practices \u2013 that keeps everything sensible. Think of these as universal guidelines.<\/p>\n
For starters, 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. For this reason, mobile navigation systems should be minimal<\/b>: the site\u2019s content needs to stand front-and-center, while the navigation feels almost invisible.<\/p>\n
But\u00a0because designers are thinking of new ways to minimize the navigation controls, the solutions are sometimes confusing and misunderstood. That\u2019s why mobile navigation must also be coherent<\/strong>. As stated in Interaction Design Best Practices<\/a>, use the proper signifiers (e.g. correct visual metaphors)so that the navigation doesn\u2019t require any explanation. <\/strong><\/p>\n Photo credit: <\/i>Tumblr<\/i><\/a> via <\/i>Capptivate<\/i><\/a><\/p>\n Finally, the mobile navigation must be consistent<\/strong> for the entire site. Don\u2019t move the navigation controls to a new location on different pages. This will just disorient the user. Take a look at the patterns below and pick the one that will work best for you \u2013 but once you pick one, stick with it.<\/p>\n Sliders take advantage of one of the most popular features of mobile devices, the touch screen. However, as a navigation method, they are relatively underused.<\/p>\n If you have only a few elements to go through, sliders are a great navigation tool. With their gesturing controls, they feel natural, as well as fun. At this point, the slide bar is recognizable enough that users know its function, so it\u2019s also a practical choice as well.<\/p>\n Photo credit: Uber<\/a><\/em><\/p>\n Sliders work especially well for progressive or closely related pages. For example, the Uber app<\/a> above allows users to navigate between four different types of services. The beauty of Uber\u2019s slider is that users can use the same map view for each of the four pages. For them, the slider isn\u2019t just a creative alternative to the norm, it\u2019s also the most practical solution.<\/p>\n However, sliders have a limited range. If you\u2019re navigating between more than 6 or 7 pages, the slider will become harder to navigate.<\/p>\n Sign up for a free trial.<\/span>Try it for free!<\/a><\/section>\n The idea of a pictorial icon is not new. It is one of the most logical solutions to the problem of saving mobile screenspace. The picture on the icon explains where it will take you, making them more space-efficient than text descriptions.<\/p>\n Sure, this satisfies the familiarity requirement, but what makes them creative? The picture itself.<\/p>\n The style of the picture can be anything you want, allowing you to showcase your site\u2019s unique personality. Even if every site had the same icons, each one could still look different based on how they depict the image.<\/p>\n Everyone knows that an envelope icon represents email, but how<\/i> you choose to draw the envelope is up to you. Realistic or cartoony, simplistic or detailed \u2013 as long as it looks like an envelope, you can do anything.<\/p>\n The CircleMe app<\/a> uses a lot of familiar icons: hearts, music notes, books, house, etc. However, they modify them in a way that\u2019s unique to the app. This makes navigation simple and easy-to-use, but still with enough freedom to separate them from others.<\/p>\n Compare the CircleMe icons to another app\u2026<\/p>\n Photo credit: <\/i>iTunes<\/i><\/a><\/p>\n \u2026 MavenSay<\/a>. The icons from these two apps represent a lot of the same fields, and yet use different pictures. CircleMe uses a camera to represent video, while MavenSay uses a play button within a film strip. Even when they use the same imagery \u2013 a book \u2013 the visual style is completely different.<\/p>\n In this way, pictorial icons are the best of both worlds. They retain the familiarity of what other sites are doing, but still allow the freedom of creativity.<\/p>\n As we explained in our free ebook Cards & Minimalism<\/a>, the card pattern is on the rise due to its simplicity and adaptability to responsive design. The touch-screen navigation of mobile devices turn the basic card format into a grid of buttons, where the user has only to press the relevant card to go to the page.<\/p>\n Cards can be either images, text descriptions, or both together. The point is that they create an organized and coherent system for showing available options.<\/p>\n Photo credit: <\/i>National Geographic City Guides<\/i><\/a> via <\/i>Mobile Tuxedo<\/i><\/a><\/p>\n National Geographic\u2019s City Guides<\/a> displays the need-to-know information on four of the most visited cities in the Western world. The same navigation could have been accomplished with four textual links taking up a fraction of the space, but the card system adds a whole new level of visual enjoyment beyond just navigation. The push-button format also encourages exploring.<\/p>\n Favoring more the side of creativity than practicality, the spinner wheel is just usable enough to be acceptable, making it a viable option for an out-of-the-box navigation system.<\/p>\n Like the slider, the spinner wheel utilizes gesture controls to add a fun and natural feel to using an app. However, unlike the slider, spinner wheels are able to take advantage of the continual repetition of the circle. There is no end; getting to the end of the list means starting over at the top.<\/p>\n Photo credit: <\/i>iTunes Preview<\/i><\/a><\/p>\n As a daily organizer app, Sooner<\/a> has a lot of competition and has a greater need to set itself apart. The spinner wheel does just that, with the same functionality and usefulness as its competition, but with a bit more fun.<\/p>\n While other sites are struggling to minimize the space their navigation systems take up, the full-screen pattern takes the exact opposite approach. It might sound contradictory to what we said about saving screen space, but full-screen navigation is very easy to use.<\/p>\n Although you won\u2019t be able to display any content, the full-screen navigation pattern is best for simplicity and coherence. Once the user makes their decision about where to go, then you can dedicate screenspace to content. This pattern is like a one-step-at-a-time strategy, where instead of cramming everything into the screen at the same time, the site \u201cchunks out\u201d the experience (at the expense of a bit of user freedom).<\/p>\n Photo credit: <\/i>Cookly<\/i><\/a> via <\/i>Dribbble<\/i><\/a><\/p>\n Cookly<\/a> uses a full-screen navigation menu with photo backgrounds to get entice the user to use the app. There is no content on this screen except the navigation options and the relevant pictures. But as an introduction to the app, the pictures set the right mood. The simplicity of the navigation ensures that the user will get where they want to go.<\/p>\n There\u2019s nothing necessarily wrong with more traditional navigation UI patterns like sidebars, pulldowns, or even the hamburger menu\u2026 except that they\u2019re used quite a lot.<\/p>\n Sometimes you need to get creative with how users get around your site. Just remember that you can\u2019t sacrifice usability.<\/p>\n The only thing worse than getting lost in the crowd is being clever for the sake of being clever. Both creativity and familiarity are damaging in excess \u2013 it\u2019s best to find a happy medium between the two.<\/p>\n For a more detailed list of the the best mobile UI design patterns, navigation and beyond, download the free ebook <\/i>Mobile UI Design Patterns<\/i><\/a>. Across 100 pages, we explain 46 patterns in a simple problem\/solution format with examples from today\u2019s hottest companies. <\/i><\/p>\n![\"image06\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/06\/image061.png\")
<\/p>\n1. Sliders<\/strong><\/h2>\n
![\"image07\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/06\/image071.png\")
<\/p>\nJoin the world’s best designers who use UXPin.<\/h2>\n
2. Pictorial Icons<\/h2>\n
![\"image03\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/06\/image031.jpg\")
\nPhoto credit: <\/i>CircleMe<\/i><\/a> via <\/i>Mobile Tuxedo<\/i><\/a><\/p>\n![\"image00\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/06\/image002.jpg\")
<\/p>\n3. Card Grid<\/h2>\n
![\"image04\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/06\/image04.jpg\")
<\/p>\n4. Spinner Wheel<\/h2>\n
![\"image05\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/06\/image05.jpg\")
<\/p>\n5. Full-Screen Navigation<\/strong><\/h2>\n
![\"image02\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/06\/image021.png\")
<\/p>\nConclusion<\/h2>\n