Blame view

docs/blog/refer/dynamic-yield/website-navigation-examples.md 7.13 KB
62b7972c   tangwang   docs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
  # eCommerce navigation optimization best practices and examples
  
  ## High-impact eCommerce navigation optimization ideas to improve product discovery
  
  To craft engaging digital experiences, marketers can test different variations of site design elements and seek inspiration from brands that are effectively optimizing the site navigation experience.
  
  While online shopping, brands should aim to facilitate the most straightforward discovery experience possible. In many regards, the eCommerce experience mimics that of brick-and-mortar shops. Users can browse through available inventory, typically accessing items they’ve purchased before with ease and comparing similar products before finalizing a decision. However, digital shops have a challenging task at hand. Unable to fully replicate the in-store shopping experience where consumers often take their time to interact with dozens of products, online shopping tends to be very transactional. To remedy this reality, brands must personalize the shopping experience to maintain user engagement. From the imagery, button colors, and homepage banners to email subject lines and the cart page design, every decision can dramatically affect how long a shopper remains on-site and whether or not they will complete a purchase.
  
  And it’s not just what you offer and how you present products on your site that’s important; how you organize your site can make-or-break your business. Not only will a well-designed site ease the overall shopping experience, but when done right, it will also increase your primary metrics. Below, learn more about navigation optimization, the elements of all eCommerce sites should take into consideration and test, and examples of brands that have designed exceptional navigation experiences.
  
  ## What is navigation optimization?
  
  Navigation optimization refers to the process of improving how visitors and search engines find and access information within a given website. This includes the site’s taxonomy, how pages are structured, and how menus are labeled on both desktop and mobile. The design of all of these components can have a tremendous impact on the overall end-user experience, increasing or decreasing metrics like search ranking, bounce rate, pageviews, time on site, return visitors, conversions, and more. So to give you a leg up, let’s take a closer look at the details marketers should pay attention to.
  
  ## Breaking down the various components and examples of site navigation
  
  ### Primary navigation
  
  How you present your header is the backbone of your eCommerce navigation strategy. The two most common formats are menus fixed either horizontally or vertically, exposing a handful of key product categories. Web designers have long debated which presentation is most optimal, but the truth is, it varies from site to site. What works well in one context doesn’t always work equally as well in another. And this is true when looking at design by the channel as well – mobile and web navigation experiences typically vary. Let’s assess the variables at play that will likely impact which approach you take:
  
  1.  **Page space:** On desktop devices, a horizontal navigation menu conserves more page space than a vertical one, narrowing the content area available on both your homepage and across site pages. However, on mobile, where space is limited, vertical navigation via a hamburger menu allows you to hide and expose menu items quickly.
  2.  **Menu item priority:** Typically, the leftmost and top menu items carry the most weight, as these positions are seen as primary areas visually. Additionally, because most users read from left to right, there’s a stronger case for a horizontal navigation experience on desktop sites, where more site real estate is available (the same cannot be said for mobile experiences, where most devices are optimized for vertically-formatted pages).
  3.  **Scanning:** Many users find the experiences of quickly scanning pages vertically the more natural experience, making a case for vertical navigation menus.
  
  ### Categories
  
  Navigation structure and labeling should be clear and concise across all pages, and part of this includes deciding how to display product categories. If your product inventory is vast, a navigation menu bar consolidated by category type is integral. 34% of mobile eCommerce sites do not offer “thematic” product browsing, making it difficult for users to find what they are looking for. Therefore, brands should aim to display a few, top-level categories rather than overwhelm shoppers.
  
  There are exceptions to this advice, of course. For example, if you only sell hats, it’s probably best to categorize your menu bar by hat type rather than merely listing one option. If you know users tend to primarily shop within a specific product category during a season (i.e., boots in the winter), restructure your menu to prioritize this section above other categories.
  
  And it doesn’t stop with how you present your parent categories. Identifying how to showcase sub-categories within your navigation menu is also an essential part of the navigation experience. There are two primary ways brands typically go about this design:
  
  1.  **Tiered menus:** List parent categories and only expose sub-categories upon hover or click
  2.  **Mega menus:** Lays out all parent and subcategories upon initial menu dropdown
  
  Tiered navigation allows a user to make one, simple choice within a given moment by limiting the list of categories and options to choose from. A mega-menu releases an overwhelming sea of possibilities, which risks a user experiencing choice paralysis. While there may seem to be an obvious choice here, we encourage every organization to test both experiences and iterations of each, running experiments to determine which variation works best both for the average visitor, as well as for different audiences. Doing so will instill a sense of confidence in the ultimate decision you make.
  
  The order in which you present menu items is also a way to optimize your site navigation. While you may have a default order you present to the average visitor or new user, using affinity data, you can tailor the order of menu items to personalize the experience on a more individual basis based on a user’s preferences. Not only will it expedite the discovery process, but it can also drive conversions more efficiently.
  
  ### Additional elements to take into consideration
  
  Aside from nailing down your main navigation layout, eCommerce teams have plenty of other decisions to make. These include:
  
  ##### Sticky navigation
  These are fixed menus that help users navigate through pages on a site page. To simplify and facilitate a positive online shopping experience, navigation menus, product filters, and sorting menus should always be visible to users and appear while they browse and scroll through a webpage.
  
  ##### Design style
  The design of your menu options can also play a significant role in the navigation experience. From the button colors and look of the primary navigation menu to the fonts used and size of the sorting menu, design decisions can impact how easily users can navigate a site. Testing different looks, colors, sizes, and styles will inform which variations work best for your brand.