We have a list of items for a chart legend, and some other lists where there are items hidden below. We have several areas in the UI where we have a constrained space, and items that are hidden below.

Our current solution is that on hover there's a scrollbar visible, plus we have a white to transparent gradient at the bottom, so the last it fades, to suggest the list continues. We're in the process of refining this gradient...

enter image description here

There are suggestions and pressure (not from users!) to put buttons at the bottom to make it explicit that you can scroll down, but that is adding more chrome to the UI, which I don't want to do. We already have a good amount of chrome that's necessary, but I don't want to add more controls if possible. I am wondering if I'm leaving some other options on the table.

I'm sure people have come across this before. Any help on subtle (or other) solutions are welcome.

  • Is this list always big or it can sometimes have only 3 items? I think the size of the list (item count) must be taken in consideration before looking other solutions.
    – Caluso
    May 8, 2015 at 23:07
  • It would really help to know: 1) what sort of application is this? Desktop? Web? 2) Are you to support mobile or tablets? 3) Roughly what sort of target audience we are talking about?
    – Izhaki
    May 9, 2015 at 20:25
  • 1. It is desktop only. 2. we're not concerned w/ supporting mobile 3. Our audience is API developers. Our users are super technical. And I've not seen evidence in usability testing that people are missing the list items. That's why I'm pushing against adding more chrome to the UI. I can't show more of the screens (nda), but we have some IDE screens, plus analytics pages that use this device currently.
    – Mike M
    May 10, 2015 at 2:14
  • 1
    @Mike I'm not getting it. It's a desktop application and you want the user know they can scroll but you're not showing them an scroll bar? Why? May 11, 2015 at 3:24
  • Hi rewobs, Very sorry if i was unclear. We do have a scroll on hover, but I don't want to make it persistent, as some of our ui is very cramped, and we lose real estate to labels. Since our users are advanced devs, I see no reason to not go w/ hover scroll, but I posted this in hopes of if there's any other devices I haven't considered. I'm trying to keep a crowded UI as pared down as possible.
    – Mike M
    May 13, 2015 at 1:51

2 Answers 2


Putting buttons at the bottom and top of the widget is a bad idea. In my opinion that would signal to the user that scrolling is not an option, and reduce the discoverability of the scrolling feature. You have advanced users, and a complicated interface, so I'm guessing that learnability is not as important as efficiency.

Personally, I think your design is a great option. My first advice would be to stand your ground. Don't fix it until you know for sure that it's a problem. Do user tests, record them and show them to your boss. Figure out what's actually going of before you redesign on the insistence of some stakeholder who's overstepping his bounds.

If you do lose the argument, the best option I can think of is an extremely minimal scrollbar. Basically the OSX scrollbar, without the hiding feature. Use a light gray and show nothing but a slim rectangle. It should add almost no clutter to the interface but make your boss happy:

enter image description here


Show the scrollbar

Usability must come first, and the scrollbar is necessary to show users how to use the legend.

Once you establish the UX priority, you can then work to calm the layout.

Your legend has different colors, fonts sizes, font weights, shades, and difficult non-grid alignment. All of these create UX clutter, which is why you feel like the scrollbar adds too much chrome.

Instead, de-chrome the interface.

Here are a couple examples of scrolling lists. The left one is adapted from an example in Google's Material Design. The right one is a sketch for calming your dialog:

enter image description here

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.