Thanks for coming to InDesignSecrets.com, the world's #1 resource for all things InDesign!

DPS Pullout Tabs tip

A common interactive feature in Adobe Digital Publishing Suite (DPS) apps is “pullout tabs”. These are created using InDesign’s Edit > Paste Into command and the DPS Scrollable Frame Overlay feature. Full instructions for creating the tabs can be found here.

These pullout tabs can be used for a number of interesting and useful interactive effects. But they all have one drawback: pullout tabs always create a “dead zone” the size of the tab content. Consider the following example:

2014-02-20 09.53.43

2014-02-20 09.53.47

In this example, there is a “dead zone” indicated by the dotted line below. If you swipe right-to-left anywhere in this zone, the tab will pull out, not necessarily what a user would expect. One would expect to have to swipe directly on the tab to pull it out, but because of the way scrollable frame overlays work, the entire region that is occupied by the “body” of the pullout tab causes the tab to pull out when swiped.

This behavior can cause users to get “stuck” on a screen like this, as they try to swipe right-to-left to move to the next article, but instead the tab pulls out.

ScreenSnapz001

One way to get around this is to include a button to navigate to the next article, or to include some visual cues indicating where the user must swipe to advance to the next article.

But another way to enhance the user experience is to minimize this dead zone. Here’s the trick:

Begin by creating a frame that “masks” part of the dead zone. In this example, you could create a frame like this (indicated by the blue region):

ScreenSnapz004

Note that I didn’t mask the entire pullout tab region. I left space on both the right and left so the user can grab the tab to drag it open, and to drag it closed.

Your frame should have no fill or stroke.

In the buttons panel, click on the plus button next to Actions, and choose the Go To Page action. Specify the page that your pullout tab is on, and then click on the Click Appearance to create a Click state. Your panel should look like the one below when complete, except the page number will vary. What you’re doing is creating a button that, when tapped, goes to the page that you are currently on, so it effectively does nothing.

ScreenSnapz005

Thats it! This button now creates a zone on top of the scrollable frame that will allow the user to swipe left, right, up, and down to navigate to different screens.

One minor drawback of this approach is that this button creates a dead zone of its own. If the user taps anywhere within the bounds of the button to try to reveal the DPS top/bottom bars, the bars will not appear.

Remember, buttons in InDesign/DPS are always rectangular regions. So if you want to get fancy and create a mask like the one below, you need to create 5 different buttons, one for each different-colored rectangle.

ScreenSnapz006

Shameless self-promotion: If you need to create these “super buttons” frequently, my Digital Publishing Pack 2 set of scripts includes a script called “Create Super Button” that creates these buttons with a single click.

I’ll be talking about how to create these pull out tabs and other kinds of interactivity at my PePcon pre-conference session¬†DPS Bootcamp: Building Folios for Digital Publications. Hope to see you there!

Tags
Related Articles
Comments

6 Comments on “DPS Pullout Tabs tip

  1. Just to add $0.02 here. Keith’s scripts are worth every dime to anyone involved in a DPS workflow. They’ll pay for themselves the first time you use them.

    That out of way, I’m not a huge fan of these large pullouts. I love scrollable content for vertical scrolling of text but I just find that having a button for a popup for “see more” kind of things is easier and causes less confusion. Of course depending on the layout and the demands of the client, that can be troublesome as well so this is a great tip for when it’s needed.

  2. After making several Folio’s I can say that most users tap on the tab instead if dragging it out. Therefore I use the tab analogy but in an Object State: tap reveals the info, ticking on the extended tab closes the info. You can turn only the tabcorner or the complete visible revealed panel to use as a close button.
    It seems more logical to users to tab and you have no dead zone to reckon with.

  3. I echo Bob Levine’s endorsement of Keith’s Digital Publishing Pack 2 scripts for InDesign. These scripts will save you a tremendous amount of time and aggravation when creating DPS folios. Consider these scripts a bargain for what they do. Well worth their more-than-reasonable price.

  4. The necessity of this “trick” shows again, how crummy many creative DPS features still are, after almost 4 years. The whole idea of having a sensitive (dead) area in stead of separate sensitive objects to swipe them together with others in or out of view, reveals that there’s still something very rotten in the DPS underlay/overlay concept.

    If only I could make an MSO slide gently left, right, up, or down, in stead of having just the boring cross dissolve as a sole option to change. Then using an MSO to mimic a sliding pullout would be a possibility. (No, I’m not going to toss in an HTML slideshow JavaScript.) Oh well, more MSO transitions are just another long-standing request…

    I just hate it when users need to invent “tricks” in software like Super Buttons and all the above methods or to rely on scripting in InDesign or HTML plus JavaScript, to create regular content with quite obvious results. It reveals that the offered set of standard features is seriously lacking usefulness, wisdom, power, elegance, and options.

    Let’s hope third party tools and add-ons will make DPS shine and sing again, now that the Folio format has been opened. Because it’s not getting much creative attention anymore from the current team and management. (What is Johannes doing at Adobe these days ?)

  5. Thanks for sharing, Keith.

    I’ve used a custom HTML pullout tab that you can tap with your finger and it slides on screen automatically. Cool thing about that was that you only had a very small active area on the page. (just the tab)

    Only disadvantage was that everything went to hell if you used it on Android :-/

    • We’re going to be seeing less and issues with different systems with the new native Android viewer as well as the Windows 8.1 viewers.

      Besides panoramas (which to me are close to worthless, anyway) using a 1024×768 folio with PDF format should yield something that scales quite nicely on almost any tablet.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>