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.
Common search UI problems
Due to poor template designs, developer preferences, or other factors, there are a number of UI problems that are commonly introduced into a website:
- Results pages are not scannable. Pages filled with dense blocks of content and overly long descriptions make it hard for users to quickly find important information. With the average user inundated with content, it’s essential to show the important information in the most effective way so customers can make a decision.
- Design does not use existing patterns. It’s tempting to add a lot of bells and whistles into a website to add functionality or visually wow the user. Sometimes, however, this introduces complexity that confuses users and decreases the usability of the site. using existing patterns, UX patterns users are used to
- Design is not accessible. Most websites have a diverse base of customers. While you may decide to optimize design for a specific demographic, such as millennials or Gen-Z users, you should also take care to make your site accessible to users with a wide range of website experience and abilities.
Why improving search UI design patterns matters
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%.
Best practices for site search UI
Here are a few best practices to improve your search UI design patterns for your customers:
1. Use microcopy
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:
https://www.algolia.com/doc/guides/solutions/gallery/animated-placeholder/
2. Optimize the design of your search results page
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:
Consider the page layout
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.
Reading pattern
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.
https://www.algolia.com/doc/guides/solutions/gallery/federated-search/
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.
3. Make sure the results page is scannable
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.
- Ensure that page titles and product descriptions are concise yet informative.
- Include a helpful snippet or preview of the content below the title.
- Highlight keywords or important terms within results.
- Provide a preview of content within the search results.
- Allow users to see results as they type.
- Make sure each type of result is clearly labeled.
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.
Create an intuitive and helpful search interface for your users
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.”
