Search experience

Part 1. Observe and ask questions

What are your users’ information needs and intents?

  • Navigate, find a particular web page.

  • Find specific information (“Weather in Prague”, “Capital of Australia”).

  • Find advice (“How to design a search interface”).

  • Find resources, applications, documents.

  • Find facts, data (“How many active users do we have on our website?”).

  • Gather information from different sources.

  • Analyse data.

At what point do users click on search?

  • What were they doing right before clicking on search?

  • Who did they talk to?

  • What app were they using before switching to your search?

How do they form queries?

  • Interaction with search is a conversation. If you know how users start the conversation, you can give them the right answers.

Do they know exactly what they are looking for? Or are they just browsing?

  • For example, I might research the topic of friendship and look for any book or a category of books. Or I might look for a particular book. I expect different outcomes from these two requests.

What do they expect to find?

  • Can they describe what the desired outcome of the search is?

  • How else can they find this information?

What are the next steps?

  • What do they do with the results?

  • What do they do if they didn’t find what they were searching for?

  • How does search fit into their workflow?

Is there a pattern in user actions?

  • Patterns in user behavior describe how users interact with search, what results they expect, and what their next steps are. Patterns are especially important when redesigning an existing interface.

What applications do they use?

  • If your product is part of a workflow, other tools may affect user habits and expectations about their user experience. Find out more on how they interact with searches in these tools and what works best for them.

Part 2. Check-list: Consider every part of the search

Results page

  • Types of results - What types of information are available on your site? What types are searchable? How can different types be better shown on a result page?

  • Visualisation of results

    • Table or list

    • Cards

    • Adjustable view

    • Faceted navigation - Dividing search results into a logical group based on information architecture makes the browsing experience more comfortable.

  • Number of items on a page - How many results do users need to see at a time? Can we let them comfortably arrange results by providing alternative views and sorting?

    • View settings - customize how items are displayed and how many

    • Sorting - relevance, price, newest, name, etc.

    • Pagination

      • Loading

      • Infinite scroll

      • Combinations

Preview

This is a well-researched part of the interface. What do best practices tell us to include in the search results?

  • Query terms highlight in preview

  • Summary of a document that helps differentiate between results

  • Page / document preview

Accessibility

It’s our job to make sure every user can comfortably work with our product. Are search results scannable and readable with a text-to-speech service? Are font size and contrast readable? Can people read them on a mobile display on a sunny day? Are the colors you use recognizable by everyone?

Shortcuts

Some companies takes result previews to the next usability level and give users the necessary minimum amount of info and functionality without leaving the result page. These are some common actions. They can vary considerably from product to product:

  • Sharing

  • Saving results, bookmarks, adding to a wish list

  • Adding to shopping cart

  • Commenting

  • Previewing gallery

  • Bulk actions

Interface feedback

  • Loading icon or progress indicator

  • Information about search process (results, time, applied filters)

  • System notifications (example, if results are time sensitive, the user might need to refresh them)

  • Not found page

  • Microinteractions

Search history

  • Recent queries

  • Most popular queries

Filters and sorting

Well-defined filters are highly important when designing complex sites. They would make the search experience a lot smoother.

  • Categories and their granularity

  • Labels

  • Types of filters

  • Placement

  • Actions (save and edit custom filters)

  • Sorting

Customisation

If search is a key function in your application and an important part in the workflow of your users, customisation would be important for them. You may allow users to adjust a result page layout, change fonts and colors, define how many results are shown on a page, save filters, customise sorting parameters or add call to actions.

Personalisation

Think of how user setting, previous queries, preferences or other information about a user can improve the search experience.

Keyboard shortcuts

A set of keyboard shortcuts would make navigating through search results much easier.

Relevance Indicators

Depending on the type of content, how precise the results are, and how big the gap in the relevance of results is, relevance indicators may help make the decision quicker.

Search box check-list

Visualisation

  • Positioning of a search box

  • Call to action

  • Icon

  • Single box or several input fields

Input types

What types of inputs should your search support?

  • Text

  • Voice

  • Images

  • Tags

Help

  • Search tips. Show users the whole potential of the search.

  • Default text in an input field.

Autocomplete

  • Autocomplete can be a powerful tool to make interaction with search quick and efficient.

  • Predefined autocomplete may suggest recent or popular queries, filters, tags or play a navigational role.

  • Structured suggestions help users navigate complex webs.

Microineractions

  • Loading

  • Error messages

  • System notifications

  • Fast way to erase query

Advanced search

If there are many parameters for finding an item, you might consider using advanced search options and logical operations. Example: I want to find all clients who live in Berlin AND made a purchase during the last month AND their age is between 45–60. How can we support these types of queries with interface?

  • Logical operations (AND, OR, NOT, ~, etc)

  • Interface based advanced search

Part 3. How to optimise your search design?

Make it prominent and work on the positioning, contrast and sizing.

  1. Put the search box where users expect to find it

    A study by A. Dawn Shaikh and Keisi Lenz in a survey of 142 participants shows that users expect the search input field on the top right corner of the header.

  2. Make your search recognizable To make your search recognizable, you can play with the contrast and the visual representation of your search. Increasing the contrast between the input field and its border is one of the most effective ways to emphasize the search box.

  3. Use a Magnifying glass icon

    The magnifying glass is a worldwide recognized icon. Various applications and operating systems use it to convey search. This contributed to user’s familiarity and expectations about the icon.

    • Use a schematic icon and avoid adding details, the simpler, the better

    • Less is more, fewer graphic details in your magnifying glass speed up recognition

    • Directional icons need to be mirrored when designing in a right-to-left (RTL), such as Arabic and Hebrew. The search icon represents holding an object with the right hand. It should not be mirrored in a RTL-writing country.

  4. Make your search bar wide enough to accommodate your user’s query

    In Jacob Nielsen article, The Magnifying-Glass Icon in Search Design: Pros and Cons, the search input field should be wide enough to contain 27-characters. This would accommodate 90% of queries in the world.

    Small input search forces the user to go right to left and vice versa to read the full query. Forcing the query’s scroll harms usability.

Links

PreviousDesign

Last updated