10 UI/UX Protips to design the instant search dropdown on eCommerce stores

June 17, 2024

December 3, 2024

•

5 min read

Search is the fastest and most effective way to convert visitors into buyers. An eCommerce store without enhanced search functionalities is a surefire way to failure. Before applying state-of-the-art technologies like NLP and machine learning to your site search engine, you should never neglect the search UI/UX in the instant dropdown, or the search autocomplete.

This is the very first interaction between potential buyers and the site search. Doing it wrong is like leaving a terrible first impression, which can cause customers to bounce and never come back. So you’d better make it as smooth and user-friendly as possible. Here are the top 8 design tips you should use when building the interface and the experience of the search widget.

Tip #1: Use the placeholder text and common visual hints wisely

Search has been a popular online activity since the dawn of the internet. As a result, there are some universal UI guidelines you should follow to avoid confusing customers.

First and foremost, the search bar should be placed at the top-center or the top-right corner of the page. Research shows that the center position achieves the highest search usage, 15.86%. On the other hand, placement at the top-left led to the worst result at 7.72%.

However, you need to take into account the mother tongue of your customers too. For example, in Arabic languages, people read things from right to left, so it’s better to place the search bar on the left side to catch their attention.

You can see the search field in the top-left corner of the English version but it is switched to the top-right corner in the Arabic version of this university's website.

👉 👉 Read on How to design an UI/UX optimized search journey from the search bar to the search page on e-commerce stores.

Regardless of the position, one visual hint for the search bar we all agree on is the magnifying glass icon. This icon or the word “Search” should be added to the search field to indicate that users can click the search results page. You should also allow shoppers to achieve this by hitting “Enter” on a keyboard or “Go”/ “Search” on a mobile keyboard.

On the autosuggestion dropdown, it's a plus point for UI/UX when you show a link at the end of the suggestions. This helps to indicate that there might be more results on the search results page.

(Source: Crocs - a user of Boost Product Filter & Search)

The placeholder text is another key position in communicating with shoppers. You can use it to guide visitors on what they can search for. We find that many eCommerce stores allow looking for product SKUs. However, customers are not aware of that. In this case, using a placeholder text like “Search for products’ name, SKU, etc” will be of great help.

Rebag - a Boost user - gives some examples for the queries on the search field.

Tip #2: Enhance visual depth on the search autocomplete design

Your website definitely doesn’t have only the search feature. The homepage carousel, the neighboring banner, and many other webpage components can vie for the user’s attention and interfere with their search journey.

Visual depth on the instant search widget gives it a little more weight when surrounded by distracting elements. Including a border for the autocomplete dropdown is a simple way to avoid being blended with the background. However, it doesn’t make the search prominent enough.

You should consider adding a subtle shadow or dimming the background to make searchers focus on the autocomplete feature and “move more smoothly into product exploration”, according to Baymard.

Boeing Store darkens the background when customers use the instant search feature.

Another way to keep the user’s full attention to search is to use the overlay full-width layout.

👉 👉 Visit our Demo site to learn more about this instant search layout.

Tip #3: Keep the number of suggestions short and sweet

Hick’s law is a common concept in UI/UX design. Its idea basically is the more choices there are, the longer it takes to pick one. That’s why it’s harmful when you put a whole lot of suggestions in the instant search widget.

The ideal number in the instant results is no more than ten items. On mobile, so as not to overflow the user’s viewport, this number should be shortlisted to four to eight. By doing so, shoppers can get an overview of their choices.

If your search returns results in different scopes, such as term suggestions, product suggestions, pages & blog posts, you should adjust the number of suggestions in each category depending on the context. For example, product suggestions should take the lead when customers browse your homepage.

Customize the instant search display in Boost AI Search & Discovery. Try it yourself in a 14-day free trial. Access to all features including powerful storefront filtering and merchandising.

Trusted by fast-growing brands

Start your 14-day free trial

Get started

Scroll paradigm in search autocomplete is not recommended either. Having all suggestions manageable and visible at once is the best choice, as inline scrolling can cause unintentional clicks, scroll hijacking, and obscured content.

Tip #4: Differentiate between the original input and the rest

Basically, the autocomplete terms in the search dropdown combine the query entry with a related predictive suggestion. Many eCommerce sites do not make a distinction between these two parts, which burdens the visual load for the searchers. In this case, they need to scan through the suggestions one by one to identify the best match.

Some other stores make the mistake of highlighting the repetitive characters the customer has entered in each and every autocomplete suggestion. This brings the shoppers' attention to the original query they already know.

The search UI/UX tip you should apply here is to make the predictive components bold. It will:

draw shoppers’ attention to the query possibilities
assist them in “filling in the blanks”
allow them to skip over repeated terms and spend less time reading.

Highlighting the differences in the suggestions is good for search UI/UX. (Source: Red Dress)

Tip #5: Highlight the search suggestion on hover

Customers tend to skim through the list of suggestions. Therefore, clearly identifying the active suggestion – the one they are looking at – is a plus point for UI/UX. It keeps the shopper on track and avoids mis-clicking.

Many Internet users are also used to keyboard navigation as a result of using well-known search engines like Google. Without the highlight, customers won’t know where they are on the suggestion list when using their keyboard for navigation. This also helps you comply with Accessibility guidelines, which are crucial in some American states.

On hover or navigated by keyboard, the active suggestion on Orka will change the color and have background shading for emphasis.

Additionally, you should think about using the “hand cursor” when the user hovers over the autocomplete recommendations. This makes it crystal clear that clicking these links will launch a search results page.

Tip #6: Allow for clearing queries and closing the search dropdown separately

Some users will alter their search strategy mid-query in an effort to end the search and remove the autocomplete suggestions from their path. Therefore, you should include a close (x) button in the form of an icon or text.

Also, it’s a UI/UX upgrade to allow searchers to end the search experience and close the product suggestion dropdown. A simple click on the background should be enough to let customers achieve this.

(Source: Camilla)

When using a full-width layout for the instant search widget (meaning there is no “background” to click when users want to exit the search suggestions), you should have a secondary close button to perform such action.

The full-width search layout on Boost Product Filter & Search.

Tip #7: Implement visual merchandising on the search autocomplete

In the age of digital marketing, visual merchandising is a key factor in boosting sales. The instant search widget offers product suggestions and search autocomplete, which can be very useful for visual merchandisers.

Just by showing the product images in the search dropdown, you give the shoppers a preview of what they are about to purchase. This helps them in their decision-making process. By being able to see the product, shoppers get a better idea of whether or not the style might fit them well. Alluring imagery in the instant search is a shortcut to lead customers to the product page. They can then explore the item in detail and finally purchase it.

With just one single click, you can show product images in the search autocomplete as in Miss Amara.

Tip #8: Predictive search UX guidelines for mobile-readiness

Mobile commerce is a huge trend in the world of e-commerce. The main reason is that consumers are always on the go. They want to be able to access their favorite brands from any place and at any time. That’s why we dedicate a section for mobile optimization with the instant search widget.

When it comes to small screen devices, the top priority is readability. As a result, you should narrow down the number of suggestions as we mentioned in Tip #1.

When it comes to small-screen devices, the top priority is readability. As a result, you should narrow down the number of suggestions we mentioned in Tip #1.

The mobile testing conducted by Baymard also indicated that users found it challenging to see and choose the autocomplete in small letter sizes. Additionally, when small text sizes and insufficient space were coupled, it led to mistaps that confused shoppers when they arrived at unexpected results pages.

The rules of thumb for search UI/UX readability on mobile are:

✅ Use sufficient font scaling

✅ Make sure there is adequate space between tappable components

✅ Give hit zones a reasonable size to address readability difficulties with autocomplete

✅ Present the suggestions in title case or lowercase (sometimes known as "headline-style") rather than all capital text.

Also, you should completely avoid truncating suggestions. Truncation barely leaves users with a possible way to view the entire predictive terms as they usually miss the vertical scrollbar on mobile devices. Using text wrapping is a better choice here.

Unlike desktop users, mobile users are accustomed to scrolling up and down. Therefore, a scrollable search widget is quite acceptable on mobile. However, you should clarify that shoppers can scroll to see more suggestions. Providing users with subtle scroll indicators might help them realize there's more to view.

Tip #9: Leverage user search history for a personalized touch

A truly seamless user experience caters to individual preferences and anticipates specific needs. One powerful way to enhance your instant search dropdown is intelligently utilizing search history. With Boost AI Search & Discovery, you can prominently showcase recent searches within the dropdown. This empowers shoppers to revisit past queries, cultivating a sense of familiarity and personalized attention.

We also offer AI-powered personalization algorithms for search, recommendation, and bundling. Returning customers are greeted with a curated list of their recent interests, making it a breeze to pick up where they left off.

This personalized touch can dramatically improve their overall shopping journey. Effective personalization boosts customer engagement and increases revenue. A positive, seamless experience for your shoppers translates to a remarkable 20% increase in customer satisfaction and a substantial 10-15% jump in conversions – turning browsers into buyers.

Tip #10: Guide shoppers when searches come up empty

Handling these “no results” moments smoothly is key to a great search experience. Instead of a blank page or a generic error, offer helpful guidance. Think of it as a chance to keep the shopper engaged, not lose them.

Here are a few ways to turn an empty search into a positive experience:

Suggest alternative search terms: Perhaps the shopper misspelled a word or used a synonym that your search engine doesn't recognize. Offering similar search terms can quickly get them back on track. For example, if someone searches for "sweaters" but you only have "jumpers" listed, suggesting "jumper" can save the sale.
Showcase related products: Even if the exact search term yields no results, you might have items that are close enough. Displaying related products based on categories, brands, or features can spark the shopper's interest and lead them to something they'll love. If someone searches for a specific blue shirt you don't carry, showing tees with the same color or other shirt types can be helpful.
Link to relevant categories: Sometimes, a shopper's search is too broad or too specific. Guiding them to relevant categories can help them refine their search and find what they need. If someone searches for "clothes," linking to categories like "Men's Clothing," "Women's Clothing," or "Children's Clothing" can narrow down their options.

Easily customize the Instant search widget and Search pages without results in Boost AI Search & Discovery.

Have you optimized the search UI/UX in the instant dropdown?

UI/UX optimization is the key to eCommerce conversion. The first impression usually lasts the longest, so make sure you spend resources to design an optimal search autocomplete widget. Simply investing in a third-party app like Boost can help you quickly handle all these things. Grab your free trial now and let the sales tell.

Ellie Ho

•

Content Marketing Specialist

December 3, 2024

•

5 min read

10 UI/UX Protips to design the instant search dropdown on eCommerce stores

Shopping shouldn’t feel like a chore

Related Posts

Your BFCM merchandising checklist: five settings to check before Black Friday

How To Maximize Email Conversion Rates With AI Product Recommendations

What is semantic search? How AI captures more sales through your search bar