Skip navigation
Skip to main content
Canva Developers logo
Design guidelines
Design guidelines

Search

Guidelines for designing an amazing search experience.

If an app supports search, the experience should be consistent with Canva's native search experience. This page contains some guidelines to ensure this consistency.

Filters with search

When using search and filters together, place the filter button inside the search input. Filter buttons in a search input should open a Dropdown Flyout.

It’s recommended any elevated filters sit to the right of the search on desktop and underneath the search on mobile.

Desktop example of filters in a flyout. A search input contains a filter button that's activated. An open flyout shows multiple filters and a 'Clear all' action at the bottom.

Mobile example of filters in a Sheet. The Sheet is titled 'All filters' contains a 'Done' action in the same line. The content of the sheet is otherwise the same as the desktop example.

Filter with search best practices

  • Let users know what they can search for.
  • Use placeholder text to educate your users on what they can search for.
  • Offers suggestions on how to maximize their search experience
  • Provide filters for searches or categorization for search results if it would narrow and improve a user's search results.
  • Show the query inside the search field. Use a close button to close or reset search.
  • Show the results directly below the search field
  • Use an inline or grid layout to show results for visual media like images, video.
  • Let the user know if no search results have been found.

Applying filters

Applying a filter ideally takes immediate effect so users have instant feedback on their selection. This is also known as dynamic filtering.

When immediately applying filters isn't possible and requires a page load, use a strong call to action so the user knows to apply their selection. This is also known as batch filtering.

Example of dynamic and batch apply patterns. Both examples are flyouts titled 'All filters' and a list of filters. The dynamic apply pattern (recommended) contains a 'Done' action in line with the title and a 'Clear all' secondary button in the footer. The batch apply pattern contains a 'Close' action in line with the title and a 'Clear all' secondary button and 'Apply' primary button in the footer. In both examples the 'Clear all' button is disabled because there is no user selection yet.

Clearing filters

When there are multiple filters, allow users to remove filters through a “clear all” action in the filter bar and within the filter list.

Example of a clearing pattern. An open Drawer contains multiple selected filters. The footer contains a secondary button labelled 'Clear all (3)'.

When using a single select menu, provide the initial value in the list of options. For multi-select Select, provide a “clear all” action in the list of options.

Example showing clearing actions for single and multi select. The single select includes an 'All categories' option amongst other categories. The multi-select shows 3 selected options and contains a secondary button in the footer with the text 'Clear all (3)'.

Usage

Best practice

  • Only provide filters that add value to the user’s task:
    • Users exploring content typically value more elevated filters.
    • Users retrieving content typically value less elevated filters.
  • Use the most appropriate filter pattern for the scenario:
    • Is the user looking for something specific? Consider using a search input.
    • Is the user browsing content? Consider elevating more filters.
  • Only provide filters that can apply to all content to avoid complexity and incompatible filters. If there are multiple types of content, consider separating into different pages or views.
  • Filters shouldn't navigate users to new pages or experiences.
  • Avoid using tabs and filters together to filter the same type of content. If both must be used for this purpose, place tabs above filters, and as much as possible keep filters persistent and relevant between tabs.

Content guidelines

  • Prefer consistent copy for actions, e.g. “All filters”, “Clear all (n)”.
  • Use simple, short, and singular filter labels where possible.
  • Use the same labels for filters when shown in suggestions and the filter list.
  • When a filter combination leads to no results, inform the user with an empty state message and an optional action to update or clear filters. Some examples of best practice include:
    • "We can’t find any results, please try adjusting your filter combination or revising your search."
    • "We can’t find any results based on your filters, please try a different combination."