Design patterns for before/after?

12 Oct 2010 - 4:39pm
4 years ago
3 replies
726 reads
DrWex
2006

I need to prepare a (Web) presentation to show changes done as part of a redesign. The format will be Image A (before) vs Image B (after). Because of the detail involved it is not feasible to shrink the images down to a size where they can conveniently be shown side-by-side.

I have thought of two other patterns that might be used, and wondered what people thought of them or might have other suggestions.

  1. I can present the images stacked, one above the other. This gives at least some visibility to both at the same time, but requires scrolling.
  2. I can present the images using a click-to-change pattern; e.g. show the "before" image and the viewer clicks a link or button that shows the 'after" image in the place where the before image had been. This minimizes the use of space, but makes side-by-side comparison much harder, as people must click back and forth to see the two images.

Thoughts?

Comments

13 Oct 2010 - 1:30am
fj
2010

The human eye is very good at noticing movement. I would suggest an animation, perhaps annotated with arrows, in which one page morphs or re-arranges into the finished state.

13 Oct 2010 - 3:06am
harrybr
2010

The OK Cupid blog often uses visualisations with a toggle-able view. Seems to be effective. Like this:
http://blog.okcupid.com/index.php/the-real-stuff-white-people-like/



On Wed, Oct 13, 2010 at 9:16 AM, fj <fj.ixda@exonome.com> wrote:

The human eye is very good at noticing movement. I would suggest an animation, perhaps annotated with arrows, in which one page morphs or re-arranges into the finished state.

13 Oct 2010 - 7:18am
Tania Schlatter
2007

I agree with FJ's comment about the eye noticing movement. A simple animation effect can achieve this. I've used clicking back and forth between images to fool the eye and create an animation effect with still images. The slickest effect for this I've seen was in The New York Times Magazine online to show before and after images of models' faces during fashion week: bit.ly/bd7ij8. They used a vertical slider that allows you to move one image back and forth over a second image to see the differences between the two.  

Syndicate content Get the feed