We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› Designing Search: Entering the Query

Designing Search: Entering the Query

by Tony Russell-Rose
10 min read
Share this post on


Affordance, scoped search, search within, advanced search, and input. A look at best practices for five aspects of online search.

One of the fundamental concepts in UX is notion of affordance: the idea that objects should behave in the manner that their appearance suggests. A push plate on a door affords pushing; a handle afford pulling. How many times have you walked up to a door and found it behaved contrary to your expectations? Invariably this is caused by a mismatch between form and function.

Likewise, the design of the search box should follow its function. Its purpose is to allow the user to enter queries in the form of keywords, so it should look like it will accept textual input, and have an associated button that clearly indicates its function. It should also be wide enough to comfortably accommodate the majority of queries.

A match between form and function at eBags.com

A somewhat less conventional search box design at basmatitree.net

The concept of affordance is so fundamental that it should apply to all aspects of the user experience. However, the major web search engines choose to differentiate themselves through distinct design treatments. Google, for example, uses two buttons on its home page, including the somewhat quirky “I’m Feeling Lucky” option. Both of these buttons are centered beneath the text box and given a minimal border that only vaguely suggests their function:

Minimalist search box design on the Google home page

However, these design choices are perhaps now so familiar to users that they have become accepted as simply a further expression of the Google brand. The positioning and layout of the search box on the homepage is ephemeral anyway; as soon as the first character is entered the page layout changes to accommodate the results and the search box relocates to the top left of the page. The search button loses its label and gains a magnifying glass icon, which has become accepted as communicating a search function.

A more conventional search box design on the Google results page

Bing behaves likewise, offering a similar centered search box on the home page, which also relocates to top left once the query has been submitted.

Search box on the Bing results page

Yahoo! offers perhaps the most conventional treatment, employing a simple layout and button affordance, both of which remain consistent from home page to search results.

Search box on the Yahoo! results page

All three sites assist the user by placing the cursor within the search box upon page load and allowing the user to press the Enter or Return key to submit the query. In addition, they each reserve a consistent location for the search box, at the top and bottom of the page.

They also display the query in the search box after submission, which confirms the search terms for the user. Retaining the query in the search box also provides a convenient starting point for query reformulation.

On the Web, users can search for almost anything with few constraints on topic or content type. In site search (i.e., search of a specific website), the choices are usually much more constrained. This presents an opportunity to provide further direction in the form of placeholder text and other prompts to help users construct meaningful queries. The site search on Pipl, for example, informs users that they can search for people by name and location, email, username, or phone number. This text disappears as soon as the search box receives focus.

Pipl search box guides users toward meaningful queries

Scoped Search

In some search applications the content is organized into categories. For example, items available on eBay are categorized according to eBay’s content taxonomy. This makes it possible for users to restrict their search scope to a specific category, e.g., using a drop down menu or similar:

Search can be restricted to a specific category on eBay

Inviting users to select a category in advance helps them narrow their search more rapidly, and takes advantage of refinement options that are tailored specifically to that product category. For example, a query for “golf” in the Cars, Motorcycles and Vehicles section of eBay presents a very different set of refinement options than the same query in Sporting Goods. Users with high domain expertise can therefore benefit greatly from scoped search, particularly if they are seeking known items.

This approach is less well suited to users with low domain expertise, as they may be unsure which category to select at the outset. A poor choice of category can constrain their search improperly or too narrowly, which increases the likelihood of zero results and reduces the potential for serendipitous discovery. Craigslist, for example, offers several category choices, but which would you choose to find focus group opportunities?

Scoped search on Craigslist

It turns out the correct answer is either “et cetera jobs” or “gigs.” In this case, it would be preferable if scoped search was set to “all categories” by default.

The problem is further compounded if an existing scope restriction is applied by default to a new query. For example, a search on WARC for “text analytics” produces zero results for “Charts,” but the same query could have been productively applied to “All Categories.” In all cases, and particularly those for which zero results are returned, it is prudent to apply a fallback strategy that searches across all categories, and to clearly display the scope of the search as part of the results.

Scoped search could include a fall back strategy at WARC

Search Within

It is common to think of the search box as the gateway to the search experience; it’s the most evident way to initiate an information-seeking session. But there are many cases when keyword search can be productively applied later in the information journey. By allowing users to search within an existing set of results, the query acts as a kind of refinement, narrowing the results in a manner similar to that of faceted navigation.

For this reason, search within is often presented as a dedicated search box within the faceted navigation menu. Since there are now two separate search boxes on the page, it is necessary to clearly indicate the function of each through the use of placeholder text and other textual labels. In addition, since the keywords are applied as refinements to the current navigational context they should also appear as mementos in the breadbox:

Search within is part of the faceted navigation menu at dabs.com

Alternatively, search within can be integrated with the standard search box, using a radio button or checkbox to toggle between the two different types of input. In such cases, the toggle control needs to be sensitive to the application context (and should therefore be disabled if search within results is not currently possible). In addition, selecting the “Search Within” checkbox should remove the current query from the search box since it is redundant within the current result set.

Search within is invoked using a checkbox at bulbs.com

Since search within offers the user the ability to enter ad hoc refinements that may not match the current result set, it is quite possible that zero results may be returned. Although it is generally best to avoid this outcome, there are various techniques for dealing with it productively such as removing non-matching search criteria, providing advice and tools for query reformulation, and so on.

Advanced Search

In principle, the idea of advanced search is to present search functionality that goes beyond that offered by the basic search box or the standard search experience. By convention, advanced search is usually invoked through a link adjacent to the regular search box.

Advanced search is available via a link at WARC

When parametric search was originally conceived, its interaction was based around the notion of selecting parameters from an ever-growing form. In this context it may have made sense to withhold some choices from the default view, and present them instead as an advanced option.

Advanced search form-filling at WARC

But since then, our understanding of search has evolved, and there seems less value in adopting an approach that requires the user to make such a choice in advance. If you were about to initiate a conversation with a stranger, would you ask that they to choose a tone of voice first (e.g. ”casual” or “sophisticated”)? A far more productive strategy would be to require no such commitment at the outset, but modify the interaction as the discourse unfolds, reacting and responding meaningfully to each exchange.

Of course, there will always be applications for which it makes sense to divide the audience into two or more groups, such as medical information sites that serve both clinical professionals and the public. But in such cases, a more scalable approach may be to consider how the whole experience (i.e., content, navigation, transactional functionality, etc.) could be adapted for each audience, rather than making the search function the only place where special user types get special treatment. An effective search experience puts “advanced” search tools in the hands of all users, as and when the users are able and willing to use them. In practice, many of the instances of advanced search as described above are either unnecessary or underutilized.

Beyond Keywords

So far we’ve looked ways of searching using keyword queries, but typing keywords isn’t the only way to express a query. In fact, there are many other ways users can articulate an information need.

Natural language

One of the most intuitive ways is to express the query as you would to another human being, as a natural language question or request. This kind of interaction was popularized by search engines such as Ask (formerly Ask Jeeves), which uses a combination of text analytics and human moderation to produce a question-answering search experience.

Natural language question answering at Ask

In fact, natural language has often been portrayed as the “killer app” for search, prompting the creation over numerous startups. However, up until a few years ago, disappointingly few of these had had a lasting effect on the mainstream search experience. This is partially due to the inherent challenge of developing robust algorithms for natural language processing (NLP). But it also reflects the dynamics of the search experience itself: to effectively support human information-seeking across the widest range of task contexts, we need to facilitate an open, scalable and interactive dialogue. Answering questions may be part of this, but it is not the whole solution. For some types of application, techniques such as faceted search can facilitate the search conversation in a more transparent fashion than an exchange of purely linguistic constructs.

But that isn’t to say NLP has no future in search. On the contrary, it just needs to be applied in the right manner. For example, NLP techniques are currently being applied to an ever growing variety of chatbots and interactive agents to provide customer service and other types of automated support across a wide range of industries and domains. And at True Knowledge, NLP is used to provide a question answering service that determines the meaning of questions, which it then matches against discrete facts in its database. Likewise, Wolfram Alpha uses NLP to answer factual queries by computing answers and relevant visualizations from a knowledge base of curated, structured data.

Natural language question answering at Wolfram Alpha

Non-text Queries

Information needs don’t have to be expressed exclusively in linguistic form. Sometimes a visual medium can be more natural, particularly if an example already exists. Google, for example, can use an image as the basis for a search query.

Search by example using images at Google

Similarly, Like.com (now part of Google Product Search) allowed users to use images to describe parts of queries which would have been difficult to describe using keywords alone. And beyond visual queries, services such as Shazam allow users to record music clips, which it then identifies by matching them against a database of audio files.

Each of these services represents a type of search known as query by example. But queries don’t have to be complete samples. Retrievr, for example, allows users to search by sketching a shape or outline. And Etsy allows users to explore by selecting colors from a palette:

Search by color at Etsy

These alternative forms of input serve to remind us that although keywords may be the simplest form of input, they are not always the most natural. Sometimes our information needs go beyond words. Instead, we should choose input methods that match the broader information landscape.

Summary and Best Practices

The Search Box
  • Form should follow function; apply the principles of affordance to interactive design elements.
  • Reserve a consistent location for the search box, and make it wide enough to comfortably accommodate the majority of queries.
  • Place the cursor within the search box upon page load and allow the user to press the Enter or return key to submit the query.
  • Provide direction in the form of placeholder text and other prompts to help users construct meaningful queries (but remove these prompts as soon as the search box receives focus).
  • Display the query in the search box after submission.
Scoped Search
  • Consider scoped search for applications where users have high domain expertise, but avoid forcing this on users with low domain expertise. Ensure that it defaults to “all categories.”
  • Apply a fallback strategy that searches across all categories if searching within one category produces zero results.
  • Clearly display the scope of the search as part of the results.
Search Within
  • If presented as part of a faceted menu, clearly indicate the function through the use of placeholder text and other textual labels. Ensure that keyword refinements appear as mementos in the breadbox.
  • If presented as an option to the global search box, ensure that the toggle control is sensitive to the application context. In addition, selecting the “search within” checkbox should remove the current query from the search box.
Advanced Search
  • Review the rationale for advanced search, in particular whether it is better to customize the whole experience (i.e., content, navigation, transactional functionality, etc.) for a specialist audience, rather than assume that search alone deserves special treatment.
Beyond Keywords
  • Sometimes our information needs go beyond words. Choose input methods that match the medium.
post authorTony Russell-Rose

Tony Russell-Rose,

I am currently director of UXLabs, a UX research and design consultancy specialising in complex search and information access applications. Before founding UXLabs I was Manager of User Experience at Endeca and editor of the Endeca UI Design Pattern Library, an online resource dedicated to best practice in the design of search and discovery experiences. Prior to this I was technical lead at Reuters, specialising in advanced user interfaces for information access and search. And before Reuters I was R&D group manager at Canon Research Centre Europe, where I led a team developing next generation information access products and services. Earlier professional experience includes a Royal Academy of Engineering fellowship at HP Labs working on speech UIs for mobile devices, and a Short-term Research Fellowship at BT Labs working on intelligent agents for information retrieval.

My academic qualifications include a PhD in human-computer interaction, an MSc in cognitive psychology and a first degree in engineering, majoring in human factors. I also hold the position of Honorary Visiting Fellow at the Centre for Interactive Systems Research, City University, London.

I am currently vice-chair of the BCS Information Retrieval group and chair of the IEHF Human-Computer Interaction group.


Related Articles

Tell us about you. Enroll in the course.

    This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and