Search

Site search

Site search is a powerful tool that users lean on to jump to a specific link. Ideally, the search bar should be visible, but, if there is not enough space, the search icon button should appear in a consistent place. This search component should only be used within the primary navigation component.

General search best practices

Anatomy currently does not have a search component outside of the primary navigation component. Here are some best practices to follow if your platform, product, or experience requires a search or search-to-filter pattern:

• Use familiar UX and UI designs to create your search field
  • Use “Search” or “Filter” as the submit button
  • The icon-magnifying-glass can be used with the button text or on its own
  • Always have a submit button, unless the results are auto-filtered as the user types and that action is made clear to the user — keep in mind users who rely on assistive technology or this use case
  • Make the search box simple
• As the user types their query, suggest simpler queries, be forgiving of typos, and autocomplete the user’s entries
  • Always differentiate between the user’s words and our suggestions
• Users don’t usually go beyond the first page of results so try to eliminate unhelpful or irrelevant results
  • Try not to show a "No results" page without suggesting an action or result relative to the user’s query
  • Try not to show a blank "No results" page — add a suggested action, result, or recommendation for what the user may have been looking for based on their first query
• Keep the user’s searched query visible on the results page and show the number of results
• If applicable, show relevant filter and sorting options and make these options easy to select and remove

Key takeaways

Site search should be prominent and familiar

Site search’s prominence should correlate with the importance of site search in the primary navigation. Since users are generally more likely to search for what they’re looking for, the site search should be at least as prominent as the primary navigation items.

Site search should follow familiar UX and UI practices. Generally, users are most familiar with search living in a field and that is what they are scanning for when looking for site search.

Users generally have limited search skills, but are more likely to search than use the navigation

Users generally have limited search query skills, but are more likely to use the site search over the primary navigation. Search requires more interaction from the user and also requires the user to know what they are looking for. Users also don’t fully understand how search engines map their query’s keywords to results, which leads to poor search queries.

Nonetheless, Boston Scientific usability tests have found that users rely on site search over navigation. This is why our site search must give clear results, eliminate bad results, suggest simpler queries, be forgiving of typos, and autocomplete user’s entries.

Differentiate between entered query and suggested terms

Always differentiate between suggested search terms or autocompleted user’s entries and what the user has already typed. Boston Scientific bolds the user’s previously typed terms in order to keep the user’s words and our suggested words differentiated.

Study links

Primary sources (Boston Scientific user research)

• Project Monarch Steerco meeting, Dec 2021
• MERGE — Monarch Round 2 prototype testing results, Feb 2022

Secondary sources

• Nielson Norman Group — Site Search Suggestions
• Nielson Norman Group — Converting Search into Navigation
• Nielson Norman Group — Search Is Not Enough: Synergy Between Navigation and Search
• Nielson Norman Group — Search: Visible and Simple
• Baymard Institute — Search Field Design Should Indicate Importance of Search

This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that this component is fully accessible.

For more information, see the WAI-ARIA Authoring Practices for the search landmark and Deque’s screen reader keyboard shortcuts and gestures documentation.