How to show correspondence between two lists referring to the same data?

Question

I am currently working on a desktop application handling photos. One of the screens we have is a view where you can see a list of albums sorted by date to the left, and when clicking on an album, a list of thumbnails for this album shown up to the right, see the sketch below. If the number of thumbnails exceeds one row, it will create a new one (this does not happen very often as the number of thumbnails are generally small).

Now, our problem is this: As it is possible and desirable for our users to view thumbnails for more than one date at the same time, this makes it very hard to see which date on the left corresponds to a particular set of thumbnails to the right once you get 3+ open and you need to start scrolling. Even if you can fit 5 dates in the view to the right, it can be confusing to see which date corresponds to which set of thumbnails.

What we have done so far is to:

1. Show a small icon in the list to the left indicating if the thumbnails are showing or not.
2. Show a title bar above each set of thumbnails with date and a custom tag.
3. Always open them in chronological order.

Still, this does not feel like enough. Do you have any suggestions of how we can better show the correspondence between dates to the left and the thumbnails they refer to in the view to the right?

Restriction: Coding the different thumbnails sections with different color would not be an option because of our graphical profile and the fact that it will sometimes be used on gray-scale monitors. However, something that would be in different shades of the same color would work.

Answer 1

Do you have to have the dates separately on the left? Could you combine the dates list and the photos like in the mock-up below.

You get to use the full width of the screen - for more thumbnails before you get wrapping rows.

You get to see tags against all the dates at once even if not showing the photos expanded.

Each section could expand/show and collapse/hide via buttons at left (or put them on the right nearer the scroll bar, for less mouse travel).

The month (and any other info like year) is shown centered on the first date for the month.

Top and bottom right show how many earlier or later results are not being shown in the view.

You could even show micro-thumbnails in the collapsed section header, or at least the number of photos!

Answer 2

This is a really cool question. Have you considered coloring the background area of the thumbnails and coordinating that with the date list?

Answer 3

What if the date navigation panel is fixed and does not scroll with the rest of the screen? Then it will always be visible, and the user can select dates regardless of where he is in the field of thumbnails..