Search UX: Box, Suggestions, and Results Without Dead Ends

Why is search a design problem?

Because many people use search as their first resort. When navigation is unclear, they type what they are looking for and expect the site to understand. If it does not, they rarely try again: they leave. Baymard’s benchmark found that nearly half of e-commerce sites do not offer effective ways to recover when a search returns no results (Baymard: No results page).

The three parts of search, the box, the suggestions, and the empty result, need to be designed together. If one fails, the others cannot make up for it.

What happens in the box?

The prominence of the box should match the importance of search on your site. Baymard observes that the larger the field (and its text), the more prominent it looks, and that a physically small or muted box loses a lot of visibility. A large catalog where people arrive with something specific in mind needs a very visible box; a site explored by category can afford a quieter one (Baymard: Search field design).

Placement matters too. In the same article, Baymard notes that the top-right corner of the header typically gets less attention, while the center of the header gets a lot. There is no universal minimum size: the way to know whether your box is noticed is to watch real people try to find something.

What should suggestions do?

Autocomplete helps people phrase a better query, not just type less. Baymard reports that in its testing people were very faithful to the site’s suggestions, and that weak suggestions sent several participants on detours, sometimes ending in abandonment. That is why a poor suggestion can derail a search as much as a poor result. Its examples page notes that autocomplete is now used at 90% of major e-commerce sites (Baymard: Autocomplete suggestions).

The recommendations in Baymard’s article, published in 2022, are concrete (Baymard: Autocomplete design):

• Keep the list short. No more than 10 suggestions on desktop and 4 to 8 on mobile. Baymard found problems beyond those numbers, and most people choose from the first few options.
• No inline scrollbar on desktop. Let the list grow to its natural height instead of giving it its own scrollbar.
• Bold only the predictive part. What the person already typed is not emphasized; what the system completes is. That makes it easy to see how suggestions differ.
• Style scope suggestions differently. A suggestion such as “sofas in furniture” should look different from a plain query. In testing, italics, color, and indentation all worked, with no single style clearly better.
• Support the keyboard. Up and down arrows move through the list, Enter submits the active suggestion, and the active suggestion should be clearly highlighted.

What should you do when nothing matches?

This is where most sites fail. A page that only says “No results found” is a dead end. Baymard proposes five ways out (Baymard: No results page):

1. Related categories. A broader category, or a product list with a relevant filter already applied.
2. Alternative searches with a preview. Show other phrasings of the query, each with the top three to five products.
3. Personalized recommendations. For example, recently viewed products.
4. A human path. A sales phone number, chat, or other help links.
5. Popular products and categories. Trending items or best sellers, something to show when the search fails.

Baymard also points to an important detail: if only one alternative query returns results, the site should apply it automatically, with a notice explaining that the original query had no results but the revised one did.

What does a good no-results state look like?

It explains what happened, suggests a next step, and offers a way out with one main action. For example: “We couldn’t find ‘French press coffee grinder’. Try ‘manual burr grinder’ or browse the Grinders category.” What does not help is filling the page with unordered suggestions: the person needs a decision, not twenty options. Pick two or three of Baymard’s five strategies that your catalog can support instead of stacking them all.

For other blank states, such as a list with no content yet, read empty states.

When should you NOT build a big search?

• If your site has ten pages, good navigation usually serves people better than a search with autocomplete.
• If the content changes rarely, an index or a category page can be clearer than a search box.
• If you will not maintain suggestions and synonyms, outdated autocomplete produces odd suggestions. Because people tend to follow them, they do more harm than good.

Illustrative example

Illustrative example: in a coffee shop, someone searches for “ground coffee for French press” and there are no exact matches. The old version showed “No results” and nothing else. The new one shows: “We couldn’t find that combination. Did you mean ‘coarse ground coffee’?”, with four products from that search and a link to the Ground coffee category. If only that alternative returns results, the site applies it at once and shows a notice at the top. The team also reviews the failing queries every week and adds synonyms to the list, so the same dead end does not repeat.

If that search combines many criteria, review filters and faceted search. And to decide how each suggestion should appear, consistency and standards across the site keep autocomplete from behaving differently on every page.

Common mistakes

• Leaving the no-results page as a dead end.
• Showing suggestions that return zero results.
• Using autocomplete without tolerating spelling mistakes.
• Giving the suggestion list its own scrollbar.
• Showing too many suggestions and making the decision harder.
• Not reviewing which queries fail, so the same problem keeps happening.

What you can do tomorrow

1. Search your product for three terms that do not exist and note what appears in each case.
2. Check whether your autocomplete ever shows a suggestion that returns zero results.
3. Design a no-results state with one alternative, one category, and one help path, and test it with two people.

Sources

• Baymard: No Results Page (research article)
• Baymard: Autocomplete suggestions (design examples)
• Baymard: Autocomplete design (article, 2022)
• Baymard: Search field design (article)