In this article, Internal Search UX, we will discuss the importance of search usability, which is one of the essential factors in achieving a positive user experience in both websites and mobile apps.
This is true, especially in cases where there is a lot of content to choose from, such as e-commerce websites and heavily content-based sites like news and blog articles.
This article provides several handy insights and design practices on making internal searches intuitive and easy to use, including the following topics:
When it comes to search, we could say that this provides a conversation between the user and the website or application. The user is there to get information through a query, and the website or app expresses a response through the search results.
In this search process, users expect to get smooth sailing experiences when searching, and they typically make quick judgments about the website or app value based on the quality of the site search.
There are several things to consider when it comes to the user interface of the search design. We can tackle some general tips that work for multiple ranges of websites or apps, but before we start our search query journey, let us answer one important question: When do we need to search?
What is an internal search?
Internal search is a function of browsing the content inside the website or app and showing it to the user through the results page based on the user search queries.
When the search is tuned properly, it should show the relevant results page content, which is a shortcut to what the user needs. Thus, the internal site search saves the user’s time and effort, and it amplifies the usability and desirability of the website or app, supports user retention, and increases conversion rates. These are the good reasons why site search is vital to user experience.
A search field is an interactive element responsible for the internal search in the user interface. A search field, also called a search box or search bar, presents the interface element that enables a user to type in the search query and, this way, find the pieces of content needed.
When to have (or not have) a search bar?
We can all say that a small website or a website with a limited amount of content (fewer than 100-200 pages) is better without the search bar.
However, a search bar will become essential as the website or app grows in size and complexity. E-commerce sites are probably the most common use cases for site search because users search for detailed products.
In large e-commerce websites, site search bars move out of the header and take on a central role in the UI. Based on a study, More than 30% of visitors will likely utilize the site search bar tool since it will highly motivate shoppers to know exactly what they’re looking for.
Essential features of search queries
We have a lot of different nuances for making the search interactions clear and intuitive. However, there are three core features to consider for the internal search bar:
- should be visible instantly
- should be clear as a search functionality
- should show relevant content or search results page
Site search bar best practices
Search box and the navigation
While the search box is a good feature to have for instant search results, this is not enough as a solution for users' discovery journey.
Based on the Nielsen-Norman group study, there are 5 whys about the topic:
- Search requires knowledge of the search space
- Search increases memory load
- Search has a higher interaction cost than browsing
- Specific site search can often work poorly
- Users have poor search skills and don’t know how search works
Therefore, the recommended search model for an effective site search considering the different behaviors of the users is a combination of a balanced initiative between specific search and navigation through browsing.
Of course, no one size fit’s all, but that is what makes sense when it comes to products, and often works efficiently on other huge known products like Netflix, Twitter, and Amazon.
Navigation is a very essential element since it provides users with a view of what they can find and teaches the users about the structure of the search box space.
Showing upfront content that users can recognize substantially improves usability because it reduces their cognitive load.
As defined by Jacob Nielsen, through navigation, we can improve usability by reinforcing one important usability heuristic defined in the "Recognition over recall."
Display search field prominently
As discussed, one of the essential features of the search box design is to make it easily noticeable. If the search is an important function for your app/site, it should be displayed prominently, as it can be the fastest route to discovery.
One of the key UI designs in terms of the best practices in the search box is to retain an open text-entry search field, where users can quickly type in their search query.
For search that is hidden behind an icon, it can result in negative consequences:
- Less noticeable search feature. The icon takes up less space when used without an open-entry text field. Visually, it’s less prominent and, therefore, less noticeable.
- Increases in the “cost” of interaction mean users must do additional action to access the search box.
Search box field should be placed in the most visible interactive zone
The placement of the search graphic control or magnifying glass in the interface is its placement.
In design, the search field with magnifying glass is often placed in a website's header, which is a good choice for the search function.
It is recommended to place the search engine box of the feature within the zone of the highest visibility. Thus, placing the search field in this section lets users quickly transfer to the needed pages without wandering through the website or scrolling down.
For example, visits to big eCommerce websites often have a particular goal: finding a particular item in the store using the search feature. Suppose users cannot quickly or conveniently find the item on the search results page. In that case, the risk is high that the visitors will leave and, in return, decrease the website's profitability chances.
Moreover, the power of habit and mental models should also be considered. As numerous websites include search into their headers, users are accustomed to looking for it when needed.
In addition, visitors will likely miss out on the search function if it is a hidden below-the-fold area (the page part visible only after scrolling down) or in the footer.
However, both sections could work well (placing the search function on the header and footer), especially if the website doesn’t use a sticky header. In this case, scrolling down to the footer, the users won’t need to get back to use the search.
Talking about the search field in mobile user interfaces, the situation differs as the design is much more limited in space. If the app is based on a lot of content and search is one of the central elements of interaction, it can be found in the tab bar. In case the search is not important for the searchers and the app's usability. Thus, the search function can be hidden in menus or shown only on the screen where it’s potentially needed.
Successful interaction patterns
It is observed that businesses that do well in terms of search succeeded by embracing search-centered solutions, which combine the search and browsing experiences to improve the experience and empower the searchers.
These solutions commonly provide 3 aspects:
- Federated
- Faceted
- Fast
Federated
Federated allows users to search across all of its content simultaneously through one search query. They can view all search results in one list, no longer needing to check everything individually. The federated search engine performs many searches at the same time for the user.
For example, Instagram has a federated search where you can search by all, accounts, hashtags, or places. On LinkedIn, you can also search by different databases, like jobs, people, or groups.
Faceted
It allows users to narrow their options and find what they want without guessing the different products and structures or doing too much filtering and browsing.
As an example of the faceted search, we have the LikedIn, Mercado Livre, and eBay experience where users can refine their search, without having to go to another page and can see results updating while they activate the filters.
Fast
Fast defines as a critical defining element for the user experience success, and it was a pattern observed in all search-centered businesses that are successful.
Companies must prioritize technology investments in hardware, software, and staff to deliver sub-second response times. Users expect fast responses from the system on every level of their discoverability process. It doesn’t matter their behavior, from expert to novices, they all expect quick responses.
There are many more interaction patterns for search documented, but these 3 are the ones that are present in the majority of successful design cases.
Search button for the search box
Although search can be easily triggered by hitting the enter button, some users still search for a more traditional “submit” button. A button also help users recognize that there’s a next step that triggers the search action, even if they decide to do this by pressing Enter.
Below are design tips to help the search user achieve their goals effectively:
- Make sure the submit button is appropriately sized to help users easily point their mouse or tap their fingers with perfect precision. It is recommended to allot a larger clickable area for easier spot and click.
- Allows visitors to submit search using both the enter button and by clicking the icon. Many users still have the habit of clicking an actual button to submit search. To prevent keyboard accessibility issues, it’s important always to test the form. The basics of keyboard testing are simple: the Tab key can be used to navigate through form controls, and the Enter selects an element.
Provide textual prompts and auto-filling
Textual prompts are a good way to give users a hint about the interactivity and functionality of a specific user interface element.
The Google search is a classical example. Google input field on the search offers options as soon as users are inputting their query. This search feature reduces the time of filling in the placeholder text search field and lets the user start interacting with the content quicker. Of course, it is logical to tune auto-filling according to the most popular and relevant queries.
Besides the interaction patterns, we can also rely on design patterns to help us build a good search experience for users.
Many players like Google and Amazon already use these design patterns and others that we already know that work, and we can apply them to our product gradually.
Here are several examples:
Autocomplete
When the interface completes the user sentence with possible outcomes.
Auto-suggest
When the interface provides users options before they start typing.
Recent searches
When the interface shows users shortcuts with their latest searches.
Did you mean… (Autocorrect)
When the interface autocorrects the user’s input with the most probable match.
Related search
It provides users several search options related to the query they input, working as shortcuts to better navigation, implying less cognitive effort from users.
Conclusion
The internal search is an essential element that is important in providing website visitors and app users with a good user experience.
We recommend you intuitively use this function, utilize the best practices discussed in this article to improve the user interface's search experience, and strive for a good balance of search and all the other navigation. Lastly, don’t forget to analyze the internal search results page, which will tell you what the users need and look for on your resource.