Search UX: How to Create an Accessible Search Form

The search form is arguably one of the most important elements of the interface, and for many different reasons. First, search helps expand the depth of your content. Whether it s an e-commerce platform or a news site, the search form is where users will go to get the information they need. And secondly, searching your site provides valuable feedback. What content is being searched the most? On which pages do users most often use the search form and why? The goal is not to separate these two use cases, but to combine them together with UX design.

Thus, this article will help you understand the best way to approach search forms on any website or mobile design. We ll also look at some techniques to further improve your search. Read this article to find out more!

Search affects your bottom line

The site search function is a universal thing. Today, 99% of websites have it in their designs, and in many cases, site searches will directly affect your bottom line.

This includes sales, conversions, leads, and anything that motivates the user to take action that is beneficial to the business.

Here are some facts:

• Before 80% users leave the site if the search quality is inappropriate.
• Successful search leads to higher conversion rates 2 times…
• On average, users give up after 8 seconds trying to find something.

Understandably, search should become an integral part of your design, not an external function. So let s try to focus on this.

Where is the best place to place the search form?

While it is tempting to place the search form wherever you want, it is best to place it wherever your users are comfortable.

As a rule of thumb, designers agree that top-center and top-right are the best areas to place the search box. However, you should use a personalized approach for your site.

Let s take a look at some examples.

1. Verywell

Verywell is a platform dedicated to all kinds of health news. The site works as a blogging platform. However, the first thing users see when they visit the home page is a massive search box.

There are two reasons for this:

• It is a site focused on information and its accessibility.
• Verywell uses “Search” and “Categories” as the actual site navigation function.

In individual blog posts, Verywell takes a traditional icon approach to let users know where the search form is.

But when users click on the icon, they see more than just an input form. Instead, Verywell is working even harder to make the site as searchable as possible.

Like this:

An overlay opens up showing related topics and other navigation links, and of course, a hefty search box in the middle of the page.

It just shows how a seemingly boring form can be turned into something wonderful.

2. Quora

Quora lives and breathes content search, so it was very important for the design team to get the search functionality right.

This is the first example of placement that is part of the design ideology. In this example, Quora uses the navigation bar to highlight only the most important site features, which include search.

If you look up, you can see the autocomplete function:

And if autocomplete isn t enough, you can go to the real search page.

It looks like this:

Take a look at the extensive features presented on this page. Users can even search for content from other people!

In search, the main thing is not only the appearance, but also what happens after users press a key. Enter!

If you are not sure where to place the search form, then analyzing the most popular sites in your niche will quickly reveal common patterns.

What about the mobile interface?

Almost always in mobile designs, you want to place the search bar at the top of the page.

And the top left or right corner is entirely dependent on the other features of your site.

Symbols and buttons

There are two commonly used types of search forms: one simple and the other with an additional icon as a submit button.

The idea is that users can press the “Enter” button or click on the magnifying glass to submit a search query.

And while you see this magnifying glass all over the place, not all designs allow you to submit a request without pressing the Enter key.

It s definitely nice to be able to click on an icon on mobile devices. And if you do, make sure the icon is sized appropriately so that users don t accidentally click on other elements on the page.

Make search available on any page

The design must be consistent.

If your main navigation contains links to different pages, why don t these other pages have the same menu accessibility? Many sites use menus to point to a blog, but once you get there, the search form is either missing or hidden somewhere in the sidebar.

Therefore, you can simply use a consistent navigation menu across all pages. Of course, this menu should have a search box.

Plus, 404 pages are another area where designers tend to forget to place a search form. If the user landed on a 404 page, it means that they could not find what they were looking for. The next step is to search for a website with a working page.

Think about advanced search options

If your platform has content based on multiple choices, you need to make sure that users can narrow down their search based on the multiple filters they choose.

Here s an example of a search function on Stack Overflow:

Since each “response” acts like a separate input, users can use advanced search syntax to narrow their search down to the user or even the specific URLs used in the response.

The deeper the search, the easier it is for users to find exactly the piece of content they need.

Here s an example from Airbnb:

The ability to search for homes that have a “gym” or “customize work space” greatly improves the user experience.

Designing accessible search for mobile users

Mobile screens come in hundreds of different sizes and resolutions. To make search accessible to everyone, make the search form accessible, both in width and in font size.

As anyone can tell, small input forms and buttons often result in the wrong site element being clicked. And many users will simply not use such a site.

Autocomplete is a must-have feature for large sites

Predictable search forms have been around for years, but you may be overlooking their benefits in your own designs. First of all, autocomplete saves time. If users can avoid a few steps to get to the page, this is a huge plus in terms of user experience.

Google is well known for its autocomplete feature, but it s not the only way to add autocomplete to your project. If you run an e-commerce store, autocomplete can dramatically improve the user experience by automatically suggesting the different types of products that you have in your catalog.

This example from Alibaba is just one of many you ll find among the most popular ecommerce platforms.

And if you want to implement autocomplete for mobile users, I highly recommend checking out this article from Algolia.

A / B test of multiple options

Like any other design element, search forms are not final and not tied to a particular style. While the examples shown in this article demonstrate accessibility, they do not demonstrate individual design choices.

Therefore, for the best results, it is highly recommended that you try out search by style and placement using A / B testing.

Testing tools include Optimizely, AB Tasty, and if you have the resources, you can use them all at once. Different sites have different audience types, so A / B testing different placements will give you a clear idea of ​​what works and what doesn t.

Output

Search is an important enough design feature that users will almost always remember a bad experience. Hence, a properly implemented search form guarantees satisfactory results for you and your users.

Here s a summary of everything we ve learned in this article:

• Search affects the bottom line of your business. Effortless search leads to effortless transitions.
• It is widely accepted that placing a search form in the header provides a better user experience.
• Using buttons such as a magnifying glass gives the user the trigger they need and the ability to submit their search query in a variety of ways.
• Expect users to land on non-existent pages. To get them out of these pages, make the search available throughout the site.
• Advanced search options allow users to narrow their search to the page / segment they want.
• Mobile forms should be clearly visible and accommodate different screen sizes.
• Autocomplete reduces the time it takes to find a specific page or product.
• A / B testing shows how different search form placements affect conversion rates and ultimately the user experience.

Do you know other ways to make interface search accessible to everyone? Write in the comments!

About the author: Alex Ivanovs is a digital marketer with a talent for copywriting and UX designer. Visit his website The divine indigo…