--- title: Ensure that your search interfaces contain standard components slug: mc2g0332 canonical_url: https://docs.coveo.com/en/mc2g0332/ collection: project-guide source_format: adoc --- # Ensure that your search interfaces contain standard components This article lists the most common [search interface](https://docs.coveo.com/en/2741/) components in a Coveo-powered search implementation. > **Important** > > This guide provides guidelines to analyze, review, and test different aspects of a Coveo-powered implementation. > > It shouldn't be considered an official, definitive guide to testing an implementation before it goes live, but rather a guide showcasing the basic components that Coveo implementations typically include. > > Every Coveo implementation is different and may require custom configuration. > > Therefore, you may notice discrepancies between the components and features listed in this guide and those you're using in your actual implementation. > > If you encounter issues, or have any questions related to this article, contact [Coveo Support](https://connect.coveo.com/s/case/Case/Default) for help. ## Access your browser's network monitoring tool . Open your web browser's developer tools. > **Note** > > The examples in this article use the **Google Chrome** developer tools. > For browser-specific information, see: > > * [Google Chrome](https://developers.google.com/web/tools/chrome-devtools/open) > > * [Mozilla Firefox](https://developer.mozilla.org/en-US/docs/Tools) > > * [Safari](https://support.apple.com/en-ca/guide/safari/sfri20948/mac) . Select the **Network** tab. ## Query suggestions If your implementation leverages [Coveo Machine Learning (Coveo ML)](https://docs.coveo.com/en/188/) [query suggestions](https://docs.coveo.com/en/1015/), make sure that your search interface contains the front-end component required to provide users with query suggestions. Depending on how you choose to build your [search interface](https://docs.coveo.com/en/2741/), see: * [Coveo Atomic](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-search-box\--docs) * [Coveo Headless](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.SearchBox.html) * [Coveo Quantic](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-search-box/) To learn how to test the output provided by [Coveo ML](https://docs.coveo.com/en/188/) QS models, see: * [Ensure that Coveo Machine Learning query suggestions are requested](https://docs.coveo.com/en/mc2g0129/) * [Test your QS model](https://docs.coveo.com/en/mc2g0297#test-your-qs-model) ## Tabs You can use [tabs](https://docs.coveo.com/en/1406/) to separate the types of content you want to display into different sections of a search interface. Depending on how you choose to build your [search interface](https://docs.coveo.com/en/2741/), see: * [Coveo Headless](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Tab.html) * [Coveo Quantic](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-tab/) ### Test tabs . Access the search interface in which you want to test tab behavior. . [Access your browser's network monitoring tool](#access-your-browsers-network-monitoring-tool). . In the search interface, click a tab. . Enable the debug mode by adding `&debug=true` at the end of the current URL address. . In the network monitoring tool, under the **Name** column, select the latest request to the Search API. The **Request URL** should contain `/rest/search/v2`. . Select the **Preview** tab. . Find the `constantExpression` property. The value of this property should correspond to the filters applied to scope the content of this tab. ![Test tabs in network monitoring tool | Coveo](https://docs.coveo.com/en/assets/images/tune-relevance/testing-tabs.png) ## Facets Search interface [facets](https://docs.coveo.com/en/198/) let users refine their queries. The [Coveo Platform](https://docs.coveo.com/en/186/) offers a large inventory of facet components to address the different ways in which users may want to refine their search results. Depending on how you choose to build your [search interface](https://docs.coveo.com/en/2741/), see: * Coveo Atomic: ** [atomic-facet-manager](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-facet-manager\--docs) ** [atomic-facet](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-facet\--docs) ** [atomic-category-facet](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-category-facet\--docs) ** [atomic-color-facet](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-color-facet\--docs) ** [atomic-numeric-facet](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-numeric-facet\--docs) ** [atomic-numeric-facet](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-numeric-facet\--docs) ** [atomic-rating-facet](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-rating-facet\--docs) ** [atomic-rating-range-facet](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-rating-range-facet\--docs) ** [atomic-segmented-facet](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-segmented-facet\--docs) ** [atomic-segmented-facet-scrollable](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-segmented-facet-scrollable\--docs) ** [atomic-timeframe-facet](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-timeframe-facet\--docs) * Coveo Headless: ** [Facet](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Facet.html) ** [FacetManager](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.FacetManager.html) ** [CategoryFacet](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.CategoryFacet.html) ** [DateFacet](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.DateFacet.html) ** [NumericFacet](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.NumericFacet.html) * Coveo Quantic: ** [QuanticFacet](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-facet/) ** [QuanticFacetValue](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-facet-value/) ** [QuanticFacetManager](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-facet-manager/) ** [QuanticCategoryFacet](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-category-facet/) ** [QuanticCategoryFacetValue](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-category-facet-value/) ** [QuanticNumericFacet](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-numeric-facet/) ** [QuanticTimeframeFacet](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-timeframe-facet/) ### Test facets . Access the search interface in which you want to test facet behavior. . [Access your browser's network monitoring tool](#access-your-browsers-network-monitoring-tool). . Select a facet value from one of the facets. . In the network monitoring tool, under the **Name** column, select the latest request to the Search API. Look for a request path with `/rest/search/v2`. . Select the **Preview** tab. . Find and expand the `facets` property, which contains several facet objects. You should now see the facets that were returned for the query, along with the values available for each facet. . Make sure that the `state` property inside the target value of the chosen facet is set to `selected` instead of `idle`. ![alt=Facet value selected in list of facet values | Coveo](https://docs.coveo.com/en/assets/images/tune-relevance/facet-selection.png) ![alt=Test facets in network monitoring tool | | Coveo](https://docs.coveo.com/en/assets/images/tune-relevance/facet-testing.png) ## Sorting The sort component lets users select the criteria for sorting search results. Depending on how you choose to build your [search interface](https://docs.coveo.com/en/2741/), see: * [Coveo Atomic](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-sort-dropdown\--docs) * [Coveo Headless](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Sort.html) * [Coveo Quantic](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-sort/) ### Test sorting . Access the search interface in which you want to test sorting. . [Access your browser's network monitoring tool](#access-your-browsers-network-monitoring-tool). . Perform a query in the search box. . Make sure the intended sort options are rendered in the search interface. ![Sort dropdown menu rendered in the search interface | Coveo](https://docs.coveo.com/en/assets/images/implementation-guide/test-sorting-sort-dropdown.png) . In the network monitoring tool, under the **Name** column, select the latest request to the Search API. The request path should contain `/rest/search/v2`. . Select the **Payload** tab. You should now see the request payload sent to the Search API. . Find the `sortCriteria` property and make sure that its value corresponds to the sort selection made in the search interface. ![Test sorting in network monitoring tool | Coveo](https://docs.coveo.com/en/assets/images/implementation-guide/test-sorting.png) ## Result templates Result templates determine the format search results are displayed in a search interface. You should typically have one result template per [item type](https://docs.coveo.com/en/1965/). Depending on how you choose to build your [search interface](https://docs.coveo.com/en/2741/), see: * [Coveo Atomic](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-template\--docs) * [Coveo Headless](https://docs.coveo.com/en/headless/latest/usage/result-templates/) * [Coveo Quantic](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/) ### Test result templates For each result template, you should verify the following: * Links: Ensure that result template links redirect to the desired content. > **Leading practice** > > The result link result template component automatically transforms a search result title into a clickable link that points to the original item. > > Depending on how you choose to build your [search interface](https://docs.coveo.com/en/2741/), see: > > * [Coveo Atomic](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-link\--docs) > > * [Coveo Quantic](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-link/) * Other information: Validate that all of the information displayed in the result template is correct and relevant. ![Test result templates | Coveo](https://docs.coveo.com/en/assets/images/implementation-guide/test-result-templates.png) ## Quick view An item [quickview](https://docs.coveo.com/en/3311/) lets users preview the content of an item without having to open the search result. It consists of an HTML version of the item which is displayed in an iFrame that users can open through a result template. Most types of [Coveo Platform](https://docs.coveo.com/en/186/) sources automatically generate a Quick view for each indexed item. However, some items may not have an HTML version indexed by the [Coveo Platform](https://docs.coveo.com/en/186/), such as [database](https://docs.coveo.com/en/1885/) items or specific [Salesforce](https://docs.coveo.com/en/1052/) objects (that is, articles and cases). Depending on how you choose to build your [search interface](https://docs.coveo.com/en/2741/), see: * [Coveo Headless](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Quickview.html) * [Coveo Quantic](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-quickview/) > **Note** > > [Coveo Atomic](https://docs.coveo.com/en/lcdf0264/) doesn't currently support Quick views out of the box. ### Test Quick views Ensure that Quick views load for each [item type](https://docs.coveo.com/en/1965/) and that their content is appropriate for the intended audience. . Access the search interface in which you want to test Quick views. . Perform a query in the search box. . Click the **Quick View** button of the item you want to inspect. . Ensure that the content of the item is properly displayed. ![Test Quick views | Coveo](https://docs.coveo.com/en/assets/images/tune-relevance/test-quick-views.gif) ## Recommendation component If your implementation leverages [Coveo ML](https://docs.coveo.com/en/188/) [content recommendations](https://docs.coveo.com/en/1016/), make sure that you have the required component to display the model's output. Depending on how you choose to build your [search interface](https://docs.coveo.com/en/2741/), see: * [Coveo Atomic](https://docs.coveo.com/en/atomic/latest/reference/recommendation-components/) * [Coveo Headless](https://docs.coveo.com/en/headless/latest/reference/modules/Recommendation.html) To learn how to test the output provided by [Coveo ML](https://docs.coveo.com/en/188/) CR models, see [Test your CR model](https://docs.coveo.com/en/mc2g0297#test-your-cr-model). ## Did you mean You'll likely want to leverage the [query correction feature](https://docs.coveo.com/en/1810/) to eliminate potential content gaps. Depending on how you choose to build your [search interface](https://docs.coveo.com/en/2741/), see: * [Coveo Atomic](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-did-you-mean\--docs) * [Coveo Headless](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.DidYouMean.html)