Responsive search forms: development and tips
With today’s centralized search in the digital world, it is critical that you develop a search experience that is both convenient and practical. The site search function is one of the most important user interface elements on a web page. With its help, the user can find the desired content on your site.
In this article, we will start to delve deeper into the structure of search building, starting with the simplest search form and give a couple of tips for adaptive search form.
Search form development
- Place your search where people expect to find it
The first step towards creating a great search experience is making sure people can find it. According to research by the Nielsen-Norman Group, people tend to look for the search bar in the top right corner of a site’s page, where the main navigation elements are usually found.
For the vast majority of sites that adhere to this rule of thumb, the following should be done. If you’re building a site that’s more problem-solving, like a knowledge base, glossary, wiki, or help center, it’s best to choose a more prominent location.
In the event that your site is more focused on discovery and research or has a more specialized purpose, then this rule will be what you need. If not, place your search bar in the center to maintain focused problem solving.
- Connect a magnifying glass icon and a text prompt
Better not to rely on users to understand the meaning of the icons. Research on the use of search tends to support this claim, although the magnifying glass icon has almost become a universal symbol for search, search fields with only icons still tend to slow things down.
Also on the plus side of adding a little text to your icons is that you can use text to tell visitors what they might be looking for on your site.
Considering the proposed placement of the search, the text of this placeholder acts as a slogan. This not only tells you what you can find on IMDb, but what the entire site is all about.
- Choose a convenient size for the input box
The search box should be large enough to contain the average search term for your content. Eventually, it becomes difficult to enter what you cannot see.
If you are running low on space or want to minimize the default field size, you can set up interactions to expand the window when visitors click on it.
- Search triggered by pressing Enter
Despite the fact that we are all used to the fact that in Google you just need to press the Enter button after you finish typing a request, sometimes such a very obvious advantage as a button, clicking on which starts a search, causes inconvenience. Most often in digital design, it is best for each feature to support both beginners and pro users.
- Center the search box on the mobile interface
In fact, search is the most functional element, especially when the process of navigating the information architecture of a website seems exhausting, which is often the case on mobile phones.
So instead of asking visitors to cross your hidden menu and risk clicking on the wrong links over and over again, help them get to their destination faster by using the search form on your mobile site.
- Don’t rely on search alone
Despite its power and lightness, searching on your site does not relieve you of the need to have a rational, immediately understandable website structure. Good design can help people get to the right point of a website or application faster than searching.
- Search results page (SERP) development
A good search experience won’t mean a lot if the result is not useful and understandable to the user. Fortunately, these tips will help you complete your site’s UX search successfully.
- Add a search bar on the results page
By adding a search bar to your results page, you can improve your visitor experience. And if they are looking for information on multiple topics, they can easily open the result even after the result in a new tab and not leave the search results page.
- Create empty state or no results page
Any designer who has made a name for himself knows the importance of the empty state. The basic idea is that if you cannot provide the user with what he is looking for, but you can suggest alternative actions.
An empty state in many interfaces is natural for suggesting creative action. But there is no creative action in the search. Instead of this:
- Make it clear that no search was found.
- Don’t blame the visitor. It is not his fault that your website does not have information on this topic.
- Give the user the next step. This may depend on your web page and its purpose, but you can try: highlight popular content, suggest alternative search terms, and add a link to your home page. For example, Google does so with a “best match” suggestion.
- Filter content wisely
The search algorithm literally scans and indexes everything. This means that there will be a lot of duplicate results in the end, as well as those results that may not be very useful to the user.
- Leave the slug
Displaying the term in search helps visitors better understand the structure of your website and helps them make decisions about what information best suits their needs.
For example, if a user wants to find all the brand promotion content on a blog but is not interested in any of the case studies that mention it, then keeping the slug will help them focus only on blog results.
In the event that your search solution does not do this by default, then you should consider enabling it.
- Highlight search criteria in search results
Another useful search feature is highlighting search criteria in the results. On Google, this means that whatever words you searched for will appear in bold in the list of results. As with slugs, this emphasis helps the visitor to quickly focus on the results that best suit their needs.
Highlighted search criteria grab the user’s attention by confirming that the content actually matches their query and encouraging them to read the contextualization language around the look of the search query.
For example, if someone searches for the word “design” on your site, where all forms of design are discussed, highlighted terms can help the user differentiate between typographic design or clothing design messages.
- Display results efficiently
Based on your own search experience, you might want to make your search results page look like a simple list – just like Google, right?
But wait a second. Switch to Google Images and try again. See? You now have a grid.
- If in doubt, take Google as an example.
Google sets the tone for Internet users’ expectations. So don’t be afraid to do what they do. It may not be innovative, but it will definitely work.
Also, here are two more tips for responsive search forms.
- Built-in adaptive inputs
With the built-in search form, you can place the search toggle in your navigation, but display it inside, not below the navigation.
In Cartoon Brew design, for example, their navigation has a magnifying glass in clear view, but the shape doesn’t appear until it’s toggled.
It’s built into navigation links and doesn’t take up much space. Responsive devices handle search differently, so it just appears in a drop-down menu in small browsers.
But you can of course work with the built-in search fields by hiding them inside your navigation too. DualShockers has a great sliding menu that works on all screen sizes. This navigation switches both the menu links and the search form right at the top. It is built right into the navigation and is easily accessible, a single interface for all devices.
- Stretchable search forms
With these, you can create the entire shape to fit the width of your layout. You will be able to adjust the margins to fit into smaller spaces, even small enough to work well on phones.
If you go to the website and try to resize your browser, you will see how other elements on the page are redistributed as well. The layout should be flexible so that everything can be seen, it just squeezes into the design.
You can also try combining the form’s stretchable UI with a dropdown trend to create a hidden field that will intercept the page.
For example, Push Square takes advantage of this effect with a search form attached right at the top of the page.
When you click on the magnifying glass, it switches the search form, and by default it takes up 100% of the page width. It doesn’t matter if you’re using a 320px smartphone or a 1920px desktop, the search box adjusts correctly to your screen.