Category:Navigation - Revision history

Kirabug at 21:52, 1 June 2020

2020-06-01T21:52:59Z

← Older revision		Revision as of 14:52, 1 June 2020
Line 12:		Line 12:
	* 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"
	** [[Cards]]		** [[Cards]]
			** [[Pagination]]
	** [[Search]] (which is a specialized type of navigation)		** [[Search]] (which is a specialized type of navigation)

Kirabug at 21:51, 1 June 2020

2020-06-01T21:51:07Z

← Older revision		Revision as of 14:51, 1 June 2020
Line 6:		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 12:		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]]
	** [[Search]] (which is a specialized type of navigation)		** [[Search]] (which is a specialized type of navigation)

Kirabug at 21:46, 1 June 2020

2020-06-01T21:46:14Z

← Older revision		Revision as of 14:46, 1 June 2020
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.

Kirabug: 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..."

2020-06-01T21:42:58Z

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..."

New page

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. 
** [[Tabs]] are local navigation (They can also be in-page navigation.)  
** [[Left navigation bars]] are local navigation. 
** A global navigation menu can have a sub navigation bar that provides high-level local navigation
** [[Breadcrumbs]] are a specific kind of local navigation whose primary purpose is to provide a [[Design Principles |sense of environment and direction]].
** [[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"
** [[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]]
** [[Accordions]]
** [[Search]] (which is a specialized type of navigation)

==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, [https://www.google.com 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===

* [https://medium.com/ruxers/dont-mistake-common-ui-patterns-for-best-practices-4a1c8d4bef9a Don’t mistake common UI patterns for best practices: A hard look at how the browse experience translates in the digital space]- this article sounds like it'll be about how "common" ux patterns and "best practices" are the same thing, but after about the first paragraph it's all about the best ways to design browsing experiences.

==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. [https://www.perpendicularangel.com/conference-notes/an-event-apart-seattle-2017-conference-notes/an-event-apart-2017-obvious-always-wins-by-luke-wroblewski/ Conference notes]
* [[Design Principles | Hick's Law]]