We have a standard thumbnail browser interface in a desktop application which (for our discussion) resembles much to Windows Explorer. Something like this:


download bmml source – Wireframes created with Balsamiq Mockups

While the above design is ok, I think that many times the users want to adjust the thumbnail width to fit exactly in a certain number of columns.

How do you think that's better to implement this?

I have two variants:

  1. Add three buttons next to the 'Thumb size' slider with the captions [<] , [Fit] and [>]. When the user presses [Fit], the program will take the current number of columns from the thumbs pane and calculate the appropriate width in order to exactly fill the width of the panel. When the user will press [<], the engine will decrease by one the number of columns and will do again the same fitting engine. And when the user will press [>] the number of columns will be increased by one and the same fitting algorithm will be called.

  2. Add a drop down combo list next to the same slider with the number of possible columns. IOW, a drop down list with the following items: 2,3,4,5,6,7,8,9,10. When the user choses a value the fitting engine will resize the thumbs in order to exactly fit the desired number of columns.

  3. Any other idea? :)

...or perhaps I try to solve a false problem?

  • Do you need arbitrary thumbnail sizes or can you just rename your slider "thumbs per line"? (Or course, this raises the question if 1 thumb per line is the rightmost setting to keep the semantics "right gives bigger thumbs" or the leftmost because it's the smallest number. Maybe not so good an idea after all.) Jul 6, 2013 at 7:24
  • Yes, I need arbitrary thumbnail sizes. See the feature in discussion like a refinement, an enhancement etc. Jul 6, 2013 at 8:00
  • How do you infer that your users want to adjust the thumbnail width to fit exactly in a number of columns? And in the (rare?) case that they do, what is to stop them from resizing the main window? Jul 6, 2013 at 9:11
  • How about keeping everything same just changing the text on the slider to something like Elements per row and then doing math on sizes and stuff.
    – Nash Vail
    Jul 6, 2013 at 9:27
  • 1
    Could you mark (with a triangle so such) on the thumb nail size for 1, ..., 10 columns, so when you can directly click on having 1, ..., 10 columns? Personally I prefer the thumb nails to be a large as possible without having to scroll sideways. So I wonder why do you need the thumb nail size in the first place and just allow to control the number of columns?
    – Lothar
    Jul 6, 2013 at 11:47

3 Answers 3


One option, very fast and obvious, is a series of buttons to allow the user to specify the number of columns. This will work best with a small number of options. (Buttons are oversized in the illustration below.)


download bmml source – Wireframes created with Balsamiq Mockups


I think users choose to have control on the thumbnail size over number of columns. Thumbnail size gives the ability to control content visibility while the number of columns has no obvious advantages. So, content first!

The worst here is the conflict between two controls: first, user sets the thumbnail size to fine see the content, then chooses number of columns and thumbnail size changes that possibly breakes content visibility! And how to undo?

Also think of window resizing. If you prioritized number of columns, then thumbnail size changes to possible uncomfortable size. So the user loses control here!

And last, your current interface could be better. Hide thumbnail size control to options somewhere in menu and also give the ability of thumbnail size changing with direct thumbnail manipulation via mouse. Although it is invisible for the new users, it will bring the fantastic experience a bit later. To demonstrate the feature you could use tooltips or so.

enter image description here

enter image description here

  • It doesn't have to be invisible to new users if, as you did in the mockups, the thumbnails have a recognisable "resize" handle in the lower right corner as that is a well-established pattern in most GUI's. However, it should not be the only way to resize the thumbs. Jul 6, 2013 at 9:09
  • @MarjanVenema, I meant the resize handle is not as visible as the slider control. But you are right, it's easilly discoverable. Jul 7, 2013 at 7:20

I once read that programmers only understand 3 numbers. 0, 1, and N. (I am guilty of this) - When a programmer creates a thumbnail size control he says "if it can be more than one size why not any sizes?". In reality users adjusting the thumbnail width probably only want to control the number of columns. Most likely they don't really need analog control of every pixel width. I would completely remove variable control and make the slider exclusively snap to increments that change the number of thumbnail columns.

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.