UI and UX Patterns
On this page
Highlighting and snippeting
Highlighting and snippeting are common UI patterns to focus your users’ attention on matches between their search query and results.
A common pattern in search is to implement a search box with an autocomplete as a first step of the search experience.
In order to help users with their search, Algolia provides a feature called query suggestions. This feature creates an index with the best queries done by the users. You can then use this index to propose suggestions to your users as they are typing into the searchBox. The great thing with this feature is that once you’ve configured the generation of the index, it’s just about querying another index and you can easily use multi-index search to for that.
You can use Algolia’s pagination settings to implement standard paging or retrieve specific record subsets that ignore page boundaries.
The infinite list is a very common pattern to display a list of results. Most of the times this pattern comes with two variants:
with a button to click on at the end of the list of results with a listener on the scroll event that is called when the list of results reaches the end
We will see how we can leverage the geo search capabilities of Algolia with the geoSearch widget.
Filtering on Mobile
Providing filtering options is omnipresent in advanced search experiences. The issue at hand is mobile screen real estate since it is hard to include both filters and search results in the same view without the screen getting cluttered. Good filtering UX always show some sort of feedback when the user applies a filter.