Étiquette : apps

This is part of an ongoing series related to Peter Meyers’ project “Breaking the Page, Saving the Reader: A Buyer & Builder's Guide to Digital Books.” We’ll be featuring additional material in the weeks ahead. (Note: This post originally appeared on A New Kind of Book. It’s republished with permission.)

The iPad and other touchscreen devices seem perfect for replicating the page flip. After all, one of the first gestures users “get” is the swipe: it’s intuitive, it’s quick, it’s fun. And despite the power packed into today’s tablets, virtual page flipping isn’t as useful as its print counterpart. For starters, paging speed is noticeably slower than what you get with a wet pointer finger and the latest issue of, say, People.

A bigger problem lies with a common digital publishing culprit: trying to faithfully replicate all the “features” of print. A regular magazine has pages, the thinking goes, so by golly we’re gonna reproduce pages in the digital edition. Lotsa problems with that approach, but for this post let’s tackle the “filmstrip”-style page-browser found in many e-magazines. Consider Fortune’s, for example:

What the average eye can easily decipher in each of these thumbnails is close to, approximately, zero. And once you decide you don’t want to read, say, the article about Twitter, why the heck do you have to page through each of the article’s other unhelpful icons? The system, in other words, replicates the act of browsing without delivering its essential benefit. You get none of the come-hither signals that are easy to spot on a print page: headlines, pull quotes, pictures, sidebars, and so on.

App designers, my suggestion: don’t throw the browser out with the bath water. Instead, a little redesign can satisfy the reader’s desire to skim quickly and dive in when something looks worthwhile. A few suggestions:

One icon per article is sufficient

Print-based page flipping is how we readers solve what is, at heart, an information architecture problem: most magazines order their contents in a way that doesn’t match our preferred reading path. So we flip to find the juiciest, most satisfying bits. In an app, then, swiping through page icons isn’t the best way to aid that quest.

How about, instead, article representations—let's call ‘em blurbs—that quickly convey what the piece is about? Something, in other words, like what you get in a table of contents (e.g. title + quick summary). Wired, for example, uses a horizontally-scrolling system:

A useful blurb at the top of the screen lets you know what the article or ad is about. And the size of the replica that hangs below the blurb signals the length of what you’re in for. Nice.

Similar options exist, many of which don’t require the creation of new material. How about, for example, bundling up and making swipeable each article’s nut graf and a great pullquote? Or the article’s best art (an image, say) with the title super-imposed using compelling typography? (The Bold Italic magazine, a current events guide to San Francisco, sorta/kinda does this in their app.) Or even simply reproducing the article’s title page with the headline’s font bumped up for easier viewing.

No need to replicate the trim size of the printed page

The current approach in most page browsers is to offer up page miniatures that replicate the aspect ratio of the print magazine’s dimensions. Why? Probably because designers wish to replicate the experience of reading the print edition. (Not to mention the fact that thumbnails are easy to generate.) But the essential service readers are looking for has nothing to do with trim size; it’s about quickly scanning big chunks of info and deciding where to spend our reading time.

That purpose can be better served by making the scannable units large enough to deliver meaningful info. So bump up the thumbnail to, say, a rectangle and give that headline it contains more room to breathe; you can even, then, include an image. Even better: have the blurb container’s size reflect the importance of the article within the magazine. A jumbo rectangle, for example, could be used to showcase an important feature while a smaller square would indicate a shorter piece. Here’s a quick example:

Click to enlarge.

Expand and reveal

Apple has added a neat-o feature to its iPad Photos app. You’ve probably seen it: you spread your fingers over any photo stack icon to temporarily reveal the other pictures beneath it. If you did the same for each browsable icon representing an article, you’d give article browsers a chance to peek at individual pages before committing. Another option: let users control the size of the page-browsing icons. Popular Mechanics uses this approach.

The sizing handle on the right lets readers adjust the page icons’ size (click to enlarge).

See those little icon-size controls (the four stacked lines on the right side of the page browser)? You can drag them up or down to change the size from jumbo to skinny mini.

Got any examples you like of digital page-browsing solutions? Let me know (peter.meyers AT gmail DOT com) and I’ll add them right here.

Related:

• View the iPad as a magazine opportunity, not a container
• Designing for the iPad: How it’s different from the iPhone and what you need to consider
• Trapping content on the iPad won’t work, even if it’s pretty
• More stories from the “Breaking the Page” project