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.
    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
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

Last modified 1yr ago