Difference between revisions of "Category:Navigation"
(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. | ||
** [[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" | ||
** [[Cards]] | ** [[Cards]] | ||
** [[ | ** [[Pagination]] | ||
** [[Search]] (which is a specialized type of navigation) | ** [[Search]] (which is a specialized type of navigation) | ||
Latest revision as of 13: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.
- 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 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"
- Cards
- Pagination
- 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, 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
- 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. Conference notes
- Hick's Law
Pages in category "Navigation"
The following 4 pages are in this category, out of 4 total.