Search interface: 20 things to consider

Published in

UX Planet

9 min readMay 21, 2018

What questions to ask users? What to consider while prototyping? And what are the best practices in search interface design?

Depending on the project, search may be one of the most complex features. Users see just a box, but designers and developers see an intricate system and a lot of work behind the box.

This post is a collection of questions we should answer before designing a solution and a check-list of elements we should think about while prototyping.

Part 1. Observe and ask questions

8 questions designers should answer during the research phase to understand why users search and when and how they form queries.

1. What are your users’ information needs and intents?

Do they search to:

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.

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

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

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

5. What do they expect to find?

Can they describe what the desired outcome of the search is?
How else can they find this information?

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

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

📚 In the books Search Patterns and Search User Interface, the authors describe these common search patterns and models:

Quit pattern. A user types a query > sees results > quits.

Narrow pattern. A user types a query > sees results > narrows them down.

Best first pattern. A user types a query > sees results > opens one of the first links.

Pearl growing pattern. A user types a query > opens one of the results> opens related links inside the document or uses terms from the document for queries.

Find more patterns in the book 📚 Search Patterns on Searchpatterns.org or on Medium (list of common patterns with examples).

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

Ask your users about their tools to understand how they interact with a search.

💬 Ask User is a tool that helps you reach out to users and directly ask them questions in the right context at the right time.

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

Search has more components than meets the eye. This check-list helps prototype faster and doesn’t let you forget anything.

*Disclaimer: this list includes only interaction elements without considering algorithms, search behaviour, speed or quality of results.Only desktop search interfaces are considered. Mobile search is different in many ways and would need a blog post of its own.

Results page

✓ Types of results

Videos, events, audio, locations, charts

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.

“Faceted navigation is arguably the most significant search innovation of the past decade.” Jeffery Callender, Peter Morville

✓ 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

Sorting

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

✓ Actionable results

How can we help users do their job faster and more comfortably? For example, give users the opportunity to start working with items they were looking for 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

Filters deserve a blog post of their own. 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

Franzen and Karlgren, 2000 found that showing study participants a wider entry form encouraged them to type longer queries. Search user interfaces

✓ 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

Google drive

✓ 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

Interface based advanced search

Designing cross-channel search experiences

This is a crucial part of the design process if you’re designing for multiple devices. I won’t cover this topic here, but you can read more in📘 Designing the Search Experience by Tony Russell-Rose and Tyler Tate.

Takeaways

Search is a complex and an expensive feature. Technical constraints will play a big role in design. That is why involving a development team from the start (=research phase) is important. The team will understand user needs and help find the optimal solution.