Choosing thumbnails or items

Organizing thumbnail images to increase ease of use.


You need to let a user choose among a set of disorganized thumbnails.


Use one of the following four methods to increase readability and ease of use:

  1. Ordered grid. If you lay thumbnails out within a strictly ordered grid, they will become more manageable.
  2. Animated row or column. The thumbnails are arranged in a linear shape, and the row flows from side to side, showing a subset of the thumbnails.
  3. Cylinder display engine. As the visitor moves or drags the mouse, a ring of thumbnails rotates about the vertical axis. This brings some thumbnails to the front, while others recede and fade to opacity. Clicking the images both enlarges the image panel and adjusts its outward radius. Spin the rotational device using the horizontal position of the mouse. Properties of the rotational device allow for the precise placement of each image, distance from center, rotation speed, size, and more.
  4. Spherical magnification. As the visitor moves the mouse, individual elements are displaced and magnified around the edge of a transparent sphere. The system works by defining a reactive object in continual watch of the mouse. Pressing the mouse button down creates a momentary increase in the amount of magnification (7x vs. 4x). When the mouse comes within a specified distance of the object, the object is first pushed away, and then attracted to the mouse as it draws nearer. In addition, the object is magnified by a sinusoidal relationship to the distance from the mouse. The effect is a reactive field of objects that appear to be magnified by a lens controlled by the mouse.


Using an animated series of thumbnails can be eye catching and engaging, but you have to be careful that the motion is not too computationally intensive and slow on lower-end machines. Whenever animating motion, try to use physics-based algorithms for motion, with acceleration, gravity, and friction, so the motion seems more natural.

The notion of zooming can be abstracted from zooming into a photo, to narrowing a data set. For example, from a set of all the fundamental elements, visitors can zoom in on the metals, and then zoom in on the heavy elements.

Leave a Reply

Your email address will not be published. Required fields are marked *