Scrolling through Images

When scrolling through images, for example looking for a specific image in a photo browser such as iPhoto, an interesting issue occurs: On the one hand, you want to show images large enough so that you can make out the details. On the other hand, if you do that, images become so large that you have to scroll quite slowly to make sure they aren't gone before you were able to get a good look at them.

To fix this issue, photo browsers typically employ a variety of tricks which are supposed to help you figure out where in your list you are. The aforementioned iPhoto will display information about the date of the image you're currently viewing:

iPhoto's date HUD shown while scrolling

A few days ago, David alerted me to a neat web browser plug-in which facilitates image viewing. PicLens offers a full-screen view for images on popular web sites such as or flickr. Once PicLens is installed, you can click on the play button on an image on flickr, and PicLens will show your images in its own browser.

There are many interesting UI features in this browser, but the one I like most is how PicLens fixes the "viewing vs. scrolling" issue. When viewing, quite large previous of the images are shown in a grid:

PicLens while viewing

As soon as you start scrolling, however, PicLens changes your point of view:

PicLens while scrolling

The size of the images doesn't change, but thanks to the 3D view, you can see which images are coming up. I think this is a pretty smart solution to the "viewing vs. scrolling" issue.

If you require a short url to link to this article, please use

designed for use cover

But wait, there's more!

Want to read more like this? Buy my book's second edition! Designed for Use: Create Usable Interfaces for Applications and the Web is now available DRM-free directly from The Pragmatic Programmers. Or you can get it on Amazon, where it's also available in Chinese and Japanese.