Powerful on-site search is a valuable tool that provides greater levels of customization and streamlines UX. With this in mind, what are the key aspects of each individual user’s search experience – and how can your business use custom site search engines to improve UX?
What are the key elements of an effective search?
- Presentation – how does it look?
- Processing – how does it work?
- Results – how does it deliver?
Presentation — how does it look?
You don’t need flashing buttons or funky fonts, but the presentation of your on-site search function is still important.
Identity and brand
On-site search engines should be customized to match the image and identity of your brand. This ensures consistent visuals for your users’ search experience and emphasizes brand identity throughout each visitor touchpoint.
Contrasting visuals/color schemes or logos from third party ads or websites can be off-putting for users searching on a website, so search presentation should express your brand individuality and be free from clutter.
When it comes to search box placement, consistency is key. A study by A. Dawn Shaikh and Keisi Lenz found that the ideal placement for a search box is the right-hand corner of the page. It’s the most familiar placement of search, and so visitors who are new to your website can instantly deduce where to go.
Additionally, the search tool should be available on every page. This ensures that a search can begin no matter where a visitor is on their journey through a website.
Site search engines should be easy to identify and visable at first glance for new visitors, with clear stylization that labels the purpose of a search bar. At a minimum, your search bar should have placeholder text that invites your users to type in their query, and a maginifying glass icon - a well recognized symbol to denote the search function at a glance.
Icon vs. button with text
Because today’s web users can easily recognize search functionality labeled by the magnifying glass symbol, spelling out the word ‘search’ is generally unnecessary. This is great news for international businesses, as images are universal in a way that words are not – the familiarity of the magnifying glass means there’s no need to translate ‘search’ for each region. (However, for accessibility you should include the word ‘search’ or a translation as alt text for graphics-only buttons.)
However, if you can spare the space on your site, a traditional search button, labeled ‘search’ next to the input field will maximize its findability – just make sure you still include the icon too!
Icon-only search box?
Icon-only search – i.e. a clickable magnifying glass symbol alone – can work well for the mobile version of your website, where visitors are used to seeing less text and a different style of navigation.
However, we don’t recommend this style for your desktop site, as it can make the search function a lot harder to find. And once visitors do locate it, they’ll need to click and wait for the input box to appear, work out where to type, and sometimes click yet again to focus on the input field. This creates friction in the user experience, whereas an open-entry text field, ready for typing, lets the user simply click once or hit Enter to begin the search journey.
Styling voice search
It’s not necessarily clear how best to signpost your voice search. Combining a text-labelled button, search icon, and a voice-specific icon takes up space and looks messy. Clear iconography is the way to go here – for example, Google uses a magnifying glass and microphone:
Do remember that not all browsers have adopted speech recognition API. For example, voice search functionality may work in Chrome or Opera but not be available for Safari users.
Processing — how does it work?
The behind-the-scenes processing of site search engines is integral to the quality of your users’ search journey. We’ve found that 9.2% of users will click on recommended search results powered by auto-complete, so an effective search engine should include suggestions that are contextually fitting to the visitor’s original search query. This is an effective way to guide users towards relevant results – enabling them to find what they’re looking for more quickly.
Search engines should offer a lightning-quick search. The average service response time of a robust custom search engine is between 10 and 100ms (20ms on average) per request. This can be achieved by automatically routing users to the closest server, guaranteeing them results, fast.
Additionally, it's useful to cache recent queries so the suggestions and results are pulled even faster for future searches. Considering 40% of people will abandon a website if it takes more than three seconds to load, this aspect of search engine processing is central to success
Businesses should consider that not every user will access a website through a desktop. In recent years, more and more people are whipping out their mobile devices to browse, making mobile the most popular platform. On-site search engines should be platform agnostic, and – combined with website design – should automatically detect device-type and adjust accordingly.
Everyone should be able to easily navigate your website, and search engines should serve the increasingly accessibility-conscious world. Functions such as voice-command search or supported languages can not only deliver a better user experience for everyone but also help businesses remain cutting-edge and on top of trending new ways to search.
Thanks to sophisticated speech recognition, voice search enables users to make queries by speaking into their microphone – eliminating the need for a type-interface that many people may find difficult to use.
Additionally, custom search tools can be altered to meet accessibility guidelines such as WCAG 2.0. These guidelines are designed to direct businesses towards user-friendly interface components that are easily perceived by all users. For example, the perceivable, operable, and understandable components of on-site search such as text alternatives, screen contrast ratio, text resizing, or page timing. This is especially useful for government institutions or schools that want to make their website easy to use.
Lastly, custom search tools can support assistive technology such as screen readers. For people who are visually impaired, illiterate, or with learning disabilities, screen readers are essential for conveying displays into non-visual means. For example, text-to-speech, sound, or braille.
Results — how does it deliver?
The search engine results page (SERP) is the highlight of the visitor’s search journey. After firing off a search term, your users should be greeted by a shiny page of relevant and appealing results.
There are a variety of ways the SERP can be displayed. Starting with the most basic, a result list contains the title, link, and search result snippet, and is easily understood by the user:
If your business wants to display visual results, a grid layout SERP can be best-practice. Displaying images can be useful if your users will likely be searching for pages or products for which visual references are useful e.g. clothing or artwork:
Your SERP could contain tabs that let your user choose which category they want to see results from. For example, Google provides not only website results, but also categories such as images, news, videos and shopping:
The ability to choose which option is best for your business is what places custom search engines as the front-runner of UX. When your SERP is tailored to the users of your website, they’ll find what they need quicker, and enjoy a smoother search experience.
The last key element of the visitor journey is how user search queries/results can provide your business with a wealth of analytics and data about how users interact with their given search results. This data can allow you to optimize your website, content, and products further – by identifying aspects of the search process that fall short.
For example, you can infer whether you should create synonyms for new frequently searched terms, or if you’ve indexed content/pages correctly. If visitors are searching a term often, but they’re not clicking on the given results – the analytics of your custom site search should help you spot this, so you can make alterations, add new search terms, and remove search term dead-ends.