Intro to Navigation Design in Complex Websites (#151)

Topics/User_Experience/Intro to navigation design in complex websites.md

@@ -0,0 +1,72 @@
+## What is Navigation Design ?
+Navigation Design, also referred to as Menu Design, helps users to easily move through the pages of your website or web app. It utilizes design techniques to allow ease of navigation and provide the user with a better user experience. 
+
+
+## Good vs Bad Navigation Design 
+Good navigation design allows the user to easily find relevant information and easy to use. On the other hand, bad navigation design can overwhelm the user and make finding important content difficult.  As a result,  it is important to keep the user in mind when designing the navigation of a website or web app. This is especially important for complex websites with a multitude of pages. In fact, reasoning about how the user can navigate through the many pages of a website and efficiently within a large page can help lay the foundation to good navigation design. 
+
+Consider using the following steps to start thinking of good navigation design  : 
+
+1. Layout all the pages on your website
+    * This can be done on paper or through a design tool such as [Figma](https://www.figma.com/)
+
+2.  Find relevant ways a user may navigate through those pages 
+     * For example, home page → sign in → home page
+     * Additionally, consider using prototyping or wireframing to give yourself a clearer picture on how the user may navigate through your website
+
+3. Determine which pages the user may need to reference most often
+    * For example, a user may navigate to the home page / landing page on many occasions
+
+4. Consider using some of the following to create good navigation design  :  
+    * Navbars
+        * Usually at the top of a landing page / home page. These contain links to the website's main pages
+    * Side menus
+        * Usually located at the side of the page and contains links to relevant pages on the website 
+    * Tabbed menus
+        * Organizes information into different tabs, where each tab contains information relevant to that tab only
+    * Footers 
+        * Usually at the bottom of a page. It can contain links to all relevant pages on the website as well as contact information
+
+5. Consider how the user may navigate through the content on a single page
+   * Sub-navbars can be utilized
+        * Located below a normal Navbar and  consists of links that are relevant to the specific page that the user is on 
+    *  If there is searchable / filterable content on this page, consider using icons that are easily identifiable by the user as  search (magnifying glass) or filter
+
+* Please see the link below for more navigation design patterns:
+    * [Navigation Design Patterns](https://ui-patterns.com/patterns/navigation/list)
+
+
+## Advantages of Good Navigation Design for Complex Websites  
+
+* Good navigation design allows a clear or intuitive path for users to navigate through the web app / website  
+    * For example, an easy/ clear path through a website to specific content, may encourage users to use your product.
+* Increases usability 
+    * Allows users to easily find content in a timely manner. 
+* Can increases user satisfaction 
+    * Users are less likely to become frustrated navigating a website or web app if there is a clear navigation system.  
+
+
+
+## Key Things to Consider for Navigation Design of Complex Websites 
+* Accessibility 
+    * Additional tips on designing accessible menus/ navigation.
+        * [Click Here](https://www.w3.org/WAI/tutorials/menus/)
+* Important links should be kept in navigation menus / nav bars
+* Different screen sizes may require varying navigation designs 
+    * For example, desktops  with navbars vs mobile devices with sidebar menus 
+* Is it easy to navigate through the main pages of my website ?
+    * A good way to determine this, is to run through your website before project completion. Navigate the website as a user while looking for any pitfalls that users may notice but you did not as a developer. 
+
+
+## Summary  
+When designing a website or web app, it is important to consider how a user will navigate through the website’s many pages. Complex websites are especially hard to navigate with poorly designed navigation systems. To ensure that the user has a great experience, it is important to consider the key points above and their advantages. 
+
+
+## Resources 
+
+[https://www.uxtweak.com/ux-glossary/navigation-design/](https://www.uxtweak.com/ux-glossary/navigation-design/)
+
+[https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html](https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html)
+
+[https://www.w3.org/WAI/tutorials/menus/](https://www.w3.org/WAI/tutorials/menus/)
+