Scrollbars with popups

Scrollbar with popup

On top: a normal scrollbar for reference.

Followed by a button-less scrollbar that is meant to be draggable on the whole area (just like my slider designs). This means the part representing the view port doesn’t need to have a minimum size for staying usable as target area, but can shrink down to a 1 pixel line.

On mouse-over, 2 arrow buttons appear right below the pointer, fulfilling the role of the buttons usually found on both ends of the scrollbar. They follow the pointer by moving with it once it hits the edge of the popup on either side. This means that the target size of the up / down buttons equals the scrollbar size, but the division depends on the relative pointer position.

This design should have the effect that scrolling via dragging or clicking can be performed significantly faster due to easy to hit targets. Also the view port size can be represented correctly until only a 1 pixel line is left. The only cost (after getting used to it) should be that clicking on the through is no longer a separate action that can be tied to a larger step size.

About thorwil
I'm a designer from Germany. My main interests are visual and interaction design, free/open-source software and (electronic) music.

Comments are closed.

%d bloggers like this: