search is the new ui
TRANSCRIPT
![Page 1: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/1.jpg)
Search is the new UI
OpenSource Connections
@DanielBeach
![Page 2: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/2.jpg)
@ DanielBeach OpenSource Connections
‣ Search strategist @ OpenSource Connections
‣ Elasticsearch + AngularJS video course
‣ Spyglass search UI‣ New dad
![Page 4: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/4.jpg)
Powered by Search
‣ Search results‣ Data visualization dashboards ‣ Recommendation engines‣ Anomaly detection
![Page 6: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/6.jpg)
Search Misconceptions
‣ Search only powers “search pages”
‣ Search is best left to Google‣ Search is only useful for
text documents
![Page 8: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/8.jpg)
Typical Search Inputs
‣ Text entered by a user‣ Selected filters
![Page 9: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/9.jpg)
Passive Search Inputs
‣ Current time & events‣ The user’s location‣ How recently was the content
published?‣ The popularity of an item
![Page 11: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/11.jpg)
Talk Overview
‣ Principles of good search‣ How search engines work‣ Front-end search patterns
![Page 12: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/12.jpg)
GENERAL SEARCH PRINCIPLES
![Page 13: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/13.jpg)
Search is an opportunity to have a conversation.
‣ Users are telling you what they expect to find on your site
‣ Search is an opportunity to learn about your users / customers
![Page 14: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/14.jpg)
Natural searchessound hound
![Page 15: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/15.jpg)
Principles of Search Design
‣ Values search‣ Listens to your users‣ Shows relevant content‣ Gets out of their way
![Page 16: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/16.jpg)
Search is about Clarity
‣ The relevancy of the results is more important than the design of the results.
![Page 18: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/18.jpg)
Only Show what is Important
‣ If you have twenty average results, but one result is statistically more important, don’t show the others.
![Page 19: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/19.jpg)
Accommodate Multiple Types of Searching
‣ Informational users are interested in the breadth of your data
‣ Navigational users want to get somewhere fast
![Page 20: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/20.jpg)
Bad Search
‣ Invalid results‣ No results ‣ Confusing result hierarchy‣ Visually messy results‣ No clear input or submit
![Page 21: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/21.jpg)
Good Search Design
‣ Showing relevant data to users
‣ Only shows useful / actionable results
‣ Visually clean results‣ Differentiated results‣ Recognizable input and submit
![Page 23: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/23.jpg)
HOW SEARCH ENGINES WORK
![Page 24: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/24.jpg)
Open Source Search Engines
‣ Elasticsearch‣ Solr
![Page 25: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/25.jpg)
How humans see text
–Arthur Clark
![Page 26: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/26.jpg)
How a search engine sees textThis is called text analysis, and it happens at indexing time.
![Page 27: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/27.jpg)
Indexed terms(simplification)
![Page 28: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/28.jpg)
Query AnalysisA compatible analysis chain must be used for the query string as the indexed content in
order for terms to match.
![Page 29: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/29.jpg)
TERM MEANING
TokenizationSplitting text into indexable pieces, called tokens. A word is often an example of a token.
StemmingCollapsing words to their root (interpretation, interpreting --> interpret)
Inverted index An index of tokens. Maps tokens to document position
Term frequency The number of times a token occurs in a document
Inverse document frequency
Tokens that appear in fewer documents are calculated to be more important (simplified)
![Page 30: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/30.jpg)
Document Scoring
‣ Score based on number of matches in a document, as compared to the popularity of that term across all documents.
![Page 31: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/31.jpg)
Types of Boosts
‣ Field boosts ‣ Text matching (title^5
description)‣ Function scores‣ Boost newer content‣ Multiply by % of popularity‣ …
![Page 32: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/32.jpg)
Minimum Match
‣ How many of the query terms have to match in order for a document to be returned?
‣ Precision vs recall
![Page 33: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/33.jpg)
FRONT-END SEARCH PATTERNS
![Page 34: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/34.jpg)
Search patterns
![Page 35: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/35.jpg)
Search request
{ "query": { "multi_match": { “fields": ["title^5", "description”], “query": “descender”, "minimum_should_match": "2<-1 5<70%" } } }
![Page 36: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/36.jpg)
Response{ "took": 47, "timed_out": false, "hits": { "total": 2, "max_score": 2.17284, "hits": [ { "_index": "catalog", "_type": "comics", "_id": "84", "_score": 2.17284, "_source": { "title": "Descender", "description": "One young robot’s struggle to stay alive in a universe where all androids have been outlawed and bounty hunters lurk on every planet." ...
![Page 37: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/37.jpg)
Aggregations
![Page 38: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/38.jpg)
{ query: query, aggs: { "comic formats": { terms: {field: "format"} } } }
Aggregations Request
![Page 39: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/39.jpg)
Aggregations Response{ "hits":{ "total":2, "hits":[ ... ], "aggregations":{ “comic types":{ "buckets":[{ "key":"Trades", "doc_count":63}, { "key":"Graphic Novels", "doc_count":35 }, { "key":"Compilations", "doc_count":9 }]}}}
![Page 40: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/40.jpg)
Filtering{ filtered: { query: query, filter: { bool: { must: [ {term: {"illustrator": "Dustin Nguyen"}}; ] } }}}
![Page 43: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/43.jpg)
Autocomplete
![Page 44: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/44.jpg)
Autocomplete Suggestions
‣ Spelling corrections‣ More popular phrases
![Page 45: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/45.jpg)
Autocomplete Request{ "query": { "simple_query_string": { "fields": ['title'], "query": baseTerms + '(' + lastTerm + '|' + lastTerm + '*)', "default_operator": "and" } }, "size": 3, "_source": ["title"] }
![Page 47: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/47.jpg)
Suggestion Request{ "query": query, "suggest": { "text": searchTerms, "phraseSuggestion": { "phrase": { "field": "title", "direct_generator": [{ "field": "title", "suggest_mode": "popular", "min_word_length": 3 }] }}}}
![Page 48: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/48.jpg)
Highlighting
![Page 49: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/49.jpg)
Highlighting
‣ Highlight search terms‣ Snippets for large blocks of
text
![Page 50: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/50.jpg)
Highlighting Request{ query: query, highlight: { fields: { "title": {number_of_fragments: 0}, "detailed description": {number_of_fragments: 0} } } }
![Page 51: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/51.jpg)
Highlighting Response{ "took":28, "hits":{ "total":2, "max_score":1.44856, "hits":[{ "_index":"catalog", "_type":"comics", "_id":"84", "_score":1.44856, "_source": { "title": "Descender" }, "highlight":{ "title":["<em>Descender</em>"]} } ]}}}
![Page 53: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/53.jpg)
Load more
![Page 54: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/54.jpg)
Loading More Results{ "query": {"match_all": {}}, "from": resultsPage * 10, "sort": "fieldName desc", }
![Page 55: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/55.jpg)
Think outside the search box
‣ Search gives you extreme flexibility to return relevant content quickly, given a wide range of inputs
‣ Retrieval and ranking engine
![Page 56: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/56.jpg)
@DanielBeachOpenSource Connections
![Page 57: Search is the new UI](https://reader031.vdocuments.mx/reader031/viewer/2022030311/58ef977c1a28ab9b408b4687/html5/thumbnails/57.jpg)
Search is the new UI
OpenSource Connections
@DanielBeach