search

BitcoinDesign / Guide

A free, open-source community resource for designers, developers and others working on non-custodial bitcoin products.
https://bitcoin.design/guide/
Other
457 stars 98 forks source link

Search improvement #1034

Closed GBKS closed 1 year ago

GBKS commented 1 year ago

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

netlify[bot] commented 1 year ago

Deploy Preview for bitcoin-design-site ready!

Name Link
Latest commit e902af7bdce8a8f67f5c46c7e18030a0a982880e
Latest deploy log https://app.netlify.com/sites/bitcoin-design-site/deploys/650c55e8cce8fc00085ec84e
Deploy Preview https://deploy-preview-1034--bitcoin-design-site.netlify.app/guide/contribute/formatting/media
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

rabbitholiness commented 1 year ago

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. I tried searching for the word "scam". On the live site this yields no results. In the preview I get a lot of results that are not relevant. When I clicked through to some of the found pages, I tried the browser search to see what triggered the results. No three letter combination yielded results (e.g. sca or cam). When I searched for two characters (sc, ca, am,...) I got a lot of results . This is probably due to the fact that it is a very short search term and I'm not sure whether this needs to be addressed, but I just wanted to mention it.

GBKS commented 1 year ago

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 scam. Feels like this could be an easter egg term where we show you an appropriate GIF instead of actual results.

Generally, ready for the next round of reviews. Thank you in advance.