<?xml version="1.0" encoding="utf-8"?>

In today's digital environment, integrating search functionality into user interfaces is vital. It allows users to effortlessly find what they're looking for, whether on intricate websites with extensive data or in specialized apps for specific needs like flight bookings, hotel reservations, or car rentals.

By embedding a search feature in your UI, you enable users to quickly locate necessary information, bypassing the need to navigate through numerous menus. Consider, for instance, the challenge of exploring a content-rich site like Wikipedia without a search tool! The presence of search functionality not only enhances user efficiency but also significantly streamlines the experience, ensuring quick and easy access to relevant content or specific items.

Exercise #1

Definition of search

Definition of search

Search functionality is a part of the product's navigational system. It's an emergency exit that helps users find what they're looking for on a page or the whole website and find their way back if they get stuck in navigation.

Search functionality isn't the only navigational feature. Depending on users' level of knowledge, expertise, and goals, they choose different techniques for finding what they need. For example, visitors of an e-commerce website may browse the catalog, go to their wish lists, and recommendations, or use a search input to find the specific item.

There are a lot of options for implementing search functionality, but the most expected variant is a simple text input wide enough to contain a word or phrase users search for. When they hit "Enter" on their keyboard or click the search button, they should receive a list of results matching their search query.

Exercise #2

Position search where users expect it to be

Position search where users expect it to be Bad Practice
Position search where users expect it to be Best Practice

Don't make users search for the search option. It should be easily discoverable and recognizable. Research shows that people are used to seeing the search input or icon in the top center or top right of every page on a site.[1]

Hiding the search functionality behind the hamburger menu or placing it somewhere else makes users feel frustrated and eventually leads to higher abandonment rates.

Exercise #3

Use the appropriate icon

Use the appropriate icon Bad Practice
Use the appropriate icon Best Practice

The search icon, commonly represented by a magnifying glass, is a key element in search functionality. It should be placed within the search bar, usually on the right or left side, making it easily visible and intuitive for users.

Ensure that the icon is interactive — designed to be clicked or tapped. When users enter a search term and click or tap the magnifying glass icon, it should trigger the search process, displaying the results based on their query.

Pro Tip: Don't overdo the icon design and use the simplest version — excessive graphic details slow down recognition.

Exercise #4

Use a proper input size

Use a proper input size Bad Practice
Use a proper input size Best Practice

The search input size should be wide enough to fit a typical search query. Short search inputs force users to use fewer and shorter keywords, which, in turn, leads to bad search queries and poor search results that negatively affect the user experience.

The Nielsen Norman Group recommends using 27-character-long search inputs as it makes search requests easier to read and interpret for users.[2]

Exercise #5

Use helpful placeholders

Use helpful placeholders Bad Practice
Use helpful placeholders Best Practice

To enhance user experience, consider providing sample search queries in the search box. This can be achieved using placeholders — short, descriptive texts within the search input field that suggest what users can search for. For example, a travel site might use "Search for flights, hotels, or destinations." These placeholders guide users, reducing uncertainty about what to enter.

However, use placeholders judiciously. They can be mistaken for pre-filled information, leading users to think no input is needed. Their often low contrast can also make them hard to read, posing accessibility challenges. Not all screen readers or assistive technologies interpret placeholders effectively, potentially hindering some users from accessing the hints.[3]

Exercise #6

Enable auto-suggest for searching

Enable auto-suggest for searching

Auto-suggestions, or autocomplete, enhance site search by providing real-time suggestions in a dropdown menu as users type their query. This feature assists users in formulating effective search queries, leading to faster and more accurate results. If no relevant suggestions are available, none are shown.

When implemented well, auto-suggestions reduce the effort users must put into typing, lower the chance of typos, and decrease the cognitive load by allowing users to recognize and select the correct terms quickly.[4]

Pro Tip: To make the auto-suggest feature even more helpful, implement autocorrection, word prediction, and related words recognition.

Exercise #7

Use rich auto-suggest appropriately

Use rich auto-suggest appropriately

Rich auto-suggest not only offers relevant queries but also includes links to related content like category pages, product details, and articles. This enriched approach is particularly effective for users who have a clear idea of what they're searching for. To enhance recognition and usability, adding image previews or category icons alongside text descriptions is beneficial. This visual aid helps users quickly identify the item or category they need.

Ensure that the suggestion dropdown is well-organized and spaciously designed. Cluttered or poorly labeled suggestions can overwhelm and confuse users, detracting from the overall user experience. A clear, visually appealing suggestion dropdown enhances navigation, making the search process more intuitive and efficient.

Pro Tip: When adapting these rich search suggestions for mobile, strip off distracting visuals and keep the text queries only.

Exercise #8

Use persistent search for search-focused apps

In search-focused mobile apps, using persistent search can greatly enhance user experience. As per Material Design guidelines, persistent search involves a search input nestled within a search bar, ready for user interaction.[5] When activated, this input expands to fill the entire screen.

Additionally, it can offer suggestions based on popular or previously entered searches, aiding users in formulating their queries. For example, in a book-finding app, tapping the search bar could expand it to fill the screen, while also displaying popular book titles or genres as suggestions. Users then simply tap the Search button to execute their query. This approach ensures that search is always easily accessible and user-friendly, particularly beneficial in applications where searching is a primary function.

Exercise #9

Use expandable search to save space

On mobile apps where search isn’t the cornerstone of functionality, expandable search is a good option. Instead of including a full search field in the UI, insert an easily recognized icon such as a magnifying glass that indicates the presence of search functionality without making it stand out too much.

Similar to persistent search, expandable search can also offer suggestions, drawing from past searches or popular queries.

Exercise #10

Provide view options for the search results page

Provide view options for the search results page Bad Practice
Provide view options for the search results page Best Practice

Regardless of the type of search you implement, users usually expect the search results page to be displayed after clicking or tapping the Search button. Because search results pages can return massive amounts of information, choose a proper layout to present content in the most scannable manner.

The selection between a list view and a grid view depends on how much information users need for comparing products and choosing between them. A list view makes more sense for items where details like model numbers, ratings, and dimensions matter. This layout is also a good fit for text-only results.

A grid view layout is usually used when the product's appearance is more vital for making a final decision to purchase the item than its text description.[6]

Pro Tip: Offer users the freedom to choose between layouts and view results the way they want.

Exercise #11

Show recent search requests

Show recent search requests  Bad Practice
Show recent search requests  Best Practice

Incorporating recent search requests addresses a common frustration — remembering that you searched for something but not recalling the exact terms. When users begin to type in the search bar, the dropdown can display previous search terms as recommendations, tailored to match the current query.

This approach significantly reduces the mental effort required from users. Instead of having to recall past searches or formulate entirely new queries, users can simply recognize and select from the list of recent searches provided. This is especially helpful in scenarios where users frequently return to search for similar items or information.

Exercise #13

Optimize search functionality on mobile

Optimize search functionality on mobile Bad Practice
Optimize search functionality on mobile Best Practice

Globally, more than half of all web traffic comes from mobile devices and this presents unique challenges.[7] The smaller screen size demands that the search function be clearly visible, and the search results page must be easy to scan. Elements like links, buttons, and inputs need to be large enough for comfortable tapping, considering users often operate their devices single-handedly while multitasking, like walking or commuting.

This recommendation makes sense primarily for search-oriented apps. For platforms like Instagram and Pinterest, where browsing is the main activity and search isn't the primary focus, the search function isn't as noticeable.

Complete this lesson and move one step closer to your course certificate