How to increase engagement and conversions

Prsentation PowerPoint

Instant Search [email protected]@JanPetrJan PetrSoftware Engineer

How to increase engagement and conversionsAn overview of the best search UX practices

ProductTank 9. 11. 2016

Instant Search APIProductTank9. 11. 2016

CONTEXTBiggest challenges our customers face today?

Technical level

Understand the valueof a Great Search UX

Organization & Internal politics

Instant Search APIProductTank9. 11. 2016Build vs Buy (mentioned, but not displayed because focusing on customers)- Some people think they can easily handle search by themselves thanks Open sources solutions- Challenge of understanding whats the Algolia value proposition

Technical challengesAddressing them by making the service always easier to use: API features, clients, libraries, documentation

Organizational / internal politicsNot always putting the right resources to work on the projectTalking to search experts, or backend developers. The UX designer, front-end are no enough involved

Understand the value of a Great Search UXWhat it brings (why?)What it means and includes (what?)How to achieve it (how?)

=> As a consequence, people who dont understand that, tend to put not enough resourcesNot the right peopleStop to early in the implementation process

Extra one: personalization Also that its not only about personalization / AI Scoop: AMAZON doesnt do any personalization of the search results

TODAYs AGENDAWhy a good User Experience (UX) matters when it comes to search & browsing

What Great Search UX means

Best practices to implement a Great Search UX (How?)

Questions & Answers

Instant Search APIProductTank9. 11. 2016As you can already guess based on the presentation title, we goanna will focus today on UXExplaining why its important, what it exactly means, and how?

In the best practices part, well share what we usually share with our customers

WHY it matters


Outcomes for the End-users People can find what theyre looking for more easily. In less time, less attempts, less hassles=> Rewarding experience that gives them a positive feeling.(without having to be tech savvy or an expert in the domain)

Instant Search APIProductTank9. 11. 2016Every platform generates valuable content that people want to access in a seamless way. There are many ways to access content. People have been working on that for decades, building directories, smart navigation flows, etc.. A search engine is a way of providing access to that content.

And that even if:Are not experts in the domainAre not tech savvyThey dont know how to search for something

Outcomes for YouIncreases the site / mobile app usagePage views, time spent, total salesImproves revenuesIncrease in sales, in ad revenueImproves Branding & Customer loyaltybetter customer journey compared to competitor Decrease no-results pagesLower bounce rate

Instant Search APIProductTank9. 11. 2016Improved sales.Effective site search means better usability, so customers can find things more quickly.

This can translate into higher sales, as customers who find what they are looking for easily are more likely to make a purchase, while site search also offers opportunities for merchandising.

Thats actually confirmed by numbers weve collected among our user base.

More intuitive search and navigation means higher conversion ratesin sales, number of page views, or any other action completionHigher conversion rates.More intuitive search and navigation means higher conversion rates.Increased site usage.A better user experience means that customers are more likely to spend more time on the site, and can boost the number of registrations and return visits.Improved customer retention and loyalty.More loyalty as customers know they can find products more easily. Improved branding & loyalty.Improving user experience means more customer satisfaction, and a better customer journey compared to competitor websites.

----

Improved sales.Effective site search means better usability, so customers can find things more quickly.This can translate into higher sales, as customers who find what they are looking for easily are more likely to make a purchase, while site search also offers opportunities for merchandising. More intuitive search and navigation means higher conversion ratesin sales, number of page views, or any other action completion

Higher conversion rates.More intuitive search and navigation means higher conversion rates.

Increased site usage.End-users are more likely to spend more time on the site, and can boost the number of registrations and return visits.

Improved customer retention and loyalty.More loyalty as customers know they can find products more easily.

Improved branding.Improving user experience means more customer satisfaction, and a better customer journey compared to competitor websites.

+ If your competitor have it, but not you, high risk of loss of revenue

Outcomes for You

- Search depth increased by +60%- Mobile sessions with search jump +250%- Bounce rate -17%

- Increase in their average order value by +12%- Increase in their conversion rate 9%

- Increase of the search volume by 5x- Visitors who use search view 3x more pages and spend 6x longer per session


WHAT Great UX means

Instant Search APIProductTank9. 11. 2016Lets see

SPEEDwherever you are

RELEVANCETextual & BusinessUSABILITYof the User-Interface (UI)

SEARCH UX - a mix of 3 ingredients

Instant Search APIProductTank9. 11. 2016To deliver great & meaningful Search UX to the end-users, those 3

to the users they need to be seen as equaly important and complementary. Thats the combination of the 3 that makes search ux be great or not, and leads to the outcomes previously listed.

USABILITYof the User-Interface (UI)

Whats usability?

In short, its a quality attribute of the User-Interface (with which user interact with the system), covering whether the system is easy to learn, efficient to use, pleasantand so forth.

It includes the UI looknfeel, but not only.easy to learnefficient to usepleasantSource: https://www.nngroup.com/articles/usability-101-introduction-to-usability/


SPEED

USABILITY

All or NothingMust be seen as Equally important and Complementary++Thats the combination of the 3 that makes a Search UX be great or notand leads to the outcomes previously listed.RELEVANCE

Instant Search APIProductTank9. 11. 2016To deliver great & meaningful Search UX to the end-users, those 3

to the users they need to be seen as equaly important and complementary. Thats the combination of the 3 that makes search ux be great or not, and leads to the outcomes previously listed.

Facts about Search UX

SPEED

RELEVANCE+

UI USABILITY+=GREATSEARCH USER-EXPERIENCE


Only 1 out of 3 relevance

https://www.smashingmagazine.com/search-results/?q=

Instant Search APIProductTank9. 11. 2016AC less than 1min

Only 2 out of 3 relevance + speed

https://youtu.be/ploNKZoOn10


Only 2 out of 3 relevance + usability

https://youtu.be/6NVJkDUFEEo


3 of 3 relevance + speed + usability

https://youtu.be/EkYftSlAPzw

Instant Search APIProductTank9. 11. 2016Explain on high level I see results from 1st keystroke, highlighting, tags

HOW? Best practices

Instant Search APIProductTank9. 11. 2016Things we look at when reviewing an implementation (built or not with Algolia)

Focus on each of the 3 pillars

SPEED

RELEVANCE

UI USABILITY


RELEVANCE - Best practices

Handle typos, concatenation, plurals, ex: Barak Obama, ice-cream, eggsOut of the boxUse business metricsto sort results equivalent from textual standpointMandatory


199 britnney spears163 britnry spears147 breatny spears147 brittiney spears147 britty spears147 brotney spears147 brutney spears133 britteney spears133 briyney spears121 bittany spears121 bridney spears121 britainy spears121 britmey spears109 brietney spears109 brithny spears109 britni spears109 brittant spears98 bittney spears

98 brittiany spears98 btitney spears89 brietny spears89 brinety spears89 brintny spears89 britnie spears89 brittey spears89 brittnet spears89 brity spears89 ritney spears80 bretny spears80 britnany spears73 brinteny spears73 brittainy spears73 pritney spears66 brintany spears66 britnery spears59 briitney spears

59 britinay spears54 britneay spears54 britner spears54 britneys spears54 britnye spears54 britt spears54 brttany spears48 bitany spears48 briny spears48 brirney spears48 britant spears48 britnety spears48 brittanny spears48 brttney spears44 birttany spears44 brittani spears44 brityney spears44 brtitney spears

488941 britney spears40134 brittany spears36315 brittney spears24342 britany spears7331 britny spears6633 briteny spears2696 britteny spears1807 briney spears1635 brittny spears1479 brintey spears1479 britanny spears1338 britiny spears1211 britnet spears1096 britiney spears991 britaney spears991 britnay spears

811 brithney spears811 brtiney spears664 birtney speas664 brintney spears664 briteney spears601 bitney spears601 brinty spears544 brittaney spears544 brittnay spears364 britey spears364 brittiny spears329 brtney spears269 bretney spears269 britneys spears244 britne spears244 brytney spears220 breatney spears220 britiany spears

TYPO-TOLERANCE IS A MUST HAVE!The 594 ways people type Britney Spears (Google data)

Instant Search APIProductTank9. 11. 2016(1min)

How do you handle typing mistakes? You never know what and how people will write. Example, there are 600ways to write Britney Spears. Its the job of the search engine to understand the user, not the other way around.

Ranking strategyRecord 1{ id: "record1", title: "Blue case for iphone", description: "Protect your iPhone with this titanium case. Compatible with iPhone 4, iPhone 5, iPhone 5S, iPhone 6, iPhone 6s", price: 200, nb_likes: 300}Record 2 the most relevant one{ id: "record2", title: "iPhone 6s", description: "Smartphone designed and marketed by Apple Inc. They run Apple's iOS mobile operating system. It replaces your phone, iPod, digital camera, radio, travel alarm clock, portable TV, calculator and white noise machine.", price: 200, nb_likes: 300}

iphone1x6x

Instant Search APIProductTank9. 11. 2016How do you rank results? Do you count the number of times you find the word in the results? On the example above, the blue case for iphone has 6 times the word iphone only because its compatible with Iphone 4,5,6,

Whereas the product Iphone 6s has only one time the word iphone, but at the first position of the title. This is likely to be the most relevant.

No only true with the previous example. It happens all the time.

Custom rankingTextual relevance is great, but what about your business metrics?To provide the best relevance, you must use all the information available.https://youtu.be/xwL7SlxnuCs

Instant Search APIProductTank9. 11. 2016No only true with the previous example. It happens all the time. Here an example of the different way people search for


Handle typos, concatenation, plurals, ex: Barak Obama, ice-cream, eggsOut of the boxUse business metricsto sort results equivalent from textual standpointMandatory



Handle typos, concatenation, plurals, ex: Barak Obama, ice-cream, eggsOut of the boxUse business metricsto sort results equivalent from textual standpointMandatoryPrioritize attributes against each othersto return relevant resultsMandatoryDefine sets of synonymsto handle industry specific jargonImportantContext awarenessGeolocation, personalization of the dataNice to haveMandatory



Sylvains Presentationyesterday



SPEED

RELEVANCE

UI USABILITY


SPEED - How fast need it be?

Source : https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/

Instant Search APIProductTank9. 11. 2016Instantinterval within which users wont notice any delay

--0.1 to 0.2 secondsResearchpoints to this interval as the range of the maximum acceptable response time to simulateinstantaneousbehavior an interval within which users barely, if at all, notice a delay.10.5 to 1 secondsThis is the maximum response time forimmediatebehavior. This interval is usually the response time from an interlocutor in a human-to-human conversation.2Delays within this interval are noticeable but easily tolerated by most users. During this time, the user must receive an indication that their command (such as their click of a button or link) has been accepted, assuming that the signal was not already sent during the previous interval.2 to 5 secondsPsychologistMihaly Csikszentmihalyidefines afloworoptimal experienceas a state when people experience concentration, absolute absorption in an activity and deep enjoyment.35 to 10 secondsAccording to theNational Center for Biotechnology Information at the US National Library of Medicine, the average attention span of a human being dropped from 12 seconds in 2000 to 8.25 seconds in 2015. Guess what? That is 1 second less than the attention span of a goldfish! As a simplification and to emphasize our superiority to the goldfish we consider 10 seconds as the absolute maximum time of a usersattention span.4The user would still be focused on their task but would become easily distracted. This is the time for the system to engage the user in the process; if this is not done, then the user will most probably be lost forever.

Half a second delaycaused 20% drop in traffic

Every 100ms of latencycosts them 1% in salesSPEED - How speed matters

Instant Search APIProductTank9. 11. 2016An everage person attention is around 8s (less than a goldfish 10s)

So why instant, speed, is so important? - Google realized that adding half a second in response time caused a 20% drop in traffic? - Amazon measured that every 100ms costs them 1% in sales.Speed matters. And speed is the one thing we never compromise on.

SPEED - Best practices

Front-End implementationmaking request come from the end-user deviceNetwork Latency 50-60msTotal < 180-200msTARGET

Instant Search APIProductTank9. 11. 2016Front-end implementation

Distributed Search network

Small Records- The larger the records are, the more expensive (in computation and storage resource) it is for the system to compute set of resultsBy filtering / selecting only the attributes that need to sit in the search engine

=> For us its key to have our

SPEED - Best practicesBackendimplementation

Frontendimplementation

Instant Search APIProductTank9. 11. 2016COLLIN

SPEED - Best practices

Same experience via DSNSame experience wherever end-users are

Front-End implementationmaking request come from the end-user deviceNetwork Latency 50-60msMake Records be smallincluding only the needed attributesAvg. Processing time 20msTotal < 180-200msTARGET

Instant Search APIProductTank9. 11. 2016Front-end implementation

Distributed Search network

Small Records- The larger the records are, the more expensive (in computation and storage resource) it is for the system to compute set of resultsBy filtering / selecting only the attributes that need to sit in the search engine

=> For us its key to have our


SPEED

RELEVANCE

UI USABILITY


USABILITY - Common

Autocomplete

Search result pageDESKTOP

Mix of both

MOBILE


USABILITY - CommonHIGHLIGHTSResults from the first keystrokeAs you type experiencehttps://youtu.be/1rUMqzyaa44

Instant Search APIProductTank9. 11. 2016JEL 1min at 12min

USABILITY- Common

Results from the first keystroke outcomesAmplifies the feeling of instantnessAs you type experience outcomesInstant visual feedback that guides the user when performing is search query


USABILITY- Common

CNN.com No explicit placeholder, only Search CNNHIGHLIGHTSExplicit placeholderNot recommended

GAP.com No explicit placeholder, only SearchNot recommended


USABILITY- Common

Birchbox.fr Search for a product, a brand, a tutorial - Helps the user in his search by telling him what he can search for- Improves its perception of the results, and their relevanceExplicit placeholder outcomesGREAT


USABILITY - Common

HIGHLIGHTSLarge search field


USABILITY - Common

Algolia.comAlgolia's API makes it easy to deliver great search experiences to your users.

algolia search

DefaultHIGHLIGHTSElegant highlightingAlgolia.comAlgolia's API makes it easy to deliver great search experiences to your users.Bold

Algolia.comAlgolia's API makes it easy to deliver great search experiences to your users.Bold+ bright color


USABILITY - Common

Algolia.comAlgolia's API makes it easy to deliver great search experiences to your users.LightBackgroundcolorAlgoliaAlgoliasearch

Algolia.comAlgolia's API makes it easy to deliver great search experiences to your users.LightBackgroundColor + bold

AlgoliaAlgolia.comAlgolia's API makes it easy to deliver great search experiences to your users.LightBackgroundColor + bold

AlgoliaAlgolia.comAlgolia's API makes it easy to deliver great search experiences to your users.Too contrastedBackgroundcolorAlgoliaAlgoliasearch


USABILITY - Common

GREAT

GREAT


USABILITY - Common

Geo-location based resultsUser preferencesHIGHLIGHTSContext awareness


USABILITY - Autocomplete

AUTOCOMPLETE DROPDOWNUsability Best practices


USABILITY - AutocompleteOne section per data type- Difficult to rank results that have a heterogeneous popularity- Some results always appear lower in the list- Difficult to quickly distinguish each type of data: companies, events, people



HIGHLIGHTSDifferent results type are mixedNot recommendedhttps://youtu.be/FcY9VEDn900


USABILITY - AutocompleteOne section per data type- The end-user can quickly see the most relevant and popular for each type of data

- Identify when there is no result for a given data typeGREAT



HIGHLIGHTSOne section per data typeGREAThttps://youtu.be/1bI8ISY_3BI



Rich resultsHorizontal layoutHelps to better understand the results (photos, rating, location, )More chance to identify why results are matching via highlightingEasy focus on a specific type of dataBetter use of the horizontal space (optimized for widescreens)Avoids the user to scroll down to see all results



HIGHLIGHTSText only resultsNot recommended



HIGHLIGHTSRich resultsHorizontal layoutGREAT


USABILITY - AutocompleteVery handy when the category tree is largeEnd-users may not always know exactly what theyre looking for. Instead they want to browse, and search can help them.Often used when people search for concept / taxonomies like on e-commerce, Pinterest, 8 tracks, Shortcuts to start browsing/exploring


USABILITY - AutocompleteHIGHLIGHTSShortcuts to start browsing/exploringhttps://youtu.be/KrH9CCVGMWc



https://www.awok.com/HIGHLIGHTSShortcuts to start browsing/exploring


USABILITY Search result page

SEARCH RESULT PAGEUsability Best practices


USABILITY Search Result page

HIGHLIGHTSAvoid Inline Scroll AreasLeads to two main UX issues- Invisible content & scrollbars- Scroll hijacking

=> Better to have a Show more linkTo avoid



HIGHLIGHTSMultiple ranking strategiesMost of the time, no need to- Sort Descending price- Sort by Alphabetical order


USABILITY - Common

https://demos.algolia.com/livestream/cards/HIGHLIGHTSMultiple result types from a same index

Instant Search APIProductTank9. 11. 2016?


HIGHLIGHTSMaximized space to display resultsOn view aggregating best results


USABILITY Search Result pageHIGHLIGHTSOne dedicated view per data type


USABILITY - Mobile

MOBILE SEARCHUsability Best practices


USABILITY Mobile Search

HIGHLIGHTSThink About the lack of space

30%10%60%left



HIGHLIGHTSThink About the lack of space

Does as you type make really sense in a UI where only the first result get displayed?=> Probably not that much



HIGHLIGHTSMaximized space to display resultsOn view aggregating best results



On mobile should we let people search forQuery suggestions?

OR

Directly for results?=> Still an open question



HIGHLIGHTSSearch keywords as tagsSuggested filters as tags Terms become easy to add / remove Can be main / sub categories or any relevant attribute that helps the user narrowing down the set of results.



GREATBADHIGHLIGHTSUser-friendly filters menu- Instant Visual feedback when filtering

- General overview of available facets thanks folding

- Easy access back to the results


More coming soon!

Instant Search APIProductTank9. 11. 2016JE (1 min, At 29)

SummarySearch is a communication, it needs to have flow and needs to be understandableUX requires the combination of Relevance + Speed + UI Usability.There are many ways how make the search UX exceptional


More coming soon!

PLAYBOOK

https://grader.algolia.com

Instant Search APIProductTank9. 11. 2016You havent managed to remember all those best practices?

QUESTIONS / ANSWERS

Instant Search APIProductTank9. 11. 201610 mins

How to increase engagement and conversions

Technology

Transcript of How to increase engagement and conversions