Date post: | 12-Apr-2017 |
Category: |
Design |
Upload: | tyler-tate |
View: | 1,046 times |
Download: | 0 times |
by @TylerTate
Designing Mobile Search
Desktop PCs
Laptop PCs
Smartphones
Tablets
2005 2006 2007 2008 2009 2010 2011 2012 2013
Forecast
800 million
“Beyond the PC” by The Economist, Oct 8th 2011. Sources: Cisco, Gartner, Informa Telecoms & Media, KPCB, Morgan Stanley, UN, Yankee Group, The Economist.
.
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 from others.
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 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.
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 Actionhttp://alistapart.com/article/the-ux-of-learning
SearchMotive
Search Type
Casual
Casual Lookup
Casual Lookup Learn
Casual Lookup Learn Investigate
Informational
Informational Geographic
Informational Geographic Personal Info
Informational Geographic Personal Info Transactional
Casual Lookup Learn Investigate
Info
Geographic
PersonalInfo
Transaction
Casual Lookup Learn Investigate
Info
Geographic
PersonalInfo
TransactionPrice
ComparisonActing on
NotificationsOnline
ShoppingProduct
Monitoring
TriviaWindow
ShoppingInformationGathering
Research
DirectionsFriend
Check-insLocal Points of Interest
Travel Planning
CheckingCalendar
CheckingMessages
Situation Analysis
Lifestyle Planning
http://tinyurl.com/InfoNeedMatrix
Task
Physical
PersonalSocial
Environ
Task
Physical
PersonalSocial
Environ
Task
Physical
PersonalSocial
Environ
Task
Physical
PersonalSocial
Environ
Task
Physical
PersonalSocial
Environ
Task
Physical
PersonalSocial
Environ
1. Content Over Controls
The Search Box
SortSearch...In the navigation bar
Sort
Search...
In a secondary toolbar
SortSearch...Via a pull-to-reveal gesture
Sort
Search...Via a pull-to-reveal gesture
Sort
Search...
Via a pull-to-reveal gesture
Sort
Search...
Via a pull-to-reveal gesture
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
List MapMap Images
Search...
Segmented control centered in the navigation bar
List MapMap Images
Single button in the navigation bar
Search... Map
2. Open-ended Exploration
Inline Controls
Dedicated Screen
Best Match Price DateRefine
Best Match Price DateRefine
Filter by
Category Acoustic
Condition
Price
Seller
Buying Formats
Location
Filtering
Best Match Price Date
New Refurb. Used Broken
Refine
Narrow by
Category Acoustic
Price
Buying Formats
Location
Filtering with a segmented control
Best Match Price Date
New Refurb. Used Broken
Refine
Narrow by
Category Acoustic
Seller
Price
Buying Formats
Location
Filtering with a slider
Best Match Price Date
Best Match Price Date
New Refurb. Used Broken
Refine
Sort by
Narrow by
Category Acoustic
Seller
Price
Buying Formats
Location
Sorting with a segmented control
Dedicated refinement screens
Accessing the Refinement Screen
Best Match Price DateRefineGuitarButton in the navigation bar
Best Match Price DateRefineGuitarBest Match Price Date
Best Match Price Date
Best Match Price Date
New Refurb. Used Broken
Refine
Sort by
Narrow by
Price
RefineSearch...Button in the navigation bar
Best Match Price DateRefineSearch...Best Match Price Date
Best Match Price Date
New Refurb. Used Broken
Refine
Sort by
Narrow by
Category Acoustic
Seller
Price
Buying Formats
Location
DoneButton in the navigation bar
Button in the navigation
Gesture
Best Match Price DateRefine
Used Broken
Acoustic
Gesture
Best Match Price Date
New Refurb. Used Broken
Narrow by
Category Acoustic
Seller
Price
Buying Formats
RefineGesture
Button or gesture
Button and popover
Breadcrumbs
Best Match Price DateRefineGuitar
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 continuity.
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-sessions tasks.
Mobile Search Workshop, Part 1
Developing a Cross-Channel Blueprint
13:45 - 14:45
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.
A service blueprint created by Brandon Schauer.
Resmini and Rosati’s CHU cube diagram
Gianluca Brugnoli’s touchpoints matrix.
Print Catalog
Website
Tablet App
Mobile App
Physical Store
Lookup Explore Compare Organize Purchase
Shared Assets
Low priorityTable of contentsIndex
High prioritySearch box
High prioritySearch boxVoice input
High prioritySearch boxVoice inputBarcode scanner
High priorityClear signageStore mapHelpful staff
High priorityImmersive photography
High priorityBrowse by category
High priorityCatalog-like browsing experience
Medium priorityBrowse by category
High priorityWander the aisles
Low priorityFlip pages back/forth
High priorityTable view of selected items
Medium priorityTable view of selected items
N/AImpractical due to screen size
Medium priorityCompare side by sideAsk staff
N/AFlip pages back/forth
High priorityFavoritesWish list / gift registry
Medium priorityFavoritesWish lists
Low priorityAdd items to favorites and wish list, but limited ability to edit
Low priorityGift registry / wish list
High priorityOrder by phoneOrder by mailOrder online
High priorityStandard checkoutExpedited checkoutOrder by phone
High priorityExpedited checkoutStandard checkout
High priorityExpedited checkout
High priorityAttendant-assistedSelf-checkoutScan-as-you-go
Product taxonomyAll channels powered by a single set of categories
Compare engineWeb & tablet powered by one component
Universal FavsFavorites list shared by web, tablet, mobile
"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile
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?
Print Catalog
Website
Tablet App
Mobile App
Physical Store
Lookup Explore Compare Organize Purchase
Shared Assets
Low priorityTable of contentsIndex
High prioritySearch box
High prioritySearch boxVoice input
High prioritySearch boxVoice inputBarcode scanner
High priorityClear signageStore mapHelpful staff
High priorityImmersive photography
High priorityBrowse by category
High priorityCatalog-like browsing experience
Medium priorityBrowse by category
High priorityWander the aisles
Low priorityFlip pages back/forth
High priorityTable view of selected items
Medium priorityTable view of selected items
N/AImpractical due to screen size
Medium priorityCompare side by sideAsk staff
N/AFlip pages back/forth
High priorityFavoritesWish list / gift registry
Medium priorityFavoritesWish lists
Low priorityAdd items to favorites and wish list, but limited ability to edit
Low priorityGift registry / wish list
High priorityOrder by phoneOrder by mailOrder online
High priorityStandard checkoutExpedited checkoutOrder by phone
High priorityExpedited checkoutStandard checkout
High priorityExpedited checkout
High priorityAttendant-assistedSelf-checkoutScan-as-you-go
Product taxonomyAll channels powered by a single set of categories
Compare engineWeb & tablet powered by one component
Universal FavsFavorites list shared by web, tablet, mobile
"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile
1. Identify user actions.
2. List the channels. What channels compose the ecosystem? Think both digital and physical.
Print Catalog
Website
Tablet App
Mobile App
Physical Store
Lookup Explore Compare Organize Purchase
Shared Assets
Low priorityTable of contentsIndex
High prioritySearch box
High prioritySearch boxVoice input
High prioritySearch boxVoice inputBarcode scanner
High priorityClear signageStore mapHelpful staff
High priorityImmersive photography
High priorityBrowse by category
High priorityCatalog-like browsing experience
Medium priorityBrowse by category
High priorityWander the aisles
Low priorityFlip pages back/forth
High priorityTable view of selected items
Medium priorityTable view of selected items
N/AImpractical due to screen size
Medium priorityCompare side by sideAsk staff
N/AFlip pages back/forth
High priorityFavoritesWish list / gift registry
Medium priorityFavoritesWish lists
Low priorityAdd items to favorites and wish list, but limited ability to edit
Low priorityGift registry / wish list
High priorityOrder by phoneOrder by mailOrder online
High priorityStandard checkoutExpedited checkoutOrder by phone
High priorityExpedited checkoutStandard checkout
High priorityExpedited checkout
High priorityAttendant-assistedSelf-checkoutScan-as-you-go
Product taxonomyAll channels powered by a single set of categories
Compare engineWeb & tablet powered by one component
Universal FavsFavorites list shared by web, tablet, mobile
"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile
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.
Print Catalog
Website
Tablet App
Mobile App
Physical Store
Lookup Explore Compare Organize Purchase
Shared Assets
Low priorityTable of contentsIndex
High prioritySearch box
High prioritySearch boxVoice input
High prioritySearch boxVoice inputBarcode scanner
High priorityClear signageStore mapHelpful staff
High priorityImmersive photography
High priorityBrowse by category
High priorityCatalog-like browsing experience
Medium priorityBrowse by category
High priorityWander the aisles
Low priorityFlip pages back/forth
High priorityTable view of selected items
Medium priorityTable view of selected items
N/AImpractical due to screen size
Medium priorityCompare side by sideAsk staff
N/AFlip pages back/forth
High priorityFavoritesWish list / gift registry
Medium priorityFavoritesWish lists
Low priorityAdd items to favorites and wish list, but limited ability to edit
Low priorityGift registry / wish list
High priorityOrder by phoneOrder by mailOrder online
High priorityStandard checkoutExpedited checkoutOrder by phone
High priorityExpedited checkoutStandard checkout
High priorityExpedited checkout
High priorityAttendant-assistedSelf-checkoutScan-as-you-go
Product taxonomyAll channels powered by a single set of categories
Compare engineWeb & tablet powered by one component
Universal FavsFavorites list shared by web, tablet, mobile
"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile
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.
Print Catalog
Website
Tablet App
Mobile App
Physical Store
Lookup Explore Compare Organize Purchase
Shared Assets
Low priorityTable of contentsIndex
High prioritySearch box
High prioritySearch boxVoice input
High prioritySearch boxVoice inputBarcode scanner
High priorityClear signageStore mapHelpful staff
High priorityImmersive photography
High priorityBrowse by category
High priorityCatalog-like browsing experience
Medium priorityBrowse by category
High priorityWander the aisles
Low priorityFlip pages back/forth
High priorityTable view of selected items
Medium priorityTable view of selected items
N/AImpractical due to screen size
Medium priorityCompare side by sideAsk staff
N/AFlip pages back/forth
High priorityFavoritesWish list / gift registry
Medium priorityFavoritesWish lists
Low priorityAdd items to favorites and wish list, but limited ability to edit
Low priorityGift registry / wish list
High priorityOrder by phoneOrder by mailOrder online
High priorityStandard checkoutExpedited checkoutOrder by phone
High priorityExpedited checkoutStandard checkout
High priorityExpedited checkout
High priorityAttendant-assistedSelf-checkoutScan-as-you-go
Product taxonomyAll channels powered by a single set of categories
Compare engineWeb & tablet powered by one component
Universal FavsFavorites list shared by web, tablet, mobile
"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile
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 set of task priorities for each channel
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
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
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
by @TylerTate
Designing Mobile Search