{"id":6357,"date":"2021-01-18T10:33:49","date_gmt":"2021-01-18T09:33:49","guid":{"rendered":"http:\/\/blog.bart.sk\/en\/?p=6357"},"modified":"2024-01-29T10:36:42","modified_gmt":"2024-01-29T09:36:42","slug":"3-basic-types-navigation-mobile-devices","status":"publish","type":"post","link":"https:\/\/blog.bart.sk\/en\/3-basic-types-navigation-mobile-devices\/","title":{"rendered":"3 basic types of navigation for mobile devices"},"content":{"rendered":"\n

Good navigation must be intuitive and easily predictable. Both old and new users should be able to navigate the application quickly and easily.<\/span><\/p>\n\n\n\n

As mobile devices are limited by screen size, creating clear navigation is often a challenge.<\/span><\/p>\n\n\n\n

Different types of navigation try to address this challenge in different ways, but they all have their pros and cons. Let’s outline <\/span>3 basic types of navigation<\/b> and describe their strengths and weaknesses.<\/span><\/p>\n\n\n\n

Hamburger menu<\/span><\/h1>\n\n\n\n

On small screens, every pixel is precious and exactly because this type of navigation helps save space, it’s one of the most popular types. The hamburger menu allows us to hide the navigation and show it only if the user needs it.<\/span><\/p>\n\n\n\n

This navigation can also be useful in case we want to direct users’ attention to the content.<\/span><\/p>\n\n\n

\n
\"\"\/<\/figure><\/div>\n\n\n

source: https:\/\/dribbble.com\/shots\/4418730-Mobile-menu-interaction<\/span><\/p>\n\n\n\n

Advantages<\/span><\/h2>\n\n\n\n
    \n
  • Quantity of items. <\/b>The main advantage of this navigation is that it can contain a large number of items.<\/li>\n\n\n\n
  • Clean design. <\/b>Thanks to the fact that the navigation is hidden, it helps us save space and the design looks cleaner.<\/span><\/li>\n<\/ul>\n\n\n\n

    Disadvantages<\/span><\/h2>\n\n\n\n
      \n
    • Hidden navigation is easier to overlook.<\/b> If navigation is hidden, users might use it less. Although this type of navigation is becoming standard and is not a problem for most people today, there are still those who don’t know that it’s necessary to click on the icon to display the navigation.<\/span><\/li>\n\n\n\n
    • At first glance, it is not clear where the user is located.<\/b> The user doesn’t get this information until he clicks on the icon that shows him the navigation.<\/span><\/li>\n\n\n\n
    • Extra click. <\/b>Requires at least two clicks. One click on the icon and the other on the target page.<\/li>\n<\/ul>\n\n\n\n

      Navigation bar<\/span><\/h1>\n\n\n\n

      This type of navigation is based on the design of a desktop. It usually contains relatively few items but it allows direct access from anywhere in the application.<\/span><\/p>\n\n\n

      \n
      \"\"\/<\/figure><\/div>\n\n\n

      source: https:\/\/dribbble.com\/shots\/4617611-Mobile-Navigation<\/span><\/p>\n\n\n\n

      Advantages<\/span><\/h2>\n\n\n\n
        \n
      • Informs me where I am within the application.<\/b> This navigation informs the user quite well about where they are currently located within the application.<\/span><\/li>\n\n\n\n
      • Just one click.<\/b> All navigation options are constantly displayed, therefore users have an overview of all the main parts of the application and they have access to them with a single click wherever they are.<\/li>\n<\/ul>\n\n\n\n

        Disadvantages<\/span><\/h2>\n\n\n\n
          \n
        • Limited number of items. <\/b>If your app contains more than 5 items, it’s difficult to display them while ensuring the optimal button size for a convenient click.<\/span><\/li>\n<\/ul>\n\n\n\n

          Gesture-controlled navigation<\/span><\/h1>\n\n\n\n

          Gestures help users navigate between views, perform actions and manipulate with content. Among other things, they make it simpler for users to move easily in the application and free the user interface from unnecessary buttons and navigation elements.<\/span><\/p>\n\n\n

          \n
          \"\"\/<\/figure><\/div>\n\n\n

          source: https:\/\/dribbble.com\/shots\/4264905-Music-Player-Interaction<\/span><\/p>\n\n\n\n

          Advantages<\/span><\/h2>\n\n\n\n
            \n
          • Design with emphasis on content.<\/b> Creating a gesture-based application will allow you to create a more minimalist user interface and thus gain space for more valuable content.<\/li>\n\n\n\n
          • Instinctive user interface.<\/b> Luke Wroblewski in his article provided information about a study in which 40 people from 9 different countries were asked to create gestures for 28 different tasks, such as delete, scroll, zoom, etc. It’s important to note that the gestures were similar across different cultures and user experiences. E.g. when prompted to ‘delete’, most respondents, regardless of the country they came from, tried to move the object off the screen.<\/span><\/li>\n<\/ul>\n\n\n\n

            Disadvantages<\/span><\/h2>\n\n\n\n
              \n
            • Invisible navigation. <\/b>As this type of navigation is not visible, usability issues may occur. Different interactions are hidden behind different gestures and users must find them first.<\/li>\n\n\n\n
            • Need to get acquainted with the application. <\/b>At the beginning, users need to make more effort to become familiar with the application.<\/span><\/li>\n<\/ul>\n\n\n\n

              Conclusion<\/span><\/h1>\n\n\n\n

              Think about your target audience and the goals they have when using your application and use navigation to help them achieve those goals. The easier it is to use the product, the more likely the users will come back to it again.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"Good navigation must be intuitive and easily predictable. Both old and new users should be able to navigate…","protected":false},"author":21,"featured_media":5347,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":""},"categories":[209],"tags":[214,215,212],"_links":{"self":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/6357"}],"collection":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/comments?post=6357"}],"version-history":[{"count":4,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/6357\/revisions"}],"predecessor-version":[{"id":7385,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/6357\/revisions\/7385"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media\/5347"}],"wp:attachment":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media?parent=6357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/categories?post=6357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/tags?post=6357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}