1. Diligently fulfilling user expectations about the search experience itself
2. Carefully crafting the rest of your site — and its edge cases — to improve the search experience

And since we just released site search, we thought you’d find these tips particularly handy.

Let’s start by digging into the specifics of building a great search experience, starting with the humble search form itself.

Designing your search form

Designing a world-class search experience starts with the form itself.

Put search where people expect it

The first step towards building a great search experience is ensuring people can find it. According to Neilsen-Norman studies, people tend to look for search in the upper right of a web page — right where your main navigational elements typically go.

For the vast majority of sites, sticking with this rule of thumb should do the trick. If you’re building a site geared more toward problem solving — such as a help center, wiki, glossary, or knowledge base — an even more prominent placement will do you even better.

If you’re having any trouble deciding which way to go with your search bar, consider the following rule of thumb:

Search is for people who know what they’re looking for.

If your site’s geared more toward discovery and exploration, or has a more focused goal like driving signups, upper right will do just fine. Otherwise, put it front and center to support focused, task-based problem-solving.

Pair a magnifying glass icon and a textual prompt

As we discussed in “The pros and cons of icons in web design,” it’s generally best to not rely on icons to communicate meaning to users. And studies of search use tend to back this up — while the magnifying glass icon has become a near-universal signifier of search capability, icon-only search designs still tend to slow down task completion.

The handy bonus of adding a little text to your search affordances is that you can use text to guide visitors about what they can search for on your site.

Given the prominent suggested placement of search, this placeholder copy serves an almost tagline-like function. It not only tells you what you can find on IMDb, but indeed, what the whole site is about.

Pick a reasonable size for the input box

Generally speaking, you’ll want your search box to be big enough to contain the average query against your content. After all, it gets tough to type what you can’t see.

If you’re short on space or want to minimize the size of the box’s default state, you can set up an interaction to expand the box when visitors click into it.

Trigger search on click and return/enter

While most of us Google-trained folks will just hit return/enter when we’re done typing, it rarely hurts to provide a highly visible affordance like a button that submits the search on click. As is usually the case in digital design, it’s best to support both novice and “pro” users with every feature!

Put search front and center on mobile

Search is really at its most powerful when the thought of navigating a site’s information architecture sounds gruelling at best. Which is often the case on mobile!

So rather than asking visitors to traverse your hidden menu and risk thumbing the wrong links over and over again, help people get where they’re going faster by more prominently featuring your search form on mobile views.

Never rely on search alone

Despite its power and ease, having search on your site doesn’t excuse you from having a rational, immediately visible site structure.

As mentioned above, search works best for people who know what they’re looking for. A clear, and clearly exposed, navigation supports those who are just exploring and if well-designed, can often help people get where they want to be even faster than search can.

Designing your search engine results page (SERP)

Of course, a beautiful search experience doesn’t mean much if the results experience isn’t helpful and clear to the searcher. Thankfully, these tips will help you round out your site’s search UX.

Include a search bar on your results page

Search often doesn’t end after the first attempt. Whether the results presented don’t meet the searcher’s needs, or the searcher just decides to look for something else, it just makes sense to not force them to backtrack.

By placing a search bar on your results page — which Webflow does by default — you make it easy (and less frustrating) for searchers to give it another go. And if they’re looking for information on multiple subjects, they can easily open result after result in a new tab, without ever leaving the SERP.

Build a great empty state (aka, no results page)

Any designer worth the name knows the value of a great empty state. The core idea is that if you can’t provide someone with exactly what they’re looking for, you can propose alternative actions that keep users moving forward, instead of leaving them clueless.

In many interfaces, an empty state is the natural one for suggesting a creative action. No Google Docs yet? Why not create one?! No projects in your Webflow site? Hmmm … that blue button must be important.

But in search, there’s no creative action to suggest. Instead:

1. Clearly state that there are no results for the searched terms. This is vital — you don’t want anyone to miss the result of their search amidst your suggestions for next steps.
2. Don’t blame the user. It’s not their fault your site doesn’t have any content on said topic, so don’t be throwing in flippant comments like “We don’t write about web design, silly.”  
3. Give the searcher a next step. What you do here may depend on your site and its purpose, but you might try: suggesting alternative search terms, highlighting popular content, and adding a link back to the homepage. This is exactly what Google does with its “best match” suggestion.

Exclude content wisely

When a search algorithm “crawls” a site to create an index of its content, it’s not exactly what you’d call smart by default. In other words: it crawls and indexes everything. Which means a whole lot of duplicate results, as well as a host of results that might not be particularly useful for the searcher.

Thankfully, Webflow’s site search feature helps creates smarter results by:

• Automatically excluding Symbols, Collection Lists, utility pages, and password-protected pages
• Allowing you to tick a checkbox to exclude anything else you want to

Excluding Symbols and Collections Lists helps because these elements tend to contain content that’s repeated in multiple places on your site, only a few of which might actually be helpful. For example, if you made your main navigation menu a Symbol and it included the word blog, then any query of the word blog would return … every single page of your website!

Those default exclusions will get you a long way toward a fairly clean result set, but you’ll want to consider excluding:

1. Any purely “functional” Collections. Collections that you created for reference or filtering, but that have non-useful Collection Templates (i.e., blank or content-free) should probably be omitted.
   Example: In my spare time, I’m building a curation site to highlight awesome, content-driven websites. The site has a reference collection for “colors used.” I’ve designed pages for these colors, but at the moment, they’re just a full-page swatch of the color with its name and hex code. Not wildly useful, so I might want to exclude that from search for now.
2. Displayed metadata elements. On the same project, every curated website’s detail page has a little table showing fonts, colors used, and a rating (expressed as an emoji). On previewing search results, I note that these elements display oddly — and worse, make little sense without context that the design provides. So I’ll probably omit the element containing those bits of metadata to clean up my results.
3. Anything else that looks funky in results. It’s challenging to abstract all the potential problems with content exclusions, so just be sure to try lots of different queries on your site, and omit anything that doesn’t translate well from page to SERP.

Keep the slugs

By default, Webflow’s site search displays the page slug (the parts of the URL after the domain) for each result on a SERP.

Displaying the slug in search helps users better understand your site structure overall, and more importantly, helps them make decisions about which results are most appropriate for their needs.

For instance, if a person wants to find all your blog posts on content strategy, but isn’t interested in case studies that mention it, keeping the slug will help them home in on just the blog posts.

If your search solution doesn’t do this by default, consider turning it on. Or just, you know, use Webflow.

Highlight search terms in your results

Another useful feature of search is highlighting search terms in results. In Webflow and Google, this means that any words you searched for will be bolded in your result list. Like slugs, highlighting helps users quickly home in on the results that are most appropriate for their needs.

The highlighted terms draw the searcher’s eye, affirming that this content does indeed align with their query and encouraging them to read the contextualizing language around the search term’s appearance.

For example, if someone queries “design” on your site, which discusses all forms of design, highlighted terms can help searchers differentiate between posts on fashion design and typographic design.

Display results rationally

Based on your own experience with search, you might be tempted to make your SERPs display results in a simple list — just like Google does, right?!

But hold on a sec. Switch over to Google Images and try again. See? Now you’ve got a grid.

We discuss this in a little more depth in “How — and why — to build content curation sites with Webflow CMS,” but the long and short of it is:

• If an image can convey the bulk of required information, use an image-focused grid
• If a bit of text can convey the bulk of required information, use a text-focused list (and add images if useful)

When in doubt: steal from Google

Every internet user’s expectations around search are set by Google. So don’t be afraid to do what they do. It may not be “innovative” or whatever, but it sure will work.