Lucas Cerdan PM @Algolia, was speaker at our Mobile PM meetup. In his talk, he gave us his best practices to implement search on mobile. Don't miss our next Meetup: https://www.meetup.com/fr-FR/mobilepm/

1. Mobile Search Patterns
December 13th, 2017 - Mobile Product Management Meetup
Lucas Cerdan
Product Manager
@lucascerdan

2. Let’s play a game
Mobile Search Patterns
Lucas Cerdan

3. Let’s play a game
Mobile Search Patterns
Lucas Cerdan

4. Let’s play a game
Mobile Search Patterns
Lucas Cerdan

5. Let’s play a game
Mobile Search Patterns
Lucas Cerdan

6. Let’s play a game
Mobile Search Patterns
Lucas Cerdan

7. Let’s play a game
Mobile Search Patterns
Lucas Cerdan

8. Let’s play a game
Mobile Search Patterns
Lucas Cerdan

9. Let’s play a game
Mobile Search Patterns
Lucas Cerdan

10. Let’s play a game
Mobile Search Patterns
Lucas Cerdan

11. Let’s play a game
Mobile Search Patterns
Lucas Cerdan

12. Let’s play a game
Mobile Search Patterns
Lucas Cerdan

13. This is not (simply) an icon!
had no idea this was
clickable - or had no idea of
its behavior.
Mobile Search Patterns
A pattern hidden in plain sight
80%
Mobile Search Patterns
Lucas Cerdan

14. ...
Mobile Search Patterns
Lucas Cerdan

15. Anatomy of Mobile Search

16. Search Today & Why Algolia?
What is Algolia
Great Search UX
for end-users
Ease of Integration
on any device
Strong Infrastructure
all around the world
Hosted Search API
with a core focus on...
Relevance Speed Usability Desktop Mobile 99.999% SLA 15+ regions
Mobile Search Patterns
Lucas Cerdan

17. Search Today & Why Algolia?
Trusted by Leaders
Real-time Indexing
250 Million objects
10k queries / seconds
10ms per keystroke
Media
Mobile Search Patterns
Lucas Cerdan

18. Search Today & Why Algolia?
Trusted by Leaders
Social Network
10 million users
25 languages
Burst usage
350 years of video a day
Mobile Search Patterns
Lucas Cerdan

19. Mobile Search Patterns
> Search Placement
> Auto Suggest or Instant Results
> Search Screen
> Results Screen
> Filtering and Sorting
Agenda

20. Search Placement

21. Search Placement
Make Search Easily Discoverable
Full length Dedicated tab Simple Icon
Mobile Search Patterns
Lucas Cerdan

22. AutoSuggest
or
Instant Results

23. Auto Suggest or Instant Results
Auto Suggest
Mobile Search Patterns
Lucas Cerdan

24. Auto Suggest or Instant Results
Instant Results
Mobile Search Patterns
Lucas Cerdan

25. “
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

26. Anatomy of Mobile Search
Combining both
Mobile Search Patterns
Lucas Cerdan

27. Search Screen

28. Search Screen
Tapping on the Search already shows
an intent.
➔ Previous Search
➔ Popular/Trending Suggestions
➔ Category Browsing
Different strategies

29. With clicked links
color pattern
With icons
Search Screen
Previous Search
In plain words
Mobile Search Patterns
Lucas Cerdan

30. Search Screen
Clearing Previous Search
Mobile Search Patterns
Lucas Cerdan
Clear all Individual (hidden) Individual

31. Search Screen
Previous Search
Mobile Search Patterns
Lucas 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

32. 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
Ali Express eBay

33. Search Screen
Tap-ahead pattern
Mobile Search Patterns
Lucas Cerdan
Good implementation
➔ Easy to click
➔ Fill the search bar with
the query
➔ Automatically refresh
with new suggestions
➔ Use the right icon: ↖

34. Search Screen
Tap-ahead pattern
Mobile Search Patterns
Lucas Cerdan
Bad implementation
➔ Hard to click
➔ Only fill the search bar with the
query
➔ No new suggestions (Easy to
miss that something has
changed)

35. Search Screen
Tap-ahead pattern
Mobile Search Patterns
Lucas Cerdan
Bad implementation
➔ Even Amazon can’t keep
consistency between platforms.

36. Result screen

37. 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

38. Results Screen
Display Results rationally
Mobile Search Patterns
Lucas Cerdan
Visually-driven
vs
Spec driven

39. Results Screen
Layouts
Mobile Search Patterns
Lucas Cerdan
➔ eBay lets its customers choose.
➔ A legend says Amazon is displaying
various layouts depending on the
query - but I couldn’t verify it.

40. Example with a Contact app:
➔ Picture
➔ Full Name
➔ One attribute that has matched: email,
company, job title, ...
Results Screen
Keep only relevant data

41. Results Screen
Leveraging Geosearch
Mobile Search Patterns
Lucas Cerdan
➔ Geosearch is a powerful use
case on mobile.
➔ Consider helpful view
options

42. “
➔ 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

43. Filters & Sort

44. Various patterns for scoping a
search:
➔ Tabs
➔ Horizontal ribbon
➔ 3-5 results per type + view all
Filters & Sort
Scoped Search

45. “
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

46. 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

47. ➔ 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

48. Filters & Sort
Displaying Filters
Mobile Search Patterns
Lucas Cerdan
In a modal
or
Fullscreen

49. Filters & Sort
Best practices
Mobile Search Patterns
Lucas 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

50. Filters & Sort
Best practices
Mobile Search Patterns
Lucas Cerdan
➔ Show only relevant filters and
update them at each new filter
Even Amazon struggles with this!

51. ➔ Show when filters are applied.
Filters & Sort
Best practices

52. … And don’t forget

53. Elements of great Mobile Search
> Design: Real estate is key
> Usability: Respect User's Effort
> Environment: Speed and Connectivity
Mobile specific issues

54. Elements of great Mobile Search
> Design: Real estate is key
> Usability: Respect User's Effort
> Environment: Speed and Connectivity
Mobile specific issues

55. Usability: Respect User's Effort
Define clear hit areas
Mobile Search Patterns
Lucas Cerdan

56. Usability: Respect User's Effort
Typo tolerance
Mobile Search Patterns
Lucas Cerdan
Typing on a (mobile) keyboard is
hard.
→ Reduce frustration by solving
your users’ mistakes / misspellings

57. Highlighting
+ Great to understand where a
query matched in a result
Usability: Respect User's Effort
Scanning Information
Inverted Highlighting
+ Great to understand how
query suggestions are
different

58. Elements of great Mobile Search
> Design: Real estate is key
> Usability: Respect User's Effort
> Environment: Speed and Connectivity
Mobile specific issues

59. Environment: Speed and Connectivity
⚡ Speed matters
Mobile Search Patterns
Lucas Cerdan
→ Speed is key for engagement,
retention and rewarding user
experience
→ Instant Search: Algolia average
response time (including network)
is < 100ms

60. Environment: Speed and Connectivity
Manage Users Expectations
Mobile Search Patterns
Lucas Cerdan
→ Progress indicators
→ Lazy Loading
→ Skeleton Screens

61. Environment: Speed and Connectivity
Algolia Offline
Mobile Search Patterns
Lucas Cerdan
→ Search, even without any network
→ Choose what you need to sync in the
user device
→ Seamless online and offline
experience

62. Thank you!
Q&A Time
Lucas Cerdan
Product Manager
lucas.cerdan@algolia.com
@lucascerdan