In this article, we will see how to create a search results UI page with expertrec. Search results UI refers to the page that appears once the site visitor presses on the enter or search button. The design of the search results page has to be user friendly and responsive (working on multiple devices). Let’s have a deeper look into what goes into building a search results page.
Components of a search results page
- Search results title. Title of the page.
- Search snippet or meta description. A short description of the page is shown to the users.
- Search featured image. This is the image shown on the search results page next to the search results.
- Search results listing design (boxed vs list)- An option to choose between search results appearing in a box vs a list similar to the one shown in google SERPs.
- Sort by relevance or price or date- Sort option to help people find new or lower-priced content.
- Pagination- This lets users navigate to the 2nd, 3rd, 4th pages of search results.
- Filters and facets- These let people drill down and find much specific content.
- Price slider- This option gets enabled when you have an e-commerce store so that users can easily see price variations in products.
- Add to cart button- If your site has an ecommerce store, the add to cart button gets enabled in the search results UI.
- Infinite scroll- For website owners who want search results to be loaded infinitely, this option has to be enabled.
- Voice search button- Voice search helps users to search using their voice. It currently works only on chrome browsers.
- Autocomplete box- The autocomplete box helps in typeahead search, spell correctly, and more.
- Search as you type UI- If enabled, the search results change for every keystroke on the search results page.
How to create a search results UI page?
- Go to search UI creator.
- Sign in with your Gmail ID.
- Add your website URL.
- Wait for the crawl to complete.
- By now the search results UI will be ready ( you can check out the demo).
- Go to UI Customization-> Advanced->Search results to edit the look and feel of your search results UI.
