UX lift-up

[JanPokorny]

I feel that there is a room for improvement with the current UI/UX.

• The page header (eg. everything above the first search result) is large, taking up to a half of the height of smaller screens. Given that it consists mostly of empty space, compacting the layout a bit could leave more of the page for search results.
  • I'd consider removing the top pagination control altogether, putting the dropdown and the toggle on a single line right under the search field to make them feel more connected with the search field, and centering the "result count" line.
• The result items are overcrowded with text.
  • Some text can be made into icons (homepage, manifest link etc.)
  • IMO some of the fields aren't strictly necessary, considering the use-case:
    • "commiter" carries very little meaning, as well as the link "commit" (feel free to explain the reasoning tho, maybe I just don't get it)
    • star count for official buckets -- the blue mark should be enough, I'd even consider dropping star count everywhere and creating a new "popular community bucket" mark that would show for buckets with >50 stars, so there's only one thing displayed next to a bucket name
      • I also had the idea that bucket could be moved to the header instead of version, like "firefox in extras ✅", eliminating the need to duplicate the checkmark to the header
  • "updated" could show just "x time ago" which is more readable than an absolute date
• The layout feels misaligned -- most elements in the result item don't align with each other
• One thing I think is missing is easily available 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 time

To present a more clear "vision", a result item could look rougly like this.

Official bucket (short bucket name in title):

🖼️ firefox in extras ✅	📜 MPL-2.0 | 🌍 mozilla.org/firefox
Popular open source web browser.	> scoop bucket add extras 📋
v96.0.3 (updated 6 days ago)	> scoop install firefox 📋

Unofficial bucket (full bucket name, star count in tooltip, different icon if >50 stars):

🖼️ firefox in JanPokorny/SomeBucketIMadeUp❓	📜 MPL-2.0 | 🌍 mozilla.org/firefox
Popular open source web browser.	> scoop bucket add SomeBucketIMadeUp https://github.com/JanPokorny/SomeBucketIMadeUp 📋
v96.0.3 (updated 6 days ago)	> scoop install firefox 📋

[gpailler]

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

[gpailler]

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?

• top pagination control removed
• new search result layout according to your proposal
• stars removed and replaced with popular community bucket icon

Remaining parts:

• compacting layout
• responsive
• compacting search bar + search options

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

[JanPokorny]

@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.

[gpailler]

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/.

• Icons are replaced with lighter versions
• Margins are reduced and consistent between header and body
• Last update/Version are swapped with Homepage/License
  • Having the Version in last position makes it more readable according to my tests
• Overlays are available on the Verified icon, Last update and Homepage (if truncated) to display extra information (repo type, stars, full date, full url)
• Organization part is removed from Official repositories
• Scheme and trailing slash are stripped off from the Homepage url
• License is clickable (if it's a known SPDX license)
• Copy controls are lighter

I think we are moving to the right direction 👍

[JanPokorny]

@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...)

[gpailler]

According to your comments, I pushed some changes on https://scoopsearch.github.io/scoopsearch-dev.github.io/.

What are your thoughts?

[JanPokorny]

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.

[gpailler]

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 !

[JanPokorny]

@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 😁)

[rashil2000]

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?

[rashil2000]

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?

[JanPokorny]

@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.

2. One can still link to the search page directly

[rashil2000]

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?

[JanPokorny]

@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

[rashil2000]

Hmm, seems good to me

[gpailler]

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

[rashil2000]

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.

[gpailler]

@rashil2000 Deal 🤝 ! You can take a look on https://scoopsearch.github.io/scoopsearch-dev.github.io for the result.

[gpailler]

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]

@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.

[JanPokorny]

@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)

[gpailler]

@rashil2000 @JanPokorny New unified sorting/filtering dropdown is available on https://scoopsearch.github.io/scoopsearch-dev.github.io/

Any thoughts?

[rashil2000]

Awesome work, as always :)

[JanPokorny]

@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)

[gpailler]

@JanPokorny You were right, as usual ;-) The issue with the cursor is fixed

[rashil2000]

@JanPokorny should we merge the develop branch, if the changes are good to go?

[gpailler]

I think that this first bunch of changes can be deployed. Then we can continue to work on other improvements

[rashil2000]

Okay, please go ahead :)

[gpailler]

We're live! ;-) https://scoopsearch.github.io/

[rashil2000]

Yay!

I'm closing this issue, as the original request is fulfilled.

More suggestions can come in newer issues.