Is your site search performing as well as it could?
Assess your search experience in less than 5 minutes and get your free report with recommendations.
Sorry, there is no results for this query
Many companies pour significant effort and resources into perfecting search on their site. But even the most thought-out search search user interface (UI) design patterns can accidentally introduce bias or extra steps. In this article, we’ll discuss some common UI problems and how to ensure your search UI is UI intuitive, inclusive, and helpful.
Due to poor template designs, developer preferences, or other factors, there are a number of UI problems that are commonly introduced into a website:
Studies show that 43% of website visitors go immediately to the search bar, and these searchers are about 2-3 times more likely to convert. To make the experience as seamless as possible for searchers and browsers, the search interface needs to be easy to use, interactive, and aesthetically pleasing. All of this will help to keep customers engaged and ultimately increase conversions.
Optimizing your user interface ensures that customers are able to interact with your site in productive and meaningful ways. This is not simply a process of making the site prettier — these changes can have a dramatic impact on your KPIs. For instance, studies have shown that pages that load in under 2.4 seconds on average convert at about 1.9%, while those that take over 5.7 seconds convert at about 0.6%.
Here are a few best practices to improve your search UI design patterns for your customers:
Microcopy refers to the small bits of text on a website that guide users to perform specific actions and give them suggestions on how to use the interface. Microcopy is particularly useful in site search as it helps users think about how to search. This can help decrease the “no result” rate by setting the expectation of what the site contains. And this increased navigability can boost the brand image and the user’s perception of the site.
There are a number of ways to use microcopy in search. Birchbox’s microcopy, for example, tells the user what to search for and provides popular search queries:
There’s rarely a one-size-fits-all approach to search. Web designers should consider the product offering, use cases, and target audience of the website alongside these recommendations:
Grid vs. list view
For some sites, it makes sense to use a grid view and others a list view. This is largely dependent on the content and image quality. For example, e-commerce websites with nice product images typically go with a grid view to show off the product, while those with more spec-heavy offerings such as computers choose a list view.
Studies show that users scan web pages in different reading patterns to efficiently gather information. There are many ways to optimize the design to align with the way users read.
For instance, on pages without headers, subheaders, and bullets, users scan in an “F” pattern, focusing on the top couple sections and the left side of the page. In the “layer-cake” pattern, users focus on headings and subheadings before deciding which body text to focus on. By understanding where users’ eyes are naturally drawn, you can optimize placement of important information on the page, such as titles, snippets, and descriptions.
Use federated search
Federated search allows you to display diverse types of content such as blogs, FAQs, product guides, webinars, and more in the search results interface. Not only does this provide users a comprehensive view of site offerings, it also allows them to find results from various parts of your site with speed and ease. It also allows the business to fine-tune the relevance of the results that the visitors see.
Include filters and facets
Filters allow users to quickly narrow their searches based on predefined categories, and facets allow users to do so based on groups of categories. This provides a fast and intuitive way for users to narrow searches and find what they’re looking for. Similar to microcopy, it can also be used to help nudge users toward certain types of searches that are known to provide good results.
Standardize the search bar
Users are accustomed to very specific layouts for search. As much as possible, your design should leverage search bar UX best practices so as not to confuse your users. Design elements such as using a magnifying glass icon, emphasizing the search bar, autocomplete, query suggestions, and placing the search bar on the same place on every page can boost each user’s ability to search on your site. These design elements should, of course, be built on top of a robust, well-designed internal search engine.
Scannability of the search results ensures that users can quickly pull out the important content of the products.
To make an easily consumable results page, you can do the following.
It’s also important to consider different devices users may have, especially mobile devices. The design should be compatible with the restrictions of different devices. Mobile devices, in particular, have small screens and content must be able to easily fit in the view. Clearly differentiating and labeling different types of content can help users better scan through results on all different device types.
Site search is a powerful tool for increasing engagement and ensuring that customers are able to efficiently find products and other content. However, optimizing the UI requires a careful and iterative process to ensure your customer base is responding well to the design choices. Using industry best practices and monitoring usage data will ensure that you are able to build a robust and usable site search for the long-term.
To provide your users with the best search UI, you’ll need a site search partner that can provide all the industry standard design patterns and features that customers expect. Learn more about perfecting search everywhere your users are, including mobile, with our webinar “Everything you need to know about search on mobile.”