Site Search Design: How to Build a Search Bar and Results Page That Work

November 12, 2026

Business owner testing a website search page

Good site search design comes down to three things: a search box people can find without hunting, a results page that keeps their query in view and ranks the best answers first, and a no-results state that always gives them a next step. If your site has enough pages to need search at all, those three decisions decide whether a visitor finds your service or leaves. At Charles Choate Creative, we design custom sites around the way your customers look for things, and search is one of those decisions.

Charles-creative
Make Your Website Easier to Navigate
Charles-creative designs custom websites for small businesses, with strategic work that helps visitors find information and trust your brand.

Visit

TL;DR

  • Put the search field in the upper part of the page, make it look like a real input, and give it a visible “Search” button.
  • Keep the query in the box on the results page, rank by relevance, and show the result count.
  • Write a useful no-results page: say nothing matched, repeat the query, suggest alternatives, and offer a contact option.
  • Use a real label, a named button and keyboard-friendly suggestions so search works for everyone, including on phones.
  • Small sites with clear navigation may not need search yet. Fix the menu first.

Table of Contents

Does your small business site need search at all?

Not every site does. A five-page site with a clear menu, a services page and a contact page is usually faster to scan than to search. Search earns its place when visitors arrive with a specific question and your content is too broad for a menu to cover: a service business with many service pages and location pages, a resource library, a shop with dozens of products, or a blog with years of articles.

The accessibility standard backs this up. WCAG 2.2 asks sites to offer more than one way to locate pages, and the W3C’s explanation says that for small sites, links, a site map and clear orientation can be enough, with search as one technique among several. Search becomes the better tool as the site grows.

A simple rule of thumb for owners:

  • Under about 10 pages: put your effort into navigation. Our guide to organizing website navigation for your small business covers it.
  • Dozens of pages, products or articles: add search, and design it properly.
  • A site that already has search but visitors still email you for basic information: the search is probably hard to find, returns poor results or dead-ends on no results.

A search box that works badly is worse than none. It tells visitors you do not have what they want, even when you do.

Where the search bar goes and how it should look

The first rule is that visitors should never have to hunt for search. Baymard’s research-based guidance says the field should look like a real input, be visually identifiable, and sit next to a clear submit button without competing elements crowding it.

In practice:

  1. Upper corner or header. Smashing Magazine recommends the upper corner for the search box, which matches where people have learned to look. On most business sites that means the right side of the header, near the main menu.
  2. An open field, not just an icon. A magnifying glass alone can increase confusion, according to the same Smashing piece. On desktop, show the field itself. If space is tight, an icon is acceptable on mobile, as long as tapping it opens the field right away.
  3. A button labeled “Search.” Text beats a symbol. If your design requires an icon-only button, give it an accessible name (more on that below).
  4. Enough width. A box that fits only ten characters pushes people to type short, vague queries and cannot show what they typed. Aim for a field wide enough to show a typical query in full.
  5. Contrast and spacing. The field needs a visible border or background that separates it from the header. Light gray text on a white header with no outline is the most common way a search box disappears.

This is where brand and usability meet. The search field is part of your visual identity: its border, corner radius, type and color should match your buttons and forms so it feels like part of the site. That is one reason we build each site from scratch rather than from a template: the interface elements are designed together, not pasted in.

Search box microcopy and autocomplete

What the box says matters almost as much as where it sits. Placeholder text such as “Search our site” is fine as a hint, but it should not be the only label. Smashing Magazine’s advice is to use an accessible label or placeholder together with a submit control labeled “Search.”

Autocomplete helps people finish a query and avoid typos. Baymard recommends suggestions that are relevant, non-redundant, and return quickly and predictably. For a small business, that translates to a few simple rules:

  • Suggest the terms your customers actually use, such as “roof repair,” not the internal name you gave a package.
  • Show a handful of suggestions, not a long scrolling list.
  • Do not show near-duplicates (“roof repair,” “roof repairs,” “repair roof”) as separate lines.
  • Make sure suggestions load fast. A laggy dropdown that changes under the cursor frustrates more than no dropdown.
  • Let suggestions lead somewhere useful: a results page or, for the most common queries, a specific page.

A short list of your top ten customer questions is the best starting point. Your inbox, contact form and phone calls already contain the words people use. Those same words belong in your page titles and headings, which our website content checklist walks through.

Designing the search results page

The results page is where most search experiences succeed or fail. Here are the elements that matter.

Keep the query visible and editable

After a search, the box should still contain what the visitor typed. Baymard advises persisting the query in the field on the results page and making it easy to tap back into it to edit. People rarely get the perfect query on the first try. Refining should take one tap, not a trip back to the header.

Show the term and the count

Accessibility guidance on site search recommends putting the search term and the result count in the page title and main heading, for example “12 results for ‘logo design’.” This orients sighted users and screen reader users alike. The same guidance says each result should have a clear heading or link name, and that updated counts should be announced when filters or sorting change the results without a page reload.

Rank by relevance, and win the first page

The NSW Government’s design system says results should be sorted by relevance by default, with sorting offered only if users need it, the count shown, matching keywords bolded where possible, and pagination when there are more than 10 results. Nielsen Norman Group has long noted that people almost never look beyond the second page of results. For a small site, that means the page you most want found, usually a service page, should outrank an old blog post that mentions the same word in passing.

A practical checklist for each result:

Element What to show Why it helps
Title The page’s real title as a link Tells the visitor what they will get
Snippet One or two lines with the matched term in bold Confirms relevance without a click
Type or section “Service,” “Blog,” “Contact” Helps people choose between similar pages
URL or breadcrumb A short path, optional Builds trust and helps orientation

Filters: only if they earn their space

A services business with twenty pages rarely needs filters. A shop or a large resource library might. If you add them, keep them few, show which ones are active, and update the count when they change. Too many options on a small result set is clutter.

Scope

If your site offers scoped search, such as “Blog only” or “Services only,” Nielsen Norman Group says it should default to searching everything, state the scope clearly at the top of the results page when narrowed, and offer one-click expansion when a scoped search finds nothing. For most small business sites, skip scopes entirely and search everything.

The no-results page: your best chance to keep the visitor

Every site gets searches that find nothing. The design question is what happens next. A blank page with “0 results” is a dead end. A good no-results page does the following, in line with published accessibility and search guidance:

  1. Says plainly that nothing matched.
  2. Repeats the query so the visitor can see what was searched.
  3. Suggests checking the spelling or trying broader terms.
  4. Links to your main categories or most popular pages.
  5. Offers a phone number or contact option.

That last step is the one small businesses forget, and it is the one that turns a failed search into a lead. If someone searches for a service you offer under a different name, a visible “Call us” or “Send a message” link gives you the chance to answer directly.

Also separate “no results” from “something broke.” Search results page guidance distinguishes the two states, advising that the original query is preserved and the right next action shown for each: loading, results, no results and error. Telling a visitor you have nothing when the search actually failed costs trust, and they may leave believing you do not offer what they need.

Set up a simple habit: once a month, look at what visitors searched for and found nothing. Each of those queries is either a missing page, a wording mismatch or a synonym worth adding.

Accessibility: make search work for everyone

Accessible search is good design and, for U.S. businesses, part of reducing legal risk. If you want the bigger picture, see our explainers on website accessibility for small business owners and ADA website compliance. For search specifically, the practical checks are these:

  • A real label. Do not rely on placeholder text alone. Harvard’s digital accessibility guidance treats an explicit label as the dependable approach, because placeholder text disappears as soon as someone types.
  • A named button. Even if the button shows only a magnifying glass, it needs an accessible name such as “Search,” so screen readers announce it properly.
  • A search landmark. Wrapping the form in a search landmark lets assistive technology users jump straight to it.
  • Keyboard-friendly suggestions. Per the accessible site search guide, arrow keys should move through suggestions, Enter should select one and Escape should close the list.
  • No hover-only behavior. A website search accessibility checklist stresses that the box should be reachable and operable without a mouse and that key context should not hide behind hover.
  • More than one way to find content. Search is one technique among several, and the W3C’s Multiple Ways criterion lists it next to related links, a site map and lists of links. The W3C also notes that search can be easier than scrolling through navigation for some people with impairments. For a broader look at how accessibility and findability reinforce each other, this piece on web accessibility and SEO impact is worth reading.

Test with your keyboard first: tab to the search field, type, move through suggestions, press Enter, and reach the first result, all without touching the mouse. If any step fails, so will some of your visitors.

Mobile search design

Shop owner searching a website on her phone

On a phone, space and thumb reach decide everything. A persistent search bar uses valuable screen space but lets people refine without scrolling back up. An icon that expands is more compact, but the field must appear immediately after the tap, with the keyboard already focused in it, as this UX framework for search interfaces describes.

Mobile checks worth making on a real phone, not just a browser window:

  • The field is large enough to tap and the text is readable without zooming.
  • The keyboard opens when the field is tapped, and the submit key on the keyboard runs the search.
  • Suggestions do not get hidden behind the keyboard.
  • Results are single column, with large tap targets for each link.
  • The query stays in the field on the results page, so a typo is a quick fix.
  • Screen readers on iOS and Android announce the field, the button and the results count.

Most of your local customers search on their phones, often in a hurry. If search is awkward there, a phone number in the header may be the better fallback.

Search as part of the whole site

Search cannot rescue a confusing site. It works best on top of clear navigation, descriptive page titles and well-structured content. Practical design guidance for service websites, like this look at website design that converts more visitors, keeps returning to the same point: make the next step easy to see. Search is one route to that next step, and your menu, headings and calls to action are the others.

That is also why we treat search design as part of a wider plan. Before deciding where a search field goes, we look at what your visitors need, which pages should be found first and how they should reach your contact page. Our local business website must-haves checklist and website design best practices give you the surrounding picture.

A quick audit you can run today

Open your site and work through this list:

  1. Can a first-time visitor spot the search field within three seconds?
  2. Does it have a visible label or button text that says “Search”?
  3. Search for your main service. Is your service page the first result?
  4. Search for a misspelling. Does the page help you recover?
  5. Search for nonsense. Does the no-results page offer a next step and a way to contact you?
  6. After searching, is your query still in the box?
  7. Can you complete a search with the keyboard alone?
  8. Does it all work on your phone?

If you fail three or more, the search needs a redesign rather than a tweak.

We see search as a trust feature, not a widget. When a visitor types a question into your site, they are telling you exactly what they want. How your site answers shows whether you are organized and easy to work with.

That is why we do not drop a default search plugin into a template and call it done. Every project we take on is bespoke, and you work directly with the creative director from start to finish. We start with strategy: what your customers look for, which pages matter most to your business, and where a search box genuinely helps versus where clearer navigation would do the job.

Then we design the search field, the results page and the no-results page as part of your brand, in your colors and type, so they feel like your business. You fully own every asset we create, with no ongoing licensing requirements or vendor lock-in.

Search done well makes a small business look established. Search done carelessly makes it look unfinished. We would rather build it right.

Charles

Let us design it with you

If your site has outgrown its menu, or the search it has is costing you leads, our Web Design & Development service builds custom WordPress sites with the search experience planned from the start. If you already have a site that needs rethinking, our website redesign services are the place to begin. Every project is bespoke, with no templates.

Charles-creative

Not sure what to ask a designer? Our web designer vetting checklist gives you seven areas to cover. You can also see the benefits of professional website design for small businesses before you decide.

FAQ

Where should the search bar go on a website?

Put it in the upper part of the page, usually the top right of the header, where visitors expect it. Make it look like a real input field with a visible “Search” button beside it. On phones, an icon that opens the field immediately is acceptable.

Should I use autocomplete?

If your site has enough content to justify search, yes. Suggestions should be relevant, not repetitive, and load quickly. Keyboard users need to move through them with the arrow keys, select with Enter and close them with Escape.

What should a no-results page say?

It should state plainly that nothing matched, repeat the visitor’s query and suggest a different spelling or broader words. Add links to your main pages and a phone or contact option so the visitor still has a path forward.

How many results should show per page?

Put the best matches first and sort by relevance by default. The NSW design system suggests pagination once there are more than 10 results, and people rarely look past the second page, so the first page needs to carry the answer.

Not always. A small site with clear navigation can meet accessibility expectations through menus, related links and a site map. Add search when your content is large enough that visitors cannot find things from the menu alone.

Sources