UX solution for dashboard with scrollable content boxes?

Question

So i have come up with a UI design for a dashboard, that is constructed like the following:

the dashboard has a scroll activated depending on the the total height of the added boxes, the issue here is that these boxes are resizable therefore the these boxes also have scrolls (depending on the content). So sometimes when the users intended to scroll the down to see the boxes in the dashboard, they scrolling down within the content boxes instead. Currently there are 20px margin between the boxes, but it still seems to be annoying for the user to try to target these spaces when wanting to scroll within the dashboard.

So pretty much, it results in shitty experience. Not sure how if there any best practices for handling these situations for the dashboard, but any tips or links to other pages that have solved this issue are appreciated.

EDIT:

To visualize the idea, what i am trying to achieve is something like https://tweetdeck.twitter.com but the boxes are stacked vertically instead of horizontally.

The reason i am not going with the horizontal design, is because horizontal scrolling does not come naturally and also its easier to scan content vertically. I like the horizontal design on the mobiles, but not that much on the desktop devices... I am open to any solutions.

EDIT2: I was thinking to let the user hold shift button while scrolling to make sure its the parent scrollbar that scrolls (I would add it as a pro tip somewhere visible for the user). as for mobile, i would apply the horizontal design, what do you guys think?

Answer 1

Using User Action Driven Scroll Might Help

If I have understood correctly, you have a global scroll (applied to the complete page) and another scroll inside a particular card. Now, while scrolling vertically, the nested-scroll is causing the irritation, because the behavior is going against the user's intended action/mental model.

An approach which you can try is this:

State 1:

Instead of showing a scroll by default, you enable it only if the user clicks on a "View More/Load More" button.

State 2: As soon as the user clicks on the view more/load more button, the scroll is activated

Now, it can be active till the time user clicks somewhere outside the box or clicks on any of the other boxes.

State 3: As soon as the user clicks on any of the other boxes, the local scroll of the card will be activated and the scroll of the previous box will be gone:

If the user clicks anywhere else, and not inside any of the cards, you go back to state 1, and now the global scroll can be used to scroll the dashboard. The global scroll also is applicable if the user's mouse is not positioned inside the box which has a local scroll.

Answer 2

Nested scrolling pretty much always results in bad UX. I'd recommend making the boxes take up their full height. You could allow the user to add sidebars, but make sure only one scroll bar affects any given area. Also, horizontal scroll is probably also a bad idea. (I'd only recommend using it for content that cannot be wrapped or resized such as code.)

Answer 3

As the shift key solution might be a way to go with your problem, without any hint to the user they won't know about it, hence they are not likely to use it.

Another solution occurred to me as considerably intuitive and not requiring much guessing from the user.

• the whole page vertical scroll is the default action on your form
• once the user holds mouse pointer within a box for a certain period of time (say 1 second), this box becomes active (and gets a highlight or some other visual hint) and the scroll action is now exclusive to the box
• the box loses focus and thus the scroll action (and the whole page gets focus and scroll action) if the mouse pointer is moved by certain amount of pixels (as if the user has shaken the box off) or if the mouse pointer gets outside the box

The time required to trigger the box has to be chosen experimentally, I'd say, 1 second is a good starting point in my opinion.