Community Embraces New Word Game at Mid-Year Play Day This past Sunday, families at Takoma Park’s Seventh Annual Mid-Year Play Day had the opportunity to experience OtherWordly for the first time. Our educational language game drew curious children and parents to our table throughout the afternoon. Words in Space Several children gathered around our iPads […]
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.