The search form is arguably one of the most important UI elements and for many different reasons. First, search helps to expand the depth of your content. Whether it’s an ecommerce platform or a news site, the search form is where users’ will navigate to get the information they need. And second, your site search provides plenty of valuable feedback. Which content is being searched the most? Which pages do users use the search form for the most often and why? The goal is not to separate these two use cases but to combine them together with UX design.
As such, this article is to help you understand the best way of approaching search forms in any kind of website or mobile design. We’ll also take a look at some nifty tricks to further improve the search experience for your users. Keep reading to learn more!
The website search feature is a universal thing. It’s on 99% of website designs today, and in many cases, site search will directly affect your bottom line.
This includes sales, conversions, leads, and anything that makes a user perform a business-beneficial action.
Here are a few facts:
It’s clear that search needs to become an integral part of your design rather than an external feature. So, let’s try and focus on that.
Although it’s tempting to place the search form where you feel like putting it, it’s generally a much better idea to position it for your users.
As an unwritten rule, designers agree that Top Center and Top Right are the best areas for placing a search box. That said, you have to review your site at an individual perspective.
Let’s take a look at some examples.
Verywell is a platform dedicated to all kinds of health news. The site is operated as a blogging platform; however, the very first thing users see when landing on the homepage is a massive search box.
This is for two reasons:
On individual blog posts, Verywell is using a traditional icon approach to let users know where the search form is located.
But, when users click the icon, they won’t see just an input form alone. Instead, Verywell is further adding to their efforts to make the site as searchable as possible.
Like so:
An overlay opens up which showcases related topics and other navigation links, and of course, a hefty search form the dead center of the page.
It just goes to show how a seemingly boring form can be turned into something great.
Quora lives and breathes searchable content, so it has been fairly critical for the design team to get the search feature just right.
This is the first example of placement that’s a part of a bigger design ideology. In this example, Quora is using their navigation bar to emphasize only the most important site features, search being among them.
If you look things up, you’ll see a nice autofill feature:
And if autofill isn’t enough, you can follow through to the actual search page.
It looks like this:
Take note of the extensive features provided on this page. Users can even look up content from other people!
Search is not just how it looks to the eye, it’s also what happens after users hit the enter key!
If you’re overly unsure, then checking out the most popular websites in your niche will quickly reveal common patterns.
For mobile designs, you’re going to want to place the search bar at the top of the page almost exclusively.
Top Left or Top Right placement depends entirely on other website features that you have.
There are two commonly used types of search forms, one is plain and the other uses an additional icon as a “submit” button.
The idea here is that users can choose to hit their “Enter” button or instead click the magnifying glass to submit the search request that way.
And even though you see this magnifying glass everywhere, not all designs make it possible to submit a request without having to use “enter”.
It’s definitely nice to have the ability to tap the icon on mobile devices. And if you do incorporate it for mobile, make sure the icon has an appropriate size and users won’t accidentally click other page elements.
Design has to be consistent.
If your main navigation includes links to different pages, why would those other pages not have the same menu availability? A lot of sites use their menu to point to the Blog, but once you land there, the Search form is either non-existent or buried somewhere on a sidebar.
So, one of the things you can do is simply use a consistent navigation menu for all your pages. Granted, the menu provides a search box.
Also, 404 pages are another area where designers usually 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. It only makes sense that the next step would be to look up the site to find a working page.
404 page on List25
If your platform has content that’s based on multiple choices, you’ll need to ensure that users can narrow down their search based on a select few filters.
Here’s an example of the Stack Overflow search feature:
Since each “answer” works as a dedicated entry, users can use advanced search syntax to narrow their search down to a user, or even specific URLs used within the answer.
The greater the depth, the easier it is for users to find the exact piece of content that they require.
And here’s an example from Airbnb:
Being able to look for homes that have a “gym” or are “workspace friendly” improve the user experience immensely.
Mobile screens come in hundreds of different sizes and resolutions. In order to make it accessible to everyone, implement a search form that’s easily accessible, both in width and in font size.
Everyone can attest to the fact that small input forms and buttons often lead to tapping the wrong site element. And many users simply won’t deal with such frustration.
Predictive search forms have been around for ages, but you might be overlooking the benefit of them in your own projects. First and foremost, autofill saves time. If users can avoid having to go through multiple steps to get to a page, that’s a huge plus in the user experience department.
Google is well-known for its autocomplete feature, but it’s not the only way to introduce autofill in your project. If you operate an eCommerce store, autofill can greatly improve user experience by auto-suggesting different types of products you have in your catalog.
This example from Alibaba is just one of many that you’ll find amongst the most popular e-commerce platforms.
And if you’d like to implement autofill for mobile users, I highly recommend checking out this article from Algolia.
Just like any other design element, search forms are not conclusive or tied to a specific style. While the examples shown in this article showcase the accessibility, they do not showcase individual design choices.
So, to get the best results, it’s highly recommended that you test your search for style and placement using A/B testing.
Image by BoldMinded
The tools for the job include Optimizely, AB Tasty, and if you have the resources then you can do it all in-house. Different sites have varying audience types, so A/B testing different placements will give you a clear oversight of what works and what doesn’t.
Search is an important enough design feature that users will almost always remember a bad experience. Whereas a properly implemented search form will guarantee satisfactory results for you and your users.
Here is a recap of all that we’ve learned in this article:
Do you know other ways to make the search in user interfaces accessible to everyone? Let us know in the comments down below!
About the author: Alex Ivanovs is a digital marketing specialist with a knack for writing, UX design, and all-things success. Visit his website Stack Diary.
Title image from Pablo pack on Ouch, the library of free vectors
Read about the grey areas of user testing, check the set of effective strategies for educational website design and review how UX and AI work together
This is where we place all the possible blocks that we use for our articles…
Creating illustrations for a children’s book is challenging, especially if you're not an artist. Learn…
Nostalgic typefaces are trendy and more varied than ever. Discover the story behind vintage typography…
Curious about the diverse world of nostalgic fonts? Keep reading to explore typography from the…
Check out arrow icons in different aesthetics and get some inspiration on how to implement…
Step-by-step tutorial on generating AI illustrations for the online school landing page design.
This website uses cookies.