Optimal thumbnail gallery view on a square grid
A design suggestion.
Most photo apps incorporate a thumbnail gallery view. There are two main layouts they use for this view: some tile the thumbnails so as to fill the space available, while others lay out the thumbnails on a square grid. This suggestion came while using the square grid layout.
A square grid layout usually shows either square thumbnails cropped from the original image, or thumbnails of the original aspect ratio of each image with horizontal or vertical letterbox effect. In the more configurable apps, the administrator or the user can chose from these two options.
I would often appreciate a compromise which nearly fills each square, fuller than using the original aspect ratio, but still a bit rectangular to provide a visual hint as to the original's aspect ratio.
Why? If the thumbnail shows the original (rectangular) aspect ratio, it uses too little of the available space: the image is smaller than necessary and thus its subject is harder to see. If the view crops the thumbnail to an exact square, we lose a useful hint about the original shape. In practice I find this makes it harder for me to find the images I am looking for, and harder to appreciate what images are available.
The TV and film world has used this approach for years in adapting between 4:3 and 16:9 screens. The broadcaster or publisher may choose a combination of cropping and letterboxing. In addition they may apply some linear or non-linear stretching. The TV end user is typically given a choice among a few such options. (The publisher's or broadcaster's choice can interact badly with the TV end user's setting, but that's not relevant to a thumbnail gallery.)
- full squares (sides or top and bottom of original are cropped)
- optimal (cropping and letterbox and stretch)
- original aspect ratio of each image (with letterbox effect)
A similar approach can also be of benefit in a space-filling tiled layout. These layouts sometimes suffer from extreme size disparity, for example by scaling the portrait and landscape images to have the same vertical height. Cropping each image half way to square, say to the square root of its original aspect ratio, would substantially reduce the disparity. More finesse could no doubt be worked out.
This is the sort of detail that can make the difference between a good user interface and a great user experience.
Follow/Feedback/Contact: RSS feed · Fedi follow this blog: @julian@wrily.foad.me.uk · use the Cactus Comments box above · matrix me · Fedi follow me · email me · julian.foad.me.uk Donate: via Liberapay All posts © Julian Foad and licensed CC-BY-ND except quotes, translations, or where stated otherwise