{"id":139684,"date":"2016-04-19T11:30:02","date_gmt":"2016-04-19T16:30:02","guid":{"rendered":"https:\/\/getflywheel.com\/?p=16660"},"modified":"2024-01-02T02:23:28","modified_gmt":"2024-01-02T08:23:28","slug":"seven-best-practices-for-designing-mobile-navigation","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/","title":{"rendered":"7 Best Practices for Designing Mobile Navigation"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Mobile usage is growing at an astronomical rate, and one thing is clear: ignore it and you\u2019ll lose visitors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mobile users now outnumber those accessing the Internet via their desktops, but mobile users and desktop users are very different beasts. Mobile users are, well, mobile. Which means they\u2019re seeking instant gratification, whether that\u2019s to browse your store, purchase your services, find out some information, or read the news. Time is of the essence; if they can\u2019t find what they want immediately, they\u2019ll disappear to the website of your main competitors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For this reason, it\u2019s more important than ever for designers to work with&nbsp;a mobile-first mentality to provide the best possible experience for their mobile users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And navigation is at the heart of achieving a smooth mobile user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mobile Navigation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mobile navigation should be intuitive, easily accessible, and, with real estate at a premium, it shouldn\u2019t take up too much screen space. Simplicity is the name of the game here. While eight points of navigation may be perfectly acceptable for a desktop, it\u2019s overkill on a mobile\u2014it will clutter the screen and confuse the end user.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/04\/best-practices-mobile-navigation-clutter.jpg\" alt=\"7 Best Practices for Designing Mobile Navigation. a tablet, a phone, and a computer on a desk\" class=\"wp-image-16668\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">However, most mobile users migrated to mobile from their desktops, and they still expect a certain standard when it comes to site navigation and appearance. In other words, you don\u2019t want to mess with their expectations too much. While mobile navigation will generally be different from that found on desktop sites, it should replicate the basic conventions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are seven best practice tips for effective mobile navigation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Keep Menus Short and Sweet<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When it comes to menus on mobile websites, less really is more. If you overload the menu options, users will be faced with decision paralysis as they try to decide which option they require. Remember, they\u2019re after instant information. If they have to trawl through lots of options they will simply disappear in search of a better-designed site. So ensure your menus are short and sweet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The exception to this is eCommerce stores, because users want quick and easy access to different purchase categories. But while you can\u2019t reduce the product categories, there is an argument for removing some of the standard pages\u2014such as home, contact, and about\u2014from the mobile menu, as users will prioritize shopping.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/04\/best-practices-mobile-navigation-menus.jpg\" alt=\"7 Best Practices for Designing Mobile Navigation. a person uses a tablet\" class=\"wp-image-16670\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Include a Prominent Search Button<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Simplicity and minimalism are key words in mobile design. But with reduced space and short menus, there is a danger that users may not be able to find what they want quickly. For this reason, having a prominent search button, in the form of the established looking-glass icon, is critical.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ideally, you want to place the search icon at the top of the screen so if a user lands on your site seeking a particular piece of information, they can search and find what they want with the minimum of hassle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Ensure it\u2019s Easy to Return to the Homepage<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">One familiar convention to all Internet users is the concept of a homepage, and this is equally important for mobile. It\u2019s easy to land on a site, follow a few clicks, and suddenly lose track of where you are, or take a phone call and forget what you were doing when you return to browsing. The home icon is a familiar sight to all users and gives them an easy way to return to the homepage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The homepage is also a useful point of reference. It should have an overview of the most useful information on your site, so users can reorient themselves and instantly discover the most important content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Make CTAs Obvious<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each page on your website should have a call to action, making it obvious what you want your visitors to do after landing there. In the minimized browsing environment of a mobile, it\u2019s essential that your calls to action are emphasized at all times.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the basic conventions for CTAs\u2014clear, contrasting colors, distinctive, persuasive text, and ensure they stand out visually\u2014and place them front and center, where they can\u2019t be missed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you have an eCommerce store, consider adding your \u2018Add to Cart\u2019 or \u2018Buy\u2019 button as a sticky button, so it\u2019s always on the page when your users are scrolling.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Consider Whether you Need Share Icons<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This may seem like a no-brainer; after all, social media usage on mobile devices is at an all-time high, with over half a billion people using Facebook solely on their mobiles. Yet a recent study by <a href=\"http:\/\/moovweb.com\/blog\/anyone-use-social-sharing-buttons-mobile\/\" target=\"_blank\" rel=\"noopener noreferrer\">Moovweb<\/a> revealed that only 0.2 percent of mobile users ever click on a mobile sharing button, which is 35 percent less than they do on desktops. Indeed, the study showed that mobile users were 11.5 times more likely to click on an ad&nbsp;than to share content via their mobiles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The study also revealed that if you want to implement social sharing as part of your marketing campaign, Facebook is the leading network to target. To have the best possible chance of success, in addition to including a share icon that\u2019s been optimized for mobile, you should include a CTA asking your users to share the information, and possibly even offer some kind of incentive.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/04\/best-practices-mobile-navigation-icons.jpg\" alt=\"7 Best Practices for Designing Mobile Navigation. a person uses a tablet\" class=\"wp-image-16673\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">6. Keep Promotions to a Minimum<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">As mentioned in the above survey, mobile users are much more likely to click on an ad than to share information from their mobile devices. But that doesn\u2019t mean you should litter your mobile website with ads.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On the contrary, with real estate at a premium on mobile screens, cluttering up the screen with ads is a surefire way to ensure your visitors depart with a grimace. Promotions, whether your own or paid advertising on your site, can easily overwhelm even the best content and most important information on a screen, and make navigation tough for users. If you do want to include promotions and ads, be careful not to let them take over.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Make the Site Touch-Friendly<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, make sure the act of navigation is simple for your users by ensuring your mobile site is touch-friendly. Remember, instead of a precise mouse, users will be using their larger, somewhat clumsier, fingers for navigation. Your design should include plenty of white space, and your links should be both obvious and easy to tap with a finger \u2013 the target size is 44px by 44px.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In addition, avoid effects that don\u2019t translate well to mobile, such as hover effects, and try to avoid using pop-up messages\u2014they\u2019re irritating enough on a desktop, but can be especially cumbersome to navigate on a mobile site.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/04\/best-practices-mobile-navigation-touch-friendly.jpg\" alt=\"7 Best Practices for Designing Mobile Navigation. a person uses a smartphone\" class=\"wp-image-16676\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">There\u2019s little denying that mobile is big, and it\u2019s vitally important to all website owners. Ensure you know your clients\u2019 main aims, and design with precision and purpose, using a minimalist outlook and a mobile-first mentality. You don\u2019t want to overwhelm users with choices and distractions that could paralyze them and drive them away.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019re aiming for a seamless, intuitive navigation, to heighten visitors\u2019 user experience. With a top-notch user experience, the site will attract more visitors and make more conversions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To ensure that user experience is lightning fast and loads perfectly, check out WP Engine for a solid, fully managed <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress hosting<\/a> solution!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mobile usage is growing at an astronomical rate, and one thing is clear: ignore it and you\u2019ll lose visitors. Mobile users now outnumber those accessing the Internet via their desktops, but mobile users and desktop users are very different beasts. Mobile users are, well, mobile. Which means they\u2019re seeking instant gratification, whether that\u2019s to browse<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":147332,"template":"","resource-topic":[1396],"resource-role":[1397,896],"resource-type":[916],"class_list":["post-139684","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>7 Best Practices for Designing Mobile Navigation<\/title>\n<meta name=\"description\" content=\"Follow these seven best practices to make sure you&#039;re designing your site&#039;s navigation with mobile users in mind!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Best Practices for Designing Mobile Navigation\" \/>\n<meta property=\"og:description\" content=\"Follow these seven best practices to make sure you&#039;re designing your site&#039;s navigation with mobile users in mind!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-02T08:23:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/04\/7-mobile-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"7 Best Practices for Designing Mobile Navigation\" \/>\n<meta name=\"twitter:description\" content=\"Follow these seven best practices to make sure you&#039;re designing your site&#039;s navigation with mobile users in mind!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/04\/7-mobile-header.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/\",\"name\":\"7 Best Practices for Designing Mobile Navigation\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2016-04-19T16:30:02+00:00\",\"dateModified\":\"2024-01-02T08:23:28+00:00\",\"description\":\"Follow these seven best practices to make sure you're designing your site's navigation with mobile users in mind!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"7 Best Practices for Designing Mobile Navigation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"7 Best Practices for Designing Mobile Navigation","description":"Follow these seven best practices to make sure you're designing your site's navigation with mobile users in mind!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"7 Best Practices for Designing Mobile Navigation","og_description":"Follow these seven best practices to make sure you're designing your site's navigation with mobile users in mind!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-01-02T08:23:28+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/04\/7-mobile-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"7 Best Practices for Designing Mobile Navigation","twitter_description":"Follow these seven best practices to make sure you're designing your site's navigation with mobile users in mind!","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/04\/7-mobile-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/","name":"7 Best Practices for Designing Mobile Navigation","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2016-04-19T16:30:02+00:00","dateModified":"2024-01-02T08:23:28+00:00","description":"Follow these seven best practices to make sure you're designing your site's navigation with mobile users in mind!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/seven-best-practices-for-designing-mobile-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"7 Best Practices for Designing Mobile Navigation"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/04\/7-mobile-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/147332"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139684"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139684"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139684"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}