[#1809] Add a pop-up that explains the meaning of the percentage label

[jbkim1999]

Fixes #1809

Proposed commit message

When the groups are sorted by the amount of contribution,
a percentage label appears; however, no other information is
provided for that number, which could be confusing to the viewers.

Let's add a pop-up beside the percentage label so that the viewers
are aware that the percentage actually represents percentile for
each of the groups.

Other information

After the change (note

[damithc]

Something shorter, like this? Based on the current sorting order, this item is in the top 15.5%

[jbkim1999]

Hi prof @damithc,

What do you think now? I think it reads better.

[damithc]

Hi prof @damithc,

What do you think now? I think it reads better.

@jbkim1999 I'm OK with this version, although others are welcome to suggest alternatives/tweaks.

[zhoukerrr]

@jbkim1999 I feel that top x% might just do the job?

[jbkim1999]

Sorry, been busy with dealing module allocations.

@Zhou-Jiahao-1998 In this case, I don't think the pop-up is necessary, just placing the 'top' in front the percentage text will do the job.

Prof @damithc, what do you think?

[damithc]

Prof @damithc, what do you think?

Let's use the longer version, to be on the safe side. Although it is mostly obvious, I can imagine a few students wondering "top based on what"?

[jbkim1999]

@damithc

I see, then I'll leave it as it is for now.

[jbkim1999]

May I request a review for this PR? @dcshzj @Zhou-Jiahao-1998 @yhtMinceraft1010X

[dcshzj]

@jbkim1999 Thanks for the changes! Can I check if there is any reason why you chose to add the (?) icon and not just show the tooltip when the user hovers over the x.xx% text?

Also from a UX perspective, the cursor changes when hovering over the (?) icon, indicating that it is something that can be clicked, but nothing happens when clicking it. I think this should be changed to continue keeping the cursor as a pointer?

https://user-images.githubusercontent.com/27919917/185062636-ff58d729-e2c6-45ce-9cce-d76175d8f350.mov

[jbkim1999]

Thank you for the feedback @dcshzj!

The pointer I did not look it closely. I think it makes sense that the pointer does not change. Will fix it.

The reason I appended the help icon is that when the user first launches the report, he/she will encounter the rather unclear percentage label, but because there is a help icon right beside it, I felt that the users are assured that it provides an explanation for that number, hence reducing their cognitive load without even hovering over it.

It's just my opinion, what do you think?

[zhoukerrr]

Thank you for the feedback @dcshzj!

The pointer I did not look it closely. I think it makes sense that the pointer does not change. Will fix it.

The reason I appended the help icon is that when the user first launches the report, he/she will encounter the rather unclear percentage label, but because there is a help icon right beside it, I felt that the users are assured that it provides an explanation for that number, hence reducing their cognitive load without even hovering over it.

It's just my opinion, what do you think?

I agree with this. What do the rest think?

[damithc]

The reason I appended the help icon is that when the user first launches the report, he/she will encounter the rather unclear percentage label, but because there is a help icon right beside it, I felt that the users are assured that it provides an explanation for that number, hence reducing their cognitive load without even hovering over it.

It's just my opinion, what do you think?

I agree that element may be more puzzling than the rest. At the same time, tooltips are used everywhere else to show more information about an element in the UI. So, a tooltip (without an extra icon) is more consistent with the rest of the UI. Plus, what if in future add some other UI element in that location? In that case it will not be clear the ? icon is about the percentage. So, I'm slightly more inclined to not add a separate icon but I'm OK with either.

[dcshzj]

I'm not really qualified to know which way is better, but I would prefer not having the (?) icon because this percentage label was designed to not catch the user's attention and is meant to be kept hidden. My concern in having the icon would be that it takes up a little more space on the screen, which increases the chances that the user notices it. Nonetheless, I'm okay with either as well.

[jbkim1999]

@damithc @dcshzj

I see. Then I think I will try to post one more version without the help icon and see whether it fits better (for future space usage, etc.)

[jbkim1999]

@damithc @dcshzj @Zhou-Jiahao-1998

How does this look now? Considering that percentage label is not of a great importance like mentioned in one of the comments, I think it also makes sense not to have a help icon and display pop-up on the label itself.

If this looks good, I'll push this version instead.

https://user-images.githubusercontent.com/60286063/185460091-cac7c39a-903e-43a2-a3e8-2f306c6c88ad.mov

[damithc]

How does this look now? Considering that percentage label is not of a great importance like mentioned in one of the comments, I think it also makes sense not to have a help icon and display pop-up on the label itself.

I'm OK with this version, @jbkim1999 👍

[github-actions[bot]]

The following links are for previewing this pull request:

• Dashboard Preview: https://dashboard-1820-pr-reposense-reposense.surge.sh
• Docs Preview: https://docs-1820-pr-reposense-reposense.surge.sh