There are gender wars, and then there are casualties. It wasn’t until 2011 that the behemoth toymaker LEGO acknowledged girls’ desire to build with bricks, even though the company had long before made a seemingly effortless pivot to co-branding, video games, and major motion pictures. So it’s little wonder that girls face all-too-real obstacles when […]
Read moreAvoiding clutter while amplifying information.
 The pigment composition of a painting is revealed by examining microscopic views. The caption for each cross section is dynamically shown.
|
Problem
You need to label an image with captions while avoiding clutter. There is too much information to fully label the image without becoming illegible, such as identifying a group of people or the anatomy of an insect.
Solution
Display and enhance the region of the image at which the visitor is pointing, using one of two methods:
- Dynamic caption: Change the caption to correspond to the area where the user is pointing. For example, in an illustration of the planets, the user points at Saturn, and the vital statistics of Saturn are displayed.
- Contextual pop-ups: Include details in floating windows.
Discussion
If there are only a few important regions of the image, delimit the “hot” regions by outlining, marking them with labels or numbers, or some other means, so that it is obvious where the user should point their mouse.
The floating pop-up can be opaque, semi-transparent, or have time-dependent transparency, whereby it fades after five to ten seconds so the user can see what is behind it.
If there is information for dozens (or hundreds) of sub-regions spanning the full image, it is not necessary to delimit regions because the user can point anywhere. This is especially powerful for annotating images where the interpretation is not obvious, such as an X-ray of a suitcase.
Another extension of this technique is to conceive of the contextual information through a viewing filter, such as a spyglass. For example, passing over a map of the China with a spyglass, color coding could indicate population density. More than one spyglass can be overlapped. For example, in a depiction of anatomy, one filter could reveal muscles and another could reveal nerves. In their overlap, both muscles and nerves are shown.