{"id":49134,"date":"2017-06-09T13:18:20","date_gmt":"2017-06-09T07:48:20","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=49134"},"modified":"2017-06-09T16:05:56","modified_gmt":"2017-06-09T10:35:56","slug":"ui-patterns-navigation-part-1","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/ui-patterns-navigation-part-1\/","title":{"rendered":"UI Patterns: Navigation (Part 1)"},"content":{"rendered":"

A design pattern is a formal way of documenting a solution to a common design problem. The idea was introduced by an architect Christopher Alexander<\/strong> for use in urban planning and building architecture. This has been adapted for various other disciplines, including teaching and pedagogy, development organization<\/a> and process, as well as for software architecture and design.<\/span><\/p>\n

It can be defined in another way. Design patterns are the best practices used by experienced design professionals which allow providing a solution to give design problems.<\/span><\/p>\n

Usage of Design Patterns<\/strong><\/span>
\nDesign Patterns have two major usages:<\/span><\/p>\n

    \n
  1. A common platform for developers-\u00a0<\/strong>Design patterns provides a standard terminology in a specific scenario. For example, Tab explains that user can switch between sections being on the same level. That means switching between the tab will allow the user to explore contents available at the same level without moving ahead in the hierarchy.\n

    <\/span><\/li>\n

  2. Best Practices-<\/strong> Design patterns has been evolving over a period of time using research, by capturing user\u2019s behavior by a different industry expert. It provides the best possible solution to a certain problem during software product development<\/a>. It also allows creating\u00a0a\u00a0re-usable component<\/strong> to ease out the development.<\/span><\/li>\n<\/ol>\n

    There are mainly four types of UI Design Patterns, as Jared Spool<\/strong> describes in the book \u201cAnatomy of Design Decision<\/a>\u201d-<\/span><\/p>\n

      \n
    1. Input & output \u2013<\/strong> These patterns deal with how the users interact with a system and how the system respond. These can further be divided into various categories:<\/span>
      \n \"Untitled-1\"<\/span><\/li>\n
    2. Navigation \u2013<\/strong> These will help the users to the sites and application. It helps to ensure that the users are properly oriented and how to find their way if lost. Going further these can be divided into following types:<\/span>
      \n \"2\"<\/span><\/li>\n
    3. Content Structuring \u2013 <\/strong>Content is the King. Content is one of the most valuable assets of your website\/application. Users visit your website\/application because they are looking for some solution and it should be your main goal to provide them with the information\/solution they are looking for. Following are few patterns to achieve the same:<\/span>
      \n \"3\"<\/span><\/li>\n
    4. Social Media \u2013\u00a0<\/strong>It helps the users to associate and communicate with other people online. The user wants to get an overview of recent actions in a system that are interesting from his or her perspective. It helps to increase the social engagement<\/a>. Below mentioned are few patterns achieving same:<\/span>
      \n \"4\"<\/span><\/li>\n<\/ol>\n

      In this blog, we will be exploring different navigation patterns.<\/span><\/p>\n

      In order to understand why and when to use which navigation pattern, let’s understand the possibilities. Below are the quick examples of different navigation patterns:<\/span><\/p>\n

      Tab<\/strong><\/span>
      \nIf you have limited section in your application and\/or website, Tab becomes one of the options. It allows users to quickly switch between sections while having all options available at once. However, the art is knowing how to contain multiple features with limited Tabs.<\/span><\/p>\n

      Tabs are the simplest navigation pattern. However, there are few things which should be considered while designing a tab:<\/span><\/p>\n