Sticky the Respondents List while scrolling

[rbgk]

Current Behavior:

When the cursor is hovered over a respondent on the list and scroll is applied, the entire list will be shifted with the page.

Suggested Behavior:

When scroll is applied, the list will remain in the same place making it easier to use on desktop.

Potential Fix:

The problematic code is at ScheduleOverlap.vue:409:

class="tw-w-full tw-bg-white tw-px-4 tw-py-4 sm:tw-sticky sm:tw-top-16 sm:tw-w-[13rem] sm:tw-flex-none sm:tw-self-start sm:tw-py-0 sm:tw-pl-0 sm:tw-pr-0 sm:tw-pt-14"

The class of sm:tw-pt-14 can be substituted for an inline style of top: 14.6rem !important. This maintains the initial vertical space, but there will be a larger space when scrolled.

Testing:

Trial and error brought me to the 14.6rem value within DevTools. Sorry, I don't know vue, and wasn't able to get environment set up completely.

Love this alternative! Keep it up :)

[jonyTF]

Hi @rbgk! Thanks for the feedback and the suggested fix.

A little confused on what you mean when you say the entire list will be shifted with the page when scrolling and hovering over a respondent. Can you send us a video of the bug occurring?

Also! If you want to view a single respondent's availability while scrolling, you can click on their name and it will show just that person's availability.

[rbgk]

https://streamable.com/vld3ba - Auto expires after 2 days!

What I don't really like about selecting a respondent's availability is it makes the "if needed" slots green. You do get more info when you hover over each slot, but I'm hovering the respondent for a reason -- I want only their times, both available and if needed. The current selection combines both types of availability into one solid color, and requires the user to hover over timeslots for confirmation.

In cases where there are both green and yellow overlaps, there definitely needs to be a distinction, without need of hovering.

[jonyTF]

Oooh I see I see that makes sense!

What if we made it so that if you selected a single person it showed the if needed times in yellow instead of combining available and if needed into a single green color? Would that solve your problem?

Also regarding green / yellow overlaps we've thought a lot about this issue and our main finding is that for most people it's more important to find a time that works for everybody rather than a time everybody prefers. Previously before if needed times there would often not be a single time that worked because people would only fill out their preferred times. For the use case where you're trying to optimize for when people prefer, we added the "hide if needed times" toggle so you can check if there's an overlapping time that everybody prefers.

[rbgk]

What if we made it so that if you selected a single person it showed the if needed times in yellow instead of combining available and if needed into a single green color? Would that solve your problem?

I would say yeah.

overlaps

Yeah that makes sense. The toggle definitely works, and it's pretty easy to understand once you play around with it more.

One thing I would suggest for UX: Respondents' checkboxes should remain checked, when clicking on the options switches. Maybe even consider extending it to extremes, because I can only imagine the frustration upon clicking any whitespace on the page, and having all checkboxes cleared. Clicking anywhere, with the exception of the kebab menu, would clear the checkboxes.

[rbgk]

Some further thinking...

Thoughts on hiding the if needed times by default, and toggle to show?

it's more important to find a time that works for everybody rather than a time everybody prefers.

Thought process was, "hmm I don't see any working times, let's check if someone has lesser desirable time slots"

Sidenote: Is there a reason 12h format has 12am listed at the bottom, while 24h's 0:00 is at the top?

[jonyTF]

One thing I would suggest for UX: Respondents' checkboxes should remain checked, when clicking on the options switches. Maybe even consider extending it to extremes, because I can only imagine the frustration upon clicking any whitespace on the page, and having all checkboxes cleared. Clicking anywhere, with the exception of the kebab menu, would clear the checkboxes.

Good point! We will make it so that there's a button you can click to clear the checkboxes to eliminate this confusion (maybe "clear selected respondents" or something)

Also, regarding hiding if needed times by default, we decided to show the if needed times by default because we want to make the if needed feature as easy to access for users as possible. If we hid it behind a menu, then it would be harder to find for first time users.

[jonyTF]

What if we made it so that if you selected a single person it showed the if needed times in yellow instead of combining available and if needed into a single green color? Would that solve your problem?

Just deployed this! Will now work on the "clear selected respondents" button

[rbgk]

Awesome :D