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).

Basic concept

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.

3 Answers 3


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!

enter image description here

  • No, I don't have to have the dates to the left, so this would definitely be a possible option. The reason I had thme on the left is that it gives a good overview over all the dates regardless if you got many thumnails opened or not.
    – erik
    Commented Jul 11, 2011 at 14:25

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


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..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.