Zum Hauptinhalt

Getting Started: Finding Success With In-Site Search

BLOG

This is the fourth blog in our Getting Started series, designed to provide helpful information to guide the digital journeys you are creating for customers.

As your inventory grows, it’s natural to add new collections to better organize your products. In a perfect world, customers know exactly what they want and drill down through your navigation until reaching the desired product. However, this is not a common use-case. Instead, people are often uncertain about some exact product; they might instead browse for a while. For them, choosing a collection from a drop-down menu, followed by a sub category selection, is not ideal. This is where in-site search flourishes.

But how detailed should your in-site search experience be? Can you offer too many options? In this blog we cover best practices that help you offer customers a satisfying search experience.

Do You Need In-Site Search?

Before digging into the topic, a fair question should be addressed: do you need in-site search at all? If you have very few products unified within a single category, this feature is probably overkill. After all, if potential customers can’t find a product that is already on your home page, a search box will probably not help. If no one is biting, a redesign or design realignment may be needed.

Design Basics

Customers know when a site is under-designed or poorly designed. Your site doesn’t need to be perfect, but if enough details are missing, customers may not trust your brand and decide not to spend with you. Well, the same is true of search. There’s good design and bad.

Bad

  • No search icon
  • No placeholder text
  • No font treatment

Good

Speed vs Speed Perception

Because the majority of your website visitors are reaching you from a smartphone, your site search needs to feel fast. You might be wondering why the word “feel” was not “be.” Well, not every business is fortunate to have a performance-minded engineering team hellbent on making your web pages blazingly fast. If you’re in this camp, all is not lost. Instead of being fast, you can feel fast, which sometimes is enough.

One way to achieve this is with skeleton loading. The idea is to reduce the initial page load time by first loading a skeleton image of your actual image. The skeleton images are lightweight files that load almost instantly. Once the real images are ready, they replace the skeleton images. To the user, the page feels as if it’s loaded faster than it actually has. Many major brands utilize this technique, and though it’s not a replacement for truly fast web pages, it’s better than doing nothing and hoping the customer sticks around.

Type-Ahead Search Results

We’ve talked about making the initial search as fast as possible, but there’s a moment before the full query is sent that should be addressed. Meet Cindy, our pretend website visitor. She knows she wants a new hoodie of some kind, so she heads over to Gap and begins typing the word hoodie in the search bar. After only a few keystrokes, she is presented with different hoodie styles she had not considered. Should she pursue logo hoodies, or maybe a Sherpa style? In-site search provides a unique insertion point into your product atmosphere. It’s casual and full of options, and is not presumptive in regard to a person’s shopping goals. It might look like this.

A good type-ahead experience includes details such as the ability to navigate up/down through the list via the arrow keys. This provides an added accessibility benefit for users who cannot operate a mouse. Another example is real-time emboldening of the typed string in the results (see image above).

Post-Search Experience

After the search results are returned, the experience is not over. More refinement is often needed, and this is where filtering and sorting come in.

Sorting

Sorting is an easy feature to add, but provides a lot of convenience. Typical sorting options include “Newest,” “Price high/low,” etc.

Filtering

Gender, category, color and price are common ways people might refine an initial search. For example, here, Mark has searched for “flip-flops.”

He refines by “men” in the gender filter, revealing another set of filters.

Instant Filtering Updates

Since potential customers already performed their initial search (triggering a full-page load), filtering should update only a part of the webpage. This is fairly standard behavior now in eCommerce experiences and will help to prevent customer drop-off.

Logical Controls

A control is a widget or element that web users can interact with to change the contents of search results. Picking the wrong control for a sorting or filter option can create a dead zone, a state where no results are returned because no products satisfy the filter.

Let’s bring Cindy back for another shopping excursion. After buying her hoodie, she is in the market for a high-end toaster oven. She searches a popular electronics website for “toaster oven” and then attempts sort by price. Instead of a drop down, she is presented with two text boxes to enter a minimum and maximum dollar amount she’d like to spend. She enters $125 for the minimum and $200 for the maximum. The website doesn’t sell any toasters over $115. Do you see the problem?

Instead of offering a control where the user can enter arbitrary criteria, offer a control that is fail-proof. For example, here is a slider control containing a price range given the current inventory. In this way, customers will always be returned a non-empty result.

Responsive Experience

Your eCommerce website must be responsive. This means that it will look well-designed on any device, from phone to large external monitor. Font-sizes should remain legible at all sizes. For your in-site search, ensure your filter controls are usable in all contexts. Mobile users should not have to endure a lesser experience, only a different one. Here is the mobile equivalent to the filtering image above. Notice how nothing is missing in the mobile experience.

Paginating Search Results

Don’t load too many images on one search results page. It’s important to remember that many visitors to your website are on low-powered devices with slow Internet connections. For them, loading 35 high resolution product images will grind their smartphones to a halt. It’s not rare to experience 20-25 second loading times—even on popular eCommerce websites. Limiting the number of search results to something reasonable (10 to 15) will help retain more customers.

Leveraging Your Blog Posts

Does your blog help sell your products? Many blogs are quite informative in this way, and could help drive customers to purchase their products. Sadly, many blogs live on the website in an isolated way, stashed in a corner and rarely noticed. To help drive sales, consider adding your blog text into your search results. Although product results should be the most featured part of search results, blogs can provide a strong secondary piece of content.

How Much Search Do You Need?

Hopefully, this blog has helped you better understand how much in-site search complexity you need for your eCommerce website. Speak to a designer if you’re still unsure. A good designer is a great listener and will help create an experience that fits your inventory.

Authors

Alexandra Wood
Alex has worked in eCommerce for over 8 years supporting large multi-$100M companies and those just starting out. Today, she leads Small-Medium Business Solutions at LiveArea. When not working you can find her cheering on her sports teams and enjoying good weather with friends on a patio in Dallas.

Andy Hoffman
Andy Hoffman began his web career when people still wore flannel shirts tied around their waists. He currently lives in Portland, OR, and serves as Shopify Lead for LiveArea. When he’s not coding, Andy enjoys drumming, biking, coffee, and Abe, his evil-genius cat.

RELATED ARTICLES