Orange-Boosted-Bootstrap icon indicating copy to clipboard operation
Orange-Boosted-Bootstrap copied to clipboard

Star rating design update

Open isabellechanclou opened this issue 2 years ago • 0 comments

Prerequisites

Proposal

Topics to think about for improving the Star Rating component:

  • [ ] Reconsider the design of stars selection for rating:

    • Initial state: rating of 4/5 visually indicated by 4 orange stars and a grey one.

      image

    • On hover, depending on where the mouse pointer is positioned, between 1 to 5 stars become black. The following interactive behavior feels strange to me, not knowing if its the same for other user, in usage context, and if a better solution could be found: 1 - the interactive zone is way longer that the 5 stars length. Consequence: the mouse can hover it without being above any stars, without showing that the area is clickable because the cursor doesn't become a hand but making all the stars turn black. In this context, it's surprising to see this change of color and the loss of the initial orange rating 2 - when hovering let's say the 1st 2 stars (when 4 are selected), these 1st 2 stars appear black and the rest appear grey (non selected state). Once again, it feels weird because it makes think that the 4 previous 4 stars rating is lost. Moreover, the tooltip "bad" appears after an certain amount of time long enough to be surprised by it (it's not expected since it doesn't appear right away). image Well, I don't know if by changing the colors, it could be less surprising and still make the user understand the usage...

  • [ ] Offer the possibility to display a set of star with no star selected by default in order not to influence the user rating choice. This feature is available for radio buttons and checkboxes.

  • [ ] Make Star rating a component by itself (and not a variant of Forms/Checks @ radios) with its own item in the Forms section. Goal: make it easier to find in Boosted documentation.

  • [ ] As done in OB1, add the possibility to have the possibility to have decimal rating (e.g., 3.75/5) and therefore its graphic representation with the last star of a stars set not fully filled with the selected state color image

Motivation and context

Improving the component.

isabellechanclou avatar Aug 10 '23 15:08 isabellechanclou