Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Algolia - Mobile search patterns

14,462 views

Published on

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/

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Algolia - Mobile search patterns

  1. 1. Mobile Search Patterns December 13th, 2017 - Mobile Product Management Meetup Lucas Cerdan Product Manager @lucascerdan
  2. 2. Let’s play a game Mobile Search Patterns Lucas Cerdan
  3. 3. Let’s play a game Mobile Search Patterns Lucas Cerdan
  4. 4. Let’s play a game Mobile Search Patterns Lucas Cerdan
  5. 5. Let’s play a game Mobile Search Patterns Lucas Cerdan
  6. 6. Let’s play a game Mobile Search Patterns Lucas Cerdan
  7. 7. Let’s play a game Mobile Search Patterns Lucas Cerdan
  8. 8. Let’s play a game Mobile Search Patterns Lucas Cerdan
  9. 9. Let’s play a game Mobile Search Patterns Lucas Cerdan
  10. 10. Let’s play a game Mobile Search Patterns Lucas Cerdan
  11. 11. Let’s play a game Mobile Search Patterns Lucas Cerdan
  12. 12. Let’s play a game Mobile Search Patterns Lucas Cerdan
  13. 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. 14. ... Mobile Search Patterns Lucas Cerdan
  15. 15. Anatomy of Mobile Search
  16. 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. 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. 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. 19. Mobile Search Patterns > Search Placement > Auto Suggest or Instant Results > Search Screen > Results Screen > Filtering and Sorting Agenda
  20. 20. Search Placement
  21. 21. Search Placement Make Search Easily Discoverable Full length Dedicated tab Simple Icon Mobile Search Patterns Lucas Cerdan
  22. 22. AutoSuggest or Instant Results
  23. 23. Auto Suggest or Instant Results Auto Suggest Mobile Search Patterns Lucas Cerdan
  24. 24. Auto Suggest or Instant Results Instant Results Mobile Search Patterns Lucas Cerdan
  25. 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. 26. Anatomy of Mobile Search Combining both Mobile Search Patterns Lucas Cerdan
  27. 27. Search Screen
  28. 28. Search Screen Tapping on the Search already shows an intent. ➔ Previous Search ➔ Popular/Trending Suggestions ➔ Category Browsing Different strategies
  29. 29. With clicked links color pattern With icons Search Screen Previous Search In plain words Mobile Search Patterns Lucas Cerdan
  30. 30. Search Screen Clearing Previous Search Mobile Search Patterns Lucas Cerdan Clear all Individual (hidden) Individual
  31. 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. 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. 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. 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. 35. Search Screen Tap-ahead pattern Mobile Search Patterns Lucas Cerdan Bad implementation ➔ Even Amazon can’t keep consistency between platforms.
  36. 36. Result screen
  37. 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. 38. Results Screen Display Results rationally Mobile Search Patterns Lucas Cerdan Visually-driven vs Spec driven
  39. 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. 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. 41. Results Screen Leveraging Geosearch Mobile Search Patterns Lucas Cerdan ➔ Geosearch is a powerful use case on mobile. ➔ Consider helpful view options
  42. 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. 43. Filters & Sort
  44. 44. Various patterns for scoping a search: ➔ Tabs ➔ Horizontal ribbon ➔ 3-5 results per type + view all Filters & Sort Scoped Search
  45. 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. 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. 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. 48. Filters & Sort Displaying Filters Mobile Search Patterns Lucas Cerdan In a modal or Fullscreen
  49. 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. 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. 51. ➔ Show when filters are applied. Filters & Sort Best practices
  52. 52. … And don’t forget
  53. 53. Elements of great Mobile Search > Design: Real estate is key > Usability: Respect User's Effort > Environment: Speed and Connectivity Mobile specific issues
  54. 54. Elements of great Mobile Search > Design: Real estate is key > Usability: Respect User's Effort > Environment: Speed and Connectivity Mobile specific issues
  55. 55. Usability: Respect User's Effort Define clear hit areas Mobile Search Patterns Lucas Cerdan
  56. 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. 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. 58. Elements of great Mobile Search > Design: Real estate is key > Usability: Respect User's Effort > Environment: Speed and Connectivity Mobile specific issues
  59. 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. 60. Environment: Speed and Connectivity Manage Users Expectations Mobile Search Patterns Lucas Cerdan → Progress indicators → Lazy Loading → Skeleton Screens
  61. 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. 62. Thank you! Q&A Time Lucas Cerdan Product Manager lucas.cerdan@algolia.com @lucascerdan

×