The document discusses best practices for search user experience (UX). It emphasizes that great search UX requires a combination of relevance, speed, and usability. It provides examples of how to improve each of these areas, such as handling typos to increase relevance, meeting speed targets to reduce abandonment, and using autocomplete, rich results and filters to enhance usability. The overall goal is to create a search experience that allows users to easily find relevant information in a fast and rewarding way.

1. Instant Search API
ProductTank 9. 11. 2016
Instant Search API
honza@algolia.com
@JanPetr
Jan Petr
Software Engineer
How to increase engagement and conversions
An overview of the best search UX practices
ProductTank – 9. 11. 2016

2. Instant Search API
ProductTank 9. 11. 2016TODAY’s AGENDA
Why 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

3. Instant Search API
ProductTank 9. 11. 2016
WHY it matters

4. Instant Search API
ProductTank 9. 11. 2016Outcomes for the End-users
People can find what
they’re 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)

5. Instant Search API
ProductTank 9. 11. 2016Outcomes for You
Increases the site / mobile app usage
Page views, time spent, total sales
Improves revenues
Increase in sales, in ad revenue
Improves Branding & Customer loyalty
better customer journey compared to competitor
Decrease no-results pages
Lower bounce rate

6. Instant Search API
ProductTank 9. 11. 2016Outcomes 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

7. Instant Search API
ProductTank 9. 11. 2016
WHAT Great UX means

8. Instant Search API
ProductTank 9. 11. 2016
SPEED
wherever you are
RELEVANCE
Textual & Business
USABILITY
of the User-Interface (UI)
SEARCH UX - a mix of 3 ingredients

9. Instant Search API
ProductTank 9. 11. 2016
SPEED USABILITY
All or Nothing
Must be seen as Equally important and Complementary
+ +
That’s the combination of the 3 that makes a Search UX be great or not
and leads to the outcomes previously listed.
RELEVANCE

10. Instant Search API
ProductTank 9. 11. 2016Only 2 out of 3 – relevance + speed
https://youtu.be/ploNKZoOn10

11. Instant Search API
ProductTank 9. 11. 2016Only 2 out of 3 – relevance + usability
https://youtu.be/6NVJkDUFEEo

12. Instant Search API
ProductTank 9. 11. 20163 of 3 – relevance + speed + usability
https://youtu.be/EkYftSlAPzw

13. Instant Search API
ProductTank 9. 11. 2016
HOW? Best practices

14. Instant Search API
ProductTank 9. 11. 2016Focus on each of the 3 pillars
SPEEDRELEVANCE UI USABILITY

15. Instant Search API
ProductTank 9. 11. 2016
199 britnney spears
163 britnry spears
147 breatny spears
147 brittiney spears
147 britty spears
147 brotney spears
147 brutney spears
133 britteney spears
133 briyney spears
121 bittany spears
121 bridney spears
121 britainy spears
121 britmey spears
109 brietney spears
109 brithny spears
109 britni spears
109 brittant spears
98 bittney spears
98 brittiany spears
98 btitney spears
89 brietny spears
89 brinety spears
89 brintny spears
89 britnie spears
89 brittey spears
89 brittnet spears
89 brity spears
89 ritney spears
80 bretny spears
80 britnany spears
73 brinteny spears
73 brittainy spears
73 pritney spears
66 brintany spears
66 britnery spears
59 briitney spears
59 britinay spears
54 britneay spears
54 britner spears
54 britney’s spears
54 britnye spears
54 britt spears
54 brttany spears
48 bitany spears
48 briny spears
48 brirney spears
48 britant spears
48 britnety spears
48 brittanny spears
48 brttney spears
44 birttany spears
44 brittani spears
44 brityney spears
44 brtitney spears
488941 britney spears
40134 brittany spears
36315 brittney spears
24342 britany spears
7331 britny spears
6633 briteny spears
2696 britteny spears
1807 briney spears
1635 brittny spears
1479 brintey spears
1479 britanny spears
1338 britiny spears
1211 britnet spears
1096 britiney spears
991 britaney spears
991 britnay spears
811 brithney spears
811 brtiney spears
664 birtney speas
664 brintney spears
664 briteney spears
601 bitney spears
601 brinty spears
544 brittaney spears
544 brittnay spears
364 britey spears
364 brittiny spears
329 brtney spears
269 bretney spears
269 britneys spears
244 britne spears
244 brytney spears
220 breatney spears
220 britiany spears
TYPO-TOLERANCE IS A MUST HAVE!
The 594 ways people type Britney Spears (Google data)

16. Instant Search API
ProductTank 9. 11. 2016Custom ranking
Textual 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

17. Instant Search API
ProductTank 9. 11. 2016RELEVANCE - Best practices
Handle typos, concatenation, plurals, …
ex: Barak Obama, ice-cream, eggs
Out of the box
Use business metrics
to sort results equivalent from textual standpoint
Mandatory
Prioritize attributes against each others
to return relevant results
Mandatory
Define sets of synonyms
to handle industry specific jargon
Important
Context awareness
Geo–location, personalization of the data
Nice to have
Mandatory

18. Instant Search API
ProductTank 9. 11. 2016Focus on each of the 3 pillars
SPEEDRELEVANCE UI USABILITY

19. Instant Search API
ProductTank 9. 11. 2016SPEED - How fast need it be?
Source : https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/

20. Instant Search API
ProductTank 9. 11. 2016
Half a second delay
caused 20% drop in traffic
Every 100ms of latency
costs them 1% in sales
SPEED - How speed matters

21. Instant Search API
ProductTank 9. 11. 2016Focus on each of the 3 pillars
SPEEDRELEVANCE UI USABILITY

22. Instant Search API
ProductTank 9. 11. 2016USABILITY - Common
HIGHLIGHTS Results from the first keystroke As you type experience
https://youtu.be/1rUMqzyaa44

23. Instant Search API
ProductTank 9. 11. 2016USABILITY- Common
CNN.com No explicit placeholder, only « Search CNN »
HIGHLIGHTS Explicit placeholder
Not recommended
GAP.com No explicit placeholder, only « Search »
Not recommended

24. Instant Search API
ProductTank 9. 11. 2016USABILITY- 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 relevance
Explicit placeholder outcomes
GREAT

25. Instant Search API
ProductTank 9. 11. 2016USABILITY - Common
HIGHLIGHTS Large search field

26. Instant Search API
ProductTank 9. 11. 2016USABILITY - Common
Algolia.com
Algolia's API makes it easy to deliver great search
experiences to your users.
algolia search
Default
HIGHLIGHTS Elegant highlighting
Algolia.com
Algolia's API makes it easy to deliver great search
experiences to your users.
Bold
Algolia.com
Algolia's API makes it easy to deliver great search
experiences to your users.
Bold
+ bright color

27. Instant Search API
ProductTank 9. 11. 2016USABILITY - Common
GREATGREAT

28. Instant Search API
ProductTank 9. 11. 2016USABILITY - Autocomplete
AUTOCOMPLETE DROPDOWN
Usability – Best practices

29. Instant Search API
ProductTank 9. 11. 2016USABILITY - Autocomplete
HIGHLIGHTS Different results type are mixed
Not recommended
https://youtu.be/FcY9VEDn900

30. Instant Search API
ProductTank 9. 11. 2016USABILITY - Autocomplete
HIGHLIGHTS One section per data type GREAT
https://youtu.be/1bI8ISY_3BI

31. Instant Search API
ProductTank 9. 11. 2016USABILITY - Autocomplete
Rich results
Horizontal layout
• Helps to better understand the results (photos, rating, location, …)
• More chance to identify why results are matching via highlighting
• Easy focus on a specific type of data
• Better use of the horizontal space (optimized for widescreens)
• Avoids the user to scroll down to see all results

32. Instant Search API
ProductTank 9. 11. 2016USABILITY - Autocomplete
HIGHLIGHTS Text only results Not recommended

33. Instant Search API
ProductTank 9. 11. 2016USABILITY - Autocomplete
HIGHLIGHTS Rich results Horizontal layout GREAT

34. Instant Search API
ProductTank 9. 11. 2016USABILITY - Autocomplete
• Very handy when the category tree is large
• End-users may not always know exactly what they’re 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

35. Instant Search API
ProductTank 9. 11. 2016USABILITY - Autocomplete
HIGHLIGHTS Shortcuts to start browsing/exploring
https://youtu.be/KrH9CCVGMWc

36. Instant Search API
ProductTank 9. 11. 2016USABILITY – Search result page
SEARCH RESULT PAGE
Usability – Best practices

37. Instant Search API
ProductTank 9. 11. 2016USABILITY – Search Result page
HIGHLIGHTS
Avoid Inline Scroll Areas
Leads to two main UX issues
- Invisible content & scrollbars
- Scroll hijacking
=> Better to have
a Show more link
To avoid

38. Instant Search API
ProductTank 9. 11. 2016USABILITY – Search Result page
HIGHLIGHTS
Multiple ranking strategies
Most of the time, no need to
- Sort Descending price
- Sort by Alphabetical order

39. Instant Search API
ProductTank 9. 11. 2016USABILITY – Search Result page
HIGHLIGHTS Maximized space to display resultsOn view aggregating best results

40. Instant Search API
ProductTank 9. 11. 2016USABILITY – Search Result page
HIGHLIGHTS One dedicated view per data type

41. Instant Search API
ProductTank 9. 11. 2016USABILITY - Mobile
MOBILE SEARCH
Usability – Best practices

42. Instant Search API
ProductTank 9. 11. 2016USABILITY – Mobile Search
HIGHLIGHTS
Think About the lack of space
30%
10%
60%
left

43. Instant Search API
ProductTank 9. 11. 2016USABILITY – Mobile Search
HIGHLIGHTS
Think 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…

44. Instant Search API
ProductTank 9. 11. 2016USABILITY – Mobile Search
HIGHLIGHTS
Maximized space to display
results
On view aggregating best
results

45. Instant Search API
ProductTank 9. 11. 2016USABILITY – Mobile Search
On mobile should we let people
search for
Query suggestions?
OR
Directly for results?
=> Still an open question

46. Instant Search API
ProductTank 9. 11. 2016USABILITY – Mobile Search
GREAT BAD
HIGHLIGHTS
User-friendly filters menu
- Instant Visual feedback
when filtering
- General overview of
available facets thanks
folding
- Easy access back to
the results

47. Instant Search API
ProductTank 9. 11. 2016Summary
Search is a communication, it needs to have flow and needs to be
understandable
UX requires the combination of Relevance + Speed + UI Usability.
There are many ways how make the search UX exceptional

48. Instant Search API
ProductTank 9. 11. 2016More coming soon!
PLAYBOOK https://grader.algolia.com

49. Instant Search API
ProductTank 9. 11. 2016
QUESTIONS / ANSWERS