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 images.google.com 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 http://ignco.de/9

If you liked this, you'll love my book. It's called Designed for Use: Create Usable Interfaces for Applications and the Web. In it, I cover the whole design process, from user research and sketching to usability tests and A/B testing. But I don't just explain techniques, I also talk about concepts like discoverability, when and how to use animations, what we can learn from video games, and much more.

You can find out more about it (and order it directly, printed or as a DRM-free ebook) on the Pragmatic Programmers website.

ignore
the
code

written by
Lukas Mathis

Hi. My name is Lukas Mathis. I studied Computer Science/Software Engineering and Ergonomics/Usability at ETH Zürich. I work as a software engineer and user interface designer for a swiss software company creating process management software. I've written a book about usability. My first computer was a Performa 450, my first programming language was HyperTalk, my first electric guitar was a cheap Peavey, my first videogame was a VCS 2600 and my current snowboard is from Lib Tech. I live in a small cottage in a remote part of the Swiss Alps, and you can reach me at or on twitter.

Subscribe via RSS

Get Updates via Twitter

Subscribe by Email

or browse the archives.