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 moreSuperimposing images for the purpose of comparison.
 An inviting way to compare related images is superimpose a spyglass. Here users compare X-ray, infrared and other views of a painting.
|
Problem
You need to compare views of the same item, or from the same viewing angle, such as comparing X-ray and normal views of a human body or simulating views of color blindness.
Solution
Superimpose the set of images and allow the user to make comparisons using one of three methods:
- Swapping: Provide buttons next to an image that allow visitors to swap the images. For example, the buttons could be marked “X-ray” and “Regular.”
- Spyglass: Have a movable window that people can move around a scene. The visitor can drag the spyglass around, thus showing and hiding the alternate view This approach can also be used to reveal translations, or permutations of a scene. For example, in a view of US cities on a map, a movable filter could reveal which cities have high crime rates.
- Slider: Provide a graphically dominant knob that visitors can slide back and forth.
Discussion
Swapping is generally the easiest to implement, and is best to use if the images are similar. The human brain is especially good at detecting differences through motion. By swapping different views, it is immediately obvious to the eye how the two images relate and how they differ. The swap should be immediate, with no flicker in between.
The spyglass if helpful if the images are quite different, or viewers need a reference. For example, an X-ray can be confusing without the visual image surrounding the spyglass for reference.
A slider is helpful when it is useful to see in-between views. This is similar to adjusting the brightness of a television. For example, compare how a scene looks to an elderly viewer as their cataracts deteriorate and a scene looks more yellowed and murky. There could be a photograph of an everyday scene, with a knob on a slider beneath. The user moves the knob left and right, adjusting the scene.