Search improvement #1034
Search improvement #1034
Conversation
This is a bigger update to the search functionality on the site. I updated the LunrJS library, which powers our search. The latest version has some extra features like fuzzy search and term presence. This is now enabled and highlighted to users on the search page via an expandable "Search tips" section. For simple single-term searches, the site uses a slightly fuzzy search. So if you type "bech31", it will also find "bech32". Or if you type "wxllet", it will also find "wallet". Helps with those small typos or easy-to-misspell technical terms. I also removed our SEO placeholder pages from the search index. These are currently causing search results that read "..." on the site. Not pretty. The search page is also removed from search results. Search results now also have a small dot next to them to indicate the quality/confidence of the result. Green is a good match, grey is just an OK match. Colors can range in between those two based on the scores. The search tips are a little hidden, just being visible on the search page. Would be nice to include them somehow in the search modal as well, without cluttering things up. Probably good to test this thoroughly before finalizing.
GBKS
added
Dev
✅ Deploy Preview for bitcoin-design-site ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
I tested the use cases that you mention above. Works as promised 💪. I really like the search tips. Agree that it could be nice in the modal. On the results page, they are a bit hidden at the bottom of the list. Maybe it's worth trying to place it somewhere underneath the search box. The dots are a nice indicator if one knows what they represent. Personally, I wouldn't have guessed what they mean. Not sure this is relevant or anything can/should be done about it, but it seems that with very short search terms I get a lot of unrelated results, where the live site doesn't. |
Still a bit hidden, but at least there's a way now to see what the gray or green circle means.
|
Thanks for the reviews and feedback. I just fixed the merge conflict and made a small tweak to add a tool tip to the match quality indicator dots (hover one and see "Great match", "Good match" or "OK match"). @rabbitholiness good point about short results. That is a side effect of making simple searches fuzzy. The same logic that brings up find "bech32" when you types "bech31", also creates false positives. This is ideally where the match quality indicator helps you identify what results are worth looking at. Interesting that you searched for the word Generally, ready for the next round of reviews. Thank you in advance. |
There was a problem hiding this comment.
I think I found a weird bug here:
- Click on search
- Fill search input with a single word string with no whitespace, e.g.
wallet - When the dropdown populates with search results, do NOT hit enter. Instead, click the "See X Results" button.
- Notice that the search results have a tilde and 1 appended, e.g.
wallet~1
As far as I can tell, with tilde and without tilde seem to produce the same search results. It just looks kind of tacky.
This is a bigger update to the search functionality on the site.
I updated the LunrJS library, which powers our search. The latest version has some extra features like fuzzy search and term presence. This is now enabled and highlighted to users on the search page via an expandable "Search tips" section. For simple single-term searches, the site uses a slightly fuzzy search. So if you type "bech31", it will also find "bech32". Or if you type "wxllet", it will also find "wallet". Helps with those small typos or easy-to-misspell technical terms.
I removed our SEO placeholder pages from the search index. These are currently causing search results that read "..." on the site. Not pretty. The search page is also removed from search results. Also, the search input field now has a placeholder and I fixed a technical issue with a misspelling.
Search results now also have a small dot next to them to indicate the quality/confidence of the result. Green is a good match, grey is just an OK match. Colors can range in between those two based on the scores.
The search tips are a little hidden, just being visible on the search page. Would be nice to include them somehow in the search modal as well, without cluttering things up.
Probably good to test this thoroughly before finalizing. Would be great if you could help test some searches, especially ones you have previously used and maybe not found good results for.
Some preview links:
Closes #1032