• Print

Skimming on the digital side

How digital publications can make browsing easier.

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:

Fortune's Page Viewer icons
The “Page Viewer” icons are too small to deliver useful info

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:

Wired's horizontally scrolling TOC
Wired magazine’s horizontally scrolling TOC is pretty useful

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:


multi-shaped article 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.

Popular Mechanics' sizing handle
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:

tags: , , ,
  • Kathy Sierra

    I have nothing useful to add other than telling you I LOVE this post and your whole “breaking the page” project. Cannot wait to read more, and especially your (e)book. The level of detail you are giving here, complete with specific examples, is extremely useful, too. Go you.

  • http://www.newkindofbook.com Peter Meyers

    Kathy, thanks! If this is the Kathy of “Head First” fame, then double thanks, for bringing the world that brain-friendly series.

  • http://www.themotherhoodblog.com Lisa Duggan

    Very informative, thank you, for someone designing an online reading environment and who still chooses to call it a magazine. Part of what I’m meditating on now is the loss, online, of the composed real estate a magazine offers in text + ads – it just can’t be duplicated on the screen because; (a) the online space is literally smaller and is (b) oriented differently (horizontal vs vertical) but more importantly (c) print readers can’t not see ads when reading in print — but we both consciously and unconsciously ‘turn off’ ads online—because that’s our expectation & habit.

  • http://www.picantecreative.com/ Magazine Designer

    Interesting ideas. The magazine industry is definitely still groping in the dark when it comes to making print work on a tablet. I’m still not a fan of magazine apps at all and much prefer the print reading experience – but if the transition is ultimately going to be made, designers are going to need a LOT more input like this. Since the first ezines emerged, I’ve always thought that trying to replicate print was an ill-conceived idea, since the two mediums are apples and oranges. I wonder, though, as tablets get lighter in weight, if larger screens and ever-higher screen resolutions will come about to deal with some of the devices’ inherent limitations.

  • http://yep.it/publcty Kent

    Hi Peter. Does this also work perfectly with a Samsung Galaxy Tablet? i just purchased one for myself last week. Thanks.

    Also, I read this article in http://yep.it/e-books
    which says that some format messes it up, or something like that?

  • http://yep.it/publcty Kent

    I’m sorry my comment was posted twice. Was having connection problem and I kept on clicking submit button. Sorry about that.