93
Designing Mobile Search by Tyler Tate, TwigKit photos by Matthew Kenwrick, ゆうくんと 呼んで, Mikhail Koninin, Neil Oliver, Iam Carroll, Pithawat Vachiramon, Kamshots

Designing Mobile Search, NYC Edition

Embed Size (px)

Citation preview

Page 1: Designing Mobile Search, NYC Edition

Designing Mobile Search

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

Page 2: Designing Mobile Search, NYC Edition

design search

Page 3: Designing Mobile Search, NYC Edition
Page 4: Designing Mobile Search, NYC Edition
Page 5: Designing Mobile Search, NYC Edition

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.

.

Units Shipped

Page 6: Designing Mobile Search, NYC Edition

Bring Your Own Device

✴ 28% of the current workforce is already using personal devices for work

✴ 56% of US companies already have a formal BYOD policy in place

✴ 94% of global companies plan to have a BYOD policy by mid-2013

– Citrix, http://www.citrix.com/site/resources/dynamic/additional/Citrix_BYO_Index_report.pdf

Page 7: Designing Mobile Search, NYC Edition

Mobile Searchers

Design Principles

Design Solutions

Implementation Strategies

Designing Mobile Search

2

3

4

1

Page 9: Designing Mobile Search, NYC Edition

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

Page 10: Designing Mobile Search, NYC Edition

Average Queries per Session

Computer iPhone Mobile

1.94 1.82 1.7

– Google, http://www2009.eprints.org/81/1/p801.pdf

Page 11: Designing Mobile Search, NYC Edition

Information Needs

Motive

Type

Page 12: Designing Mobile Search, NYC Edition

Casual

Search Motive

Page 13: Designing Mobile Search, NYC Edition

Casual Lookup

Search Motive

Page 14: Designing Mobile Search, NYC Edition

Casual Lookup Learn

Search Motive

Page 15: Designing Mobile Search, NYC Edition

Casual Lookup Learn Investigate

Search Motive

Page 16: Designing Mobile Search, NYC Edition

Informational

Search Type

Page 17: Designing Mobile Search, NYC Edition

Informational Geographic

Search Type

Page 18: Designing Mobile Search, NYC Edition

Informational Geographic Personal Info

Search Type

Page 19: Designing Mobile Search, NYC Edition

Informational Geographic Personal Info Transactional

Search Type

Page 20: Designing Mobile Search, NYC Edition

Informational Geographic Personal Info Transactional

Search Type

Page 21: Designing Mobile Search, NYC Edition

Casual Lookup Learn Investigate

Informational

Geographic

PersonalInformation

Management

Transactional

Page 22: Designing Mobile Search, NYC Edition

Casual Lookup Learn Investigate

Informational

Geographic

PersonalInformation

Management

Transactional

TriviaWindow

ShoppingInformationGathering

Research

Page 23: Designing Mobile Search, NYC Edition

Casual Lookup Learn Investigate

Informational

Geographic

PersonalInformation

Management

Transactional

TriviaWindow

ShoppingInformationGathering

Research

DirectionsFriend

Check-insLocal Pointsof Interest

TravelPlanning

Page 24: Designing Mobile Search, NYC Edition

Casual Lookup Learn Investigate

Informational

Geographic

PersonalInformation

Management

Transactional

TriviaWindow

ShoppingInformationGathering

Research

DirectionsFriend

Check-insLocal Pointsof Interest

TravelPlanning

CheckingCalendar

CheckingMessages

SituationAnalysis

LifestylePlanning

Page 25: Designing Mobile Search, NYC Edition

Casual Lookup Learn Investigate

Informational

Geographic

PersonalInformation

Management

TransactionalPrice

ComparisonActing on

NotificationsOnline

ShoppingProduct

Monitoring

TriviaWindow

ShoppingInformationGathering

Research

DirectionsFriend

Check-insLocal Pointsof Interest

TravelPlanning

CheckingCalendar

CheckingMessages

SituationAnalysis

LifestylePlanning

Page 26: Designing Mobile Search, NYC Edition

Delayed Grati!cation

Later30%

Never25%

At the time45%

– Sohn et al. 2008, http://tinyurl.com/mobileinfoneeds

Page 28: Designing Mobile Search, NYC Edition

1. Content Trumps Controls

Most search controls (such as sorting and filtering) should be displaced off-screen so that search results take center stage.

Page 29: Designing Mobile Search, NYC Edition

2. Answers Over Results

For “lookup” infor-mation needs, it’s often more ef!cient to directly answering the user’s query rather than force them to click on a search result.

Page 30: Designing Mobile Search, NYC Edition

3. Contextual Sensitivity

Strive for awareness of the the user’s context, such as their task, location, and social surroundings.

Page 31: Designing Mobile Search, NYC Edition

4. Cross-Channel Continuity

The actions performed on any particular channel should propagate to all other channels of the ecosystem.

Page 32: Designing Mobile Search, NYC Edition

4. Cross-Channel Continuity

Page 33: Designing Mobile Search, NYC Edition

3DESIGN

SOLUTIONS

Page 34: Designing Mobile Search, NYC Edition
Page 35: Designing Mobile Search, NYC Edition

re!ne searchresults

input

Page 36: Designing Mobile Search, NYC Edition

re!ne searchresults

input

Page 37: Designing Mobile Search, NYC Edition

The Search Box

Page 38: Designing Mobile Search, NYC Edition
Page 39: Designing Mobile Search, NYC Edition

SortSearch...In the navigation bar

Page 40: Designing Mobile Search, NYC Edition

Sort

Search...

In a secondary

toolbar

Page 41: Designing Mobile Search, NYC Edition

SortSearch...Via a pull-to-reveal

gesture

Page 42: Designing Mobile Search, NYC Edition

Sort

Search...Via a pull-to-reveal

gesture

Page 43: Designing Mobile Search, NYC Edition

Sort

Search...

Via a pull-to-reveal

gesture

Page 44: Designing Mobile Search, NYC Edition

Sort

Search...

Via a pull-to-reveal

gesture

Page 45: Designing Mobile Search, NYC Edition
Page 46: Designing Mobile Search, NYC Edition

As-you-type suggestions

Page 47: Designing Mobile Search, NYC Edition

As-you-type suggestions

Page 48: Designing Mobile Search, NYC Edition

Other Input Methods

Page 49: Designing Mobile Search, NYC Edition

Location

Page 50: Designing Mobile Search, NYC Edition

Audio

Page 51: Designing Mobile Search, NYC Edition

Visual

Page 52: Designing Mobile Search, NYC Edition

Drawing

Page 53: Designing Mobile Search, NYC Edition

re!ne searchresults

input

Page 54: Designing Mobile Search, NYC Edition

re!ne

input

searchresults

Page 55: Designing Mobile Search, NYC Edition

Display Formats

Page 56: Designing Mobile Search, NYC Edition

List

Page 57: Designing Mobile Search, NYC Edition

Grid

Page 58: Designing Mobile Search, NYC Edition

Map

Page 59: Designing Mobile Search, NYC Edition

Augmented

Reality

Page 60: Designing Mobile Search, NYC Edition

Toggling the Display Format

Page 61: Designing Mobile Search, NYC Edition

Segmented

control in a

toolbarList MapMap Images

Search...

Page 62: Designing Mobile Search, NYC Edition

Segmented

control centered

in the navigation

bar

List MapMap Images

Page 63: Designing Mobile Search, NYC Edition

Single button in

the navigation

bar

Search... Map

Page 64: Designing Mobile Search, NYC Edition

re!ne

input

searchresults

Page 65: Designing Mobile Search, NYC Edition

input

searchresultsre!ne

Page 66: Designing Mobile Search, NYC Edition

Inline Controls

Page 67: Designing Mobile Search, NYC Edition
Page 68: Designing Mobile Search, NYC Edition
Page 69: Designing Mobile Search, NYC Edition

Dedicated Screen

Page 70: Designing Mobile Search, NYC Edition

Best Match Price DateRefine

Page 71: Designing Mobile Search, NYC Edition

Best Match Price DateRefine

Filter by

Category Acoustic

Condition

Price

Seller

Buying Formats

Location

Filtering

Page 72: Designing Mobile Search, NYC Edition

Best Match Price Date

New Refurb. Used Broken

Refine

Narrow by

Category Acoustic

Price

Buying Formats

Location

Filtering with a

segmented

control

Page 73: Designing Mobile Search, NYC Edition

Best Match Price Date

New Refurb. Used Broken

Refine

Narrow by

Category Acoustic

Seller

Price

Buying Formats

Location

Filtering with a

slider

Page 74: Designing Mobile Search, NYC Edition

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

Page 75: Designing Mobile Search, NYC Edition

Dedicated re!nement screens

Page 76: Designing Mobile Search, NYC Edition

Accessing the Re!nement Screen

Page 77: Designing Mobile Search, NYC Edition

Best Match Price DateRefineGuitarButton in the

navigation bar

Page 78: Designing Mobile Search, NYC Edition

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

Page 79: Designing Mobile Search, NYC Edition

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

Page 80: Designing Mobile Search, NYC Edition

Button in the navigation bar

Page 81: Designing Mobile Search, NYC Edition

Gesture

Page 82: Designing Mobile Search, NYC Edition

Best Match Price DateRefine

Used Broken

Acoustic

Gesture

Page 83: Designing Mobile Search, NYC Edition

Best Match Price Date

New Refurb. Used Broken

Narrow by

Category Acoustic

Seller

Price

Buying Formats

RefineGesture

Page 84: Designing Mobile Search, NYC Edition

Button or gesture

Page 85: Designing Mobile Search, NYC Edition

Button and popover

Page 86: Designing Mobile Search, NYC Edition

4IMPLEMENTATION

STRATEGIES

Page 87: Designing Mobile Search, NYC Edition

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

Page 88: Designing Mobile Search, NYC Edition

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

Page 89: Designing Mobile Search, NYC Edition

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

Page 90: Designing Mobile Search, NYC Edition
Page 91: Designing Mobile Search, NYC Edition

ENTERPRISE SEARCHMeetupswww.searchmeetups.com

ENTERPRISESEARCHLondon

ENTERPRISESEARCHFrankfurt

Page 92: Designing Mobile Search, NYC Edition

Thank You!

@TylerTate

@TwigKit

www.twigkit.com

Page 93: Designing Mobile Search, NYC Edition

Designing Mobile Search

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