Mobile Search Design Guide
•
7 recomendaciones•2,070 vistas
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.
Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (19)
Similar a Mobile Search Design Guide
Similar a Mobile Search Design Guide (20)
Más de lucenerevolution
Más de lucenerevolution (20)
Último
Último (20)
Mobile Search Design Guide
- 1. Designing Mobile Search by Tyler Tate, TwigKit photos by Matthew Kenwrick, , Mikhail Koninin, Neil Oliver, Iam Carroll, Pithawat Vachiramon, Kamshots
- 2. ux search
- 5. <widget:facets facets=”Categories,Sources” type=”expandable” />
- 6. <widget:facets facets=”Categories,Sources” type=”expandable” />
- 9. Designing Mobile Search 1 The Rise of the Cross-Channel Experience 2 Characteristics of Mobile Search 3 Design Patterns for Mobile Search 4 Implementation Strategies for Mobile Search
- 10. 1 THE RISE OF CROSS-CHANNEL EXPERIENCES photos by William Hook, Risager, and Whatleydude
- 12. source: Google
- 13. photo by Mark Hillary
- 14. photo by Alaina Buzas
- 19. Books, newspapers, and magazines have not only gone digital, they've gone ubiquitous, contextual, and formless.
- 21. Seamless cross-channel experiences are the holy grail of the post-desktop era.
- 22. Retail – REI
- 23. “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 Research source: http://ncrpr.ncr.com/web/rsdmkt/landingPages/documents/2010_global_consumer_resch_wp%20FINAL.pdf
- 24. Travel – Virgin Atlantic
- 25. “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.” – Webcredible source: http://www.webcredible.co.uk/user-friendly-resources/white-papers/online-travel.shtml
- 26. Banking – Bank of America
- 27. “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 & Young source: 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
- 28. Cross-Channel Design Principles ✴ Consistency Users should be able to accomplish a given task in a like manner across all channels.
- 29. 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.
- 30. 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.
- 31. 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.
- 32. 2 CHARACTERISTICS OF MOBILE SEARCH photos by William Hook, Risager, and Whatleydude
- 33. “44% of consumers use their phone while on the move to locate stores or restaurants.” – NCR 2010 Global Consumer Research
- 34. “40% of all map-related Google searches come from mobile devices.” – Marissa Mayer
- 35. “Mobile will be bigger than desktop Internet in 3 years” – Morgan Stanley
- 36. Computers and iPhones and Mobile Phones, oh my! Maryam Kamvar, Melanie Kellar, Rajan Patel, Ya Xu (2009) http://www2009.eprints.org/81/1/p801.pdf
- 37. Average query length Computer iPhone Mobile Words 2.93 2.93 2.44 Characters 18.72 18.25 15.89 source: http://www2009.eprints.org/81/1/p801.pdf
- 38. Average queries per session Computer iPhone Mobile 1.94 1.82 1.7 source: http://www2009.eprints.org/81/1/p801.pdf
- 39. Q: What do you use the internet on your mobile to do? source: http://mobithinking.com/best-practices/mobile-internet-usage-attitudes-study
- 40. Two Diary Studies Karen Church, Barry Smyth (2009) Timothy Sohn, et al. (2008) http://tinyurl.com/understandingintent http://tinyurl.com/mobileinfoneeds
- 41. 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
- 42. 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
- 44. “72% of reported informa- tion needs were prompted by a contextual factor.”
- 46. Mobile Search Design Principles ✴ Answers over results Mobile information needs are more defined than some desktop searches and are contained in shorter sessions.
- 47. 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.
- 48. Mobile Search Design Principles ✴ Location awareness When users are searching for nearby places or services, filter the results to the user’s proximity.
- 49. 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.
- 50. 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.
- 51. 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.
- 52. 3 DESIGN PATTERNS FOR MOBILE SEARCH
- 53. Components Activation Methods Display Methods Search results Always visible Modal Search box Button Full-screen Sort controls Gesture Inline Faceted nav Breadcrumbs
- 54. The Search Box
- 56. Always visible Search... Sort
- 57. Button
- 58. Gesture Search... Sort Inline
- 59. Gesture Sort Search... Inline
- 60. Gesture Sort Inline Search...
- 61. Gesture Sort Inline Search...
- 62. Sort Controls
- 63. Always visible Best Match Price Date
- 64. Button Sort
- 66. Best Match Refine Price Date
- 67. Best Match Refine Price Date Filter by Category Acoustic Condition Price Seller Buying Formats Location
- 70. Best Match Refine Price Date Filter by Category Acoustic Condition Price Seller Buying Formats Location
- 71. Best Match Refine Price Date Narrow by New Refurb. Used Broken Category Acoustic Price Buying Formats Location
- 72. Best Match Refine Price Date Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats Location
- 74. Best Match Refine Price Date Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats Location
- 75. Best Match Refine Price Date Sort by Best Match Price Date Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats Location
- 77. Always visible Search... Sort Match Best Price Date Electric Acoustic Bass Aplifiers Access
- 79. Always visible Search... Sort Match Best Price Date Electric Acoustic Bass Aplifiers Access
- 80. Gesture Best Match Refine Price Date Inline
- 81. Price Gesture Best Match Refine Price Date Category Acoustic Inline Seller Buying Formats
- 82. Gesture Best Match Refine Price Date Inline Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats
- 85. Button Best Match Refine Price Date Refine Modal
- 86. Button PriceMatch Best Refine Price Date Refine Modal Category Acoustic Seller Buying Formats
- 87. Button Best Match Refine Price Date Refine Modal Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats
- 91. Gesture RefineBest Match Price Date Full-screen Used Broken Acoustic
- 92. Gesture Best Match Refine Price Date Full-screen Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats
- 93. Button Guitar Best Match Price Date efine R Full-screen
- 94. Button Search... Guitar Best Match Price Date efine Refine R Full-screen Best Match Refine Price Date Sort by Best Match Price Date Narrow by New Refurb. Used Broken Price
- 95. Button Search... Best Match Refine Price Date efine RDone Full-screen Sort by Best Match Price Date Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats Location
- 96. Breadcrumbs
- 97. Guitar Best Match Price Date efine R Showing new, acoustic guitars. Sorting by price.
- 98. 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
- 100. 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
- 101. 2. Mobile Web Apps Pros: 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
- 102. 3. Responsive Websites Pros: 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
- 104. Fluid Layouts
- 105. 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); }
- 109. <head> <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" /> </head>
- 110. /* Default */ article#main { .column(9); } section#sidebar { .column(3); } /* Mobile Layout */ @media (max-width: 480px) { article#main { .column(12); } section#sidebar { .column(12); } }
- 114. 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.
- 116. UXmatters.com
- 119. ENTERPRISE SEARCH Meetups www.searchmeetups.com ENTERPRISE ENTERPRISE SEARCH SEARCH London Frankfurt
- 121. Designing Mobile Search by Tyler Tate, TwigKit photos by Matthew Kenwrick, , Mikhail Koninin, Neil Oliver, Iam Carroll, Pithawat Vachiramon, Kamshots