Closed JanPokorny closed 2 years ago
Thanks a lot for this feedback.
There is definitely room for improvement and your points are quite interesting. We will try to improve the UX/UI according to your proposals π
Thanks
Hey @JanPokorny,
I started to apply some of your UI/UX proposals to the search results. Could you take a look on the video attached and give me your early feedback?
Remaining parts:
I think this new layout is much more appealing than the previous one. I' m just not convinced with the > scoop bucket add ...
displayed everywhere (as it's an action you' re doing only once per bucket)
https://user-images.githubusercontent.com/3621529/152723282-b0cea2e6-4ac0-4858-b9a4-71a1304ab67b.mp4
@gpailler Great work! I am glad that you liked the proposal and implemented it!
When I look at it now, I think it might look slightly more logical if the licence+homepage and version+lastchanged were swapped, since the version ties to the app name and bucket, whereas the homepage ties more to the description. Like this (I also put homepage first since it seems more interesting of the two, and added a "package" icon before version since pretty much everything else has an icon):
πΌοΈ firefox in extras β | π¦ v96.0.3 (updated 6 days ago) |
Popular open source web browser. | > scoop bucket add extras π
|
π mozilla.org/firefox π MPL-2.0 | > scoop install firefox π
|
With the bucket URL, I see what you mean. The current control for presenting the scoop commands is visually heavy, thus having two of them makes the layout feel unbalanced. Perhaps making it more subtle (remove borders, tone down background, instead differentiate by using a monospace font), and higlighting/bolding the more important one, could look better? Like this (yes I did just shamelessly copy shovel.sh):
Lastly, could you try changing the margins of the result header and body to match? IMO that would make it look better aligned.
Thanks for the feedback @JanPokorny.
I applied most of the changes, and you can test the dev version on https://scoopsearch.github.io/scoopsearch-dev.github.io/.
I think we are moving to the right direction π
@gpailler Definitely moving in the right direction!
IMO it would look better if the bottoms of the two columns were aligned in the "usual" case, that is one-line description.
The command font size is smaller than the rest (most is 16px, command is 14px), which looks weird. What about 16px font and 1.7 line height?
Alternatively, this is a 14px monospace variant with 2.0 line height. I prefer light/bold to opacity, since the semi-transparent field gives off a "disabled form control" vibe.
I also think it would be nice if the commands would react to click -- either select the command on click for easier copying, or outright make the whole thing act as the copy button and copy it on click. (I don't really see a use case for selecting just a part of the command...)
According to your comments, I pushed some changes on https://scoopsearch.github.io/scoopsearch-dev.github.io/.
What are your thoughts?
It's great!
I noticed a little visual bug (probably browser specific) -- a vertical line after >
caused by the elements overlapping their semi-transparent backgrounds:
Simply set the background to a static color (
#f7f7f7
) to stop this.
I'd also put user-select: none
on both #user-command-prefix
and #user-command-text
, add a tooltip with "Click to copy" (and perhaps "Copied!" after clicking?), and changed the after-copy checkmark color to green to make it more apparent what's happening.
Thanks for the feedback. I'm really not that good with this kind of small CSS details... I fixed all the small discrepancies with the copy commands. Looks good !
@gpailler You did great work! I think the new search result is pretty and functional. @rashil2000 any thoughts from you?
I found a tooltip bug when the star count is 0:
https://scoopsearch.github.io/scoopsearch-dev.github.io/#/apps?q=dolphin-nightly
Also I noticed that the wording on the toggle is "Search only known buckets", whereas the tooltips use "Official bucket". I know that Scoop uses "known", but I'd stick to "official" here since it better carries the meaning.
Regarding my original suggestions on the search bar controls, do you have any thoughts? My idea was moving them to the center like this, to make the controls more connected, but I suppose there might be better way. I also think that it's worth it to make the page a bit more welcoming if someone stumbles upon it by accident -- by placing one sentence describing what it is.
The words "apps" (forgot to link that one π ) and "buckets" would replace the current buttons. (Also please excuse that this is super misaligned because it is composed mostly in MSPaint π)
Looks awesome to me. Just one minor comment: in the overhaul, I feel we lost one bit of information: latest commit link. It should be easy to turn the following text into a hyperlink pointing to the commit, no?
I also think that it's worth it to make the page a bit more welcoming if someone stumbles upon it by accident -- by placing one sentence describing what it is.
I think this might not be required once the website has a homepage?
@rashil2000 1. I didn't think that commit link was necessary (it's two clicks through the manifest link anyway) but yeah you're right that it can be easily placed.
One can still link to the search page directly
Hmm. But I'm not a fan of cluttering up the titlebar. Maybe we can put something directly above the search box?
@rashil2000 What about not showing results when nothing is typed in, and instead showing a short message? There could be a small link under it to browse all apps (hide the message and go back to old behavior) to not lose the functionality
Hmm, seems good to me
Hello guys
I found a tooltip bug when the star count is 0:
Thanks. Fixed
Also I noticed that the wording on the toggle is "Search only known buckets", whereas the tooltips use "Official bucket"
Correct, I changed Known to Official as it's the word we are using everywhere.
Regarding my original suggestions on the search bar controls, do you have any thoughts?
I'm not convinced by having the filtering/sorting controls centered below the search bar. I would rather go with a single "Options" dropdown next to the search bar containing all the sorting and filtering options. I will try to propose a mockup a bit later.
Looks awesome to me. Just one minor comment: in the overhaul, I feel we lost one bit of information: latest commit link. It should be easy to turn the following text into a hyperlink pointing to the commit, no?
The diff link was not really useful to me as you have the manifest link already but it's quite easy to re-add it. Something like that?
What about not showing results when nothing is typed in, and instead showing a short message?
Well, the only goal of showing results without any search was to showcase the results display so the user can see what he can expect. But yes, we can just display the number of manifests indexed and a small appealing message instead
The diff link was not really useful to me as you have the manifest link already but it's quite easy to re-add it. Something like that?
Yep, precisely!
I agree very less people will use it (which includes me π ), but I have gotten similar requests in the past (see https://github.com/ScoopInstaller/Scoop/issues/4448) so I thought why not just use the information we already have in the JSON.
@rashil2000 Deal π€ ! You can take a look on https://scoopsearch.github.io/scoopsearch-dev.github.io for the result.
Regarding my original suggestions on the search bar controls, do you have any thoughts?
I'm not convinced by having the filtering/sorting controls centered below the search bar. I would rather go with a single "Options" dropdown next to the search bar containing all the sorting and filtering options. I will try to propose a mockup a bit later.
@JanPokorny What about an options menu like this one?
With a menu like this one, we can sort by ascending or descending order, and we can add other filters without overcrowding the UI. It makes the sorters/filters less discoverable though, but I think that in most cases, you don't need to change these options when you are looking for a specific app (the general use case)
@rashil2000 Deal π€ ! You can take a look on https://scoopsearch.github.io/scoopsearch-dev.github.io for the result.
Yep, awesome β₯
With a menu like this one, we can sort by ascending or descending order, and we can add other filters without overcrowding the UI. It makes the sorters/filters less discoverable though, but I think that in most cases, you don't need to change these options when you are looking for a specific app (the general use case)
How about we keep the official-bucket toggle outside but keep the filtering option inside the dropdown menu? This is to maintain symmetry with the Found 14 applications for 'fiefox'.
text on the left.
@gpailler I love the drop-down menu! You're right that the options are now more hidden, but it elegantly solves the layout. I'd also consider having the drop-down button in the right top corner of the search results, with a longer title like "Sorting & Filtering" to make it more noticeable. This would maintain symmetry as @rashil2000 proposed (I don't really like the idea to separate the toggle)
@rashil2000 @JanPokorny New unified sorting/filtering dropdown is available on https://scoopsearch.github.io/scoopsearch-dev.github.io/
Any thoughts?
Awesome work, as always :)
@gpailler The only little thing I noticed is that the cursor changes to pointer inconsistently when hovering the "official bucket" toggle (both text and the toggle itself)
@JanPokorny You were right, as usual ;-) The issue with the cursor is fixed
@JanPokorny should we merge the develop branch, if the changes are good to go?
I think that this first bunch of changes can be deployed. Then we can continue to work on other improvements
Okay, please go ahead :)
We're live! ;-) https://scoopsearch.github.io/
Yay!
I'm closing this issue, as the original request is fulfilled.
More suggestions can come in newer issues.
I feel that there is a room for improvement with the current UI/UX.
scoop bucket add x
, like shovel.sh has -- I know that there's a button for it on unofficial buckets, but even official buckets need adding the first timeTo present a more clear "vision", a result item could look rougly like this.
Official bucket (short bucket name in title):
> scoop bucket add extras
π> scoop install firefox
πUnofficial bucket (full bucket name, star count in tooltip, different icon if >50 stars):
> scoop bucket add SomeBucketIMadeUp https://github.com/JanPokorny/SomeBucketIMadeUp
π> scoop install firefox
π