how to increase engagement and conversions
TRANSCRIPT
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
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
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/
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
Only 2 out of 3 relevance + usability
https://youtu.be/6NVJkDUFEEo
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
RELEVANCE - Best practices
Handle typos, concatenation, plurals, ex: Barak Obama, ice-cream, eggsOut of the boxUse business metricsto sort results equivalent from textual standpointMandatory
Instant Search APIProductTank9. 11. 2016
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
RELEVANCE - Best practices
Handle typos, concatenation, plurals, ex: Barak Obama, ice-cream, eggsOut of the boxUse business metricsto sort results equivalent from textual standpointMandatory
Instant Search APIProductTank9. 11. 2016
RELEVANCE - Best practices
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
Instant Search APIProductTank9. 11. 2016
RELEVANCE - Best practices
Sylvains Presentationyesterday
Instant Search APIProductTank9. 11. 2016
Focus on each of the 3 pillars
SPEED
RELEVANCE
UI USABILITY
Instant Search APIProductTank9. 11. 2016
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
Focus on each of the 3 pillars
SPEED
RELEVANCE
UI USABILITY
Instant Search APIProductTank9. 11. 2016
USABILITY - Common
Autocomplete
Search result pageDESKTOP
Mix of both
MOBILE
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
USABILITY- Common
CNN.com No explicit placeholder, only Search CNNHIGHLIGHTSExplicit placeholderNot recommended
GAP.com No explicit placeholder, only SearchNot recommended
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
USABILITY - Common
HIGHLIGHTSLarge search field
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
USABILITY - Common
GREAT
GREAT
Instant Search APIProductTank9. 11. 2016
USABILITY - Common
Geo-location based resultsUser preferencesHIGHLIGHTSContext awareness
Instant Search APIProductTank9. 11. 2016
USABILITY - Autocomplete
AUTOCOMPLETE DROPDOWNUsability Best practices
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
USABILITY - Autocomplete
HIGHLIGHTSDifferent results type are mixedNot recommendedhttps://youtu.be/FcY9VEDn900
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
USABILITY - Autocomplete
HIGHLIGHTSOne section per data typeGREAThttps://youtu.be/1bI8ISY_3BI
Instant Search APIProductTank9. 11. 2016
USABILITY - Autocomplete
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
Instant Search APIProductTank9. 11. 2016
USABILITY - Autocomplete
HIGHLIGHTSText only resultsNot recommended
Instant Search APIProductTank9. 11. 2016
USABILITY - Autocomplete
HIGHLIGHTSRich resultsHorizontal layoutGREAT
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
USABILITY - AutocompleteHIGHLIGHTSShortcuts to start browsing/exploringhttps://youtu.be/KrH9CCVGMWc
Instant Search APIProductTank9. 11. 2016JEL 1min at 18min
USABILITY - Autocomplete
https://www.awok.com/HIGHLIGHTSShortcuts to start browsing/exploring
Instant Search APIProductTank9. 11. 2016JEL 1min at 18min
USABILITY Search result page
SEARCH RESULT PAGEUsability Best practices
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
USABILITY Search Result page
HIGHLIGHTSMultiple ranking strategiesMost of the time, no need to- Sort Descending price- Sort by Alphabetical order
Instant Search APIProductTank9. 11. 2016
USABILITY - Common
https://demos.algolia.com/livestream/cards/HIGHLIGHTSMultiple result types from a same index
Instant Search APIProductTank9. 11. 2016?
USABILITY Search Result page
HIGHLIGHTSMaximized space to display resultsOn view aggregating best results
Instant Search APIProductTank9. 11. 2016
USABILITY Search Result pageHIGHLIGHTSOne dedicated view per data type
Instant Search APIProductTank9. 11. 2016
USABILITY - Mobile
MOBILE SEARCHUsability Best practices
Instant Search APIProductTank9. 11. 2016
USABILITY Mobile Search
HIGHLIGHTSThink About the lack of space
30%10%60%left
Instant Search APIProductTank9. 11. 2016
USABILITY Mobile Search
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
Instant Search APIProductTank9. 11. 2016
USABILITY Mobile Search
HIGHLIGHTSMaximized space to display resultsOn view aggregating best results
Instant Search APIProductTank9. 11. 2016
USABILITY Mobile Search
On mobile should we let people search forQuery suggestions?
OR
Directly for results?=> Still an open question
Instant Search APIProductTank9. 11. 2016
USABILITY Mobile Search
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.
Instant Search APIProductTank9. 11. 2016
USABILITY Mobile Search
GREATBADHIGHLIGHTSUser-friendly filters menu- Instant Visual feedback when filtering
- General overview of available facets thanks folding
- Easy access back to the results
Instant Search APIProductTank9. 11. 2016
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
Instant Search APIProductTank9. 11. 2016
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