

{"id":3059,"date":"2020-12-24T08:41:37","date_gmt":"2020-12-24T08:41:37","guid":{"rendered":"https:\/\/www.prefixbox.com\/blog\/?p=3059"},"modified":"2024-08-27T09:09:48","modified_gmt":"2024-08-27T09:09:48","slug":"autocomplete-search","status":"publish","type":"post","link":"https:\/\/www.prefixbox.com\/blog\/autocomplete-search\/","title":{"rendered":"10 Autocomplete Search Best Practices  &#8211; How Predictive Search Will Generate More Revenue for Your Store"},"content":{"rendered":"\n<div class=\"wp-block-getwid-section alignfull post-header has-inner-blocks-gap-small getwid-section-content-custom-width\" style=\"margin-top:;margin-bottom:50px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-left-medium getwid-padding-right-medium\" style=\"padding-top:30px;padding-bottom:20px\"><div class=\"wp-block-getwid-section__inner-wrapper\" style=\"max-width:1140px\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\" style=\"opacity:0.2;mix-blend-mode:normal\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<h1 class=\"has-text-align-center\" id=\"gec4640df03db\">10 Autocomplete Search Best Practices &#8211; How Predictive Search Will Generate More Revenue for Your Store<\/h1>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:30px\" aria-hidden=\"true\"><\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns are-vertically-aligned-center\">\n<div class=\"wp-block-column is-vertically-aligned-top is-vertically-aligned-center\">\n<p class=\"intro-paragraph\">One thing is certain: around 30% of your online store visitors will use your on-site search function &#8211; and 25% of them will click on a search suggestion.<\/p>\n\n\n\n<p class=\"intro-paragraph\">If you provide suggestions, that is.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<p class=\"intro-paragraph\">This is why predictive autocomplete search is an essential tool for any online retailer. <\/p>\n\n\n\n<p class=\"intro-paragraph\">And we\u2019re here to show you how to leverage it to maximize conversions and revenue.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center\">\n<div class=\"wp-block-image\"><figure class=\"alignright size-full\"><img loading=\"lazy\" width=\"500\" height=\"377\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/Featured_image-autocomplete-500px-min.png\" alt=\"\" class=\"wp-image-5607\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/Featured_image-autocomplete-500px-min.png 500w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/Featured_image-autocomplete-500px-min-300x226.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>We need something here that we want to clarify the basics first.<\/p>\n\n\n\n<div class=\"wp-block-getwid-table-of-contents is-style-default table-of-contents-toc\"><ul class=\"wp-block-getwid-table-of-contents__list\"><li><a href=\"#bd98511349a1\">What is Autocomplete Search?<\/a><\/li><li><a href=\"#0c07f2c0e4d5\">How does Autocomplete Search work?<\/a><ul><li><a href=\"#7d64fc5cef89\">Autosuggest vs Autocomplete &#8211; What&#8217;s The Difference?<\/a><\/li><\/ul><\/li><li><a href=\"#b61b7b974a4c\">Achieve Better Sales via More Effective Autocomplete &amp; Search Suggestions<\/a><\/li><li><a href=\"#5ea6cedb431a\">10 Search Autocomplete Strategies<\/a><ul><li><a href=\"#1ab1e3e25da1\">1. How Ranking the Suggestions Should Work<\/a><\/li><li><a href=\"#4b4c600a98cd\">2. Personalization Makes Autocomplete Predictions More Effective<\/a><\/li><li><a href=\"#91f7020fcd80\">3. Keep Search Suggestions Simple and Few<\/a><ul><li><a href=\"#dc0aaf687661\">a. Keep the Autocomplete List Manageable<\/a><\/li><li><a href=\"#b3fac18abb64\">b. Avoid Scroll Bars<\/a><\/li><li><a href=\"#8ec6ddc8e0f4\">c. Reduce the Visual Noise<\/a><\/li><\/ul><\/li><li><a href=\"#e69859ca766f\">4. Highlighting Autocomplete Suggestions<\/a><ul><li><a href=\"#a8f62c43cb9e\">a. Highlight the Differences<\/a><\/li><li><a href=\"#78ae7de1399e\">b. Highlight the Active Suggestion<\/a><\/li><li><a href=\"#39ccbea4f24b\">c. Style Different Search Suggestions Differently<\/a><\/li><li><a href=\"#e35cd5040159\">d. Style for Readability<\/a><\/li><\/ul><\/li><li><a href=\"#b6c98ad2d330\">5. Provide Clear Instructions<\/a><\/li><li><a href=\"#289e93d34383\">6. Visual Focus and Simplicity<\/a><ul><li><a href=\"#59d72f024cc5\">a. Design for Visual Depth<\/a><\/li><li><a href=\"#e8ea73ccbd80\">b. Reduce Visual Competition<\/a><\/li><\/ul><\/li><li><a href=\"#d711a0226aa9\">7. Support Both Mouse Interaction and Keyboard Navigation<\/a><\/li><li><a href=\"#37ffc74ff7ad\">8. Mobile Specific Optimizations<\/a><ul><li><a href=\"#b78d9d4862d0\">a. Use Text Wrapping<\/a><\/li><li><a href=\"#9869948a3945\">b. Partially Obscuring the Last Visible Suggestion<\/a><\/li><li><a href=\"#44a5e25cc224\">c. Make it Easy to Exit Autocomplete (and Remove the Search Input)<\/a><\/li><\/ul><\/li><li><a href=\"#110851e619b1\">9. Provide Category Search Suggestions<\/a><\/li><li><a href=\"#ac9d10ae119e\">10. Speed is Essential: Real-Time Autocomplete<\/a><\/li><\/ul><\/li><li><a href=\"#31c3dc5dc174\">Summary<\/a><\/li><\/ul><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:20px\" aria-hidden=\"true\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-anchor\" id=\"chapter-2\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-advanced-heading chapter-block-text has-custom-font-size\" style=\"font-size:1.3em\"><span class=\"wp-block-getwid-advanced-heading__content has-text-color\" style=\"text-align:left;font-family:&quot;Montserrat&quot;;font-weight:normal;font-style:italic;color:#afafaf\">Chapter 1<\/span><\/div>\n\n\n\n<h2 class=\"chapter-heading\" id=\"bd98511349a1\">What is Autocomplete Search?<\/h2>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Autocomplete is the function of search engines that displays keyword and product suggestions in real-time, based on what search query the user is typing into the search field.<\/p>\n\n\n\n<p><strong>The feature works in a very simple way:<\/strong> it detects what a customer is typing, and matches the query with data in the <a href=\"https:\/\/www.prefixbox.com\/blog\/search-index\/\" class=\"rank-math-link\">search index<\/a>. If there are keywords or phrases stored in the index that matches what\u2019s being typed in, it suggests those.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"768\" height=\"627\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-1-768x627-1-min.jpg\" alt=\"\" class=\"wp-image-5609\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-1-768x627-1-min.jpg 768w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-1-768x627-1-min-300x245.jpg 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p>In reality, it\u2019s a bit more complicated because they also take into consideration the popularity of different products and keywords when ranking suggestions.<\/p>\n\n\n\n<p><strong>For example:<\/strong> in an online store selling clothes, if you type in &#8220;sh&#8221;, it might suggest shoes or shirts. If the store is selling bathroom appliances, it might suggest shower curtains or shelves.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:20px\" aria-hidden=\"true\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-anchor\" id=\"chapter-2\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-advanced-heading chapter-block-text has-custom-font-size\" style=\"font-size:1.3em\"><span class=\"wp-block-getwid-advanced-heading__content has-text-color\" style=\"text-align:left;font-family:&quot;Montserrat&quot;;font-weight:normal;font-style:italic;color:#afafaf\">Chapter 2<\/span><\/div>\n\n\n\n<h2 class=\"chapter-heading\" id=\"0c07f2c0e4d5\">How does Autocomplete Search work?<\/h2>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Apart from using your site\u2019s search index, autocompletes also <strong>takes previous user behavior into account<\/strong>, as it keeps track of what queries were previously searched and clicked, and which led to a purchase.<\/p>\n\n\n\n<p>There can be other factors that determine exactly which suggestions appear, and in what order, like the frequency certain terms are entered or click-through rates of individual suggestions.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2020\/12\/article-illustrations-autocomplete-1-800px-95p.jpg\" alt=\"Autocomplete Search takes previous user behavior into account\" class=\"wp-image-3099\" width=\"800\" height=\"399\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2020\/12\/article-illustrations-autocomplete-1-800px-95p.jpg 800w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2020\/12\/article-illustrations-autocomplete-1-800px-95p-300x150.jpg 300w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2020\/12\/article-illustrations-autocomplete-1-800px-95p-768x383.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h3 id=\"7d64fc5cef89\">Autosuggest vs Autocomplete &#8211; What&#8217;s The Difference?<\/h3>\n\n\n\n<p>Autosuggest is an input field that suggests words based on what search term you have typed so far. Autocomplete is an input field (search box) that automatically completes your entry for you, based on its own internal dictionary. <\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:20px\" aria-hidden=\"true\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-anchor\" id=\"chapter-2\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-advanced-heading chapter-block-text has-custom-font-size\" style=\"font-size:1.3em\"><span class=\"wp-block-getwid-advanced-heading__content has-text-color\" style=\"text-align:left;font-family:&quot;Montserrat&quot;;font-weight:normal;font-style:italic;color:#afafaf\">Chapter 3<\/span><\/div>\n\n\n\n<h2 class=\"chapter-heading\" id=\"b61b7b974a4c\">Achieve Better Sales via More Effective Autocomplete &amp; Search Suggestions<\/h2>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>There are many advantages of using autocomplete suggestion. If we want to summarize it, it helps shoppers make successful searches.<\/p>\n\n\n\n<p>Here are some additional ways it improves the customer experience in your store:<\/p>\n\n\n\n<ul><li><strong>It decreases search time<\/strong>, as the user is presented with relevant suggestions and quickly arrives at what they are searching for.<\/li><li>It <strong>makes the users more confident<\/strong> in the search and encourages them to add more details, leading to more precise matches.<\/li><li>It <strong>decreases the number of times a user arrives to a <a href=\"https:\/\/www.prefixbox.com\/blog\/no-results-found-pages\/\" class=\"rank-math-link\">0 result page<\/a><\/strong>, which provides a better experience overall. If relevant queries that are connected to existing product pages,are suggested, it effectively guarantees a successful search.<\/li><li>This also leads to the <strong>reduction in the number of people leaving your site<\/strong>, which means you have more time and opportunities to convert visitors to buyers.<\/li><li>It also <strong>educates potential customers about your product range<\/strong>, working as kind of a soft cross- or upsell opportunity.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"850\" height=\"447\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-2.jpg\" alt=\"List of autocomplete features that improve better search and UX\" class=\"wp-image-3122\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-2.jpg 850w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-2-300x158.jpg 300w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-2-768x404.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/figure><\/div>\n\n\n\n<p>In short: by making search faster and ensuring relevant results, autocomplete will decrease exit rate, increase conversion rate and likely even your average order value.<\/p>\n\n\n\n<p>We know from the <a href=\"https:\/\/www.episerver.com\/globalassets\/03.-global-documents\/reports\/b2c-retail-benchmark-report-q1-2020.pdf\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">B2C Retail Benchmark Report<\/a> that <\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>&#8220;Conversion rates are significantly higher where consumers have higher intent, i.e. they are searching for products.\u201d<\/p><\/blockquote>\n\n\n\n<p>Now that we got through the basics, let\u2019s dive into actual best practices to ensure those results we just talked about.<\/p>\n\n\n\n<p>We included 10 of these with detailed descriptions here &#8211; let\u2019s start with\u2026<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:20px\" aria-hidden=\"true\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-anchor\" id=\"chapter-2\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-advanced-heading chapter-block-text has-custom-font-size\" style=\"font-size:1.3em\"><span class=\"wp-block-getwid-advanced-heading__content has-text-color\" style=\"text-align:left;font-family:&quot;Montserrat&quot;;font-weight:normal;font-style:italic;color:#afafaf\">Chapter 4<\/span><\/div>\n\n\n\n<h2 class=\"chapter-heading\" id=\"5ea6cedb431a\">10 Search Autocomplete Strategies<\/h2>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h3 id=\"1ab1e3e25da1\">1. How Ranking the Suggestions Should Work<\/h3>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator has-text-color has-background has-primary-background-color has-primary-color blog-content-separator-sub-chapter-h3\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Even with the best autocomplete functionality, you have a very <strong>limited number of chances to show the user the right queries<\/strong>, which makes ranking essential.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"768\" height=\"332\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-3b-768x332-min-1.jpg\" alt=\"\" class=\"wp-image-5612\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-3b-768x332-min-1.jpg 768w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-3b-768x332-min-1-300x130.jpg 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p>As we mentioned before, there can be many factors influencing the ranking of suggestions. <strong>Based on user behavior<\/strong> you can show popular searches (queries that entered most frequently) first. <\/p>\n\n\n\n<p>You can also opt for ranking queries that are more frequently purchased. Or you can rank queries and products <strong>related to ongoing promotions<\/strong> or special offers first. (Learn more about <a href=\"https:\/\/www.prefixbox.com\/blog\/ecommerce-merchandising\/\">digital merchandising strategies<\/a> if you want to boost your sales with product promotion.)<\/p>\n\n\n\n<p><strong>Prefixbox&#8217;s Re-Ranking AI<\/strong> can take weight off your shoulders, and automatically ensure that the most relevant results appear first for search queries, by taking numerous kinds of historical data into account. Check our video on the importance of dynamic re-ranking as well: <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Re-Ranking AI\" width=\"1130\" height=\"636\" src=\"https:\/\/www.youtube.com\/embed\/Ky2dAFt-UzU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:20px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h3 id=\"4b4c600a98cd\">2. Personalization Makes Autocomplete Predictions More Effective<\/h3>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h3\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>There are three basic ways you can personalize the autocomplete suggestion in on-site search:<\/p>\n\n\n\n<ul><li><strong>Consider the location<\/strong> of the customer, and show them queries that are popular in their area &#8211; or exclude ones that are irrelevant.<\/li><li><strong>Consider the language<\/strong>: if your online store is multilingual, show each user suggestions in their preferred language for a better user experience.<\/li><li><strong>Include their search history<\/strong>: make suggestions that are relevant to what they previously searched for on the site.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"768\" height=\"473\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-4b-768x473-min-1.jpg\" alt=\"\" class=\"wp-image-5613\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-4b-768x473-min-1.jpg 768w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-4b-768x473-min-1-300x185.jpg 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h3 id=\"91f7020fcd80\">3. Keep Search Suggestions Simple and Few<\/h3>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h3\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Your suggestions should not extend the available space or clutter it &#8211; which is even more important on a mobile screen, considering that keyboards usually take up 30% of the screen.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"768\" height=\"490\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-5b-768x490-min.jpg\" alt=\"\" class=\"wp-image-5615\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-5b-768x490-min.jpg 768w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-95p-5b-768x490-min-300x191.jpg 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"dc0aaf687661\">a. Keep the Autocomplete List Manageable<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>The best practice is keeping your suggestions at 10 items or less (and this is why raking them correctly is essential).<\/p>\n\n\n\n<p>If your suggestion list is longer than that, a number of unpleasant things can happen:<\/p>\n\n\n\n<ul><li>It makes the search time longer, as the user scrolls through them.<br>Suggestions that appear off-screen may be ignored altogether.<\/li><li>The paradox of choice might kick in, leading to choice paralysis. This basically means that if we are presented with too many options, our brains often choose to just opt out entirely instead of wasting energy on weighing all of them.<\/li><li>On a mobile screen, the preferred number of suggestions is 4-8, and may even be less if they include not only queries, but precise products with photos and descriptions.<\/li><\/ul>\n\n\n\n<p>If you want to display more keywords and products, consider a 2-column layout instead.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"b3fac18abb64\">b. Avoid Scroll Bars<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>If your suggestions extend into an area accessible only by scrolling, again, there are many problems that can arise.<\/p>\n\n\n\n<p>First, these initially hidden suggestions are <strong>likely to be ignored<\/strong>, but if they are not, <strong>search time increases<\/strong> again.<\/p>\n\n\n\n<p>Also <strong>requiring an additional task from the user<\/strong> also deteriorates the experience. As does the fact that they <strong>can&#8217;t get a quick overview of their choices<\/strong> right away.<\/p>\n\n\n\n<p>A search bar in the suggestion field can also cause <strong>technical problems<\/strong> with design, but we are not going to detail those here.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"8ec6ddc8e0f4\">c. Reduce the Visual Noise<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>With modern on-site search solutions, the suggestion field can be filled with a large variety of elements like text, prices, photos, short descriptions etc.<\/p>\n\n\n\n<p>While these can help shoppers, be careful not to include too many additional elements as it can <strong>drive the focus away from the actual suggestions<\/strong> and confuse the customers more than it helps them.<\/p>\n\n\n\n<p><strong>Our suggestion is to keep the visual noise to a minimum<\/strong>. Include both keyword and product suggestions, prices, and photos where relevant.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h3 id=\"e69859ca766f\">4. Highlighting Autocomplete Suggestions<\/h3>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h3\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Highlighting certain elements of your predictive suggestions helps the user keep their focus and use the feature more naturally. Here is what to keep an eye on.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"a8f62c43cb9e\">a. Highlight the Differences<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Instead of highlighting (which usually means bolding) what the customer already typed in, it\u2019s much more effective to instead <strong>highlight the predictive part<\/strong> of the suggestions.<\/p>\n\n\n\n<p>This way they can <strong>focus on that more easily<\/strong> and determine the <strong>difference<\/strong> between suggestions, leading them to <strong>a faster decision<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"850\" height=\"402\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-13.jpg\" alt=\"Don't highlight what customer already typed in, highlight the predictive part instead for better UX\" class=\"wp-image-3148\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-13.jpg 850w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-13-300x142.jpg 300w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-13-768x363.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"78ae7de1399e\">b. Highlight the Active Suggestion<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>When choosing between suggestions, you should <strong>clearly indicate which one the users&#8217; mouse is hovering over<\/strong> or which one is active for shoppers using keyboard navigation (which must be supported in your autocomplete feature).<\/p>\n\n\n\n<p>This provides clarity and <strong>helps in eliminating mistakes<\/strong>: choosing the wrong suggestion and having to go back.<\/p>\n\n\n\n<p>Also, the <strong>active suggestions should be copied into the <a class=\"rank-math-link\" href=\"https:\/\/www.prefixbox.com\/blog\/search-box-optimization\/\">search bar<\/a><\/strong>. This helps users understand how the autocomplete box works and makes it possible to expand upon the suggestion by providing more details, which leads to more precise results.<\/p>\n\n\n\n<p>Highlighting the active suggestion is usually best done with a simple background shading.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"39ccbea4f24b\">c. Style Different Search Suggestions Differently<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>As we have discussed, multiple different suggestion types may appear in your field, and you must <strong>help the user understand the difference between them<\/strong>.<\/p>\n\n\n\n<p>Let&#8217;s say that besides predictive queries you also include products and\/or product categories. If you group these together, make sure to differentiate them. For example, style the text a differently. e.g. <strong>giving it another color<\/strong>.<\/p>\n\n\n\n<p>If all different types of suggestions are displayed as the same, the <strong>users might not understand the difference<\/strong>, and ignore them or choose ones that aren\u2019t really relevant.<\/p>\n\n\n\n<p>Small changes in style make it <strong>easier for the user to scan<\/strong> the presented suggestions, and focus on those they are interested in.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"850\" height=\"523\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-100p-9.jpg\" alt=\"Help search users to understand the difference between the search results for example with styling and different colors.\" class=\"wp-image-3135\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-100p-9.jpg 850w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-100p-9-300x185.jpg 300w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-100p-9-768x473.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"e35cd5040159\">d. Style for Readability<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Especially on mobile devices, it\u2019s very important shoppers <strong>can actually read the suggestions<\/strong>, and also <strong>easily select the ones they are interested in<\/strong>.<\/p>\n\n\n\n<p>Keeping readability in mind, the suggestions should be presented in a <strong>large enough font size<\/strong>, and with <strong>enough spacing, maybe even with separators<\/strong>, so that tapping on them doesn&#8217;t lead to accidentally selecting another option.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h3 id=\"b6c98ad2d330\">5. Provide Clear Instructions<\/h3>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h3\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p><strong>The exact functionality of an autocomplete feature<\/strong> may not be completely clear to users right away, especially considering how different on-site search solutions can be.<\/p>\n\n\n\n<p>In order to help them use the feature, providing instructions and labels can be greatly useful. These may include <strong>headings in the list<\/strong>, e.g. separating \u201cSearch suggestions\u201d, \u201cCategories\u201d, \u201cArticles\u201d and so on.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"850\" height=\"396\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-100p-8.jpg\" alt=\"Provide instructions and labels in search autocomplete, like &quot;categories&quot; and &quot;articles&quot;.\" class=\"wp-image-3133\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-100p-8.jpg 850w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-100p-8-300x140.jpg 300w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-100p-8-768x358.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/figure><\/div>\n\n\n\n<p>This will <strong>help users understand<\/strong> how the list is structured, <strong>scan it more easily<\/strong> and direct their attention to the ones that are relevant to them. Without clarifying these details, mixing the different suggestions into one list, the user may pick an article instead of a product, or go to a category page instead of a more general results page despite their initial intention.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h3 id=\"289e93d34383\">6. Visual Focus and Simplicity<\/h3>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h3\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>When the customer is using the search feature, the autocomplete field together with the search box should be given absolute priority in terms of visual attention.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"59d72f024cc5\">a. Design for Visual Depth<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Giving the autocomplete field priority can be easily achieved with <strong>darkening the rest of the site<\/strong> &#8211; the background in this case.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"850\" height=\"303\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2020\/12\/article-illustrations-ac-850px-100p-7.jpg\" alt=\"Help search user to focus on search results instead of other parts of the online store.\" class=\"wp-image-3130\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2020\/12\/article-illustrations-ac-850px-100p-7.jpg 850w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2020\/12\/article-illustrations-ac-850px-100p-7-300x107.jpg 300w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2020\/12\/article-illustrations-ac-850px-100p-7-768x274.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/figure><\/div>\n\n\n\n<p>This will help fade the elements on the site that are fighting for shopper attention &#8211; CTA buttons, banners, product photos and so on. This way, the customer can easily <strong>keep their focus and not get distracted<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"e8ea73ccbd80\">b. Reduce Visual Competition<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p><strong>On mobile<\/strong>, directive elements like navigation or shortcuts may <strong>appear beside or even above the autocomplete field<\/strong>, which actually ends up making navigation problematic and distracting.<\/p>\n\n\n\n<p>Be careful where you place your live chat option, an icon for the shopping cart, or even sticky headers, to make sure it doesn\u2019t detract from the search experience.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"768\" height=\"407\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-100p-10-768x407-min.jpg\" alt=\"\" class=\"wp-image-5616\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-100p-10-768x407-min.jpg 768w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-100p-10-768x407-min-300x159.jpg 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p><strong>By minimizing these distracting elements<\/strong>, you can minimize mis-clicks and provide a much smoother experience.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h3 id=\"d711a0226aa9\">7. Support Both Mouse Interaction and Keyboard Navigation<\/h3>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h3\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Customers should be able to see which suggestion they are hovering over. This can be done by highlighting the given row. You may also invoke the hand cursor to make it clear that they can click the suggestions and it will take them to a result page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"768\" height=\"489\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-100p-11-768x489-min.jpg\" alt=\"\" class=\"wp-image-5617\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-100p-11-768x489-min.jpg 768w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2023\/04\/article-illustrations-ac-850px-100p-11-768x489-min-300x191.jpg 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>It\u2019s important to <strong>provide keyboard navigation<\/strong> (especially since we mostly use Google for off-site search, and it has trained us to use this functionality).<\/p>\n\n\n\n<p><strong>Using the up and down arrows<\/strong>, customers should be able to switch between the suggestions, and select one by hitting <em>Enter<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h3 id=\"37ffc74ff7ad\">8. Mobile Specific Optimizations<\/h3>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h3\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>There are a few things that are very, very important to keep an eye on when designing autocomplete for a small screen.<\/p>\n\n\n\n<p>Here are the most important ones:<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"b78d9d4862d0\">a. Use Text Wrapping<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>We already mentioned how you shouldn&#8217;t try to expand your suggestion field with a vertical scroll bar. We also recommend not using a horizontal one. <strong>Many suggestions, including long or multiple keywords, won&#8217;t be able to fit in their row<\/strong>, given the limited screen size and that you must use a big enough font for readability.<\/p>\n\n\n\n<p>If you just shorten the suggestion by including &#8220;\u2026&#8221; at the end, you confuse the customer who won&#8217;t know exactly what they might be clicking on as part of the info is missing.<\/p>\n\n\n\n<p><em>So how do you solve this problem?<\/em><\/p>\n\n\n\n<p><strong>Use text wrapping<\/strong> and expand suggestions to multiple rows as needed, even if this means fewer will be visible.<\/p>\n\n\n\n<p>Providing adequate information before the customer has to commit to a click is essential.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"9869948a3945\">b. Partially Obscuring the Last Visible Suggestion<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p><strong>On mobile, scrolling is unavoidable in many case<\/strong>s, especially if you have to wrap search suggestions.<\/p>\n\n\n\n<p>Instead of adding a scrollbar, there are a few other things you can do.<\/p>\n\n\n\n<p>The best one is probably <strong>partially obscuring the last result<\/strong> &#8211; which is a clear indication that the list continues below.<\/p>\n\n\n\n<p>Now, considering the <strong>different screen sizes, browsers, fonts etc<\/strong>. it\u2019s nearly impossible to get this right every single time because there are just too many variables.<\/p>\n\n\n\n<p>So what you might want to do is check your analytics, find out which devices are used the most to access your store, and optimize for those.<\/p>\n\n\n\n<p>Most users will still be selecting one of the suggestions that are visible right away, but with this method, you can provide a smooth experience for those who want to explore the whole list.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h4 id=\"44a5e25cc224\">c. Make it Easy to Exit Autocomplete (and Remove the Search Input)<\/h4>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h4\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>If a customer decides they no longer want to use the search bar, and wants to return to browsing the site, it should be easy for them to do that.<\/p>\n\n\n\n<p>Providing an &#8220;X&#8221; icon to delete the query and search bar suggestions instead of asking shoppers to do it manually, is a handy solution to enhancing shoppers browsing journey.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h3 id=\"110851e619b1\">9. Provide Category Search Suggestions<\/h3>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h3\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>When a customer starts to type a query in the search bar, they <strong>might just want to explore<\/strong> what you have in a given product category.<\/p>\n\n\n\n<p><strong>Providing them with category suggestions<\/strong> is a very convenient way to enable them to browse your products and find the one they want to buy.<\/p>\n\n\n\n<p>This <strong>saves time<\/strong> for the customer and <strong>provides a clear path,<\/strong> making the user experience smoother.<\/p>\n\n\n\n<p>However, you want to <strong>avoid visual clutter and confusion<\/strong> &#8211; as we have discussed before &#8211; clearly indicate that category suggestions are not keyword suggestions. Do this with a simple heading and\/or by using a different style.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:10px\" aria-hidden=\"true\"><\/div>\n\n\n\n<h3 id=\"ac9d10ae119e\">10. Speed is Essential: Real-Time Autocomplete<\/h3>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator-sub-chapter-h3\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Your autocomplete should always <strong>provide suggestions in real time<\/strong>.<\/p>\n\n\n\n<p><strong>If it&#8217;s slower than that, it can be downright irritating<\/strong> for the user, as they can visually perceive the lag &#8211; like with a website slowly loading individual elements.<\/p>\n\n\n\n<p>If the autocomplete is not real-time, all of the above best practices are worthless as no one will be using a search bar they perceive as not useful.<\/p>\n\n\n\n<p>Suggestions have to <strong>appear right when the first character of the query is entered<\/strong>, and should change with every subsequent keystroke to be updated to show relevant options.<\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:20px\" aria-hidden=\"true\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-anchor\" id=\"chapter-2\"><\/div>\n\n\n\n<h2 class=\"chapter-heading\" id=\"31c3dc5dc174\">Summary<\/h2>\n\n\n\n<div class=\"wp-block-getwid-section getwid-margin-top-none\" style=\"margin-bottom:-20px\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<hr class=\"wp-block-separator blog-content-separator\"\/>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>Providing the highest level of quality during a customer\u2019s journey will help you directly increase your store revenue. A better search experience leads to higher satisfaction, better experience, and overall higher conversion rates and average order value.<\/p>\n\n\n\n<p>By using the best practices in your store, you can achieve exactly that.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"850\" height=\"532\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-12c.jpg\" alt=\"Provide the highest level of quality during customer's journey\" class=\"wp-image-3151\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-12c.jpg 850w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-12c-300x188.jpg 300w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2021\/01\/article-illustrations-ac-850px-95p-12c-768x481.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/figure><\/div>\n\n\n\n<p>Remember the most basic guidelines:<\/p>\n\n\n\n<ul><li>Autocomplete should work in real-time.<\/li><li>It should provide relevant results &#8211; which can be personalized.<\/li><li>It should provide clear visual guidance as to how to use it.<\/li><li>If it&#8217;s in use, all other site elements should be faded into the background.<\/li><\/ul>\n\n\n\n<p>Of course it can quickly get complicated, and fine-tuning can be time-consuming to keep up with. This is why, to achieve the best results, we recommend working with on-site search experts.<\/p>\n\n\n\n<p>As always, if you have any questions, or suggestions for the expansion of this list, reach out to us!<\/p>\n\n\n\n<p><a href=\"https:\/\/www.prefixbox.com\/en-us\/solutions\/autocomplete\">Learn more about the most important search autocomplete features to decrease zero-result pages by 31% and increase cart value by 19%.<\/a><\/p>\n\n\n\n<div class=\"wp-block-getwid-advanced-spacer\" style=\"height:50px\" aria-hidden=\"true\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-person author-profile-picture\"><div class=\"wp-block-getwid-person__image\"><img loading=\"lazy\" width=\"150\" height=\"150\" src=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2019\/04\/Paige_Tyrrell-150x150.jpg\" class=\"wp-image-1830\" srcset=\"https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2019\/04\/Paige_Tyrrell-150x150.jpg 150w, https:\/\/www.prefixbox.com\/blog\/wp-content\/uploads\/2019\/04\/Paige_Tyrrell.jpg 200w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/div><div class=\"wp-block-getwid-person__content-wrapper\"><span class=\"wp-block-getwid-person__title\">Paige Tyrrell<\/span><span class=\"wp-block-getwid-person__subtitle\">Head of Marketing \u2013 Prefixbox<\/span><p class=\"wp-block-getwid-person__content\">Paige is the Head of Marketing at Prefixbox, a leading eCommerce site search solution. She\u2019s an American who\u2019s been living in Budapest since 2017 and loves giving #alwayslearning sessions to help people optimize their online stores.<\/p>\n<div class=\"wp-block-getwid-social-links has-default-spacing\" style=\"font-size:29px\"><ul class=\"wp-block-getwid-social-links__list getwid-justify-content-center\"><li class=\"wp-block-getwid-social-links__item\"><a class=\"wp-block-getwid-social-links__link\" href=\"https:\/\/www.linkedin.com\/in\/paigetyrrell\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"wp-block-getwid-social-links__wrapper\"><i class=\"fab fa-linkedin\"><\/i><\/span><\/a><\/li><\/ul><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We need something here that we want to clarify the basics first. What is Autocomplete Search? Autocomplete is the function of search engines that displays [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":5028,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.prefixbox.com\/blog\/wp-json\/wp\/v2\/posts\/3059"}],"collection":[{"href":"https:\/\/www.prefixbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.prefixbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.prefixbox.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.prefixbox.com\/blog\/wp-json\/wp\/v2\/comments?post=3059"}],"version-history":[{"count":67,"href":"https:\/\/www.prefixbox.com\/blog\/wp-json\/wp\/v2\/posts\/3059\/revisions"}],"predecessor-version":[{"id":6977,"href":"https:\/\/www.prefixbox.com\/blog\/wp-json\/wp\/v2\/posts\/3059\/revisions\/6977"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.prefixbox.com\/blog\/wp-json\/wp\/v2\/media\/5028"}],"wp:attachment":[{"href":"https:\/\/www.prefixbox.com\/blog\/wp-json\/wp\/v2\/media?parent=3059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.prefixbox.com\/blog\/wp-json\/wp\/v2\/categories?post=3059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.prefixbox.com\/blog\/wp-json\/wp\/v2\/tags?post=3059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}