Site navigation design mode guide

There are some common design patterns for interaction in web design. Website Navigation A wide variety of common and well-known design patterns can be used as a basis for creating an effective information architecture for your website. This guide covers the popular site navigation design patterns. For each site navigation bar design patterns, we will discuss its general characteristics, its shortcomings, and when to use it best.

Top horizontal bar navigation

The top horizontal bar navigation is one of the two most popular site navigation menu design patterns today. It is most commonly used for the main navigation menu of a website and is most often placed directly above or directly below the website header of all pages of the website.

The top horizontal bar navigation design mode is sometimes accompanied by a drop-down menu that pops up as a second-level sub-navigation below the mouse when it is over an item.

Top Horizontal Bar Navigation General Features Navigation items are text links, button shapes, or tab shapes Horizontal Bar Navigation is usually placed directly adjacent to the site logo where it is usually located above the fold

Shortcomings at the top horizontal bar navigation

The biggest disadvantage of the top horizontal bar navigation is that it limits the number of links that you can include without child navigation. This is not a problem for sites that have only a few pages or categories, but for sites that have very complex information structures and many modules, this is not a perfect main navigation menu without sub-navigation select.

When to use the top horizontal bar navigation

The top horizontal bar navigation is great for sites that only need to display 5-12 navigation items in the main navigation. This is also the only option for main navigation of websites with a single layout (except for the bottom navigation typically used for secondary navigation systems). This design pattern can support more links when combined with drop-down navigation.

Vertical / Sidebar navigation

Navigation items in the sidebar navigation are arranged in a single column, one above the other. It is often in the upper left column, before the main content area - according to a usability study of left-to-right navigational patterns for left-right readers, the left vertical navigation bar performs better than the right vertical navigation.
Sidebar navigation design patterns can be found everywhere, almost all kinds of sites. This is possible because vertical navigation is one of the most versatile modes available and accommodates a large number of links.

It can be used with sub-navigation menus, or it can be used alone. It is easy to use for master navigation of websites that contain many links. Sidebar navigation can be integrated in almost any kind of multi-column layout.

General Features of Sidebar Navigation Text links are common as navigation items (with or without icons) Rarely use tabs (except for stacked tab navigation mode) Vertical navigation menus often contain many links

Vertical / Sidebar navigation shortcomings

Because of the many links that can be handled, the user may sometimes be overwhelmed when the vertical menu is too long. Try to limit the number of links you introduce, instead you can use the fly-out sub navigation menu to provide more information about the site. At the same time consider the link is divided into the intuitive category among them, to help users quickly find the link of interest.

When to use vertical / sidebar navigation

Vertical navigation is suitable for almost any kind of website, especially for websites that have a host of navigation links.

Tab navigation

Tab navigation can be any design you want from style, from the realistic, feel the label to the sleek labels, as well as simple side labels. It exists in a variety of websites and can incorporate any visual effects.

Tabs have a distinct advantage over other categories of navigation: they have a positive psychological effect on the user. People often associate navigation with tabs as they once saw the tabs in a notebook or folder and linked them to switching to a new chapter. This real-world metaphor makes tab navigation very intuitive.

The general characteristics of tab navigation are similar to real-world tabs and functions (as seen in folders, notebooks, etc.) and are generally horizontal but sometimes vertical (stacked tabs)

Disadvantages of tab navigation

The biggest drawback of the tab is that it is harder to design than a simple top horizontal bar. They usually require more tags, image assets, and CSS, depending on the visual complexity of the tags. Another disadvantage of the tabs is that they are also not well suited for situations where there is a lot of linking unless they are aligned vertically (even though, they look inappropriate if too many).

When to use tab navigation

The tabs are also suitable for almost any main navigation, although they have limitations on the links that can be displayed, especially in the horizontal direction. Using them for larger sites with master navigation of different style sub-navigation is a good option.

Breadcrumbs

The crumbs' names come from the story of Hansel and Gretel, who sow bread crumbs along the way to find their way home, which tells you the current location on the site. This is a form of secondary navigation that aids in the main navigation system of the site.

Breadcrumbs are especially useful for multi-level, hierarchical websites. They help visitors understand where they are currently on the site. If visitors want to return to a certain level, they only need to click on the corresponding breadcrumb navigation item.

General Characteristics of Breadcrumbs The general format is a list of horizontal text links, usually accompanied by a left arrow in the middle to indicate layers and relationships that are never used for main navigation

Shortcomings of bread crumb navigation

Bread crumbs are not suitable for shallow navigation site. When the site does not have a clear hierarchy and classification, using it can also be confusing. When to use breadcrumbs to navigate. Bread crumbs are best for websites with clear chapters and multi-level categories. There is no obvious chapter, the use of bread crumbs is worth the candle.

Label navigation

Tags are often used on blogs and news sites. They are often organized into a tag cloud, navigation items may be arranged in alphabetical order (usually with different size links to indicate how much under the label), or by popularity.

Tags are excellent secondary navigation and seldom used for main navigation. He can improve the site's discoverability and exploration. Tag clouds usually appear on the sidebar or bottom. Without a tag cloud, tags are usually included in the meta-information at the top or bottom of the article, a design that makes it easier for users to find similar content.

General characteristics of tag navigation Tags are content-centric web (blog and news station) stations General features Text links only When in a tag cloud, links often vary in size to identify the elements whose popularity is often included in the article The shortcomings of label navigation in the information

People often associate tags with news websites (and sometimes e-commerce sites), so if your site is fundamentally different from those sites, it may not help you. Tags also bring a certain amount of work to content creators, as each article needs to be labeled accurately in order for the labeling system to work.

When to use labels

If you have a lot of topics, tagging your content is good. If you have only a few pages (maybe your website is a company website), you probably do not need to label the content. Whether or not you incorporate a tag cloud or just include the tag in your meta-information depends on your design.

Search navigation

In recent years, web search has become a popular navigation method. It's great for sites with unlimited content (like Wikipedia), which is hard to use with other navigation. Search is also common on blogs and news sites, as well as e-commerce sites.

Search is useful for visitors who know exactly what they want to find. But having a search does not mean that you can ignore good information structures. It is still important to ensure that those who do not fully know what they are looking for or who want to discover potentially interesting content can find it.

General characteristics of search navigation The search bar is usually located in the head or near the top of the sidebar The search bar often appears in the page layout ancillary parts such as the bottom search navigation shortcomings

The biggest drawback to searching is that not all search engines are equal. Depending on the scheme you choose, your site's search features may not return accurate results or missing something like article metadata. Search navigation, for most sites, should be used as a secondary form of navigation. A search is a reliable choice for users when they can not be navigated to what they are looking for.

When to use search navigation

For sites with countless pages and complex information structures, search functionality must be introduced. Without it, users may find it hard to find the information they want by traversing links and multi-layered navigation. Search for e-commerce sites is also very important, and the key point is that e-commerce site search results according to how much inventory on the site has the appropriate screening and sorting capabilities.

Outgoing menus and drop-down menu navigation

Outgoing menus (used with vertical / sidebar navigation) and pull-down menus (typically used with top horizontal bar navigation) are a great way to build a robust navigation system. It makes your site look neat and tidy overall, and makes deep sections easy to access.

They are often used in conjunction with horizontal, vertical or tabbed navigation as part of the site's main navigation system.

Outgoing Menus and Drop-Down Menus General Features of Navigation for Multilevel Information Structures Hiding and Displaying Menus Using JavaScript and CSS Displaying Links in Menus A submenu of the main menu item is typically activated when the mouse is over it, And sometimes it may be activated when the mouse click

Out-of-menu and pull-down menu navigation shortcomings

Unless you put some logos (usually arrow icons) on the main navigation links, visitors may not know that there are drop-down or drop-down menus that contain sub-navigation items, so making these logos is obviously very important. At the same time, the drop-down menus and pull-downs may make navigating hard on mobile devices, so make sure your mobile style sheet handles that situation.

When to use the drop-down menus and drop-down menu navigation

If you want to visually hide large or complex levels of navigation, the drop-down menu and drop-down are good choices as it allows the user to decide what they want to see and when they can be seen. They can be used to display a very large number of links on demand without disrupting the web page. They can also be used to display subpages and local navigation, and do not require the user to click to open a new page first.

Face / guide navigation

Faceted / guided navigation (also known as faceted or guided search) is most common in e-commerce sites. Basically, guided navigation gives you extra filtering of content attributes. Suppose you are browsing a new LCD monitor, navigation guide may list the size, price, brand and other options. Based on these content attributes, you can navigate to items that match your criteria.

Guided navigation is invaluable in large e-commerce sites with a huge volume of goods. It is often difficult for users to find what they want by direct search, and adds to the user's ability to miss a product. For example, they may search for a beige product, but you may mark it gray or brown, though it may be what the user wants.

General features of faceted / guided navigation Most common in e-commerce sites Users often make multiple filters for different features Almost always text links are used, breaks are often used with breadcrumbs under different categories or drop-down menus The disadvantage of face / guide navigation

Guided navigation may be confusing to some users. Also, there is no guarantee that users will look in your pre-defined category.

When to use faceted / boot navigation

Faceted navigation is very useful for large e-commerce sites. It makes it easier for users to shop, enhance the shopping experience, and find it easier to find what they really want. It can also be used for other directory style websites.

Footer navigation

Footer navigation is often used for secondary navigation and may include links that are not found in the main navigation or include simplified sitemap links.

Visitors usually check footer navigation when the main navigation can not find what they are looking for.

General footer-point navigation Footer navigation is often used to place navigation items that are not available elsewhere, often using text links, occasionally with icons Normal links point to less-than-critical pages Disadvantages of footer navigation

If your page is long, no one wants to scroll to the bottom of the page just for navigation. For longer pages, footer navigation is best used as a repeat link and a brief sitemap. It is not suitable as a predominant form.

When to use footer navigation

Most websites have this kind of footer navigation, even though it just repeats the links elsewhere. Think about what works and what your visitors may most want to find.

in conclusion

Most websites use more than one navigation design pattern. For example, a website may use the top horizontal bar navigation as the main navigation system and use the vertical / sidebar navigation system to assist it, while also using footer navigation for redundancy and increased page convenience. When choosing your navigational-based navigation design model, you have to choose a scheme that supports your information structure and site characteristics. Navigation is an important part of website design, its effect must have a solid foundation design.

View source text

Source: http://rockux.com/