New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Website/sort and search #949

Merged
merged 10 commits into from Sep 1, 2018

Conversation

2 participants
@ericcornelissen
Copy link
Contributor

ericcornelissen commented Aug 27, 2018

Addresses the problem described in and closes #908

Previously, when there was a search query and you pressed on of the sort buttons (color or alphabetically), the search query was more or less forgotten. My solution is to disable the sort buttons when there is an active search query, as they're not relevant anyway. They're not relevant because we use a fuzzy search algorithm which orders the icons resulting from the search based on a scoring system. Note that when the search query is removed (i.e. query === "") the ordering that was last active is used automatically.

@birjolaxew

This comment has been minimized.

Copy link
Member

birjolaxew commented Aug 27, 2018

Hmm. Not sure I agree with disabling the ability to sort when searching. I sometimes find myself searching for a subcategory (e.g. goo for Google) and then wanting an overview of what I'm looking at; since the sorting by the fuzzy search is rather opaque, I then enable alphabetical/color sorting to have an easier time skimming the matches.

I'd prefer having the sorting how it is now (search update = fuzzy, then users can enable color/alphabetical sorting for the current matches) while reversing to whichever mode was enabled pre-search on empty searches (as you've done in this PR). It would be nice to be able to disable the color/alphabetical sorting to revert to fuzzy by clicking the enabled sorting mode, but that's a bit trickier.

@ericcornelissen

This comment has been minimized.

Copy link
Contributor Author

ericcornelissen commented Aug 27, 2018

I'd prefer having the sorting how it is now (search update = fuzzy, then users can enable color/alphabetical sorting for the current matches)

Alright, that could be possible. However, then what happens when I 1) searched for "goo", 2) order alphabetically, and finally 3) add "g" to my search query. Does it go back to fuzzy search or should it maintain the alphabetical search?

It would be nice to be able to disable the color/alphabetical sorting to revert to fuzzy, but that's a bit trickier.

It would be indeed, but I think we should try to create a button (or something else?) to allow for this. If not in this PR, then in another one.

@birjolaxew

This comment has been minimized.

Copy link
Member

birjolaxew commented Aug 27, 2018

However, then what happens when I 1) searched for "goo", 2) order alphabetically, and finally 3) add "g" to my search query.

When (or if) a button is created for going back to fuzzy search, the preferable way would probably be to have the sorting mode remembered when changing the search (and going back to whichever non-fuzzy mode was last chosen when the search empties while fuzzy is chosen), such that adding "g" would maintain the alphabetical sorting. Until then, I think reverting to fuzzy mode when the search updates is preferable to not being able to choose color/alphabetical sorting while searching.

@ericcornelissen

This comment has been minimized.

Copy link
Contributor Author

ericcornelissen commented Aug 27, 2018

When (or if) a button is created for going back to fuzzy search, the preferable way would probably be to have the sorting mode remembered when changing the search (and going back to whichever non-fuzzy mode was last chosen when the search empties while fuzzy is chosen), such that adding "g" would maintain the alphabetical sorting.

In that case I feel like a button for the "fuzzy sort ordering" is more or less a requirement... I've got a few options listed below:

option 1
Common icon for a filter. I think this could work but it might not be immediately obvious that it belongs to the search query. Also the filter icon doesn't really lend itself well to the button shape (which I prefer to be a square).

option 2
Common icon for searching, I think this may be clearer for the user, but still not perfect. This icon does lend itself way better to the shape of the button tho

image
Something completely different, the stars are supposed to represent the "relevance". So the most relevant icons according to fuzzy search will be shown first, i.e. a full start, and the least relevant icons will be shown last, i.e. empty star. I'm not sure how clear this will be to user, but I think it is a novel solution. Note that we of course don't have to use stars for this.

option 4
Personally I'm not a fan of this one, but it might signal some sort of default sorting?

Some things to note about how I would implement this:

  • The button to apply the fuzzy search ordering only shows when there is a search query. This should also make it easier to understand that the two are related.
  • As @birjolaxew said, when updating the search query while a certain ordering (e.g. alphabetically) is chosen, that ordering remains.
  • When a search query is removed, the fuzzy search ordering button is removed, and the original ordering is applied (rather then, say, always colored ordering).
  • If the user enters a search term the second time (so, a search query was entered and removed before), the fuzzy search ordering will be applied again.
@birjolaxew

This comment has been minimized.

Copy link
Member

birjolaxew commented Aug 27, 2018

I personally prefer the star version. It indicates a "sort by quality" to me, in this case with quality meaning quality of match.

ericcornelissen added a commit to ericcornelissen/simple-icons that referenced this pull request Aug 27, 2018

Add button to sort by relevance
As discussed in simple-icons#949. Relatedly also removed the functionality that 
disabled the "sort by color" and "sort alphabetically" buttons (and 
related styling).
Add button to sort by relevance (non-functional)
As discussed in #949. Relatedly also removed the functionality that 
disabled the "sort by color" and "sort alphabetically" buttons (and 
related styling).

@ericcornelissen ericcornelissen force-pushed the ericcornelissen:website/sort-and-search branch from c82cfcc to ea62342 Aug 27, 2018

ericcornelissen added some commits Aug 27, 2018

Update sorting behaviour
Refactored to sorting algorithms into a single function and updated 
relevant code. The "sort by relenvance" button is now functional, and is 
automatically actived when the user starts searching, but not when 
updating their search query.
@ericcornelissen

This comment has been minimized.

Copy link
Contributor Author

ericcornelissen commented Aug 27, 2018

I personally prefer the star version. It indicates a "sort by quality" to me, in this case with quality meaning quality of match.

Updated 😃 I also did some refactoring of the websites JavaScript. It's not perfect yet, but it makes the existing code a bit more readable

@birjolaxew birjolaxew merged commit 0747029 into simple-icons:develop Sep 1, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@birjolaxew

This comment has been minimized.

Copy link
Member

birjolaxew commented Sep 1, 2018

👍 Sorry I haven't gotten around to testing this in the last few days. It's looking good, and functions great!

Thanks for your work on this!

@ericcornelissen ericcornelissen deleted the ericcornelissen:website/sort-and-search branch Sep 1, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment