DPS app design spotlight: Nat Geo slide show

(This is the first in an intermittent series of posts where I plan to highlight interesting or innovative apps built using Adobe Digital Publishing Suite.)

National Geographic is doing some interesting things in their DPS apps. A couple different photo treatments in the November 2011 issue of National Geographic Magazine caught my eye today. These are nice examples of breaking out of the box of the usual "photos stacked on top of each other" metaphor.

Several things I want to point out about this example:

1. Note how the portrait and landscape images along with the associated captions "wrap" around the image thumbnails, rather than just presenting the slides and captions in a fixed-size "box" above or beside the thumbnails. This is possible in DPS because buttons can appear above multi-state objects, as long as the buttons have both a normal state and a click state.

2. The image thumbnails are not just shrunken, hard-to-recognize versions of the larger photos. The designer has cropped out a small, recognizable detail of the larger photo.

3. The "click" state of each thumbnail has a light blue stroke, so the user can tell which image is currently displayed.

4. The DPS "Swipe to change image" option is active, so the user can swipe across each image instead of clicking on the thumbnails. Personally, I wouldn't activate this feature when so much of the screen is occupied by the multi-state object. When "Swipe to change image" is active, the user can't swipe across the image to move to the next screen. I think this will inevitably confuse users. To Nat Geo's credit, they added a right-pointing arrow icon in the upper-right corner to prompt the user to swipe there, instead of in the image area.

Here's another interesting example:

While this example looks complex, it is just multi-state objects activated by buttons. Because of the way things overlap, it's just a little harder to set up. I like the way the background is partially obscured by a gray box when the photo is enlarged.

Production hint: Since a multi-state object in DPS cannot contain an actual, working button, the visible show and hide buttons are actually "dead" artwork that are part of the hidden/visible states of the multi-state object. Drawn on top of each these icons is a frame with no fill or stroke that is made into a button with a "Go to State" action.