{"id":20088,"date":"2021-02-26T13:07:20","date_gmt":"2021-02-26T13:07:20","guid":{"rendered":"https:\/\/www.digitalpedant.com\/?p=20088"},"modified":"2022-06-24T07:50:05","modified_gmt":"2022-06-24T07:50:05","slug":"mobile-navigation","status":"publish","type":"post","link":"https:\/\/www.digitalpedant.com\/mobile-navigation\/","title":{"rendered":"Mobile App Navigation: A Comprehensive Guide"},"content":{"rendered":"\n<p>The navigation in an app serves as its backbone, and it must be seamless and intuitive. The importance of navigation in how users interact with and use your products cannot be overstated.<\/p>\n\n\n\n<p>In a nutshell, navigation allows users to move around a website or app.<\/p>\n\n\n\n<p>Navigation design is the process of creating, analysing, and implementing pathways for users to navigate through your website or app.<\/p>\n\n\n\n<p>The goal of mobile navigation design is to get users to where they want to go with as little friction as possible. The designers can implement suitable tools to craft a whole navigation system in their mobile app, but app prototyping is one of the best tools.<\/p>\n\n\n\n<p>This guide will cover navigation, navigation types, mobile navigation, best practises, and much more.<\/p>\n\n\n\n<p>Let us first go over the definition of navigation in depth.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#What_Exactly_Is_Navigation\" title=\"What Exactly Is Navigation?\">What Exactly Is Navigation?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#Different_Types_of_Navigation\" title=\"Different Types of Navigation\">Different Types of Navigation<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#Navigational_Directions\" title=\"Navigational Directions\">Navigational Directions<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#Lateral_Navigation\" title=\"Lateral Navigation\">Lateral Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#Forward_Navigation\" title=\"Forward Navigation\">Forward Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#Reverse_Navigation\" title=\"Reverse Navigation\">Reverse Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#Navigation_in_Reverse_Chronology\" title=\"Navigation in Reverse Chronology\">Navigation in Reverse Chronology<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#Upward_Reverse_Navigation\" title=\"Upward Reverse Navigation\">Upward Reverse Navigation<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#What_Exactly_Is_Mobile_Navigation\" title=\"What Exactly Is Mobile Navigation?\">What Exactly Is Mobile Navigation?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#Mobile_Navigation_Best_Practices\" title=\"Mobile Navigation Best Practices\">Mobile Navigation Best Practices<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#1_The_navigation_must_be_simple_and_intuitive\" title=\"1. The navigation must be simple and intuitive\">1. The navigation must be simple and intuitive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#2_Consider_finger_and_hand_positioning\" title=\"2. Consider finger and hand positioning\">2. Consider finger and hand positioning<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#3_The_content_must_be_readable\" title=\"3. The content must be readable\">3. The content must be readable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#4_Avoid_messes_and_think_about_visual_hierarchy\" title=\"4. Avoid messes and think about visual hierarchy\">4. Avoid messes and think about visual hierarchy<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#Eight_User_Interface_Components_for_Navigation_In_Mobile_Apps\" title=\"Eight User Interface Components for Navigation In Mobile Apps\">Eight User Interface Components for Navigation In Mobile Apps<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#1_Hamburgers_Menu\" title=\"1. Hamburgers Menu\">1. Hamburgers Menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#2_Bottom_Navigation\" title=\"2. Bottom Navigation\">2. Bottom Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#3_Top_Navigation\" title=\"3. Top Navigation\">3. Top Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#4_Cards_for_Navigation\" title=\"4. Cards for Navigation\">4. Cards for Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#5_Tabs\" title=\"5. Tabs\">5. Tabs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#6_Gesture-Assisted_Navigation\" title=\"6. Gesture-Assisted Navigation\">6. Gesture-Assisted Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#7_Full_Screen_Navigation\" title=\"7. Full Screen Navigation\">7. Full Screen Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#8_3D_Touch\" title=\"8. 3D Touch\">8. 3D Touch<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#What_Are_Navigation_Transitions\" title=\"What Are Navigation Transitions?\">What Are Navigation Transitions?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#1_Hierarchical_Transitions\" title=\"1. Hierarchical Transitions\">1. Hierarchical Transitions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#2_Peers_Transitions\" title=\"2. Peers Transitions\">2. Peers Transitions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#3_Flat_Navigation\" title=\"3. Flat Navigation\">3. Flat Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#4_Experience-Driven_or_Content-Driven_Navigation\" title=\"4. Experience-Driven or Content-Driven Navigation\">4. Experience-Driven or Content-Driven Navigation<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"what-exactly-is-navigation\"><span class=\"ez-toc-section\" id=\"What_Exactly_Is_Navigation\"><\/span>What Exactly Is Navigation?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The interaction that allows users to navigate into, across, and back from various content pieces within a website or application is referred to as navigation. By adhering to a set of principles, the navigation components ensure that users have a predictable and consistent experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"different-types-of-navigation\"><span class=\"ez-toc-section\" id=\"Different_Types_of_Navigation\"><\/span>Different Types of Navigation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/navigation-types-1024x512.png\" alt=\"navigation types\" class=\"wp-image-20096\" srcset=\"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/navigation-types-1024x512.png 1024w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/navigation-types-300x150.png 300w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/navigation-types-768x384.png 768w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/navigation-types.png 1064w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Image Source: <a href=\"https:\/\/material.io\/design\/navigation\/understanding-navigation.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Material.io<\/a><\/figcaption><\/figure>\n\n\n\n<p>The act of moving between the screens of an app to complete tasks is referred to as navigation. To enable it, one can use a variety of methods, such as incorporating navigation behaviour into content, dedicated navigation components, and platform accordances.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"navigational-directions\"><span class=\"ez-toc-section\" id=\"Navigational_Directions\"><\/span>Navigational Directions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Because users can move in three directions, there are four different types of navigation; let&#8217;s take a look at them:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"lateral-navigation\"><span class=\"ez-toc-section\" id=\"Lateral_Navigation\"><\/span>Lateral Navigation<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Lateral navigation occurs when we move between screens on the same level of the hierarchy. It enables access to different app features and destinations, as well as pivoting between relevant items in a set.<\/p>\n\n\n\n<p>The primary navigation component of an app should provide access to all destinations at the top level of the hierarchy. Apps that contain two or more top-level destinations can provide lateral navigation via a tab, bottom navigation bar, and navigation drawer.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"forward-navigation\"><span class=\"ez-toc-section\" id=\"Forward_Navigation\"><\/span>Forward Navigation<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>When you move between screens at successive levels of a hierarchy, steps across an app, or in a flow. This type of navigation incorporates navigation behaviour into containers (such as lists, cards, or images), links, buttons, or by using search. One of the three types of movement between screens to complete a task is forward navigation:<\/p>\n\n\n\n<ul><li>Directly from one screen in an app to another, such as from the home screen to a screen deep in the app&#8217;s hierarchy.<\/li><li>Through an ordered sequence on a screen or a flow, such as a checkout process.<\/li><li>To access deeper content in an app&#8217;s hierarchy, download from higher-level (a parent screen) to lower-level (a child screen).<\/li><\/ul>\n\n\n\n<p>You can use the following to implement forward navigation:<\/p>\n\n\n\n<ul><li>Buttons that navigate you to a different screen.<\/li><li>Internal links within the content<\/li><li>Lists, cards, and image lists are examples of content containers.<\/li><li>Search within the app on one or more screens.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/button-navigation-1-1024x768.png\" alt=\"button navigation \" class=\"wp-image-20099\" width=\"800\" height=\"600\" srcset=\"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/button-navigation-1-1024x768.png 1024w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/button-navigation-1-300x225.png 300w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/button-navigation-1-768x576.png 768w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/button-navigation-1.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Image Source: <a href=\"https:\/\/dribbble.com\/shots\/16559097-Button-Bar-Navigation\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Dribble<\/a><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"reverse-navigation\"><span class=\"ez-toc-section\" id=\"Reverse_Navigation\"><\/span>Reverse Navigation<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>When a user navigates backward through screens within a single app, either hierarchically or chronologically.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"navigation-in-reverse-chronology\"><span class=\"ez-toc-section\" id=\"Navigation_in_Reverse_Chronology\"><\/span>Navigation in Reverse Chronology<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Reverse chronological navigation occurs when you navigate in reverse order through your recently viewed screens&#8217; history. It can transfer users between apps or between screens within an app.<\/p>\n\n\n\n<p>The Back button, for example, is a type of reverse chronological navigation on a web browser.<\/p>\n\n\n\n<p>Such navigation is provided by the operating system or platform, and the individual platforms explain how it works and how users can use it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"upward-reverse-navigation\"><span class=\"ez-toc-section\" id=\"Upward_Reverse_Navigation\"><\/span>Upward Reverse Navigation<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>This type of navigation allows users to navigate one level up within an app&#8217;s hierarchy until they reach the app&#8217;s top-level or home screen.<\/p>\n\n\n\n<p>The Up arrow, for example, is a type of upwards reverse navigation in a top app bar.<\/p>\n\n\n\n<p>Furthermore, upward navigation for all app child screens must be implemented while adhering to platform guidance. The Material Up action is required for web and Android apps, while the back button within an iOS Navigation Bar is required for iOS apps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-exactly-is-mobile-navigation\"><span class=\"ez-toc-section\" id=\"What_Exactly_Is_Mobile_Navigation\"><\/span>What Exactly Is Mobile Navigation?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There are several ways to describe navigation in mobile apps.<\/p>\n\n\n\n<p>Navigation refers to the path that users take to get from point A to point B. It will describe how users will discover and interact with your design.<\/p>\n\n\n\n<p>Navigation, according to writers and designers, is like a road system that users follow to use the product.<\/p>\n\n\n\n<p>Good mobile navigation will improve your product&#8217;s usability, allowing users to take advantage of all of its features.<\/p>\n\n\n\n<p>Users will not be able to interact with your product as expected if the navigation is poor.<\/p>\n\n\n\n<p>In this way, such a feature can make or break a mobile application. That is why navigation design is so important.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"mobile-navigation-best-practices\"><span class=\"ez-toc-section\" id=\"Mobile_Navigation_Best_Practices\"><\/span>Mobile Navigation Best Practices<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, let&#8217;s go over some of the best mobile navigation practises for making it simple for users to interact with and use your product quickly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-the-navigation-must-be-simple-and-intuitive\"><span class=\"ez-toc-section\" id=\"1_The_navigation_must_be_simple_and_intuitive\"><\/span>1. The navigation must be simple and intuitive<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Of course, all types of navigation should be simple and easy to use. Because everything appears to be more noticeable on a mobile device due to increased interaction and reduced space, any mistake in the app&#8217;s navigation can have a greater impact on the experience than a web-based app. To make navigation appear intuitive to your target users, you must conduct extensive research and testing.<\/p>\n\n\n\n<p>Your app&#8217;s navigation should be intuitive for your users. It should conform to user expectations and remove friction from navigation patterns.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-consider-finger-and-hand-positioning\"><span class=\"ez-toc-section\" id=\"2_Consider_finger_and_hand_positioning\"><\/span>2. Consider finger and hand positioning<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>This is critical for mobile apps because not every user&#8217;s finger is thin, but each should find it easy and comfortable to use. Nobody wants to waste time repeatedly tapping an icon and failing to get anywhere. It would be distracting and frustrating, potentially jeopardising the design team&#8217;s intended user experience.<\/p>\n\n\n\n<p>So, to make it easier for users to tap successfully on the first try, include large enough buttons and links. A button with a diameter of at least 100mm is usually recommended.<\/p>\n\n\n\n<p>Another thing to think about is the spacing between the elements that support app navigation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-the-content-must-be-readable\"><span class=\"ez-toc-section\" id=\"3_The_content_must_be_readable\"><\/span>3. The content must be readable<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Mobile screens are obviously much smaller than those of any other device, such as a computer or laptop. This makes the app&#8217;s content difficult to read. Many apps, even those that rely on icons, use text-based navigation.<\/p>\n\n\n\n<p>You can&#8217;t let your users struggle while reading anything, whether it&#8217;s the actual content or button or link text. Size is extremely important in mobile navigation. Take your time prototyping the navigation, testing it, and observing how users interact with it.<\/p>\n\n\n\n<p>Consider a prototyping tool that allows realistic navigation simulation and can work with user testing platforms of your choice.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-avoid-messes-and-think-about-visual-hierarchy\"><span class=\"ez-toc-section\" id=\"4_Avoid_messes_and_think_about_visual_hierarchy\"><\/span>4. Avoid messes and think about visual hierarchy<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Small screens easily lead to a shambles. As a result, your app design must avoid anything that is detrimental to the user experience. Minimalism is a type of user interface design. Even if you use fewer elements, users may find it difficult if a visual balance is not maintained.<\/p>\n\n\n\n<p>The UI layout, content, and navigation must all work together to allow your users to interact with your app seamlessly. As a result, your content should follow a certain hierarchy, analysing the space between elements and leaving plenty of room for visual relief.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"eight-user-interface-components-for-navigation-in-mobile-apps\"><span class=\"ez-toc-section\" id=\"Eight_User_Interface_Components_for_Navigation_In_Mobile_Apps\"><\/span>Eight User Interface Components for Navigation In Mobile Apps<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, we will review some UI components for mobile navigation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-hamburgers-menu\"><span class=\"ez-toc-section\" id=\"1_Hamburgers_Menu\"><\/span>1. Hamburgers Menu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/hamburger-menu-1024x768.png\" alt=\"hamburger menu\" class=\"wp-image-20101\" srcset=\"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/hamburger-menu-1024x768.png 1024w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/hamburger-menu-300x225.png 300w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/hamburger-menu-768x576.png 768w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/hamburger-menu.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Image Source: <a href=\"https:\/\/dribbble.com\/shots\/14880132-There-are-other-delicious-foods-rather-than-the-Hamburger-icon\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Dribble<\/a><\/figcaption><\/figure>\n\n\n\n<p>The hamburger menu is not well-known; some designers like to think about it, while others don&#8217;t.<\/p>\n\n\n\n<p>Whatever your thoughts are, let me assure you that the three small horizontal lines in the app&#8217;s corner can be useful. It&#8217;s one of the most effective methods for hiding complex navigation so that users can enjoy more screen space.<\/p>\n\n\n\n<p>According to some designers, the hamburger menu obscures navigation options, which may negatively impact user experience. It makes it difficult for users to find products at first glance. While some people find it simple to incorporate it into their app design by using a suitable colour scheme that ensures a contrast between the background and the icon.<\/p>\n\n\n\n<p>The Hamburger menu&#8217;s best feature is that it can hold a large number of navigation options while freeing up screen space by shifting the options off the screen into a side menu. However, it reduces the discoverability of the options and may conflict with platform navigation rules, particularly in iOS. It may cause the navigation bar to become clogged.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-bottom-navigation\"><span class=\"ez-toc-section\" id=\"2_Bottom_Navigation\"><\/span>2. Bottom Navigation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop src=\"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/bottom-navigation.mp4\"><\/video><\/figure>\n\n\n\n<p>Bottom navigation is a navigation bar that collects primary and secondary navigation links. This navigation is well-known for mobile apps because it allows users to navigate with their thumb while holding their device. It requires less strain and reduces the need to change the way a device is held, which improves the product&#8217;s usability.<\/p>\n\n\n\n<p>Most bottom navigation bars include three to five quick-access destinations. Furthermore, with a single tap, you can navigate to specific design destinations with less effort.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-top-navigation\"><span class=\"ez-toc-section\" id=\"3_Top_Navigation\"><\/span>3. Top Navigation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The top navigation is identical to the bottom navigation with the exception of location. The former is at the top of the screen. It, like the bottom navigation, makes it easier to use products while grasping mobile devices. The larger phones necessitate a change in mobile grasping position or the use of two hands to reach every link included.<\/p>\n\n\n\n<p>Top navigation is typically used in conjunction with other modes of navigation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-cards-for-navigation\"><span class=\"ez-toc-section\" id=\"4_Cards_for_Navigation\"><\/span>4. Cards for Navigation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/cards-navigation-1-1024x768.png\" alt=\"cards navigation\" class=\"wp-image-20109\" srcset=\"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/cards-navigation-1-1024x768.png 1024w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/cards-navigation-1-300x225.png 300w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/cards-navigation-1-768x576.png 768w, https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/cards-navigation-1.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>A fantastic design pattern, UI cards come in a variety of shapes and sizes and are the best way to display multiple elements, such as a link, text, or a photo, in one place. UI cards have become more personalised in recent years. They are widely regarded as an excellent method of assembling disparate pieces of information into a single location.<\/p>\n\n\n\n<p>You can also customise the cards to display different types of content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-tabs\"><span class=\"ez-toc-section\" id=\"5_Tabs\"><\/span>5. Tabs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>When it comes to UI patterns, tabs aren&#8217;t all that different from navigation bars. A tab is a row that contains various options for accessing different screens while maintaining the same layout.<\/p>\n\n\n\n<p>This pattern was inspired by desktop design. It typically includes a small number of destinations that are of similar importance and require direct access to anywhere in an app.<\/p>\n\n\n\n<p>In a navigation bar, for example, there may be a home button, followed by a search function or a favourites button.<\/p>\n\n\n\n<p>You can use tabs to switch between different views within the same context.<\/p>\n\n\n\n<p>For example, if you have a stab system for an email platform, the first tab will show &#8220;primary&#8221; senders from your contact list, while the second will show other senders who are new to you.<\/p>\n\n\n\n<p>The tab bar facilitates communication in the user&#8217;s current location. It allows users to see their current location at a glance. However, one disadvantage of the tab bar is that it can only hold a limited number of options. If you try to include more, the touch-target size will become difficult to maintain.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-gesture-assisted-navigation\"><span class=\"ez-toc-section\" id=\"6_Gesture-Assisted_Navigation\"><\/span>6. Gesture-Assisted Navigation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Users can use such navigation to quickly swipe in the direction they want to navigate through an app or perform a specific action. It has been used as a UI navigation pattern for over a decade, but it has gained popularity primarily among the top dating app users.<\/p>\n\n\n\n<p>You can use it to swipe and tap or touch and drag horizontally and vertically, as well as zoom in and out. This way, you&#8217;ll be able to create a dynamic, interactive, and immersive experience.<\/p>\n\n\n\n<p>The best part about this UI design pattern is that it is simple to use even for inexperienced users because the gestures are intuitive and only require a little experimentation to find the correct navigation.<\/p>\n\n\n\n<p>This pattern works best when users need to easily and intuitively explore the information of specific content. Despite navigation menus, users will be able to spend more time with their content.<\/p>\n\n\n\n<p>Such gestures make the user interface more natural, reducing UI clutter. But, at the same time, it makes navigation invisible and forces users to work harder to learn that specific gesture. As a result, you must teach people how to use the gesture so that they can easily interact with your app&#8217;s user interface.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-full-screen-navigation\"><span class=\"ez-toc-section\" id=\"7_Full_Screen_Navigation\"><\/span>7. Full Screen Navigation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>This navigation pattern makes better use of available space. It is sometimes referred to as a navigation hub because it takes users from a broad section of the product to very specific ones.<\/p>\n\n\n\n<p>Various navigations can appear to be overwhelming at times. Some designers dedicate the entire screen to the app&#8217;s navigation, relying on visual hierarchy to keep users from becoming overwhelmed.<\/p>\n\n\n\n<p>When you click on an image of a product, for example, in various shopping apps, it opens up that specific one using the entire screen space to provide a clear view of that product.<\/p>\n\n\n\n<p>It&#8217;s the best way to provide a variety of navigation options that help users understand your product&#8217;s features quickly and easily.<\/p>\n\n\n\n<p>Such patterns achieve simplicity, allowing you to organise large amounts of information in a systematic manner and display information clearly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-3d-touch\"><span class=\"ez-toc-section\" id=\"8_3D_Touch\"><\/span>8. 3D Touch<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The final method of mobile navigation is 3D touch. Apple was the first to publicise this practise of providing direct options from the iPhone&#8217;s home screen. This allows you to create a navigation shortcut that displays the key actions for the selected app.<\/p>\n\n\n\n<p>This mobile navigation can be used to preview content. This may be a better way to provide a content preview to the user while dealing with multiple content options, such as a list of articles or an email inbox. Before even viewing the full content, you can perform relevant actions within an app.<\/p>\n\n\n\n<p>In other words, applying a small amount of force to the mobile&#8217;s touch screen activates various functions. Users can use 3D touch to perform actions while they are away from the screens they are currently using.<\/p>\n\n\n\n<p>You should keep in mind that 3D touch should not be the only way to access the main features. Mobile navigation must provide a clear path for users to catch up with primary features without accidentally discovering the 3D touch option.<\/p>\n\n\n\n<p>This saves users a significant amount of time by eliminating the need for multiple taps within an app. Furthermore, this mobile navigation pattern makes interaction light and quick.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-navigation-transitions\"><span class=\"ez-toc-section\" id=\"What_Are_Navigation_Transitions\"><\/span>What Are Navigation Transitions?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When users move between screens, navigation transitions occur, such as when we move from a home screen to a detailed screen. It moves users from one screen to another within an app by using motion. They represent the app&#8217;s hierarchy by demonstrating how elements are related to one another.<\/p>\n\n\n\n<p>When an element, for example, expands to fill the entire screen, this act of expression reveals that the second\/new screen is a child element, while the old one, from which the new screen emerged, is its parent element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-hierarchical-transitions\"><span class=\"ez-toc-section\" id=\"1_Hierarchical_Transitions\"><\/span>1. Hierarchical Transitions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>When users move one level up or down in an app, this is referred to as a hierarchical transaction. A parent and child link is maintained by screens on adjacent levels. The parent maintains a higher position in the hierarchy than its child.<\/p>\n\n\n\n<p>Let&#8217;s get more specific!<\/p>\n\n\n\n<p>On touch, an embedded child element appears from a parent screen and expands in that location via a container transform transition pattern.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-peers-transitions\"><span class=\"ez-toc-section\" id=\"2_Peers_Transitions\"><\/span>2. Peers Transitions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>It occurs between screens at the same hierarchical level.<\/p>\n\n\n\n<p>Sibling transitions are also included in this category, as they occur between peers of the same parent. Top-level peer transitions aid in the transition between primary destinations.<\/p>\n\n\n\n<p>The peer screen slides come from one side and slide in, while its sibling moves away from the screen in the opposite direction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-flat-navigation\"><span class=\"ez-toc-section\" id=\"3_Flat_Navigation\"><\/span>3. Flat Navigation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>It&#8217;s flat navigation when we switch between content categories. Music and App Stores are the most common users of this type of navigation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-experience-driven-or-content-driven-navigation\"><span class=\"ez-toc-section\" id=\"4_Experience-Driven_or_Content-Driven_Navigation\"><\/span>4. Experience-Driven or Content-Driven Navigation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Content-driven navigation occurs when you can freely move through content or when content defines navigation. It is used in books, games, and other immersive applications. Some apps combine different navigation styles.<\/p>\n\n\n\n<p>For example, a flat navigation application may choose to implement hierarchical navigation within each category.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The user interface (UI) is a powerful tool for any mobile app to deliver an important and expected message to end users. So, by having an eye-catching and effective UI design, your customers will be confident that your products are the best and will assist them in completing their tasks.<\/p>\n\n\n\n<p>It makes for a better mobile navigation design when you use a limited app space to meet users&#8217; high usability expectations.<\/p>\n\n\n\n<p>You must consider both returning and new users and make it easier for them to navigate your app. The more user-friendly your app is, the more likely it will be used.<\/p>\n\n\n\n<p>I hope you found this post useful and helpful in developing a navigation system that will keep your users satisfied in terms of usability the entire time.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":20094,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mobile App Navigation: A Comprehensive Guide<\/title>\n<meta name=\"description\" content=\"Find out all about mobile navigation types, different aspects and how improving navigational experience can improve user experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile App Navigation: A Comprehensive Guide\" \/>\n<meta property=\"og:description\" content=\"Find out all about mobile navigation types, different aspects and how improving navigational experience can improve user experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalpedant.com\/mobile-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Pedant\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-26T13:07:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-24T07:50:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/mobile-navigation.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/mobile-navigation.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mobile App Navigation: A Comprehensive Guide","description":"Find out all about mobile navigation types, different aspects and how improving navigational experience can improve user experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.digitalpedant.com\/mobile-navigation\/","og_locale":"en_US","og_type":"article","og_title":"Mobile App Navigation: A Comprehensive Guide","og_description":"Find out all about mobile navigation types, different aspects and how improving navigational experience can improve user experience.","og_url":"https:\/\/www.digitalpedant.com\/mobile-navigation\/","og_site_name":"Digital Pedant","article_published_time":"2021-02-26T13:07:20+00:00","article_modified_time":"2022-06-24T07:50:05+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/mobile-navigation.jpg","type":"image\/jpeg"}],"author":"Mat","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/mobile-navigation.jpg","twitter_misc":{"Written by":"Mat","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digitalpedant.com\/mobile-navigation\/#article","isPartOf":{"@id":"https:\/\/www.digitalpedant.com\/mobile-navigation\/"},"author":{"name":"Mat","@id":"https:\/\/www.digitalpedant.com\/#\/schema\/person\/64f81d6c2430dbe293a9030968b0de1b"},"headline":"Mobile App Navigation: A Comprehensive Guide","datePublished":"2021-02-26T13:07:20+00:00","dateModified":"2022-06-24T07:50:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalpedant.com\/mobile-navigation\/"},"wordCount":2802,"commentCount":0,"publisher":{"@id":"https:\/\/www.digitalpedant.com\/#organization"},"image":{"@id":"https:\/\/www.digitalpedant.com\/mobile-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/mobile-navigation.jpg","articleSection":["Everything Marketing Related"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.digitalpedant.com\/mobile-navigation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.digitalpedant.com\/mobile-navigation\/","url":"https:\/\/www.digitalpedant.com\/mobile-navigation\/","name":"Mobile App Navigation: A Comprehensive Guide","isPartOf":{"@id":"https:\/\/www.digitalpedant.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.digitalpedant.com\/mobile-navigation\/#primaryimage"},"image":{"@id":"https:\/\/www.digitalpedant.com\/mobile-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/mobile-navigation.jpg","datePublished":"2021-02-26T13:07:20+00:00","dateModified":"2022-06-24T07:50:05+00:00","description":"Find out all about mobile navigation types, different aspects and how improving navigational experience can improve user experience.","breadcrumb":{"@id":"https:\/\/www.digitalpedant.com\/mobile-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalpedant.com\/mobile-navigation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitalpedant.com\/mobile-navigation\/#primaryimage","url":"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/mobile-navigation.jpg","contentUrl":"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2022\/02\/mobile-navigation.jpg","width":600,"height":400,"caption":"mobile navigation"},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalpedant.com\/mobile-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.digitalpedant.com\/"},{"@type":"ListItem","position":2,"name":"Mobile App Navigation: A Comprehensive Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.digitalpedant.com\/#website","url":"https:\/\/www.digitalpedant.com\/","name":"Digital Pedant","description":"","publisher":{"@id":"https:\/\/www.digitalpedant.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.digitalpedant.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.digitalpedant.com\/#organization","name":"Digital Pedant","url":"https:\/\/www.digitalpedant.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitalpedant.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2020\/12\/digital-pedant-logo.png","contentUrl":"https:\/\/www.digitalpedant.com\/wp-content\/uploads\/2020\/12\/digital-pedant-logo.png","width":500,"height":500,"caption":"Digital Pedant"},"image":{"@id":"https:\/\/www.digitalpedant.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.digitalpedant.com\/#\/schema\/person\/64f81d6c2430dbe293a9030968b0de1b","name":"Mat","description":"Digital Marketer working in this industry since 2012 and still learning.","sameAs":["https:\/\/www.digitalpedant.com\/","digitalpedant_0rqtvhnk"]}]}},"_links":{"self":[{"href":"https:\/\/www.digitalpedant.com\/wp-json\/wp\/v2\/posts\/20088"}],"collection":[{"href":"https:\/\/www.digitalpedant.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digitalpedant.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digitalpedant.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digitalpedant.com\/wp-json\/wp\/v2\/comments?post=20088"}],"version-history":[{"count":7,"href":"https:\/\/www.digitalpedant.com\/wp-json\/wp\/v2\/posts\/20088\/revisions"}],"predecessor-version":[{"id":20110,"href":"https:\/\/www.digitalpedant.com\/wp-json\/wp\/v2\/posts\/20088\/revisions\/20110"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.digitalpedant.com\/wp-json\/wp\/v2\/media\/20094"}],"wp:attachment":[{"href":"https:\/\/www.digitalpedant.com\/wp-json\/wp\/v2\/media?parent=20088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalpedant.com\/wp-json\/wp\/v2\/categories?post=20088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalpedant.com\/wp-json\/wp\/v2\/tags?post=20088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}