Image Scrollbars

Some sample editors and sequencers use miniature views of samples or arrangements for horizontal / time-line navigation. Years ago I saw a screenshot of some kind of map viewer doing similar with a vertical scrollbar.

So here’s an experiment with scaled images on scrollbars. Click on the thumbnails for the full size images.

Image Scrollbars Portrait
A work in progress in the GIMP. Actually, I hide scrollbars and rely on the navigator there. Still interesting to get an idea of how informative an image might be if squeezed into 16 pixels. Totally forgot the little arrow buttons on the scrollbars here. Likely because I rarely use them 🙂

For images with differently coloured regions, I think this can work quite well. In this example, the eye region is quite clear.

The full image:

The same concept applied to a web page in Firefox:

Image Scrollbars Website

Well, many websites are too uniform to get much out of this, I guess.


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

4 Responses to Image Scrollbars

  1. red says:

    In my opinion this Scrollbar looks a bit too confusing… Perhaps its just because I am not used to this.

  2. NN says:

    You wouldn’t believe, but it was already made

    (sorry, russian only, but main idea is clear)

  3. thorwil says:

    NN: If that shockwave/flash thing would work here, it would be clear. Oh, and I sure believe, as I’m rather used to find that others had the same or similar idea before 😉
    In this case it was quite clear that I picked up an old idea.

  4. Arnold says:

    That scrollbar looks ugly. As if something during drawing went wrong. I doubt that anybody will get that its meant to be an image of the main-widget.

    Maybe show a popup with the whole picture and some markings for the current position while scrolling?