• Print

To page or to scroll?

Digital book designers face a big question: Is it better to scroll or flip?

This is part of an ongoing series related to Peter Meyers’ project “Breaking the Page: Transforming Books and the Reading Experience.” 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.)


Designers of digital books and magazines face an elemental question: to page or to scroll? Might as well ask: Android or iPhone? There is no single correct answer. Here, I’ll chip off a teensy portion of the tussle: some very specific use cases in which it feels like the content itself helps point to the right choice.

I think vertical scrolling is good for long magazine articles or even chunks of a lengthy narrative (chapters in a book, for example). The unbroken, flowing layout matches the mental state you engage in when following a writer’s extended argument or story. In the case of magazine apps like Project and Wired, these vertical dives into individual articles contrast nicely with the horizontal swiping required to move between articles; that action, I think, matches the kind of browsing we do while flipping through a magazine looking for something to read.

Furthermore, in a long, vertically scrolled piece — a New Yorker article, for example — the only material that’s important is what’s visible on the screen. The reader of a 5,000-word profile doesn’t “need” to see beyond the text they’re currently viewing. If the article is interesting they’ll keep scrolling down. If not, they’ll stop. My point is that there’s no risk readers will miss the remaining text because it’s submerged off screen. If they bail out, they’ll do so intentionally, because the writing failed to hold their interest.

In contrast, where I think scrolling is a bad idea is with any kind of table of contents or other place where you want an audience to pick from a content collection. Anything “below the fold” gets diminished attention. The home page of The Atavist app, for example, showcases the titles available for purchase.

Catalog page for iPad app The Atavist
Catalog page for iPad app The Atavist

But look at that poor, hair clipped fella down at the bottom of the screen; even more are hidden further below. Unless a user knows more selections await, they’ll miss out on a chance to read some of the great stories this startup publishes.

The problem here is the same one grocers have known about for decades: stuff that’s at eye level sells better than stuff that’s not. Similarly, when a table of contents dumps its listings on a long scrolling page, the stuff that’s off-screen doesn’t get as much attention.

Better, then, to design a birdseye-view style home page — one that gives visible placement to all the main categories. The Fotopedia Heritage app, for example, does a nice job giving viewers multiple points of entry into its photo collection.

TOC for photo browsing app Fotopedia Heritage
TOC for photo browsing app Fotopedia Heritage

The only stuff not given full top-level placement are other apps the publisher is promoting; three are shown in the bottom row and others await by clicking the downward pointing triangle. Seems like a good decision.

And thanks to the fluid qualities of a digital display — think: content that refreshes, showing different versions; modal pop-overs; and so on — lots of quick peek opportunities exist for those who choose to confine their TOC content to one screen. The cover of the business book Bold: How to Be Brave in Business And Win cycles a new photo and pull quote onto its TOC every seven seconds or so and offers drill-down menus into the main parts of the book.

TOC for business book app BOLD
TOC for business book app BOLD

Finally, copywriting and visual design are especially important in any effort to turn the TOC into a single-screen effort since the page not only needs to “sell” what’s featured, it also has to effectively describe which sub-categories are available for further exploration. Entertainment Weekly’s Must List app does a nice job on both fronts. The variable-sized content boxes break up the visual monotony that a fully symmetrical grid creates and suggests, subtly, what’s most important. And the tabs at the bottom of the screen — Movies, TV, and so on — let the user further explore the stuff they like.

TOC for Entertainment Weekly's Must List app
TOC for Entertainment Weekly’s Must List app

One last example I can’t resist throwing in: Music discovery app Aweditorium. Its home screen is a nearly endless mosaic of tappable album art. Their neat twist? To let users know that choice awaits in every direction, there’s a birdseye view tucked into a mini window at the top left of the screen.

Home page for music discovery app Aweditorium
Home page for music discovery app Aweditorium

It’s a nice, quick visual way to say, “hey music lovers, there’s much more to explore than we could fit on one screen.”

Webcast: Digital Bookmaking Tools Roundup #2 — Back by popular demand, in a second look at Digital Bookmaking Tools, author and book futurist Pete Meyers explores the existing options for creating digital books.

Join us on Thursday, November 10, 2011, at 10 am PT

Register for this free webcast

Related:

tags: , , , , , ,
  • chuanha1

    Interesting post. FWIW, I would have reached the exact opposite conclusion. When I’m reading a longer article, scrolling is a distraction; reading a page at a time, and not having to break concentration except to flip between pages, feels natural. When I’m actively navigating, like browsing a list of things I might want to read, scrolling feels natural; I’m scanning and moving around as needed.

    I don’t deny that there is an “above the fold” effect, but jamming things onto a single page isn’t necessary; I’d say it slows down my browsing because the result is probably that I have to go to additional pages to see more content I might be interested in.

    For example, I find feedly on the iPhone frustrating because I have to swipe sideways through many pages just to see the items in a feed, when I haven’t even decided what to read yet. Scrolling would be much more natural here.