Designing Mobile Search — Frankfurt Edition

  • 853 views
Uploaded on

Presented at the Enterprise Search Frankfurt meetup on November 22, 2011.

Presented at the Enterprise Search Frankfurt meetup on November 22, 2011.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
853
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Designing Mobile Searchby Tyler Tate, TwigKitphotos by Matthew Kenwrick, , Mikhail Koninin, Neil Oliver,Iam Carroll, Pithawat Vachiramon, Kamshots
  • 2. ux search
  • 3. <widget:facets facets=”Categories,Sources”/>
  • 4. <widget:facets facets=”Categories,Sources” type=”expandable”/>
  • 5. <widget:facets facets=”Categories,Sources” type=”expandable”/>
  • 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. 1 THE RISE OF CROSS-CHANNEL EXPERIENCESphotos by William Hook, Risager, and Whatleydude
  • 8. source: Google
  • 9. photo by Alaina Buzas
  • 10. photo by thefourelements
  • 11. source: Amazon.com
  • 12. Retail – REI
  • 13. Travel – Virgin Atlantic
  • 14. Banking – Bank of America
  • 15. Cross-Channel Design Principles✴ Consistency Users should be able to accomplish a given task in a like manner across all channels.
  • 16. 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.
  • 17. 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.
  • 18. 2 CHARACTERISTICS OF MOBILE SEARCHphotos by William Hook, Risager, and Whatleydude
  • 19. “Mobile will be bigger thandesktop Internet in 3 years”– Morgan Stanley
  • 20. users info contextneeds
  • 21. users info contextneeds
  • 22. Partial Attention“I like to imagine people as‘one eyeball and one thumb.’”– Luke Wroblewski, Mobile First
  • 23. Delayed Grati cation Later 30% At the time 45% Never 25%– Sohn et al. 2008, http://tinyurl.com/mobileinfoneeds
  • 24. Average Query Length Computer iPhone Mobile Words 2.93 2.93 2.44 Characters 18.72 18.25 15.89– Google, http://www2009.eprints.org/81/1/p801.pdf
  • 25. Average Queries per Session Computer iPhone Mobile 1.94 1.82 1.7– Google, http://www2009.eprints.org/81/1/p801.pdf
  • 26. users info contextneeds
  • 27. Casual Lookup Learn Investigate
  • 28. TimeCasual Lookup Learn Investigate
  • 29. InformationalGeographicPersonal InfoTransactional
  • 30. Casual Lookup Learn Investigate Checking TopicalInformational Trivia Notifications Research Friend Local Geographic Directions Check-ins Exploration Personal Checking Checking Info Email Calendar ProductTransactional Monitoring
  • 31. users info contextneeds
  • 32. Contextually-driven Info Needs Intrinsic 28% Contextual 72%– Sohn et al. 2008, http://tinyurl.com/mobileinfoneeds
  • 33. spatial temporal social
  • 34. – Church & Smyth 2009, http://tinyurl.com/understandingintent
  • 35. Mobile Search Design Principles✴ Answers over results Mobile information needs are more defined than some desktop searches and are contained in shorter sessions.
  • 36. 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.
  • 37. Mobile Search Design Principles✴ Location awareness When users are searching for nearby places or services, filter the results to the user’s proximity.
  • 38. 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.
  • 39. 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.
  • 40. 3DESIGN PATTERNS FOR MOBILE SEARCH
  • 41. Components Activation Methods Display MethodsSearch results Always visible ModalSearch box Button Full-screenSort controls Gesture InlineFaceted navBreadcrumbs
  • 42. The Search Box
  • 43. Always visible Search... Sort
  • 44. Button
  • 45. Gesture Search... SortInline
  • 46. Gesture Sort Search...Inline
  • 47. Gesture SortInline Search...
  • 48. Gesture SortInline Search...
  • 49. Sort Controls
  • 50. Always visible Best Match Price Date
  • 51. Button Sort
  • 52. Faceted Navigation
  • 53. Best Match Refine Price Date
  • 54. Best Match Refine Price DateFilter by Category Acoustic Condition Price Seller Buying Formats Location
  • 55. Best Match Refine Price DateFilter by Category Acoustic Condition Price Seller Buying Formats Location
  • 56. Best Match Refine Price DateNarrow by New Refurb. Used Broken Category Acoustic Price Buying Formats Location
  • 57. Best Match Refine Price DateNarrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats Location
  • 58. Best Match Refine Price DateNarrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats Location
  • 59. Best Match Refine Price DateSort by Best Match Price DateNarrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats Location
  • 60. Always visible Search... Sort Match Best Price Date Electric Acoustic Bass Aplifiers Access
  • 61. Always visible Search... Sort Match Best Price Date Electric Acoustic Bass Aplifiers Access
  • 62. Gesture Best Match Refine Price DateInline
  • 63. PriceGesture Best Match Refine Price Date Category AcousticInline Seller Buying Formats
  • 64. Gesture Best Match Refine Price DateInline Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats
  • 65. Button Best Match Refine Price Date RefineModal
  • 66. Button PriceMatch Best Refine Price Date RefineModal Category Acoustic Seller Buying Formats
  • 67. Button Best Match Refine Price Date RefineModal Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats
  • 68. GestureFull-screen
  • 69. Gesture RefineBest Match Price DateFull-screen Used Broken Acoustic
  • 70. Gesture Best Match Refine Price DateFull-screen Narrow by New Refurb. Used Broken Price Category Acoustic Seller Buying Formats
  • 71. Button Guitar Best Match Price Date efine RFull-screen
  • 72. 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
  • 73. 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
  • 74. Breadcrumbs
  • 75. Guitar Best Match Price Date efine RShowing new, acoustic guitars. Sorting by price.
  • 76. 4IMPLEMENTATION STRATEGIES
  • 77. 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
  • 78. 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
  • 79. 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
  • 80. Responsive Web Design
  • 81. ENTERPRISE SEARCHMeetupswww.searchmeetups.comENTERPRISE ENTERPRISESEARCH SEARCHLondon Frankfurt
  • 82. Thank You!@TylerTate@TwigKitwww.twigkit.com
  • 83. Designing Mobile Searchby Tyler Tate, TwigKitphotos by Matthew Kenwrick, , Mikhail Koninin, Neil Oliver,Iam Carroll, Pithawat Vachiramon, Kamshots