The Internet is a bustling marketplace, complete with flashy category shelves, colorful slogans, and gravity-defying ‘value’ deals. In fact, the Internet can be considered an endless supermarket; the virtual counters of an online store or resource library boast of more options than a large retail outlet ever can! However, these economies of scale come with a few daunting challenges. One of these limitations is ‘search’. Searching for a product online and actually finding it in the vast abyss of virtual shelves, from across millions of product types, sizes, prices, colors, geographical variations, and many other such considerations is actually a Herculean task. An efficient search and filter criteria can make all the difference in conversion.
To put it simply, you can’t sell a product that your customers can’t find. Search is a fundamental mobile activity and a critical element of building a profitable app or site. Users expect smooth in-app experiences when they are browsing for products with the intention of making a purchase. The app interface must assist the user in finding the product or service without encountering too many navigational obstructions. Data suggests that users typically make very quick judgments about the application’s value based on the quality of one or two sets of search results. A search facility should help users find what they want quickly and easily.
Users browse product or service-oriented websites and apps in the pursuit of something. The search function must be efficient enough to connect the user to the object of their desire.
Let’s take two examples to compare the ‘Search’ function of two leading consumer-facing applications:
Netflix:All users who log in to the widely popular content streaming website, Netflix, are looking for something to watch. But since Netflix is an endless library of viewable content, how does the user find what they are looking for. The answer lies in the dynamic search bar. Positioned on the top-right corner of the homepage is the search criteria; it allows users to search for a movie based on their mood or choice by providing certain set of filters such as style, genres, language et cetera. The user intent is captured there.
Netflix gives related titles along with the list of movies populating below – all curated through search patterns analyzed by Netflix. Hence, Netflix drives users to exactly what they are looking for leading to quick decision-making.
Medium: On the other hand, the search function on Medium could do with a little tweaking. The prompts in the search field do not direct the user with the method of the search and a new user can easily get confused on how to navigate the website for content. Medium must streamline the search function to reduce the cognitive load on the user.
There are two key areas of consideration when it comes to designing the ‘Search’ functionality in an app: Search box design and Result pages; lets’s dig into them further
A search box is a combination of an input field and the submit button. Since the search box is one of the most frequently used design elements on content-heavy websites/applications, its usability is critical. Let’s look into the basic sets of recommended practices to be followed for Search box design:
One very important rule in search box design is its placement. The intention is to make the search function easily noticeable. Especially, where the search is an important function, it should be upfront, as it might serve as the fastest route to discovery. Search hidden under navigations or under icons has negative consequences. Below are the points to consider while placing your search field:
As a thumb rule search box should be the first or the second thing a user should see when they open the app. They need not necessarily be full length or wide open. To decide which style of search box to adopt, one needs to analyze the user motivation/goal for using that app. The placement of the search bar is dependent on the nature of the website and the product or services they offer. Let’s review the search option in some leading websites.
The primary goal of Google is search. Hence, the search engine has a wide search bar placed strategically in the middle of the page.
Amazon
The primary goal of users on Amazon is not search. A lot of users on e-commerce sites browse for products. Hence, the e-commerce website has been designed with a visible search bar and not a full-width search box.
Interestingly Pinterest has a different approach for both mobile and web interfaces. The web has a wide-open search box along with a few other options, but the mobile interface has an icon-only search approach. This is because most users on Pinterest browse creations rather than searching for a specific thing.
In shorts
With inshorts, a different scenario manifests; the purpose of this application is to help users with a quick understanding of the news categories of their liking. The app identifies the interest areas of the users during the onboarding process itself. In case a user wants to search anything they tap on the ‘Discovery’ bar leading to search for news based on any categories/topics.
The size of the input field is an important area for deliberation as it directly affects the usability of the app. Data suggests that 90% of the search queries are approximately 27 characters in length; this metric can be used as a yardstick while deciding the length of the input field.
The magnifying glass icon is the universal symbol of search. Using the common and easily identifiable context reduces the cognitive load from users and helps them in quick understanding. We suggest to use the simplest version of the magnifying glass, not everything needs to be innovated!
Typing out a query in the input field must be complemented by a trigger action, ie, pressing the search button. A button helps people recognize that there’s an additional step to trigger the search action.
While designing the button, two considerations have to be taken; first, the button must be sized appropriately, so that users don’t have to point the mouse very precisely on a certain spot. A larger clickable area makes it easier to spot and to click. Second, to let users submit a search query using the ‘Enter’ button on the keyboard as well as on clicking the icon. Many users still have the habit of clicking an actual button to submit the search.
It’s a good practice to let users know what all they can search for. It’s advisable to include a hint text in the input field to serve as examples of how queries can be worded. While designing the prompt, limit your hint to just a few words; remember we don’t want to overwhelm our users.
We all love the query suggestions that Google throws on us while searching, it’s just easier, ain’t it? In most websites/apps that include search as a key function, formulating a search query includes a specific logic or algorithm. Autosuggestion feature not only reduces keystrokes but also suggest more accurate terms to enable the users’ search process.
A key usability rule in user experience dictates that we as designers, respect the users’ effort. Apps should store all recent searches, in order to provide this data to the user the next time they conduct a search. It saves screen-time and effort in searching for the same item again and increases conversion.
The results page is a crucial piece of the puzzle and defines the search experience for the app. Here are some effective pointers for delivering a functional ‘results’ page.
Data suggests that most users will not find accurate search results in the first try and will hence, try to search again by making slight modifications to the original query. For the sake of simplicity, leave the initial search term in the search box so that users don’t have to re-type the entire query again.
For example, Youtube retains users’ search queries after they have submitted their search request (Good experience) while Amazon erases the same (poor experience). As per the usability principle of design, Youtube ranks higher than the e-commerce giant since it prevents the duplication of user effort to look for items on the site. Youtube saves recent searches as well as content that is frequently searched by an individual user to suggest customized playlists for their target audience.
Search is no longer restricted to text. The layout of search pages must suit the content that it seeks to display. Two popular layouts for content presentation are:
Tip:Allow users to choose ‘list-view’ or ‘grid-view’ for search results. This gives your users the ability to choose how they view their results in a way preferable to them. Soundcloud is a good example of this hybrid approach.
The result pages must display all the relevant matches to the search query entered in decreasing order of relevance with the most accurate search results on top. If your design can showcase the total search results, the number of search items available; Users can make informed decisions on how long they want to spend looking through results. This has been nailed by company Awwwards as they display the search matches by type, relevance and reach on the top of the page.
The average attention span of a human being is depleting as we speak. Data suggests that in this day and age of constant digital bombarding, our ability to direct our attention on something is down to 8 seconds of focus time. This makes it crucial for us as designers to not only build systems that deliver results faster, if not immediately, but also display a progress indicator to keep the user engrossed. This gives them a clear indication of how long they have to wait, while we collate results behind the scenes.
If the search takes more than 10 seconds, its advisable to use animation. Fine animation can distract your users and make them ignore long searching times. Here are two techniques that work:
As a user, nothing can be quite as frustrating as the search query delivering zero relevant results. This is especially true for someone if they have tried multiple times without success. Here’s how you can navigate this situation without aggravating the end user.
Sort and filter options are the unsung saviors of online search. Sifting through a plethora of options online enlisted one after the other can be an exhausting task; filters simplify this task by narrowing the displayed results to reflect items as per the user’s need and not the entire universe of ‘related’ products. Filter & sort options are the sub-elements of any search as they can help users narrow and organize their search results, which otherwise requires extensive scrolling or pagination on a small screen.
However, it’s important not to overwhelm users with too many options. If your search requires a lot of filters, then some of these filters should collapse by default. Also, once the filter/sort is applied by the user then a button called ‘Reset Filters’ or ‘’Clear All’’ should be given next to the filters/sort so that the user can quickly make changes.
Search is a crucial, complex, and expensive feature. It has the potential to make or break an app because it serves as an important experience tool for the users. With the ever-changing technology, let’s embrace ourselves into a completely new world of search design. Today search is no longer limited to text; different formats of search queries can be submitted in a search box in any application/website. Are we ready for it and thinking about them? Below are some examples of popular alternative search formats, do let us know what are your design techniques for them.
