Algolia mobile search patterns

transcript

Lucas Cerdan

Mobile Search Patterns

Product & UX

UX Overview - 2017

Internal Presentation - Please do not share

> Search Placement

> Auto Suggest or Instant Results

> Search Screen

> Results Screen

> Filtering and Sorting

Summary

Search Placement

Mobile Search PatternsLucas Cerdan

Search Placement

Make it obvious

Full length

The fastest route to discovery for users with high intent to convert

(eCommerce)

Search Placement

Make it obvious

Dedicated tab

Always 1 tap away

Search Placement

Make it obvious

Simple Icon

Acceptable for some use cases -but should be prominent

Auto Suggest or

Instant Results

Auto Suggest or Instant Results

Auto Suggest

Instant Results

The purpose of auto-suggest is to search a virtually unbounded list for related keywords and phrases, which may or may not match the precise query string.

“Instant Result” makes the most sense when the choices are based on a controlled vocabulary, i.e., a finite list of items such as a directory of names, locations, organizations, and so on.

- Tony Russell-Rose, Director of UXLabs

Combining both

Search Screen

Tapping on the Search bar / icon already shows an intent.

● Previous Search

● Trending Suggestions

● Category Browsing

Different strategies

With clicked links color pattern

With icons

Search Screen

Previous Search

In plain words

Search Screen

Clearing Previous Search

Clear all Individual (hidden) Individual

Search Screen

Previous Search

Noteworthy experiences:

➔Cross-Device (Youtube or Pinterest)

➔RetailMeNot adds a query to previous searches only if a result has been clicked for this query

Highlighting

+ Great to understand where a query matched in a result

Search Screen

Inverted Highlighting

+ Great to understand how query suggestions are different

- Weird behavior with synonyms and typosAli Express eBay

This is not (simply) an icon!

In our users tests, ~90% had no idea this was clickable - or had no idea of its behavior.

Search Screen

A pattern hidden in plain sight

Search Screen

Tap-ahead pattern

Good implementation

➔Easy to click

➔Fill the search bar with the query

➔Automatically refresh with new suggestions

➔Use the right icon: ↖

Search Screen

Tap-ahead pattern

Not recommended

➔Hard to click

➔Only fill the search bar with the query

➔No new suggestions (Easy to miss that something has changed)

Search Screen

Multiple Field Search

Good implementation

➔Show only one search box at first

➔Use good default values for other fields

Results Screen

Usual components:

● A Back or Cancel button

● A Search box with the active query

● The most important filters: scope, price, …

● Filter & Sort button(s)

● Results

Results Screen

Real estate is key

Example with a Contact app:

● Picture

● Full Name

● One attribute that has matched: email, company, job title, ...

Results Screen

Keep only relevant data

Search Screen

Layouts

Visually-driven

Spec driven

Results Screen

Layouts

➔eBay lets its customers choose.

➔ Never have list items taller than half the screen height in portrait-mode

➔ Have a distinct hit area for each list item➔ For ecommerce: Use product thumbnails as large as

the list item affords➔ Clearly separate list items➔ Have a 'Load More' button at the end of product lists

instead of pagination or endless scrolling➔ Indicate previously visited list items

Guidelines from Baymard Usability Studies

Filters & Sort

Various patterns for scoping a search:

● Tabs

● Horizontal ribbon

● 3-5 results per type + view all

Filters & Sort

Scoped Search

Remember that users do not care about (and often do not understand) the technical nuances between sorting, filtering and sub-category navigation.

All they want is a way to improve the relevancy of the list they see and get it to a manageable size.

Guidelines from Baymard Usability Studies

Creating a manageable list with only relevant options is a top priority.

● The most important one can be displayed directly on the results page

● Recognition over recall:Don’t hide other filters behind an icon (there’s no perfect icon for that). Use plain words (“Filters” is preferred to “Refine”)

Filters & Sort

Showing relevant filters

● Filters don’t need to be on top of the page.

Especially when the visual experience is important, it can be more interesting to save some real estate for pictures.

Filters & Sort

Showing relevant filters

Filters & Sort

Displaying Filters

In a modal

Fullscreen

Filters & Sort

Best practices

➔Show the consequences of user selections immediately

➔Show the number of matches for a filter before it is selected and provide a live update of results when selecting multiple filters

Filters & Sort

Best practices

➔Show only relevant filters

➔Update them at each new filter

● Show when filters are applied.

Filters & Sort

Best practices

And don’t forget...

And don’t forget

Other constraints to take into account:

● Network issues: use Algolia Offline!https://www.algolia.com/offline

● Touch issues: Distinct hit area, Sliders, ...

Usability is key to a great experience

Algolia mobile search patterns

Design