Designing Mobile Search — Frankfurt Edition

1,403 views

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,403
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Designing Mobile Search — Frankfurt Edition

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

×