Difference between revisions of "Category:Navigation"

From perpendicular angel knowledgebase
Jump to navigation Jump to search
(Created page with "Navigation in web design refers to the act of designing a system by which the user can identify where they are in a site's hierarchy, what options are available for them to go...")
 
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[Category: Design]]
Navigation in web design refers to the act of designing a system by which the user can identify where they are in a site's hierarchy, what options are available for them to go to, and ideally where they've already been.
Navigation in web design refers to the act of designing a system by which the user can identify where they are in a site's hierarchy, what options are available for them to go to, and ideally where they've already been.


Line 5: Line 6:
* Global Navigation. The "global nav" is most frequently seen as a [menu|ux:Menus] bar across the top of a page with links to the homepage and other major silos of the site. It is accessible (with a few exceptions, like in-transaction pages) on every page in the site. 
* Global Navigation. The "global nav" is most frequently seen as a [menu|ux:Menus] bar across the top of a page with links to the homepage and other major silos of the site. It is accessible (with a few exceptions, like in-transaction pages) on every page in the site. 
* Local Navigation. Local navigation refers to being able to navigate within a silo of a site. While Branding and Global Navigation should be consistent across the site, different silos of a site should have a local navigation scheme that makes sense for that silo. There are a number of ways to express local navigation on the site. 
* Local Navigation. Local navigation refers to being able to navigate within a silo of a site. While Branding and Global Navigation should be consistent across the site, different silos of a site should have a local navigation scheme that makes sense for that silo. There are a number of ways to express local navigation on the site. 
** [[Tabs]] are local navigation (They can also be in-page navigation.)  
** [[Left navigation bars]] are local navigation. 
** [[Left navigation bars]] are local navigation. 
** A global navigation menu can have a sub navigation bar that provides high-level local navigation
** A global navigation menu can have a sub navigation bar that provides high-level local navigation
Line 11: Line 11:
** [[Menus]] can be used as local navigation.
** [[Menus]] can be used as local navigation.
* In-page navigation. In-page navigation refers to being able to move within a page to see information very tightly coupled contextually but which needs to be displayed in separate panels or fields. Examples of in-page navigation include"
* In-page navigation. In-page navigation refers to being able to move within a page to see information very tightly coupled contextually but which needs to be displayed in separate panels or fields. Examples of in-page navigation include"
** [[Tabs]] are in-page navigation if they don't take up the whole page or provide navigation for an entire silo. (The line is fuzzy.)
** [[Cards]]
** [[Cards]]
** [[Accordions]]
** [[Pagination]]
** [[Search]] (which is a specialized type of navigation)
** [[Search]] (which is a specialized type of navigation)



Latest revision as of 14:52, 1 June 2020

Navigation in web design refers to the act of designing a system by which the user can identify where they are in a site's hierarchy, what options are available for them to go to, and ideally where they've already been.

Navigation systems are generally broken up into three levels: 

  • Global Navigation. The "global nav" is most frequently seen as a [menu|ux:Menus] bar across the top of a page with links to the homepage and other major silos of the site. It is accessible (with a few exceptions, like in-transaction pages) on every page in the site. 
  • Local Navigation. Local navigation refers to being able to navigate within a silo of a site. While Branding and Global Navigation should be consistent across the site, different silos of a site should have a local navigation scheme that makes sense for that silo. There are a number of ways to express local navigation on the site. 
  • In-page navigation. In-page navigation refers to being able to move within a page to see information very tightly coupled contextually but which needs to be displayed in separate panels or fields. Examples of in-page navigation include"

Browse vs Search

When users are looking for information, they tend to either browse using the elements above or [ux:Search] using a search box. Which they do depends heavily on how much they know about a topic and what they're more comfortable with.

We'll write more about this topic at a later time, but suffice it to say for now that your audience is never 100% made up of browsers, nor 100% made up of searchers (regardless of your personal preferences) unless a website forces you to pick one or the other (looking at you, Google homepage).

More importantly, if you aren't Google, the Google homepage approach probably isn't for you. Never assume the user's choice is always going to be the search box.

Browse vs Search resources

Additional resources

  • At An Event Apart 2017, Luke Wroblewski gave a talk called Obvious Always Wins, which described a redesign of navigation for a specific Google Android application and how data-driven navigational design can shape business results. Conference notes
  • Hick's Law

Pages in category "Navigation"

The following 4 pages are in this category, out of 4 total.