HTML & CSS - - By Liam Boogar

Build the Ultimate Search for Your Business, Just Like Google and Amazon

Header image

This article was sponsored by Algolia. Thank you for supporting the sponsors who make SitePoint possible.

When companies think about search, they think about Google. They invest heavily in SEO & SEM to drive traffic – meanwhile, their own search experience remains neglected. Default search options on platforms like Shopify and WordPress pale in comparison to Google & Amazon; the problem is, when most people think of improving their own site search, they think about hiring a team of search engineers to create an ultra-personalized, machine-learning, predictive search experience – either invest heavily now or stick with the default search, right? Wrong.

It’s a bad idea to invest in driving traffic to your site if the customer journey inside your site is not optimal – and if you’re thinking “my search traffic is a low percentage of my site, so why should I worry about it?” then your site search could probably be improved. Remember: in 2016, 93% of all Internet experiences started with search.

The biggest mistake you can make isn’t thinking “search isn’t important to my customer’s digital experience;” it’s thinking that it takes a team of search engineers to make a great search experience.

If there’s one thing you take away from this article, let it be this: in 2017, search isn’t about back-end, it’s about experience. The future of great search experiences is in the hands of UX designers & front-end engineers.

Since 2012, Algolia has been working to enable any engineer to build great search experiences on top of our hosted search engine, powering search on thousands of websites & products around the world. During that time, we’ve educated our customers about what is necessary to have a great search experience – there’s more to great search than fancy algorithms or ultra-customization.

Search is a very intuitive process. Users don’t analyze a search experience feature-by-feature — in fact, most of your product’s users would likely say that the search bar itself is the feature, and not the various components that make up that search bar — which means that your users intuitively know after the first try whether your search is great or decent. The difference between decent search and great search is in the three pillars of search – Speed, Relevance, and Design.

Pillars of Search

Milliseconds Matter

Algolia provides 99% of search results in under 35 milliseconds, anywhere in the world – just ask our customers. Answering the question “How fast is fast enough?” requires a bit of “How” and a bit of “Why,” but let’s start with the latter:

Why Milliseconds Matter:

  • 100ms of latency costs Amazon 1% of its Sales
  • 500ms of latency costs Google 10% of its traffic
  • 10 seconds: the attention span of a digital consumer

It’s a race against time for you to keep your audience engaged. At any given step in their journey, users will churn if they sense stagnation – especially so with Search, where they have already subconsciously benchmarked your search experience against Google & Amazon.

You’re either as fast as users expect, and they won’t even notice it, or you’re slower, and they will.

In a conversation, if someone responds to your question quickly, the conversation continues fluidly; if someone stares idly at you long enough for you to ask yourself “what’s taking them so long?” the conversation is broken, and the conversation subject changes from what you were interested in to “why is this taking so long?”

The “How” is a bit more operational. There are three things that count when it comes to how fast a search query returns results:

  1. The distance the query must travel
  2. The size of the records that must be queried to determine relevance
  3. The complexity of the algorithm used to determine relevance

For in-house solutions, the distance of the query to a user depends on where you keep your hosted site servers. There’s no point in having servers all over the world to optimize site load speed, so you’ll want to replicate your search solution across key markets to optimize search speed.

The blink of an eye is roughly 180 milliseconds

Creating Instant search – an as-you-type search experience where results appear immediately following the keystroke – requires delivering results faster than the blink of an eye. You should aim for 99% of your queries displaying in under 35ms.

For hosted solutions like Algolia, you’ll want to make sure you have a Distributed Search Network (DSN) – a CDN for your search bar – which allows you to replicate your search index across up to 50 servers in every corner of the globe, depending on where your users are coming from.

Keep Those Records Small

The smaller the record size, the faster it can be passed through the engine. It’s faster for search engines like Algolia to search 1 Million one-paragraph text blocks than 10,000 100-Paragraph text blocks — It can also increase relevancy, pointing to where in a given text the query is matched.

Keeping a lean search machine means having a lean search algorithm. Algolia uses a tie-breaking algorithm – a series of simple nested functions which each trigger successively only when there is a tie in the preceding function’s ranking output. That means that if your first function – say, for GeoSearch, distance from the user – returns a unique rank for each result with no ties, that function stops there, quickly and without compromise on relevancy.

Search engine frameworks like Elastic Search & Solr use floating point score algorithms, which developers write themselves. Those can start out simple enough, but with each iteration and improvement – a little typo-tolerance here, a little synonym handling there – the algorithm gets more bulky & slower, without necessarily being more relevant.

Relevance

Relevance means finding what you’re looking for. Two things go into relevance:

  • Textual relevance: How well the query matches the searchable words of a record
  • Business relevance (i.e. your business metrics): number of sales/views/likes, featured objects, price, date…

Not all search engines are built the same, and likewise, every search experience will have its own unique balance of textual & business relevance. The most important thing is that the search framework that you use be built to handle these two different types of data points.

In addition to ordering by business/vanity metrics that matter most to your users, you’ll want to make sure you handle some of the more semantic challenges:

  • Typo-Tolerance: don’t let autocorrect ruin a perfectly good search experience.
  • Synonyms: British users searching for a “jumper” should find your wonderful collection of “sweaters.”
  • Long Queries: users searching for “faded blue jeans” shouldn’t come up empty handed just because you only have “faded jeans.”

Relevance is unique for each search experience, and understanding what your users are searching for, finding & not finding can be more valuable than any tweak or modification to your ranking algorithm.

Algolia provides all users with an analytics dashboard, which, in addition to providing key figures, helps you find queries that come up with no or few results – this can often be the greatest source of frustration for users, and the best place to start when deciding where on your site to focus your energy. Additionally, because Algolia uses a tie-breaking algorithm and not a floating point score, relevancy can be fine-tuned & iterated upon directly inside the dashboard without needing to touch code with every little change.

Design

Autocomplete

The UI/UX of your search bar is perhaps the most important pillar, which is often the most neglected – namely because search is often focused around ranking optimization & speed, instead of experience. But what good is it to have lightning fast, relevant search if the user has to press ‘enter’ to get search results each time?

Here are a few of our best practices for a great search experience:

  • As-you-type search results: every keystroke should be producing results. When combined with great speed, the user feels like the search results are refining themselves with each keystroke.
  • Highlight results: Understanding ‘why’ you’re getting the response you’re getting can be just as important as getting the right results themselves. Did the top result only come up because the query appears in a secondary attribute for that record? Display it conditionally and highlight so the user knows what why they’re seeing given results.
  • Provide context in results: If you’re using business metrics – popularity, price, availability – in your ranking algorithm, make sure the user sees that by displaying those metrics inside the search results. Think of it as highlighting your ranking formula!
  • Placeholder Text: Let your users know what they can search for by leaving placeholder text inside the search bar before they start typing – i.e: “George Clooney, No Country for Old Men, Drama, 1920s”
  • Multi-Category Search: The more ways the user has to be successful, the higher the chances they’ll find what they’re looking for. Even if you’re just searching through articles in a WordPress blog, allowing users to search by Author, Category, Title & Tag mean that you let the user search how they want, instead of them having to learn how your search works.

Like most creative professions, underneath the hood, design is a series of very concrete steps. The checklist is there for you to have beautiful search, and as you try out your favorite search bars (even SitePoint), keep these design elements in the back of your mind. What is missing? What questions do you have? How could design answer them?

Conclusion

For your end-users, search is instinctual – it works or it doesn’t. For you, search can be easy, if you know what to look for. You don’t have to be a search expert to have a great search experience. At Algolia, we believe the future of search is in great UX/UI, which is why Algolia’s integrations come pre configured with design best practices. The hosted search platform takes care of Speed for you, and makes tweaking relevance something that anyone can do, so that you can focus on building a great app experience.

No matter how you build search, the bar remains the same. And the pillars that define great search – speed, relevance & design – are not dictated by Algolia, by Google or by any other player. They have been dictated by users, who expect a search experience that just works, whether you’re Google, Amazon, or any other app.