Tips from Rupert Knowles, Senior System Engineer, Adobe
Over the past couple of years I have worked with many clients building publications with Adobe Digital Publishing Suite. One of the great things about Digital Publishing Suite (DPS) is that it allows publishers to use existing in-house graphic design expertise to create both their paper based publications and their digital cousins.
I am constantly amazed at how a designer from a pure print background can very quickly create stunning interactive publications. However, the designer will still need to learn new skills unique to digital production. In particular you need to think about the user experience, and the journey that the reader will take as they navigate the publication.
There is a tendency with any new technology to sometimes overuse the features just for the sake of it. It is always worth using them in moderation and where appropriate. And remember, with Adobe DPS analytics, you can measure whether people are interacting with the elements that you create.
One of the first things to decide on is the size of the font. Typically, for body text, most DPS apps use 16-18 point. One of the most common mistakes I have seen is that the text size has been set too small.
Not all fonts look as good on screen as they do in print. This is less of an issue with Apple’s retina displays, but you should still make sure the typeface serves its purpose well.
And remember you can now choose to render your pages as PDF output. This not only reduces the folio size but also allows people to pinch and zoom on the article.
Navigation & Interaction
The display on a 10” tablet is a lot smaller than the page size of your average magazine. So an 80-page paper publication could translate into a much larger digital edition.
This is one of the reasons why publishers create publications that scroll both horizontally and vertically.
Figure 1 – Most magazine use 2 dimensions
However some publishers prefer to flatten the folio so that the title only scrolls horizontally. This create a simpler user experience, but the reader now has to swipe through a lot more pages, and it can become a bit unwieldy.
Figure 2 – In this example from Foxtons Area Magazine, they only use horizontal scrolling
To help with this scenario, we have just introduced a feature called 2 finger swiping. Swiping with one finger will take you to the next page, but swiping with two fingers will take you the next article or section.
An important aspect when adding an interactive overlay to your publication is to make sure that the dynamic element does not prevent or restrict the reader from moving to another page, for example creating a full screen swipe-able slideshow or image sequence would block the reader from changing the page. I would recommend leaving a consistent part of the page as “non-interactive” so that the reader quickly learns where to swipe from to change page.
We have made this process easier with the addition of another new feature, hot zone page control. Hot Zones let users tap the edges of the article to browse to the next or previous articles. You can define the width of the Hot Zones in Viewer Builder. Hot Zones take precedent over all overlays with the exception of buttons.
Whenever you create a publication it is important to establish a set of icons or symbols to denote which parts of a page are interactive. It needs to be clear to the reader where to swipe or tap to access a specific feature.
Figure 3 – Icons from Lakeland Magazine
It is also good practise to provide positional cues throughout the publication to indicate if a story continues and show how many more pages there are to go.
Figure 4 – Navigation cues from Uncut Bowie
We all know how a paper publication works, the goal here is try and make the digital variant as intuitive as possible.
Finally encourage your readers to explore by making it fun.