2

I have a div that sometimes contains too much text to view at once, and I need the user to be able to scroll.

My concern is that it's not particularly obvious that they need to scroll, especially if the bottom line is fully visible, you can see what I mean here.

enter image description here

The other issue is that while there is a scroll bar, it only appears when the user is in the process of scrolling, and it's very thin and hard to see.

Any ideas on ways to improve the user experience when scrolling here? Should I add some ... to the last word? Should I add a small bar to the bottom with a prompt "Click and drag to scroll?" Or maybe a custom scroll bar? All of the above?

1
  • If it is probably to need horizontal scrolling, so custom scroll bars seem to be appropriate solution.
    – Serg
    Jul 15, 2021 at 10:43

3 Answers 3

4

People have been using scrollbars since the dawn of the internet. This is what they are used to seeing when there is additional content that is not visible.

The solution should absolutely be to ensure that your scrollbars are always visible when there is additional content that requires scrolling to see.

Given your example, I would also suggest redesigning those scrollbars so they are more prominent, otherwise the user may overlook them.


The suggestion to disable the "next" button (as posted in another answer) is fine, if you feel it is important. However, you will still have the problem that the user doesn't know there is anything to scroll and they will be even more confused that the "next" button is disabled with no obvious reason as to why it is disabled.

If you are going to go with disabling the "next" button then consider adding some feedback so the user knows what action is required of them. For example:

You must read all the text before continuing.

1

Adding a truncation ellipsis to the last word is risky, because the user might think that the "Next" button will provide more content.

The problem you're describing is called a false floor or illusion of completeness issue. A common solution is to make sure that the design deliberately looks incomplete. We see this on carousels that show just a little bit of the off-screen item (image is from the linked article):

Old Netflix carousel showing peeking offscreen items

You could make the bottom-most line of the visible content peek out, instead of looking like something complete. If that's too subtle, your idea of a custom scrollbar could work. It could always be showing, and act as a deliberate signifier that there's an interaction that the user needs to do.

If it's mandatory or highly necessary that the user read all of the content on each screen, you might also disable the Next button until the user scrolls to the bottom to ensure that they don't accidentally skip.

1
  • 1
    I love the idea of disabling the Next button until the user scrolls to the bottom, thanks for that. That's the route I'm gonna go. Jul 15, 2021 at 17:34
1

If you cannot ensure that one element (in this case, a line of text) is shown partially, thus encouraging the user to scroll to see more, you can force this effect by adding a gradient that visibly covers part of the content.

The gradient would need to disappear at the end of content, so you either need a padding at the top and bottom or check the scroll position and fade the overlay in/out when needed.

Image with the suggestion involving gradient overlays at the top and bottom

3
  • That's exactly what I need. Since you included a screenshot, would you mind sharing the code you used to accomplish that? I've been trying to look up snippets and adjust it for my purpose, but I'm struggling to get it to work the way you show in your screenshot. Jul 18, 2021 at 19:16
  • I've just drawn it in Photopea, but in CSS you can do it via pseudoelements ::before and ::after on the scrollable content's wrapper. They need to be positioned absolutely and have 100% width and 1em height, with vertical gradient background.
    – fri
    Jul 18, 2021 at 19:25
  • Ok thanks I'll keep trying. I appreciate it. Jul 18, 2021 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.