Designing Mobile Search - Tyler Tate

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


type=”expandable”

/>

<widget:facets


type=”expandable”

/>

The Rise of the Cross-Channel Experience

Characteristics of Mobile Search

Design Patterns for Mobile Search

Implementation Strategies for Mobile Search


1

2

3

4

1THE RISE OF

CROSS-CHANNEL EXPERIENCES

photos by William Hook, Risager, and Whatleydude

http://www.flickr.com/photos/thefourelements/


http://www.flickr.com/photos/risager/


http://www.flickr.com/photos/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

http://ncrpr.ncr.com/web/rsdmkt/landingPages/documents/2010_global_consumer_resch_wp%20FINAL.pdf

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

http://www.webcredible.co.uk/user-friendly-resources/white-papers/online-travel.shtml

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

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

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


✴ OptimizationEach channel should play to its strengths.



✴ OptimizationEach channel should play to its strengths.

✴ ContinuityEach channel must be aware of all the others.


✴ 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

http://mobithinking.com/best-practices/mobile-internet-usage-attitudes-study


Average queries per session


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




Goal Mobile

Informational 58.3%

Geographical 31.1%

Personal information mgmt. 10.6%

Information needs by intent




“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.


✴ 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.



✴ 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 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


Filter by

Category Acoustic

Condition

Price

Seller

Buying Formats

Location


Filter by

Category Acoustic

Condition

Price

Seller

Buying Formats

Location


New Refurb. Used Broken

Refine

Narrow by

Category Acoustic

Price

Buying Formats

Location



Refine

Narrow by

Category Acoustic

Seller

Price

Buying Formats

Location



Refine

Narrow by

Category Acoustic

Seller

Price

Buying Formats

Location




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



Refine

Narrow by

Category Acoustic

Seller

Price

Buying Formats

Gesture

Inline

Best Match Price DateRefine RefineButton

Modal


Category Acoustic

Seller

Price

Buying Formats

Refine RefineButton

Modal



Refine

Narrow by

Category Acoustic

Seller

Price

Buying Formats

RefineButton

Modal

Gesture

Full-screen


Used Broken

Acoustic

Gesture

Full-screen



Narrow by

Category Acoustic

Seller

Price

Buying Formats

RefineGesture

Full-screen

Best Match Price DateRefineGuitarButton

Full-screen

Best Match Price DateRefineGuitarBest Match Price Date




Refine

Sort by

Narrow by

Price

RefineSearch...Button

Full-screen

Best Match Price DateRefineSearch...Best Match Price Date



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

<article id="main"> <h2>Main Column</h2></article>

<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/



UXmatters.com

http://www.uxmatters.com/

http://www.uxmatters.com/

http://www.designcaffeine.com/2010/articles/348/



ENTERPRISE SEARCHMeetupswww.searchmeetups.com

ENTERPRISESEARCHLondon

ENTERPRISESEARCHFrankfurt

http://www.searchmeetups.com

http://www.searchmeetups.com

Thank You!

@TylerTate

@TwigKit

www.twigkit.com

http://twigkit.com/blog/

http://twigkit.com/blog/


by Tyler Tate, TwigKitphotos by Matthew Kenwrick, ゆうくんと呼んで, Mikhail Koninin, Neil Oliver,Iam Carroll, Pithawat Vachiramon, Kamshots

Technology

Designing Mobile Search - Tyler Tate