Horizontal scrollbar gets stuck in New UX
When scrolling left to right in a New UX worksheet page, sometimes the scroll bar gets locked to my mouse movement as if the mouse is still clicked down on the scroll bar, even when it isn't. So, when I'm done scrolling and release the mouse button and move the mouse around, the table still scrolls left and right in relation to the direction that I move the mouse. The way I'm able to get it to stop the undesired scroll behavior is by clicking on the scroll bar again.
- This isn't easy to describe. Please don't hesitate to ask for clarification.
- I've tried to identify steps to recreate the issue, but am unable to (I know, I know, it's a troubleshooting dream).
- End users have pointed out the issue to me: they have experienced it and I have as well. We're using Google Chrome on Windows machines. For me, it has occurred with both a bluetooth mouse and the touchpad built into my laptop.
- I'm wondering if this is some sort of 'feature' that we're inadvertently turning on, or if it is a bug.
- I'm curious if anyone else has experienced a similar issue.
I know exactly what you're talking about! And it is quite frustrating and unfortunately I don't think there's any fix for this yet
I can only explain what causes this behaviour and ask your users to avoid activating this 'feature' it by accident:
The hidden scrolling is activated when the scroll bar is clicked on and the mouse is moved outside the element containing the scroll bar
Here's the behaviour replicated:
Note how I moved the mouse outside the Demand Review grid while the button it was clicked (yellow highlight when clicked). And then when I move the mouse, annoyingly the grid moves as well
Here's how to avoid this happening:
It's important to avoid moving outside the element with the mouse button clicked down
Hope this was helpful
What your experience seems to point more to the nature of how you have designed your UX.
If you are having to scroll to the right to view the page I would recommend limiting the size of the cards on the page and stacking them horizontally or consider isolating the data in the card and presenting it in a worksheet.
There is a tendency to squeeze as much as possible onto a page where sometimes less data is more in terms of directing the users attention.
The concept of progressive disclosure comes to mind where the user is gradually exposed to more detailed layers as they progress through the app. A detailed grid or matrix should be close the to end of this journey and ideally should reside in a worksheet where the user can pivot, filter and dive deep into the detail.
Use summaries, charts and KPI cards to direct the users attention to the data that requires action rather than flooding them with everything in the first instance.
Good luck, Chris0
Thank you for the tips, @ChrisAHeathcote . I agree with the merits of hygienic UX design! 🙂 I should have noted in my original post that the issue is occurring in a worksheet, rather than a board. @anirudh 's example is a good representation of the issue I was having.0
Thank you, @anirudh ! This is exactly what I was looking for. I'm able to replicate the issue per your instructions and now have a great new tip for end users!0
I will be interested to see if you get any valid solutions as this does look like a very frustrating issue for both user and model builder.0