Circular Image Selector

For a recent web project at Apollo Media we have been looking into a intuitive solution to let people select an image from a huge set. Our goal is to create an image selector that let users select an image for a grid based poster. We tried using a rectangular widget with a horizontal scrollbar that can be used to navigate through all the images; just like the current Flickr image selector. The user can drag an image from the list and drop it onto a droppable area in the post (which is visualized in the web app). The image below shows this rectangular image selector:

The good thing about this selector is that the user has a good idea of where he is in the collection due to the visual cue of the scrollbar and the know. He can quickly jump to a particular section in the set by clicking on the bar. The downside about this is that it decoupled the action and the goal (both phychologically and spacially): the user had to drag and drop the image to the droppables. Also, the amount of visible photos is limited. A solution to this was using a list with multiple rows as shown in the image below.

Although this vertical list works a lot better, we still had the issue that the image selection used drag and drop which can be a good solution though we didn't find this solution a fun way to fill a grid-like poster with images. After some thinking and brainstorming, my colleague pointed me to a jQuery class which creates circular numeric sliders. This gave us the idea of creating a circular slider as shown in the image below:

We implemented the idea with jQuery and it gives us a fun, quick and intuitive solution to select an image from a huge set. We started with only the inner circular slider without the ring of images on the outside. Though this didn't work well because the user does not have a hint of where he is in the total set. Besides this ring we added a small line (in green below) around the center image to show the user where he the selected location is found in the complete set.