Embed Size (px)
Citation preview
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
Mobile Search PatternsLucas Cerdan
Auto Suggest or Instant Results
Auto Suggest
Mobile Search PatternsLucas Cerdan
Auto Suggest or Instant Results
Instant Results
Mobile Search PatternsLucas Cerdan
“
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
Auto Suggest or Instant Results
Combining both
Mobile Search PatternsLucas Cerdan
Search Screen
Mobile Search PatternsLucas Cerdan
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
Mobile Search PatternsLucas Cerdan
In plain words
Search Screen
Clearing Previous Search
Mobile Search PatternsLucas Cerdan
Clear all Individual (hidden) Individual
Search Screen
Previous Search
Mobile Search PatternsLucas Cerdan
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
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
Mobile Search PatternsLucas Cerdan
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
Mobile Search PatternsLucas Cerdan
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
Mobile Search PatternsLucas Cerdan
Good implementation
➔Show only one search box at first
➔Use good default values for other fields
Results Screen
Mobile Search PatternsLucas Cerdan
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
Mobile Search PatternsLucas Cerdan
Visually-driven
vs
Spec driven
Results Screen
Layouts
Mobile Search PatternsLucas Cerdan
➔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
Mobile Search PatternsLucas Cerdan
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
Mobile Search PatternsLucas Cerdan
In a modal
or
Fullscreen
Filters & Sort
Best practices
Mobile Search PatternsLucas Cerdan
➔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
Mobile Search PatternsLucas Cerdan
➔Show only relevant filters
➔Update them at each new filter
● Show when filters are applied.
Filters & Sort
Best practices
And don’t forget...
Mobile Search PatternsLucas Cerdan
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
