0
Designing Mobile Search
by @TylerTate
800 million
Desktop PCs

Smartphones

Laptop PCs

Tablets

2005

2006

2007

2008

Forecast

2009

2010

2011

2012

2013
...
Problem 1: We didn't know exactly what we wanted.
Problem 1: We didn't know exactly what we wanted.
Problem 2: When we saved items on one device, we
couldn't access them fr...
Problem 1: We didn't know exactly what we wanted.
Problem 2: When we saved items on one device, we
couldn't access them fr...
Problem 1: We didn't know exactly what we wanted.
Problem 2: When we saved items on one device, we
couldn't access them fr...
Initiation
Initiation

Selection
Initiation

Selection

Exploration
Initiation

Selection

Exploration

Formulation
Initiation

Selection

Exploration

Formulation

Collection
Initiation

Selection

Exploration

Formulation

Collection

Action
Initiation
Selection
Exploration
Formulation
Collection
http://alistapart.com/article/the-ux-of-learning

Action
Search Type

Search
Motive
Casual
Casual

Lookup
Casual

Lookup

Learn
Casual

Lookup

Learn

Investigate
Informational
Informational

Geographic
Informational

Geographic

Personal Info
Informational

Geographic

Personal Info Transactional
Casual
Info

Geographic

Personal
Info

Transaction

Lookup

Learn

Investigate
Casual

Lookup

Learn

Investigate

Info

Window
Shopping

Trivia

Information
Gathering

Research

Geographic

Friend
Che...
Task

Environ

Social

Physical

Personal
Task

Environ

Social

Physical

Personal
Task

Environ

Social

Physical

Personal
Task

Environ

Social

Physical

Personal
Task

Environ

Social

Physical

Personal
Task

Environ

Social

Physical

Personal
1. Content Over Controls
The Search Box
In the navigation
bar

Sort
Search...
In a secondary
toolbar

Sort

Search...
Via a pull-toreveal gesture

Sort
Search...
Via a pull-toreveal gesture

Sort

Search...
Via a pull-toreveal gesture

Sort

Search...
Via a pull-toreveal gesture

Sort

Search...
As-you-type suggestions
As-you-type suggestions
Other Input Methods
Location
Audio
Visual
Drawing
Display Formats
List
Grid
Map
Augmented
Reality
Toggling the Display Format
Segmented
control in a
toolbar

Search...
List

Map

Images
Segmented
control
centered in the
navigation bar

List

Map

Images
Single button in
the navigation
bar

Search...

Map
2. Open-ended Exploration
Inline Controls
Dedicated Screen
Best Match

Price
Refine

Date
Filtering

Best Match

Price
Refine

Date

Filter by

Category
Condition
Price
Seller
Buying Formats
Location

Acoustic
Filtering with a
segmented
control

Best Match

Price
Refine

Date

Narrow by
New

Refurb.

Category
Price
Buying Formats
...
Filtering with a
slider

Best Match

Price
Refine

Date

Narrow by
New

Refurb.

Used

Broken

Price
Category
Seller
Buyin...
Sorting with a
segmented
control

Best Match

Price
Refine

Date

Price

Date

Sort by
Best Match

Narrow by
New

Refurb.
...
Dedicated refinement screens
Accessing the Refinement Screen
Button in the
navigation bar

Best Match
Guitar

Price

R
Date efine
Button in the
navigation bar

Best Match
Search...
Guitar

Price

Best Match

Price
Refine

Date

Price

Date

Refine
R
Da...
Button in the
navigation bar

Best Match
Search...

Price
Refine

R
Done
Date efine

Sort by
Best Match

Price

Date

Narr...
Button in the navigation
Gesture
Gesture

RefineBest Match

Used

Broken

Acoustic

Price

Date
Gesture

Best Match

Price
Refine

Date

Narrow by
New

Refurb.

Used

Broken

Price
Category
Seller
Buying Formats

Acous...
Button or gesture
Button and popover
Breadcrumbs
Best Match
Guitar

Price

R
Date efine

Showing new, acoustic guitars. Sorting by price.
3. Cross-Channel
Continuity
4. Collaborative Searching
5. Multi-session Tasks
Problem: We didn't know exactly what we wanted.
Problem: We didn't know exactly what we wanted.
Solution: Design for open-ended exploration.
Problem: When we saved items on one device, we
couldn't access them from others.
Problem: When we saved items on one device, we
couldn't access them from others.
Solution: Design for cross-channel contin...
Problem: We didn't have a good way to share what
we'd found with one another.
Problem: We didn't have a good way to share what
we'd found with one another.
Solution: Design for collaborative search.
Problem: We had to perform the same searches
everyday until we found just what we wanted.
Problem: We had to perform the same searches
everyday until we found just what we wanted.
Solution: Design for multi-sessi...
Mobile Search Workshop, Part 1

Developing a CrossChannel Blueprint

13:45 - 14:45
The cross-channel blueprint provides an
overview of the ecosystem's two most
fundamental attributes: the channels of
which...
A service blueprint created by Brandon Schauer.
Resmini and Rosati’s CHU cube diagram
Gianluca Brugnoli’s touchpoints matrix.
Lookup

Shared Assets

High priority

Low priority

N/A

High priority

Immersive photography

Flip pages back/forth

Flip...
Group time
Break into groups and get ready to create
your own cross-channel blueprint.
1. Identify user actions. What are the actions that
users desire to perform throughout the ecosystem
as a whole?
Lookup

Shared Assets

High priority

Low priority

N/A

High priority

Immersive photography

Flip pages back/forth

Flip...
1. Identify user actions.
2. List the channels. What channels compose the
ecosystem? Think both digital and physical.
Lookup

Shared Assets

High priority

Low priority

N/A

High priority

Immersive photography

Flip pages back/forth

Flip...
1. Identify user actions.
2. List the channels.
3. Prioritise and describe each channel-action.
Determine the priority tha...
Lookup

Shared Assets

High priority

Low priority

N/A

High priority

Immersive photography

Flip pages back/forth

Flip...
1. Identify user actions.
2. List the channels.
3. Prioritise and describe each channel-action.
4. Identify shared compone...
Lookup

Shared Assets

High priority

Low priority

N/A

High priority

Immersive photography

Flip pages back/forth

Flip...
1. A global view of important user actions
1. A global view of important user actions
2. The possible channels through which users might
attempt those actions
1. A global view of important user actions
2. The possible channels through which users might
attempt those actions
3. A s...
1. A global view of important user actions
2. The possible channels through which users might
attempt those actions
3. A s...
1. A global view of important user actions
2. The possible channels through which users might
attempt those actions
3. A s...
Mobile Search Workshop, Part 2

User Interface Sketching

15:00 - 16:00
Inputting the query
Viewing search results
Refining the query
Advanced features
Combine the best ideas
Share
Inputting the query
Viewing search results
Refining the query
Advanced features
Combine the best ideas
Share
Inputting the query
Viewing search results
Refining the query
Advanced features
Combine the best ideas
Share
Inputting the query
Viewing search results
Refining the query
Advanced features
Combine the best ideas
Share
Inputting the query
Viewing search results
Refining the query
Advanced features
Combine the best ideas
Share
Inputting the query
Viewing search results
Refining the query
Advanced features
Combine the best ideas
Share
Designing Mobile Search
by @TylerTate
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Upcoming SlideShare
Loading in...5
×

Designing Mobile Search: A workshop for eBay Classifieds Group

537

Published on

Published in: Design, Technology, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
537
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Designing Mobile Search: A workshop for eBay Classifieds Group"

  1. 1. Designing Mobile Search by @TylerTate
  2. 2. 800 million Desktop PCs Smartphones Laptop PCs Tablets 2005 2006 2007 2008 Forecast 2009 2010 2011 2012 2013 “Beyond the PC” by The Economist, Oct 8th 2011. Sources: Cisco, Gartner, Informa Telecoms & Media, KPCB, Morgan Stanley, UN, Yankee Group, The Economist. .
  3. 3. Problem 1: We didn't know exactly what we wanted.
  4. 4. Problem 1: We didn't know exactly what we wanted. Problem 2: When we saved items on one device, we couldn't access them from others.
  5. 5. Problem 1: We didn't know exactly what we wanted. Problem 2: When we saved items on one device, we couldn't access them from others. Problem 3: We didn't have a good way to share what we'd found with one another.
  6. 6. Problem 1: We didn't know exactly what we wanted. Problem 2: When we saved items on one device, we couldn't access them from others. Problem 3: We didn't have a good way to share what we'd found with one another. Problem 4: We had to perform the same searches everyday until we found just what we wanted.
  7. 7. Initiation
  8. 8. Initiation Selection
  9. 9. Initiation Selection Exploration
  10. 10. Initiation Selection Exploration Formulation
  11. 11. Initiation Selection Exploration Formulation Collection
  12. 12. Initiation Selection Exploration Formulation Collection Action
  13. 13. Initiation Selection Exploration Formulation Collection http://alistapart.com/article/the-ux-of-learning Action
  14. 14. Search Type Search Motive
  15. 15. Casual
  16. 16. Casual Lookup
  17. 17. Casual Lookup Learn
  18. 18. Casual Lookup Learn Investigate
  19. 19. Informational
  20. 20. Informational Geographic
  21. 21. Informational Geographic Personal Info
  22. 22. Informational Geographic Personal Info Transactional
  23. 23. Casual Info Geographic Personal Info Transaction Lookup Learn Investigate
  24. 24. Casual Lookup Learn Investigate Info Window Shopping Trivia Information Gathering Research Geographic Friend Check-ins Directions Local Points of Interest Travel Planning Personal Info Checking Messages Checking Calendar Situation Analysis Lifestyle Planning Transaction Acting on Notifications Price Comparison Online Shopping Product Monitoring http://tinyurl.com/InfoNeedMatrix
  25. 25. Task Environ Social Physical Personal
  26. 26. Task Environ Social Physical Personal
  27. 27. Task Environ Social Physical Personal
  28. 28. Task Environ Social Physical Personal
  29. 29. Task Environ Social Physical Personal
  30. 30. Task Environ Social Physical Personal
  31. 31. 1. Content Over Controls
  32. 32. The Search Box
  33. 33. In the navigation bar Sort Search...
  34. 34. In a secondary toolbar Sort Search...
  35. 35. Via a pull-toreveal gesture Sort Search...
  36. 36. Via a pull-toreveal gesture Sort Search...
  37. 37. Via a pull-toreveal gesture Sort Search...
  38. 38. Via a pull-toreveal gesture Sort Search...
  39. 39. As-you-type suggestions
  40. 40. As-you-type suggestions
  41. 41. Other Input Methods
  42. 42. Location
  43. 43. Audio
  44. 44. Visual
  45. 45. Drawing
  46. 46. Display Formats
  47. 47. List
  48. 48. Grid
  49. 49. Map
  50. 50. Augmented Reality
  51. 51. Toggling the Display Format
  52. 52. Segmented control in a toolbar Search... List Map Images
  53. 53. Segmented control centered in the navigation bar List Map Images
  54. 54. Single button in the navigation bar Search... Map
  55. 55. 2. Open-ended Exploration
  56. 56. Inline Controls
  57. 57. Dedicated Screen
  58. 58. Best Match Price Refine Date
  59. 59. Filtering Best Match Price Refine Date Filter by Category Condition Price Seller Buying Formats Location Acoustic
  60. 60. Filtering with a segmented control Best Match Price Refine Date Narrow by New Refurb. Category Price Buying Formats Location Used Broken Acoustic
  61. 61. Filtering with a slider Best Match Price Refine Date Narrow by New Refurb. Used Broken Price Category Seller Buying Formats Location Acoustic
  62. 62. Sorting with a segmented control Best Match Price Refine Date Price Date Sort by Best Match Narrow by New Refurb. Used Broken Price Category Seller Buying Formats Location Acoustic
  63. 63. Dedicated refinement screens
  64. 64. Accessing the Refinement Screen
  65. 65. Button in the navigation bar Best Match Guitar Price R Date efine
  66. 66. Button in the navigation bar Best Match Search... Guitar Price Best Match Price Refine Date Price Date Refine R Date efine Sort by Best Match Narrow by New Price Refurb. Used Broken
  67. 67. Button in the navigation bar Best Match Search... Price Refine R Done Date efine Sort by Best Match Price Date Narrow by New Refurb. Used Broken Price Category Seller Buying Formats Location Acoustic
  68. 68. Button in the navigation
  69. 69. Gesture
  70. 70. Gesture RefineBest Match Used Broken Acoustic Price Date
  71. 71. Gesture Best Match Price Refine Date Narrow by New Refurb. Used Broken Price Category Seller Buying Formats Acoustic
  72. 72. Button or gesture
  73. 73. Button and popover
  74. 74. Breadcrumbs
  75. 75. Best Match Guitar Price R Date efine Showing new, acoustic guitars. Sorting by price.
  76. 76. 3. Cross-Channel Continuity
  77. 77. 4. Collaborative Searching
  78. 78. 5. Multi-session Tasks
  79. 79. Problem: We didn't know exactly what we wanted.
  80. 80. Problem: We didn't know exactly what we wanted. Solution: Design for open-ended exploration.
  81. 81. Problem: When we saved items on one device, we couldn't access them from others.
  82. 82. Problem: When we saved items on one device, we couldn't access them from others. Solution: Design for cross-channel continuity.
  83. 83. Problem: We didn't have a good way to share what we'd found with one another.
  84. 84. Problem: We didn't have a good way to share what we'd found with one another. Solution: Design for collaborative search.
  85. 85. Problem: We had to perform the same searches everyday until we found just what we wanted.
  86. 86. Problem: We had to perform the same searches everyday until we found just what we wanted. Solution: Design for multi-sessions tasks.
  87. 87. Mobile Search Workshop, Part 1 Developing a CrossChannel Blueprint 13:45 - 14:45
  88. 88. The cross-channel blueprint provides an overview of the ecosystem's two most fundamental attributes: the channels of which it's composed, and the user actions it must facilitate.
  89. 89. A service blueprint created by Brandon Schauer.
  90. 90. Resmini and Rosati’s CHU cube diagram
  91. 91. Gianluca Brugnoli’s touchpoints matrix.
  92. 92. Lookup Shared Assets High priority Low priority N/A High priority Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Order by mail Order online High priority High priority High priority High priority High priority Browse by category Table view of selected items Favorites Wish list / gift registry Standard checkout Expedited checkout Order by phone High priority High priority Medium priority Medium priority High priority Catalog-like browsing experience Table view of selected items Favorites Wish lists Expedited checkout Standard checkout High priority Medium priority N/A Low priority High priority Browse by category Impractical due to screen size Add items to favorites and wish list, but limited ability to edit Expedited checkout High priority High priority Medium priority Low priority High priority Clear signage Store map Helpful staff Physical Store Low priority Search box Voice input Barcode scanner Mobile App Purchase Search box Voice input Tablet App Organize Search box Website Compare Table of contents Index Print Catalog Explore Wander the aisles Compare side by side Ask staff Gift registry / wish list Attendant-assisted Self-checkout Scan-as-you-go Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered by one component Favorites list shared by web, tablet, mobile Universal checkout process for web, tablet, and mobile
  93. 93. Group time Break into groups and get ready to create your own cross-channel blueprint.
  94. 94. 1. Identify user actions. What are the actions that users desire to perform throughout the ecosystem as a whole?
  95. 95. Lookup Shared Assets High priority Low priority N/A High priority Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Order by mail Order online High priority High priority High priority High priority High priority Browse by category Table view of selected items Favorites Wish list / gift registry Standard checkout Expedited checkout Order by phone High priority High priority Medium priority Medium priority High priority Catalog-like browsing experience Table view of selected items Favorites Wish lists Expedited checkout Standard checkout High priority Medium priority N/A Low priority High priority Browse by category Impractical due to screen size Add items to favorites and wish list, but limited ability to edit Expedited checkout High priority High priority Medium priority Low priority High priority Clear signage Store map Helpful staff Physical Store Low priority Search box Voice input Barcode scanner Mobile App Purchase Search box Voice input Tablet App Organize Search box Website Compare Table of contents Index Print Catalog Explore Wander the aisles Compare side by side Ask staff Gift registry / wish list Attendant-assisted Self-checkout Scan-as-you-go Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered by one component Favorites list shared by web, tablet, mobile Universal checkout process for web, tablet, and mobile
  96. 96. 1. Identify user actions. 2. List the channels. What channels compose the ecosystem? Think both digital and physical.
  97. 97. Lookup Shared Assets High priority Low priority N/A High priority Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Order by mail Order online High priority High priority High priority High priority High priority Browse by category Table view of selected items Favorites Wish list / gift registry Standard checkout Expedited checkout Order by phone High priority High priority Medium priority Medium priority High priority Catalog-like browsing experience Table view of selected items Favorites Wish lists Expedited checkout Standard checkout High priority Medium priority N/A Low priority High priority Browse by category Impractical due to screen size Add items to favorites and wish list, but limited ability to edit Expedited checkout High priority High priority Medium priority Low priority High priority Clear signage Store map Helpful staff Physical Store Low priority Search box Voice input Barcode scanner Mobile App Purchase Search box Voice input Tablet App Organize Search box Website Compare Table of contents Index Print Catalog Explore Wander the aisles Compare side by side Ask staff Gift registry / wish list Attendant-assisted Self-checkout Scan-as-you-go Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered by one component Favorites list shared by web, tablet, mobile Universal checkout process for web, tablet, and mobile
  98. 98. 1. Identify user actions. 2. List the channels. 3. Prioritise and describe each channel-action. Determine the priority that each action should receive for a given channel. At the same time as setting priorities, also briefly describe how each action would be achieved.
  99. 99. Lookup Shared Assets High priority Low priority N/A High priority Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Order by mail Order online High priority High priority High priority High priority High priority Browse by category Table view of selected items Favorites Wish list / gift registry Standard checkout Expedited checkout Order by phone High priority High priority Medium priority Medium priority High priority Catalog-like browsing experience Table view of selected items Favorites Wish lists Expedited checkout Standard checkout High priority Medium priority N/A Low priority High priority Browse by category Impractical due to screen size Add items to favorites and wish list, but limited ability to edit Expedited checkout High priority High priority Medium priority Low priority High priority Clear signage Store map Helpful staff Physical Store Low priority Search box Voice input Barcode scanner Mobile App Purchase Search box Voice input Tablet App Organize Search box Website Compare Table of contents Index Print Catalog Explore Wander the aisles Compare side by side Ask staff Gift registry / wish list Attendant-assisted Self-checkout Scan-as-you-go Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered by one component Favorites list shared by web, tablet, mobile Universal checkout process for web, tablet, and mobile
  100. 100. 1. Identify user actions. 2. List the channels. 3. Prioritise and describe each channel-action. 4. Identify shared components. Think about the behind-the-scenes components that will be necessary to empower each user action.
  101. 101. Lookup Shared Assets High priority Low priority N/A High priority Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Order by mail Order online High priority High priority High priority High priority High priority Browse by category Table view of selected items Favorites Wish list / gift registry Standard checkout Expedited checkout Order by phone High priority High priority Medium priority Medium priority High priority Catalog-like browsing experience Table view of selected items Favorites Wish lists Expedited checkout Standard checkout High priority Medium priority N/A Low priority High priority Browse by category Impractical due to screen size Add items to favorites and wish list, but limited ability to edit Expedited checkout High priority High priority Medium priority Low priority High priority Clear signage Store map Helpful staff Physical Store Low priority Search box Voice input Barcode scanner Mobile App Purchase Search box Voice input Tablet App Organize Search box Website Compare Table of contents Index Print Catalog Explore Wander the aisles Compare side by side Ask staff Gift registry / wish list Attendant-assisted Self-checkout Scan-as-you-go Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered by one component Favorites list shared by web, tablet, mobile Universal checkout process for web, tablet, and mobile
  102. 102. 1. A global view of important user actions
  103. 103. 1. A global view of important user actions 2. The possible channels through which users might attempt those actions
  104. 104. 1. A global view of important user actions 2. The possible channels through which users might attempt those actions 3. A set of task priorities for each channel
  105. 105. 1. A global view of important user actions 2. The possible channels through which users might attempt those actions 3. A set of task priorities for each channel 4. A set of channel priorities for each action
  106. 106. 1. A global view of important user actions 2. The possible channels through which users might attempt those actions 3. A set of task priorities for each channel 4. A set of channel priorities for each action 5. An overview of which components need to be shared across channels
  107. 107. Mobile Search Workshop, Part 2 User Interface Sketching 15:00 - 16:00
  108. 108. Inputting the query Viewing search results Refining the query Advanced features Combine the best ideas Share
  109. 109. Inputting the query Viewing search results Refining the query Advanced features Combine the best ideas Share
  110. 110. Inputting the query Viewing search results Refining the query Advanced features Combine the best ideas Share
  111. 111. Inputting the query Viewing search results Refining the query Advanced features Combine the best ideas Share
  112. 112. Inputting the query Viewing search results Refining the query Advanced features Combine the best ideas Share
  113. 113. Inputting the query Viewing search results Refining the query Advanced features Combine the best ideas Share
  114. 114. Designing Mobile Search by @TylerTate
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×