[RFC] Implementing optimal methods of rating items

[echo6ix]

Scope

The scope of this proposal is meant to provide suggestions to mitigate the laborious process of rating items. This will include rating items from the (1) details pages (where a details page is defined as localhost:9999/scenes/n; localhost:9999/images/n; localhost:9999/galleries/n), and (2) the cards grid view.

The proposed mechanism should be extensible, that is it won't be relegated to one use but can accommodate multiple features, and the mechanism will not add clutter to the UI, but rather help to reduce clutter.

Long Form

Efficiently rating items can be a laborious process. We can implement two mechanisms to improve the process:

Mechanism 1: Interactive rating stars on details pages

Performer and movies details pages already have interactive rating stars. These pages do not require the user to navigate to the edit tab to modify a rating. The other ratings pages (scenes, images, galleries, etc) can be updated to reflect the interactive rating stars behavior.

There may already be a feature request for this or it may be on the roadmap but I may have missed it.

Mechanism 2: Overflow menu on each card on grid view pages

Presently it is not possible to rate an object (scene, movie, performer, image, gallery, etc) from the grid view pages. The user must navigate to the details pages which is a four-step process, not including navigating back out to the grid view page.

To streamline and optimize this process we alter the UI in the following way:

1. Replace the grid card checkbox with an overflow menu (universally an icon with three vertical dots)
2. Add grid card exclusive items to the overflow menu:
   • Select/Unslect (the incument checkbox functionality)
   • Ratings sub-menu
   • Any other relevant requested features, now or in the future, such as
     • Favorite/unfavorite
     • Organize/unorganize
     • Delete

How does it function?

• User hovers over the grid view item
• User clicks overflow menu icon to reveal a standard context menu of options
• Context menu can contain nested menu for items with multiple options, such as a rating menu

Advantages

Minimizes clutter: The proposed mechanism integrates seamlessly into the existing card grid view UI without introducing more visual buttons, and provides a mechanism to add more grid card related features without incurring more buttons.

Minimal alteration to existing functionality: Existing behavior of the checkbox remains the same only introducing an additional click to access it within the overflow menu. The behavior of selecting/unselecting additional cards (clicking anywhere on the card image) would remain the same.

Extensible: This solution is designed within an intuitive framework that accommodates current and future features accessible from the grid view card.

Examples

Hovering over the card reveals the overflow menu icon

Clicking the overflow button reveals the options, including the nested ratings menu

[DingDongSoLong4]

I'd have to say I don't like the overflow menu on the cards. It makes it much more difficult to select multiple cards, and you don't get nice visual feedback on which cards are selected and which aren't. The double dropdown to change the rating is also quite clunky imo. At that point, just clicking the card to open the object page and rating it from there (using Mechanism 1, which I 100% agree with) is easier and faster.

I know you don't like adding more buttons, but I honestly think that if you really want to add a rating control to the card, only way is to add an interactive star control (like what is on the performer or movie details pages) to the card itself. Perhaps it could only be shown at larger zoom settings, to avoid clutter.

For the other features that could go in the dropdown:

• Favorite/unfavorite: this is only available on performers, and there's already a heart "button" that does this.
• Organize/unorganize: valid, and it's a good fit for a dropdown. Although I'm not sure how common the use-case of wanting to mark a single scene as organized/unorganized directly from the card is.
• Delete: definitely the most useful to be able to do from the card, and also fits with the dropdown. It would then be the same number of clicks as selecting a single card and clicking the delete button at the top though, only without having to scroll to the top.

If we could put the dropdown menu in the top right corner that would be the best, but the Studio link is already there. Any other corners of the card would probably look strange with a dropdown menu in them, but I can't say for certain.

I think first prioritizing Mechanism 1 is most important, and then we can reevaluate and see whether changing the rating directly from the card is necessary.

[echo6ix]

@DingDongSoLong4

I know you don't like adding more buttons, but I honestly think that if you really want to add a rating control to the card, only way is to add an interactive star control (like what is on the performer or movie details pages) to the card itself

That's a feasible option. I don't think interactive rating stars on the bottom left of a grid card would look bad.

When hovering over a card there are three areas that are already occupied:

1. Top left Globally used for checkbox selection
2. Top right Scene grid cards (studio hotlink) Performer grid cards (favorite button, etc)
3. Center Image grid cards (full screen image button)

Scene grid card with bottom left rating stars - not much going on when hovering other than the checkbox

Performer grid card (using custom css) with bottom left rating stars - not much going on here when hovering other than the top of the card

---

If we could put the dropdown menu in the top right corner that would be the best, but the Studio link is already there. Any other corners of the card would probably look strange with a dropdown menu in them, but I can't say for certain.

I agree. Though another option is:

• Move the select/unselect checkbox to the bottom left
• Put overflow menu in the top left

---

For the other features that could go in the dropdown [...] Favorite/unfavorite: this is only available on performers

Agreed, it's redundant for performers, but a handful of people have requested a favorite/unfavorite option for scenes (maybe even for images, idk). It was meant as an example that these features would start to crowd the grid cards but could all neatly be consolidated in an overflow menu.

[echo6ix]

Mobile view

One aspect I forgot to consider is the mobile UI. While related to the topic it veers into a broader issue.

Accessing the select/unselect checkbox on mobile is very clunky. It requires a bit of long-press on the desired grid card, but in my experience this is a struggle. Sometimes it will cause the browser context menu to appear, and sometimes trying to summon the checkbox results in an inadvertent navigation to the scene details page. People interact with a finger differently than a mouse, which I think makes the hidden checkbox less intuitive for mobile views.

Therefore if the checkbox is clunky on mobile, it follows that interactive rating stars and an overflow menu would suffer from the same issues.

Possible solution: For mobile view only, an always viewable overflow menu icon on cards. But where to locate on the card? There should definitely be a consistent location between mobile and desktop views.

• Bottom left. An unutilized area for all cards, but it's an awkward placement.
• Top left. A conventional placement, but comes at the expense of the rating banner. The rating banner would require relocation, but where?
  • Rating banner moves to the bottom-left, and maybe gets a bit of a facelift (refer to rating-banner presentation on my Bill Gates screenshot and imagine it relocated to the bottom-left)

[echo6ix]

Fleshing out possible contents of a global card overflow menu

• Select/Unselect
• Set as organized/Unset organized (applicable to scenes, images, and gallery cards)
• Favorite/Unfavorite (applicable to performer cards)
• Metadata submenu flyout
  • Populates item metadata into a flyout submenu for quick access
  • Items could be clicked for quick navigation
  • _Metadata fields would differ based on type of card (scene, image, gallery, movie, performer, etc)
• Rate submenu flyout (applicable to images, scenes, performers)
• Edit
  • Quick navigation to details edit tab
• Delete

[echo6ix]

@DingDongSoLong4

I'd have to say I don't like the overflow menu on the cards. It makes it much more difficult to select multiple cards

It's true adding the select option to an overflow menu increases the initial click by one, however selecting subsequent cards would remain the same because you can currently click anywhere on the card to do this.

For desktop browsers the use keyboard combos can be explored (regardless of an overflow menu), such CTRL+LEFT CURSOR and CTRL+RIGHT CURSOR to optimize multiple card selections.

and you don't get nice visual feedback on which cards are selected and which aren't

This can be addressed the same way file managers and mobile apps signify selected items. Highlighted items get a distinct border color or other visual changes involving color/opacity.

Applying a simple white border around selected cards

Applying a blue border and reduced opacity on selected cards

Applying a white border and reduced card opacity on selected cards

The possibilities for how you want to present selected cards without a visual checkbox are relatively easy and endless.

[QxxxGit]

For what it's worth, I think the tools we have now work okay for rating media. Maybe some folks can find some use.

For images, I apply a filter for rating is null, open an image in the lightbox, rate it, and it automatically goes to the next image. It's super quick. No extra hovering or clicking. This works for grid or wall view.

For scenes, I enable the queue, then rate and save. Once the video ends, the next begins and I rate it. It's not laborious in my opinion. For me personally, it makes sense to only rate something after just watching it.

[DingDongSoLong4]

@QxxxGit I don't really rate my media, but if I did, I would probably use a similar process. It feels weird rating something without actually viewing it, but I'm sure others do just that.

@echo6ix I've got a few points:

• Due to the new preview scrubber, the entire bottom of the scene cards is now taken up - the rating stars (if they're interactive) can't really go there anymore. By "the card itself" I meant putting the rating control below the image, i.e. somewhere below the title.
• I like the blue border highlighting to show selection, that solves the issue. I hadn't thought of that. In that case putting select in the menu is perfectly reasonable.
• I do think the overflow menu looks a bit weird on the left, overflow buttons just feel more suited to the right imo, but unless we move the studio logo that is basically the only option.
• We can definitely use right-click as an alternative way to open the menu on desktop.
• Overflow menus are usually for actions, not for displaying data. I think the only item under metadata in your mockup that fits an overflow menu is the StashID button - I can see why you'd want to go directly to a scene's page on StashDB, for example. We'd just need to remember to take into account the fact that one scene can have multiple StashIDs.
• Besides StashID, the only other things under metadata that aren't already on the card are Codecs and Director. I think those two would fit much better on the card itself - both hidden by default and shown either with an interface setting or just custom CSS (a la .extra-scene-info). Codecs could potentially be abbreviated in some way and shown alongside the filesize, and Director would just be shown below the title somewhere. The process to get at this data behind the overflow menu is long enough that I'd just click on the card and look on the page itself.
• I don't use mobile very often, but looking now I'm surprised that the checkbox doesn't always display when on mobile. That's fairly standard for checkboxes when using touchscreens in my experience. Hovering, both to preview a scene and to show the checkbox, is quite broken as you mention.
• Regarding the rating banner, it does cause an issue if the overflow button is always displayed. This is a non-issue if we add the rating control to the card body, since that would of course show the current rating. If that doesn't happen (due to space issues), then I think a star and a number in the bottom left of the card preview should do the job.
• And then another thing I just thought about that affects all of this - what if you have your rating system set to decimal instead of stars? The rating control used on the details page does account for this, but it's not too elegant and would probably look strange on a card. I have no idea how to make editing a decimal rating look good in a dropdown menu either.

[echo6ix]

feels weird rating something without actually viewing it, but I'm sure others do just that.

I agree, I think rating a scene from the grid page would be rare. But per the scope I was shooting for a global implementation of all grid cards views including images, performers, scenes, tags, studios, etc. Some obviously don't have rating capability now but they could in the future.

I do think the overflow menu looks a bit weird on the left, overflow buttons just feel more suited to the right imo, but unless we move the studio logo that is basically the only option.

Agreed.

Overflow menus are usually for actions, not for displaying data. I think the only item under metadata in your mockup that fits an overflow menu is the StashID button - I can see why you'd want to go directly to a scene's page on StashDB, for example. We'd just need to remember to take into account the fact that one scene can have multiple StashIDs.

This is me coming from a world of specific niche apps where the context menu is king. You may very well be correct that using an overflow menu like that is unorthodox.

what if you have your rating system set to decimal instead of stars?

I've never used the alternate rating system. I assumed it only introduced half stars, making it a total of ten possible digits. But now that I look it can use tenths.

I guess the last point ultimately blows the overflow menu option out of the water for ratings. 😅

I appreciate the discussion though, it was fun brainstorming, receiving feedback, and addressing it. Thank you.

[LeGrosFromage]

For myself, having right-click/context menu would be a great thing to have. I always tend to right-click on items (in any piece of software) to get to configuration items or such.

Whilst I don't really care about ratings, when using Stash I have right-clicked accidentally for: Toggle Organized status Delete scene Edit scene

To elaborate: Organized status - in scene card view, realizing a scene isn't organized, so instinctively right-click and choose Organized (rather than opening the scene and clicking the button).

Delete scene - obvious, being able to delete rather than having to jump into the scene or select it and choose delete.

Edit scene - open the scene on the Edit tab, rather than clicking to open the scene then clicking edit. Yes I realize it's just one extra click, I'm just pointing out what my quickest path is.

So for me, the idea of a context menu with some "core" options in there would be nice and is certainly something I'd appreciate. But as pointed out, I'm not sure how well this would work on mobile devices and that has to be considered. Just my 2c.

[DingDongSoLong4]

Toggle Organized status Delete scene Edit scene

I think these three actions are probably the ones that make the most sense to go into a dropdown menu, along with favorite (where that applies). Personally I would probably only use "Delete", but the others are definitely useful.

For mobile devices, I think we've basically solved that - add "Select" as a dropdown option, replace the checkbox with the three dots, and make sure it is always shown (ie without needing a hover) on mobile. The cards can be highlighted as discussed to indicate selection, and after one selection is made then just clicking/tapping another card will also select it.

On desktop, the three dots would only show on hover, and right-clicking can also bring up the menu.

This is all just for convenience, but I agree it would definitely be useful.

[LeGrosFromage]

If there's a workable UX to the mobile issue, great - less hurdles before implementation are good thing :-) I hardly use Stash on a mobile device so my thoughts just go with being in a browser on a desktop.

Can I also offer a thought here about the 3-dots menu? I agree with an earlier comment that the 3-dots does seem to flow better when it's in the top-right corner of a card, but as pointed out that clashes with the studio name. Now personally I don't care for having the studio name on the scene card - I've clicked it by accident far too many times when just trying to open a scene - so, would there be a huge pushback from the userbase to remove the studio from the scene card? Or would a fair compromise to be moving studio to the top middle?

(Apologies for morphing this discussion from ratings to context menus - not my intention, I just find conversations like this quite fascinating.)

[DingDongSoLong4]

I think moving the studio to the top middle would be even more strange than having dots on the left - if we move the studio it would have to go either in the top left or way down below, in the card body itself. Moving it down does mean that the cards will have to be made bigger though.

I don't think removing the studio entirely will go down well - it's fairly important info and I definitely think it needs to be shown on the card somewhere.