{"id":6523,"date":"2021-05-28T09:30:15","date_gmt":"2021-05-28T07:30:15","guid":{"rendered":"http:\/\/blog.bart.sk\/en\/?p=6523"},"modified":"2024-01-29T10:54:39","modified_gmt":"2024-01-29T09:54:39","slug":"how-to-improve-searching","status":"publish","type":"post","link":"https:\/\/blog.bart.sk\/en\/how-to-improve-searching\/","title":{"rendered":"How to improve searching"},"content":{"rendered":"\n<p><b>Search suggestions<\/b><span style=\"font-weight: 400;\"> are proposed suggestions that appear in a drop-down menu when a user is entering a search term into the search box.<\/span><\/p>\n\n\n\n<p><b>Let&#8217;s talk about the benefits of such search suggestions:<\/b><\/p>\n\n\n\n<ul>\n<li><span style=\"font-weight: 400;\">The user chooses from the terms that will show them suitable results. This minimizes the chance that they will enter an expression and find wrong results. Or none.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Less writing. The user chooses from the suggested terms.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Fewer typos because they don&#8217;t have to type the whole search term.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">The user does not have to think about the correct wording, because they can choose from the suggested terms.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Such a search makes sense even if the user does not choose any of the suggested terms. This is because it gives them an overview of what is on the page, how to write complex terms correctly or what other users are looking for on the page. In particular, if the search term is short, it is easier for users to type the entire term without using the mouse or tapping the screen.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Conversely, if something doesn&#8217;t appear as a search suggestion after entering the first few characters of the product name, some users may conclude that the site doesn&#8217;t offer the product. And they leave it without completing the search. And you don&#8217;t want that, do you?<\/span><\/p>\n\n\n\n<p><b>Therefore, ensure that each suggested term has really good and relevant results.<\/b><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><b>Distinguish the entered text from the suggested expressions<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Each search proposal consists of two parts:<\/span><\/p>\n\n\n\n<ul>\n<li><span style=\"font-weight: 400;\">characters already entered by the user<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">characters that the system suggested to complete the expression<\/span><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/06.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/06.png\" alt=\"\" class=\"wp-image-6528\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/06.png 1200w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/06-300x169.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/06-768x432.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">You can use bold, italic, color or indentation to visualize these differences. A visual representation helps users understand why suggestions are displayed and helps them more easily scan available information.<\/span><\/p>\n\n\n\n<p><b>Use different visual styles to highlight which characters belong to which part.<\/b><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The type of suggestions your site offers should help you determine how to edit those suggestions.<\/span><\/p>\n\n\n\n<ul>\n<li><span style=\"font-weight: 400;\">If the search only appends characters to the end of the user&#8217;s text to complete the query, you should highlight the suggested characters.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">If the search suggests popular queries that contain the user&#8217;s text anywhere in the query instead, it&#8217;s best to highlight the user&#8217;s query.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Let&#8217;s show you an example:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The user enters the term &#8220;basketball&#8221; in the search box. While entering each character, suggested terms appear in the drop-down menu.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The search in our example uses the first type of suggestions &#8211; it adds characters to the user&#8217;s text in an effort to complete the expression for them. Characters that match what this user has already typed were displayed in bold (&#8220;basketball&#8221;), while characters designed to complete the expression were of normal font thickness.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/01.png\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"675\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/01.png\" alt=\"\" class=\"wp-image-6533\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/01.png 800w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/01-300x253.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/01-768x648.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Although this approach clearly distinguished the user-entered term from the system suggestion, it unfortunately emphasized the repetitive characters in each suggestion (characters already written). In this case, it would be better to display search suggestions with an emphasis on unique characters:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/02.png\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"675\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/02.png\" alt=\"\" class=\"wp-image-6532\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/02.png 800w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/02-300x253.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/02-768x648.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">In case your search suggests popular terms that contain the user&#8217;s text anywhere in the query, the opposite approach is better &#8211; to highlight the user&#8217;s query.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Using our example with basketball, a system with this type of suggestions would return proposals like &#8220;basketball sweatshirt&#8221;, but also things like &#8220;portable basketball hoop&#8221; and &#8220;children&#8217;s basketball jersey&#8221;. In this case, you should highlight the user&#8217;s query to help them scan suggestions and determine where the query text will fit within each suggestion.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/03-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"675\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/03-1.png\" alt=\"\" class=\"wp-image-6531\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/03-1.png 800w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/03-1-300x253.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/03-1-768x648.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><b>Show the area where the term is located<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Scope search should only be used on certain websites. And in case it can be implemented well.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Where such implementation is possible, each suggestion should consist of the following three elements:<\/span><\/p>\n\n\n\n<ul>\n<li><span style=\"font-weight: 400;\">characters already entered by the user<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">characters that the system suggested to complete the expression<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">the area to which the entered expression belongs<\/span><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/04.png\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"675\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/04.png\" alt=\"\" class=\"wp-image-6530\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/04.png 800w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/04-300x253.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/04-768x648.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">It is also necessary to visually distinguish the search term from the area to which it belongs.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><b>Show more than just simple suggestions for completing a term in your search<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">In addition to displaying suggestions for completing a user-entered term, you can also show other types of related content.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">For example:<\/span><\/p>\n\n\n\n<ul>\n<li><span style=\"font-weight: 400;\">categories<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">products<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">articles<\/span><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"675\" src=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/05.png\" alt=\"\" class=\"wp-image-6529\" srcset=\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/05.png 800w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/05-300x253.png 300w, https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2021\/05\/05-768x648.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<p>If you decide to go for this type of results, make sure that the suggestions are properly arranged and visually illustrated. Users should be able to easily scan the results and understand all the information displayed.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">For mobile devices, it&#8217;s important to adjust the results to the screen size. On smaller devices, it&#8217;s enough to offer simpler results.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Consider whether such advanced search suggestions will benefit your customers. Or, conversely, they would make the results less clear to them.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"Search suggestions are proposed suggestions that appear in a drop-down menu when a user is entering a search&hellip;","protected":false},"author":21,"featured_media":6524,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":""},"categories":[209],"tags":[225,214,215],"_links":{"self":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/6523"}],"collection":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/comments?post=6523"}],"version-history":[{"count":6,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/6523\/revisions"}],"predecessor-version":[{"id":7413,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/6523\/revisions\/7413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media\/6524"}],"wp:attachment":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media?parent=6523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/categories?post=6523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/tags?post=6523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}