{"id":28632,"date":"2016-12-10T15:13:03","date_gmt":"2016-12-10T07:13:03","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28632"},"modified":"2022-09-18T18:13:20","modified_gmt":"2022-09-18T10:13:20","slug":"ux-tips-optimize-filtered-navigation","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/","title":{"rendered":"10 E-Commerce UX Tips to Optimize Filtered Navigation"},"content":{"rendered":"

Filtered navigation<\/strong> is a popular website feature that these days is routinely used on e-Commerce sites<\/strong>. It serves the purpose of helping customers find the product they\u2019re looking for<\/strong> in large data sets<\/strong>.<\/p>\n

Think of the filters you can set <\/strong>for a product search<\/strong> on eBay or Amazon, such as the category, the material, or the brand of a product.<\/p>\n

If you want a converting online store, having a filtered navigation is almost a necessity, not just because it facilitates on-site navigation<\/strong>, and speeds up search<\/strong>, but also because online customers have already got used to it<\/strong> on big e-Commerce sites.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to Reduce Cart Abandonment Rates on your e-Commerce Site<\/a>\n\t\t\t\t<\/p>\n

1. Choose the optimal place<\/h2>\n

On most e-Commerce sites, filtered navigation is placed on the left sidebar<\/strong> next to the content, as you can see on Amazon or eBay. However, it\u2019s not always the best choice.<\/p>\n

Baymard Institute\u2019s usability research on filtering<\/a> found that a horizontal navigation placed on top of the content<\/strong> can perform better in many cases.<\/p>\n

In short:<\/strong> our usability study showed that a horizontal filtering and sorting toolbar is only appropriate for certain types of e-commerce sites<\/strong> \u2013 yet for those sites, it can significantly outperform<\/strong> the traditional left-hand filtering sidebar \u2013 Baymard Institute<\/p>\n

Horizontal navigation usually works well for e-Commerce websites that have fewer product filters<\/strong>, as this way users are less likely to overlook the filters<\/strong>.<\/p>\n

It\u2019s always worth testing where to place the filtered navigation, as there can be big differences between conversion rates. The website of Crate&Barrel, a furniture, and home decor retailer provide a nice example for horizontally placed filtered navigation.<\/p>\n

\"Crate<\/a><\/figure>\n

2. Provide relevant filters<\/h2>\n

Although it\u2019s worth checking out the filters your competitors use, filters should always be relevant to your<\/em> products and your<\/em> audience<\/strong>, and no one else\u2019s. It\u2019s not always as easy as you\u2019d first think, as you need filters that answer the questions customers ask<\/strong> when they\u2019re looking for your products.<\/p>\n

For instance, Nordstrom<\/a> provides their customers with carefully selected filters for each product category<\/strong>, such as \u201clens type\u201d, \u201cface shape\u201d, \u201ccolor\u201d, \u201cprice\u201d, and \u201cbrand\u201d for sunglasses.<\/p>\n

\"Nordstrom\"<\/a><\/figure>\n

3. Let customers select multiple filters<\/h2>\n

Although some users just randomly browse your site, many of them arrive with clear-cut ideas and well-defined needs. This customer group usually wants to use multiple filters at the same time<\/strong> in order to run a query simultaneously for different qualities<\/strong>, such as color, price, and material.<\/p>\n

It\u2019s not only necessary to let them select different filters from multiple filter groups<\/strong>, but also of the same type<\/strong>. The Wayfair<\/a> online home store provides a professional user experience by allowing their customers to search for as many filters as they want<\/strong>.<\/p>\n

\"Wayfair\"<\/a><\/figure>\n

4. Enable manual input when necessary<\/h2>\n

Checkboxes are a great way to fetch filter values, but sometimes it\u2019s also a good idea to let customers set filters manually<\/strong>, such as in the case of price input fields. Each customer looks for products in a different price range<\/strong>, so it\u2019s not always easy to properly preset price filters.<\/p>\n

eBay<\/a> has a price filtering UI that serves two customer groups<\/strong> at the same time: those who are okay with quickly ticking a preset price range<\/strong>, and those who rather choose their own minimum and maximum prices<\/strong>, and type them manually into the provided text input fields.<\/p>\n

\"Ebay\"<\/a><\/figure>\n

5. Display a product counter<\/h2>\n

By displaying a product counter, you don\u2019t only keep your customers well-informed, which naturally creates a sense of trust<\/strong>, but also let them know how \u201cwell\u201d they performed with their filtering efforts. Each customer has a number of product they want to check out before a purchasing decision<\/strong>. Ideally, filtering brings them close to this number<\/strong>. If you provide them with a product counter they immediately know if they set enough filters<\/strong> or need to rerun the query<\/strong>.<\/p>\n

It\u2019s important to show how many products belong to a certain filter configuration<\/strong> on every e-Commerce site. Office Depot takes this feature to the next level, and displays a product counter next to each available category<\/strong>, which gives a natural push to customers to move on with their product search.<\/p>\n

\"Office<\/a><\/figure>\n

6. Create filter groups that make sense<\/h2>\n

On a well-converting e-Commerce site, it\u2019s a must-have to provide customers with all the filters they need to make a responsible purchasing decision<\/strong>\u2014this is especially important if you market premium products. To keep the filtered navigation neat and user-friendly, it\u2019s crucial to group the filters<\/strong> in a way that makes sense.<\/p>\n

The online store of The Body Shop<\/a> has probably a little bit more filters that would be necessary but as the filters are well-grouped, the user experience is not broken by superlong and inscrutable filter lists.<\/p>\n

\"The<\/a><\/figure>\n

7. Make filter groups toggleable<\/h2>\n

If you have too many options, it\u2019s worth considering to make filter groups toggleable<\/strong> to allow users to quickly open and close the different groups. It\u2019s also a good solution for mobile layouts<\/strong>, as on small screen filtered navigation can get way too long<\/strong>, even to the dreaded point of non-usability.<\/p>\n

The filtered navigation of Target uses the well-known pattern of up and down arrows<\/strong> to indicate toggleability, moreover when the filter list inside a group gets too long (such as in case of colors), a scrolling bar is added<\/strong> as well. Both of these features enhance mobile usability<\/strong>.<\/p>\n

\"Target\"<\/figure>\n

8. Consider thematic filters<\/h2>\n

Thematic filters<\/strong> are a distinct kind of product filters that help customers run queries based on different themes<\/strong> that respond to frequent requests<\/strong>, such as \u201csummer arrivals\u201d, \u201con sale\u201d, \u201ccasual style\u201d, or \u201clast-minute deals\u201d. Baymard Insitute\u2019s usability researches summarized on Smashing Magazine<\/a> found that thematic filtering is not always utilized even on big e-Commerce sites<\/strong>.<\/p>\n

20% of top e-commerce websites lack thematic filters<\/strong>, despite selling products with obvious thematic attributes<\/strong> (season, style, etc) \u2013 Smashing Magazine<\/p>\n

It\u2019s always worth considering if there are any thematic filters you can use in your own store<\/strong>. Macy\u2019s can be a good example for a nuanced filtered navigation. In the \u201cDresses\u201d category, it offers filters for carefully selected themes<\/strong>, such as \u201cSpecial Offers\u201d, \u201cDress Occasion\u201d, and \u201cWedding Occasion\u201d. If you want to read an in-depth analysis on Macy\u2019s filtering UI check out this research<\/a>.<\/p>\n

\"Macy's\"<\/a><\/figure>\n

9. Display applied filters<\/h2>\n

As many people tend to forget what they\u2019ve just searched for, displaying the filters they\u2019ve applied<\/strong> next to the query results is a feature that can significantly improve user experience. This way your customers will feel less lost<\/strong>, as they can check at any time the filters they selected earlier, and modify them when it\u2019s necessary.<\/p>\n

Debenhams<\/a> doesn\u2019t only show the applied filters<\/strong> on top of the filtered navigation, but also groups them<\/strong> when multiple filters are applied\u2014providing even a more eye-catching visual cue.<\/p>\n

\"Debenhams\"<\/a><\/figure>\n

10. Display popular filters on top<\/h2>\n

Each e-Commerce site has its popular themes<\/strong>, such as a trend, a season, or a special offer. You can apply a thematic filter<\/strong> for each of these themes, and place it on top of the filtered navigation<\/strong> in order to help your customers find them.<\/p>\n

If you want to be even more professional, you can change your popular filters over time<\/strong>, based on the changing patterns of customer habits<\/strong> on your site.<\/p>\n

\"Nintendo<\/a><\/figure>\n

The Nintendo Game Store<\/a> currently provides three popular filters, \u201cOn Sale\u201d, \u201cDLC available\u201d, and \u201cDemo available\u201d, and displays them on top of all other options to tempt even hesitating users to run a quick query<\/strong> that only cost a very minimal effort<\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"

Filtered navigation is a popular website feature that these days is routinely used on e-Commerce sites. It serves the purpose of helping customers find the product they\u2019re looking for in large data sets. Think of the filters you can set for a product search on eBay or Amazon, such as the category, the material, or…<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[4102,1250,3573,3471],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n10 E-Commerce UX Tips to Optimize Filtered Navigation - Hongkiat<\/title>\n<meta name=\"description\" content=\"Filtered navigation is a popular website feature that these days is routinely used on e-Commerce sites. It serves the purpose of helping customers find\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 E-Commerce UX Tips to Optimize Filtered Navigation\" \/>\n<meta property=\"og:description\" content=\"Filtered navigation is a popular website feature that these days is routinely used on e-Commerce sites. It serves the purpose of helping customers find\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-10T07:13:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-18T10:13:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/ux-tips-optimize-filtered-navigation\/01-crate-and-barrel.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"10 E-Commerce UX Tips to Optimize Filtered Navigation\",\"datePublished\":\"2016-12-10T07:13:03+00:00\",\"dateModified\":\"2022-09-18T10:13:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/\"},\"wordCount\":1229,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-tips-optimize-filtered-navigation\\\/01-crate-and-barrel.jpg\",\"keywords\":[\"Interface Design\",\"optimization\",\"user experience\",\"Website Optimization\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/\",\"name\":\"10 E-Commerce UX Tips to Optimize Filtered Navigation - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-tips-optimize-filtered-navigation\\\/01-crate-and-barrel.jpg\",\"datePublished\":\"2016-12-10T07:13:03+00:00\",\"dateModified\":\"2022-09-18T10:13:20+00:00\",\"description\":\"Filtered navigation is a popular website feature that these days is routinely used on e-Commerce sites. It serves the purpose of helping customers find\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-tips-optimize-filtered-navigation\\\/01-crate-and-barrel.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-tips-optimize-filtered-navigation\\\/01-crate-and-barrel.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-tips-optimize-filtered-navigation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 E-Commerce UX Tips to Optimize Filtered Navigation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 E-Commerce UX Tips to Optimize Filtered Navigation - Hongkiat","description":"Filtered navigation is a popular website feature that these days is routinely used on e-Commerce sites. It serves the purpose of helping customers find","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/","og_locale":"en_US","og_type":"article","og_title":"10 E-Commerce UX Tips to Optimize Filtered Navigation","og_description":"Filtered navigation is a popular website feature that these days is routinely used on e-Commerce sites. It serves the purpose of helping customers find","og_url":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-12-10T07:13:03+00:00","article_modified_time":"2022-09-18T10:13:20+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/ux-tips-optimize-filtered-navigation\/01-crate-and-barrel.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"10 E-Commerce UX Tips to Optimize Filtered Navigation","datePublished":"2016-12-10T07:13:03+00:00","dateModified":"2022-09-18T10:13:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/"},"wordCount":1229,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ux-tips-optimize-filtered-navigation\/01-crate-and-barrel.jpg","keywords":["Interface Design","optimization","user experience","Website Optimization"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/","url":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/","name":"10 E-Commerce UX Tips to Optimize Filtered Navigation - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ux-tips-optimize-filtered-navigation\/01-crate-and-barrel.jpg","datePublished":"2016-12-10T07:13:03+00:00","dateModified":"2022-09-18T10:13:20+00:00","description":"Filtered navigation is a popular website feature that these days is routinely used on e-Commerce sites. It serves the purpose of helping customers find","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/ux-tips-optimize-filtered-navigation\/01-crate-and-barrel.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/ux-tips-optimize-filtered-navigation\/01-crate-and-barrel.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/ux-tips-optimize-filtered-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 E-Commerce UX Tips to Optimize Filtered Navigation"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7rO","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28632"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28632\/revisions"}],"predecessor-version":[{"id":62231,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28632\/revisions\/62231"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28632"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}