Question-answer
Why Do Informational Sites Need a Smart Search?
15 September 2020
The main task of the search bar is to quickly lead customers to what they are looking for. Therefore, it's important that it's easy and convenient to use. It is good UX/UI design that facilitates easy use of your website and search functions.
This article examines the differences and similarities between UX and UI. It also provides recommendations on how to improve the user experience and user interface of the search engine listing pages. Finally we will hear from Denis Studennikov, the Head of UX/UI department at ‘Turum Burum’, about the thoughtful design of search.
Design matters
Steve Jobs
American entrepreneur and inventor
Design is not how an object looks, but how it works.
If the design is user-friendly, it will be easier to perform the targeted action. In 1954, Paul Morris Fitts discovered the law that allows to determine the optimal size, click zones, and location of interface elements according to the ease of use. The main aspects of Fitts' research show that:
-
the larger the goal (clickable interface element) is, the easier and faster it can be achieved;
-
after a certain stage of increasing the goal, the time to achieve it is practically not reduced. To put it simply put, you should not make huge objects on the site as it will not bring much improvement. Fitts' law is a binary logarithm that is strictly increasing or strictly decreasing.
It has been more than 60 years since this law has been discovered. However, it is still actively used in the conceptualizing and design of interfaces. Major companies still apply these rules. For example, Amazon increased the width of the search box and placed it closer to the address bar. As a result, after typing in a website address and going to Amazon.com, people can instantly get to its search box as well.
This E-commerce giant took a very involved approach to the development of bar functionality by founding a dedicated company for it, A9. A9 is aimed at producing technology for search. A9 was founded in 2003 as an independent company headquartered in Palo Alto, California. The company spent 16 years developing search on Amazon websites. They ended their partnership after a scandal in 2019 over changes to the bar algorithm to favor more profitable products for the site.
Designing the perfect search bar
When designing a search, we recommend considering look, layout and functionality. All of these aspects work together to form a clearer and more effective user experience. In particular, the UX and UI of the search box help save the visitors` time and help them get where they need to go with the least amount of time.
1.1 The look of the search bar
The search bar needs design. After all, there are a number of things that can go wrong. For example, the text displayed in the input box may be difficult to read, or the input box may be too short and the user will not see all the text of his/her query.
The look of the search bar is a broad concept that includes a large number of parameters such as color, size, action button, icon, text cues, and the design of the search results.
Default text
It is recommended to include an example search query in the input field. Not only does it tell users what they can search for on your site, but also draws their attention to the line. It is important to make sure that the sample text disappears when the search bar becomes active.
Call to Action
It is recommended to avoid creating a search bar without a call to action (CTA) button. This is vital when the results are not available in real-time or after pressing Enter. You should place a search button directly to the right of the search bar.
Icon
The magnifying glass is usually recognized as a search symbol. Users subconsciously look for it when they intend to enter their query. This icon should be simple, with few details, and a contrasting interactive area as shown in the example below.
Color
The search bar on the site should be noticeable at a first glance so users are drawn to it. A bright color will make it stand out. However, it is necessary to consider the color scheme with respect to the rest of the website, make sure that is it properly integrated.
It is better to leave the input field white, because it is no secret that the text is best read against this background. But the boundaries of the line are customarily highlighted with a bright color, so that during each session the buyer can easily catch it. For example, AliExpress highlighted the search bar in bright red for quick recognition and interaction.
Size
You might need to increase the size of the search field so that the text is fully visible. Too short a line doesn't prevent users from entering long queries but it's still bad for the UX. The thing is that it interferes with the process of checking and editing the text, because only part of it is visible.
The optimal size of the search bar should contain 27-30 characters.
In the example you can see which line clearly has not enough space to accommodate a long query.
1.2 The look of the search results page
Let's move on to the visualization of search results.
Photos and prices in the results
It is very important that users immediately see images and prices of products in search results. These two elements help customers navigate faster and go to the products they are really interested in.
The number of search results
When customers see the number of items in the search results, it helps them understand how long it will take to browse and if they need to refine their query. In the example below, you can see that it will take a long time to browse 698 entries based on this knowledge the customer can decide what the best course of action is.
Search engine optimization above the spread
The term "spread" has been borrowed by web designers from graphic designers. It is the line along which a newspaper is folded. The concept of the "visible area" applies to digital products as well. Desktop and mobile versions also have an area visible immediately after loading and hidden content that requires additional actions such as scrolling to discover it.
Users scroll through pages only if the content above the spread is attractive enough to justify the effort. So it's important to always show search results above the spread. Anything at the top of the page gets the attention of your users immediately. Don't lose the search results output among other page elements that have nothing to do with the search. Users expect to see products immediately after clicking the "Search" button and working with the mouse wheel is an unnecessary action for them.
In the following screenshot, the search results are placed above the spread. The user immediately sees relevant products and is interested in scrolling further.
In the following screenshot, the search results are placed above the spread. The user immediately sees relevant products and is interested in scrolling further.
Search results page layout
A user should have the choice between a list or a wall of pictures for the search results. For example:
Search results page layout
A user should have the choice between a list or a wall of pictures for the search results. For example:
Remember that it's important to choose the right size of images when the user selects a wall of pictures. The images should be of the optimal size so that you can see the product and still display some number of results, at least 4 products in one line.
If you have high-quality images which effectively present the product, you should add a enlarge function for your visitors' convenience so if they are interested they can examine the product further in detail. This is more important for mobile devices because of the small screen size.
Search Progress
Ideally, search results should be displayed immediately. However, if for some reason this is not possible, use a progress bar. This will provide a way to visually inform users that the system is working. For example:
2. Location
The second aspect to consider when designing a search form on a site is its location.
The location of the bar in the interface occupies an important place. There are a number of options of how to place the search box but to improve the user experience, two will do. The most convenient location for users would be the top left or top right corner of your website page. This optimal location of the bar is dictated by the F-shaped reading pattern.
Eye Tracking research shows that people read web pages and phone screens in different patterns, but the F-shaped one is still the most popular. Eleven years after its discovery, it's still alive and well in today's world. And it proves that UX depends more on human behavior than technology.
The search bar should be present on all pages of your website. If users can't find the content they're looking for, they should be able to immediately search for the relevant information.
3.1 Functionality of the search bar
Now that we've got the design and layout figured out, let's move on to functionality. At the end of the day, only smart search functionality allows users to find what they're looking for and maximizes the user experience. Marketers and online store owners would get frustrated when a site has great content and popular products but users can't find it all. To avoid such a situation, an effective search method should have the following features:
Keep the original text in the input box
You should set up the line so that users' queries don't disappear after they click the "Search" button. If users don't find what they're looking for on the first try, they can refine their query with additional words. To make the search easier, you should leave the original query visible in the search box as in the image below. This prevents frustration when users need to start over again.
Offer auto-complete
You should give a customer what he or she needs! The auto-complete feature saves the user's time. For example, when you type in a search phrase a panel with hints is displayed. The suggestions might include:
-
autocomplete or query continuation;
-
product categories;
-
a list of products;
-
a promoted product or brand.
The auto-complete helps speed up the search process for users and direct them to an action that will increase conversion on the site. This functionality facilitates the life of mobile users of your site as nobody wants to hit the small buttons of the virtual layout unnecessarily.
It's important to bear in mind that the auto-suggestion list should not be too long as it should not distract the user's attention with unnecessary results.
Correct errors and typos
According to Multisearch statistics, 10-15% of users make mistakes in their search query and more than 50% of them don't refine their search query. They simply leave the site hoping to find the product they are looking for somewhere else. Therefore, it is important that search understands what a customer is looking for.
Understand synonyms and take into account morphology
Smart search must process queries in all morphological forms such as gender, case, number, declension, and part of speech. This will ensure that the users will see the right products. Search should also understand the context of the query and identify words synonyms. You can find out more information following this link.
In the picture below you might see that the search takes into account the plural form of synonyms for the word cell phone.
Recognize transliteration
The search bar should transliterate Latin into Cyrillic and vice versa when performing a search. When search understands transliteration, it makes no difference what alphabet the user enters a query in, as illustrated with the example below. This feature dramatically reduces the number of undetected results.
Save request history
Formulating, entering, and remembering a query is not always an easy task for a customer. When designing your search, you must remember the basic rule of usability, namely respect of the user's efforts. Your bar should save all of the user's recent queries in order to provide them with this data the next time they interact with the panel. This not only makes the customer's path to purchase easier, but also increases loyalty to the site as users want to repeat a positive experience.
3.2 Functionality of the results page
Let's take a further look at the options for improving search results:
Provide accurate and relevant results
The first results page is the most important page. It's the results that visitors see on this page that form the visitor's final decision, namely to buy a product from an online store or look it up in another. It all depends on the relevance of the products. Users very often judge the value of a web site based on the quality of the shown results. Thus, it is important to properly prioritize the results and let all the most relevant products appear on the first page.
Search quality is synonymous with relevancy. When the results correspond to the user's expectations, it means that they are relevant. However, it will not be enough to apply only relevance in order to make a bar a true revenue generator. To do this, smart search can influence the order in which the results are ranked. This means that the bar will take into account features important to E-commerce when deciding which products show up on top and which on bottom. Here you can find out how exactly this works.
A good example of a relevant display on a food delivery site:
Provide opportunities for sorting and filtering of products
By narrowing down your search results, you'll make it easier to choose and speed up a purchase. Filters and sorting will help during this process:
Shopping cart in search results
Adding an item to the cart and bypassing the product card page belong to a very convenient and useful functionality. Such an opportunity significantly shortens the path to purchase and saves time for clients.
When a visitor enters a term, he/she immediately sees suitable goods along with an "Add to cart" button as shown on the image below. The clients don't need to go to the product card and waste time if they have already made up their mind.
Properly fill in the "Nothing Found" page
If nothing is found for a query, it's important to provide visitors with alternative product options. Alternatives serve as a kind of incentive to further explore the site. For example:
To learn how to properly design pages with "empty" output, check out this link.
You should never leave users without results and remove products that are temporarily out of stock. Why and how to do it correctly can be found here:
Multisearch's unique report on queries with unfound results is the best advisor for finding out what people are looking for on your site but don’t find because the products are out of stock. With the help of Multisearch, you can fill your site with in-demand items that will bring you a lot of profit and help you get new customers.
Experience of the company "Turum-Burum"
The team of "Turum-Burum" needs to deal with the above problems everyday. They have to design not only the site but also optimise its search design.
Denis Studennikov
Head of the UX/UI department which takes care of interface optimization and E-commerce projects development at “Turum-Burum”.
The search function is a significant factor in site growth yet it is often underestimated and overlooked.
Statistics and numerous examples from “Turum-Burum”'s practice confirm that a well-designed search even for a small audience yields tremendous results.
For example, while working with the Intertop project, we concluded that about 3% of the site visitors use the search function. It would seem that the figure is insignificant but it is about 60,000 visitors per month. However since the search was poorly optimised and the results didn’t conform to the users expectations a lot of users left the site immediately after using the search function.
Solution: We analyzed analytics data, collected a list of user requests from the search bar, categorized them into categories such as brand name, size, product type, and so on. Based on the information we received, we revised the search logic.
As the result, the search to purchase rate increased by 74.64% after it was improved
It's recommended to pay special attention to the implementation of mobile search. Nowadays, there are 3.5 billions of mobile users, and their number is growing rapidly. It’s needed to use the principle of mobile-first and properly adapt the search function for mobile devices.
If you can show 3-4 rows of products in the search results on the desktop, this space is limited on the mobiles. Therefore, it’s needed to implement the search bar taking into account the border space:
-
make sure to leave the search icon in the header, don't hide it further down;
-
open the default search, especially if you have a lot of traffic. You'd rather hide "Favorites" in the burger menu or reduce the shopping cart icon and logo, but the main area should be used for search.
You shouldn’t forget about micro interactions. UX is not just about the layout of blocks. It's also about the feeling the user gets from the interface. Therefore, don't make users make an extra click. After clicking on the search icon, the cursor should be automatically put in the input. Thus, you should implement the following process: click on the icon and immediately start entering the query.
For example, we implemented full-screen search for Dicentra.ua both in desktop and mobile applications. The option of search function in the form of a pop-up or in a separate window is suitable for projects with mainly mobile traffic. This way we create a separate focus of attention and get additional space for tips.
Implementation of search in a separate window for the online store of Dicentra:
Conclusions:
-
you should not underestimate the importance of the search functionality, it helps to grow significantly;
-
it is important to work out search in detail in the mobile, if possible, to present it immediately disclosed;
-
When it comes to search, the focus should be immediately put on the input field.
Bottom Line
A search bar that takes into account the features and nuances we've described will give your customers good experiences with the site and make them return to your site again and again.
Developing a bar on your own is not a quick and cheap process. You can save time and budget by choosing Multisearch smart search. It is an out-of-the-box, feature-rich solution that is very easy to install. Smart search can easily find the right product, that's why website visitors like it. Owners of web stores choose Multisearch because of its ability to increase conversion rates.
If you want to know more about smart search and how it can help you, just contact us. A 14-day free trial will help you experience the power of Multisearch's smart and fast search.
