Designing Mobile Search - Tyler Tate

2,936 views

Published on

See conference video - http://www.lucidimagination.com/devzone/events/conferences/ApacheLuceneEurocon2011

About 15% of searches in 2011 have been performed on mobile devices, with an estimated rise to one in every four by next year. And people aren't just searching Google: restaurants, cars, electronics, and even enterprise content are all being searched by people on the move.

How should we design Lucene- and Solr-powered search experiences for phones and tablets? To be sure, very different rules apply; small screens, slow connections, limited attention, and location awareness all afford very different user interfaces between desktop and mobile devices.

This talk will examine design patterns for mobile search, including approaches to faceted navigation, autocomplete, sorting, breadcrumbs, recent history, and bookmarks, as well as how these design patterns fit together as a whole.

Published in: Technology, Business

Designing Mobile Search - Tyler Tate

  1. 1. Designing Mobile Searchby Tyler Tate, TwigKitphotos by Matthew Kenwrick, , Mikhail Koninin, Neil Oliver,Iam Carroll, Pithawat Vachiramon, Kamshots
  2. 2. ux search
  3. 3. <widget:facets facets=”Categories,Sources”/>
  4. 4. <widget:facets facets=”Categories,Sources” type=”expandable”/>
  5. 5. <widget:facets facets=”Categories,Sources” type=”expandable”/>
  6. 6. Designing Mobile Search1 The Rise of the Cross-Channel Experience2 Characteristics of Mobile Search3 Design Patterns for Mobile Search4 Implementation Strategies for Mobile Search
  7. 7. 1 THE RISE OF CROSS-CHANNEL EXPERIENCESphotos by William Hook, Risager, and Whatleydude
  8. 8. source: Google
  9. 9. photo by Mark Hillary
  10. 10. photo by Alaina Buzas
  11. 11. photo by thefourelements
  12. 12. Books, newspapers, andmagazines have not onlygone digital, theyve goneubiquitous, contextual,and formless.
  13. 13. source: Amazon.com
  14. 14. Seamless cross-channelexperiences are the holygrail of the post-desktop era.
  15. 15. Retail – REI
  16. 16. “87% want a similar way to access products and services… whether online, in the store, on their mobile phone or using a self-service device.” – NCR 2010 Global Consumer Researchsource: http://ncrpr.ncr.com/web/rsdmkt/landingPages/documents/2010_global_consumer_resch_wp%20FINAL.pdf
  17. 17. Travel – Virgin Atlantic
  18. 18. “As consumers become more and more demanding in the digital space, the travel industry will need to be more dedicated to the usability and user experience across all of their channels to gain customers and build loyalty.” – Webcrediblesource: http://www.webcredible.co.uk/user-friendly-resources/white-papers/online-travel.shtml
  19. 19. Banking – Bank of America
  20. 20. “Practical innovations across channels that leverage technology to deliver a more seamless and personalized experience will therefore be a major competitive battleground in all retail banking markets.” – Ernst & Youngsource: http://www.ey.com/Publication/vwLUAssets/A_new_era_of_customer_expectation:_global_consumer_banking_survey/$FILE/A%20new%20era%20of%20customer%20expectation_global%20consumer%20banking%20survey.pdf
  21. 21. Cross-Channel Design Principles✴ Consistency Users should be able to accomplish a given task in a like manner across all channels.
  22. 22. Cross-Channel Design Principles✴ Consistency Users should be able to accomplish a given task in a like manner across all channels.✴ Optimization Each channel should play to its strengths.
  23. 23. Cross-Channel Design Principles✴ Consistency Users should be able to accomplish a given task in a like manner across all channels.✴ Optimization Each channel should play to its strengths.✴ Continuity Each channel must be aware of all the others.
  24. 24. 1 In Summary✴ Businesses and consumers alike understand the value of seamless cross-channel experiences.✴ Successful cross-channel experiences are consistent, optimal, and continuous.✴ For many businesses, the first step towards a cross-channel strategy is mobile.
  25. 25. 2 CHARACTERISTICS OF MOBILE SEARCHphotos by William Hook, Risager, and Whatleydude
  26. 26. “44% of consumers use theirphone while on the move tolocate stores or restaurants.”– NCR 2010 Global Consumer Research
  27. 27. “40% of all map-relatedGoogle searches comefrom mobile devices.”– Marissa Mayer
  28. 28. “Mobile will be bigger thandesktop Internet in 3 years”– Morgan Stanley
  29. 29. Computers and iPhonesand Mobile Phones, oh my!Maryam Kamvar, Melanie Kellar, Rajan Patel, Ya Xu (2009)http://www2009.eprints.org/81/1/p801.pdf
  30. 30. Average query length Computer iPhone Mobile Words 2.93 2.93 2.44 Characters 18.72 18.25 15.89source: http://www2009.eprints.org/81/1/p801.pdf
  31. 31. Average queries per session Computer iPhone Mobile 1.94 1.82 1.7source: http://www2009.eprints.org/81/1/p801.pdf
  32. 32. Q: What do you use the internet on your mobile to do?source: http://mobithinking.com/best-practices/mobile-internet-usage-attitudes-study
  33. 33. Two Diary StudiesKaren Church, Barry Smyth (2009)Timothy Sohn, et al. (2008)http://tinyurl.com/understandingintenthttp://tinyurl.com/mobileinfoneeds
  34. 34. Information needs by topic Topic % of Entries Local services 24.2% Travel & commuting 20.2% General information 15.6% Entertainment 12.8% Trivia 6.4%source: http://www2009.eprints.org/81/1/p801.pdf
  35. 35. Information needs by intent Goal Mobile Informational 58.3% Geographical 31.1% Personal information mgmt. 10.6%source: http://www2009.eprints.org/81/1/p801.pdf
  36. 36. “72% of reported informa-tion needs were promptedby a contextual factor.”
  37. 37. Mobile Search Design Principles✴ Answers over results Mobile information needs are more defined than some desktop searches and are contained in shorter sessions.
  38. 38. Mobile Search Design Principles✴ Answers over results Mobile information needs are more defined than some desktop searches and are contained in shorter sessions.✴ Precision over recall Mobile users are less likely to refine their search than desktop users. Ensuring that the best matches are on the first page is important for mobile.
  39. 39. Mobile Search Design Principles✴ Location awareness When users are searching for nearby places or services, filter the results to the user’s proximity.
  40. 40. Mobile Search Design Principles✴ Location awareness When users are searching for nearby places or services, filter the results to the user’s proximity.✴ Time awareness When users are interested in timely information, and filter results by time period.
  41. 41. Mobile Search Design Principles✴ Location awareness When users are searching for nearby places or services, filter the results to the user’s proximity.✴ Time awareness When users are interested in timely information, and filter results by time period.✴ Social awareness Mobile search should both incorporate social signals as well as facilitate collaboration.
  42. 42. 2 In Summary✴ Mobile search is increasing in popularity and could outpace desktop search within 5 years.✴ Users of modern smartphones enter queries of similar length (~3 words) to desktop searchers, but are less likely to refine.✴ Mobile information needs are highly contextual and disproportionately geographic.✴ Above all, mobile search must be context-aware.
  43. 43. 3DESIGN PATTERNS FOR MOBILE SEARCH
  44. 44. Components Activation Methods Display MethodsSearch results Always visible ModalSearch box Button Full-screenSort controls Gesture InlineFaceted navBreadcrumbs
  45. 45. The Search Box
  46. 46. Always visible Search... Sort
  47. 47. Button
  48. 48. Gesture Search... SortInline
  49. 49. Gesture Sort Search...Inline
  50. 50. Gesture SortInline Search...
  51. 51. Gesture SortInline Search...
  52. 52. Sort Controls
  53. 53. Always visible Best Match Price Date
  54. 54. Button Sort
  55. 55. Faceted Navigation
  56. 56. Best Match Refine Price Date
  57. 57. Best Match Refine Price DateFilter by Category Acoustic Condition Price Seller Buying Formats Location
  58. 58. Best Match Refine Price DateFilter by Category Acoustic Condition Price Seller Buying Formats Location
  59. 59. Best Match Refine Price DateNarrow by New Refurb. Used Broken Category Acoustic Price Buying Formats Location
  60. 60. Best Match Refine Price DateNarrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats Location
  61. 61. Best Match Refine Price DateNarrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats Location
  62. 62. Best Match Refine Price DateSort by Best Match Price DateNarrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats Location
  63. 63. Always visible Search... Sort Match Best Price Date Electric Acoustic Bass Aplifiers Access
  64. 64. Always visible Search... Sort Match Best Price Date Electric Acoustic Bass Aplifiers Access
  65. 65. Gesture Best Match Refine Price DateInline
  66. 66. PriceGesture Best Match Refine Price Date Category AcousticInline Seller Buying Formats
  67. 67. Gesture Best Match Refine Price DateInline Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats
  68. 68. Button Best Match Refine Price Date RefineModal
  69. 69. Button PriceMatch Best Refine Price Date RefineModal Category Acoustic Seller Buying Formats
  70. 70. Button Best Match Refine Price Date RefineModal Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats
  71. 71. GestureFull-screen
  72. 72. Gesture RefineBest Match Price DateFull-screen Used Broken Acoustic
  73. 73. Gesture Best Match Refine Price DateFull-screen Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats
  74. 74. Button Guitar Best Match Price Date efine RFull-screen
  75. 75. Button Search... Guitar Best Match Price Date efine Refine RFull-screen Best Match Refine Price Date Sort by Best Match Price Date Narrow by New Refurb. Used Broken Price
  76. 76. Button Search... Best Match Refine Price Date efine RDoneFull-screen Sort by Best Match Price Date Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats Location
  77. 77. Breadcrumbs
  78. 78. Guitar Best Match Price Date efine RShowing new, acoustic guitars. Sorting by price.
  79. 79. 3 In Summary✴ Devote screen real estate to content over navigation✴ Optimise the presentation of each facet✴ Provide paths forward at the bottom of the page
  80. 80. 4IMPLEMENTATION STRATEGIES
  81. 81. 1. Native Apps Pros: Cons: ✴ Apps feel native ✴ Must be built per platform ✴ Greater access to OS features ✴ Expensive to build and ✴ Works offline maintain ✴ Marketed in ✴ App store must app store approve & takes cut of sale
  82. 82. 2. Mobile Web AppsPros: Cons:✴ One app for all ✴ Doesn’t feel mobile platforms native✴ Easier to update ✴ Lacks access to core OS features✴ No maintenance needed for OS upgrades✴ Keep all profits
  83. 83. 3. Responsive WebsitesPros: Cons:✴ One code base ✴ Definitely doesn’t for all channels – feel native desktop & mobile ✴ Not as optimized✴ Cheap to build for each channel and maintain ✴ No offline access✴ Consistent ✴ Lacks access to experience core OS features across channels
  84. 84. Fluid Layouts
  85. 85. Declarative HTML Presentational CSS<!-- Main --> /* Grid Config */<article id="main"> @columns: 12; <h2>Main Column</h2> @column-width: 60;</article> @gutter-width: 20;<!-- Sidebar --> /* Layout */<section id="sidebar"> article#main { <h2>Sidebar</h2></section> .column(9); } section#sidebar { .column(3); }
  86. 86. Responsive Web Design
  87. 87. <head> <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" /></head>
  88. 88. /* Default */article#main { .column(9); }section#sidebar { .column(3); }/* Mobile Layout */@media (max-width: 480px) { article#main { .column(12); } section#sidebar { .column(12); }}
  89. 89. Client-side Rendering
  90. 90. Client-side Rendering
  91. 91. 4 In Summary✴ Step 1: Make mobile-friendly websites.✴ Web apps reach across platforms, while native apps provide the richest experience but are costly.✴ Fluid grids – such as Semantic.gs – and media queries make responsive design easily achievable.
  92. 92. http://www.alistapart.com/articles/organizing-mobile/
  93. 93. UXmatters.com
  94. 94. http://www.designcaffeine.com/2010/articles/348/
  95. 95. ENTERPRISE SEARCHMeetupswww.searchmeetups.comENTERPRISE ENTERPRISESEARCH SEARCHLondon Frankfurt
  96. 96. Thank You!@TylerTate@TwigKitwww.twigkit.com
  97. 97. Designing Mobile Searchby Tyler Tate, TwigKitphotos by Matthew Kenwrick, , Mikhail Koninin, Neil Oliver,Iam Carroll, Pithawat Vachiramon, Kamshots

×