designing mobile search - tyler tate
Post on 10-Apr-2017
2.979 Views
Preview:
TRANSCRIPT
Designing Mobile Search
by Tyler Tate, TwigKitphotos by Matthew Kenwrick, ゆうくんと 呼んで, Mikhail Koninin, Neil Oliver,Iam Carroll, Pithawat Vachiramon, Kamshots
ux search
<widget:facets
facets=”Categories,Sources”
/>
<widget:facets
facets=”Categories,Sources”
type=”expandable”
/>
<widget:facets
facets=”Categories,Sources”
type=”expandable”
/>
The Rise of the Cross-Channel Experience
Characteristics of Mobile Search
Design Patterns for Mobile Search
Implementation Strategies for Mobile Search
Designing Mobile Search
1
2
3
4
1THE RISE OF
CROSS-CHANNEL EXPERIENCES
photos by William Hook, Risager, and Whatleydude
source: Google
photo by Mark Hillary
photo by Alaina Buzas
photo by thefourelements
Books, newspapers, and
magazines have not only
gone digital, they've gone
ubiquitous, contextual,
and formless.
source: Amazon.com
Seamless cross-channel
experiences are the holy
grail of the post-desktop era.
Retail – REI
“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
Travel – Virgin Atlantic
“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
Banking – Bank of America
“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
✴ ConsistencyUsers should be able to accomplish a given task in a like manner across all channels.
Cross-Channel Design Principles
✴ ConsistencyUsers should be able to accomplish a given task in a like manner across all channels.
✴ OptimizationEach channel should play to its strengths.
Cross-Channel Design Principles
✴ ConsistencyUsers should be able to accomplish a given task in a like manner across all channels.
✴ OptimizationEach channel should play to its strengths.
✴ ContinuityEach channel must be aware of all the others.
Cross-Channel Design Principles
✴ 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.
1 In Summary
2CHARACTERISTICS OF MOBILE SEARCH
photos by William Hook, Risager, and Whatleydude
“44% of consumers use their
phone while on the move to
locate stores or restaurants.”– NCR 2010 Global Consumer Research
“40% of all map-related
Google searches come
from mobile devices.”– Marissa Mayer
“Mobile will be bigger than
desktop Internet in 3 years”– Morgan Stanley
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
Computer iPhone Mobile
Words 2.93 2.93 2.44
Characters 18.72 18.25 15.89
Average query length
source: http://www2009.eprints.org/81/1/p801.pdf
Average queries per session
source: http://www2009.eprints.org/81/1/p801.pdf
Computer iPhone Mobile
1.94 1.82 1.7
Q: What do you use the internet on your mobile to do?
source: http://mobithinking.com/best-practices/mobile-internet-usage-attitudes-study
Two Diary StudiesKaren Church, Barry Smyth (2009)
Timothy Sohn, et al. (2008)
http://tinyurl.com/understandingintent
http://tinyurl.com/mobileinfoneeds
Topic % of Entries
Local services 24.2%
Travel & commuting 20.2%
General information 15.6%
Entertainment 12.8%
Trivia 6.4%
Information needs by topic
source: http://www2009.eprints.org/81/1/p801.pdf
Goal Mobile
Informational 58.3%
Geographical 31.1%
Personal information mgmt. 10.6%
Information needs by intent
source: http://www2009.eprints.org/81/1/p801.pdf
“72% of reported informa-
tion needs were prompted
by a contextual factor.”
✴ Answers over resultsMobile information needs are more defined than some desktop searches and are contained in shorter sessions.
Mobile Search Design Principles
✴ Answers over resultsMobile information needs are more defined than some desktop searches and are contained in shorter sessions.
✴ Precision over recallMobile 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.
Mobile Search Design Principles
✴ Location awarenessWhen users are searching for nearby places or services, filter the results to the user’s proximity.
Mobile Search Design Principles
✴ Location awarenessWhen users are searching for nearby places or services, filter the results to the user’s proximity.
✴ Time awarenessWhen users are interested in timely information, and filter results by time period.
Mobile Search Design Principles
✴ Location awarenessWhen users are searching for nearby places or services, filter the results to the user’s proximity.
✴ Time awarenessWhen users are interested in timely information, and filter results by time period.
✴ Social awarenessMobile search should both incorporate social signals as well as facilitate collaboration.
Mobile Search Design Principles
✴ 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.
2 In Summary
3DESIGN PATTERNS
FOR MOBILE SEARCH
Components
Search results
Search box
Sort controls
Faceted nav
Breadcrumbs
Activation Methods
Always visible
Button
Gesture
Display Methods
Modal
Full-screen
Inline
The Search Box
SortSearch...Always visible
Button
SortSearch...Gesture
Inline
Sort
Search...Gesture
Inline
Sort
Search...
Gesture
Inline
Sort
Search...
Gesture
Inline
Sort Controls
Best Match Price Date
Always visible
SortButton
Faceted Navigation
Best Match Price DateRefine
Best Match Price DateRefine
Filter by
Category Acoustic
Condition
Price
Seller
Buying Formats
Location
Best Match Price DateRefine
Filter by
Category Acoustic
Condition
Price
Seller
Buying Formats
Location
Best Match Price Date
New Refurb. Used Broken
Refine
Narrow by
Category Acoustic
Price
Buying Formats
Location
Best Match Price Date
New Refurb. Used Broken
Refine
Narrow by
Category Acoustic
Seller
Price
Buying Formats
Location
Best Match Price Date
New Refurb. Used Broken
Refine
Narrow by
Category Acoustic
Seller
Price
Buying Formats
Location
Best Match Price Date
Best Match Price Date
New Refurb. Used Broken
Refine
Sort by
Narrow by
Category Acoustic
Seller
Price
Buying Formats
Location
Search...Best Match Price DateSort
Electric Acoustic Aplifiers AccessBass
Always visible
Search...Best Match Price DateSort
Electric Acoustic Aplifiers AccessBass
Always visible
Best Match Price DateRefineGesture
Inline
Category Acoustic
Seller
Price
Buying Formats
Best Match Price DateRefineGesture
Inline
Best Match Price Date
New Refurb. Used Broken
Refine
Narrow by
Category Acoustic
Seller
Price
Buying Formats
Gesture
Inline
Best Match Price DateRefine RefineButton
Modal
Best Match Price Date
Category Acoustic
Seller
Price
Buying Formats
Refine RefineButton
Modal
Best Match Price Date
New Refurb. Used Broken
Refine
Narrow by
Category Acoustic
Seller
Price
Buying Formats
RefineButton
Modal
Gesture
Full-screen
Best Match Price DateRefine
Used Broken
Acoustic
Gesture
Full-screen
Best Match Price Date
New Refurb. Used Broken
Narrow by
Category Acoustic
Seller
Price
Buying Formats
RefineGesture
Full-screen
Best Match Price DateRefineGuitarButton
Full-screen
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
Full-screen
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
Full-screen
Breadcrumbs
Best Match Price DateRefineGuitar
Showing new, acoustic guitars. Sorting by price.
✴ Devote screen real estate to content over navigation
✴ Optimise the presentation of each facet
✴ Provide paths forward at the bottom of the page
3 In Summary
4IMPLEMENTATION
STRATEGIES
1. Native Apps
Pros:
✴ Apps feel native
✴ Greater access to OS features
✴ Works offline
✴ Marketed in app store
Cons:
✴ Must be built per platform
✴ Expensive to build and maintain
✴ App store must approve & takes cut of sale
2. Mobile Web Apps
Pros:
✴ One app for all mobile platforms
✴ Easier to update
✴ No maintenance needed for OS upgrades
✴ Keep all profits
Cons:
✴ Doesn’t feel native
✴ Lacks access to core OS features
3. Responsive Websites
Pros:
✴ One code base for all channels – desktop & mobile
✴ Cheap to build and maintain
✴ Consistent experience across channels
Cons:
✴ Definitely doesn’t feel native
✴ Not as optimizedfor each channel
✴ No offline access
✴ Lacks access to core OS features
Fluid Layouts
Declarative HTML
<!-- Main --><article id="main"> <h2>Main Column</h2></article>
<!-- Sidebar --><section id="sidebar"> <h2>Sidebar</h2></section>
Presentational CSS
/* Grid Config */@columns: 12;@column-width: 60;@gutter-width: 20;
/* Layout */article#main { .column(9);}section#sidebar { .column(3);}
Responsive Web Design
<head> <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" /></head>
/* Default */article#main { .column(9); }section#sidebar { .column(3); }
/* Mobile Layout */@media (max-width: 480px) { article#main { .column(12); } section#sidebar { .column(12); }}
Client-side Rendering
Client-side Rendering
✴ 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.
4 In Summary
http://www.alistapart.com/articles/organizing-mobile/
http://www.designcaffeine.com/2010/articles/348/
ENTERPRISE SEARCHMeetupswww.searchmeetups.com
ENTERPRISESEARCHLondon
ENTERPRISESEARCHFrankfurt
Designing Mobile Search
by Tyler Tate, TwigKitphotos by Matthew Kenwrick, ゆうくんと 呼んで, Mikhail Koninin, Neil Oliver,Iam Carroll, Pithawat Vachiramon, Kamshots
top related