• Page Flips Are Better Than Infinite Scroll
[update: this post is about page flips in iBooks on the iPad, not scrolling in general]
I've noticed a few comments about how "page flipping" in the iPad's iBooks application feels clumsy and outdated.
Kottke said:The page flipping animation in the iBooks app though? Super cheesy. It's like in the early days of cars where they built them to look like horse-drawn carriages. Can't we just scroll?This morning my friend Ben said:I have to say I've come to dislike page flipping on the phone. I'm not certain why, but at least part of it might be the small punt of content per page. Another part might be the horse-head-on-front-of-a-car curling page animation, when a simple slide would be less intrusive.And the widely-linked article from Craig Mod said:The metaphor of flipping pages already feels boring and forced on the iPhone. I suspect it will feel even more so on the iPad. The flow of content no longer has to be chunked into ‘page’ sized bites. One simplistic reimagining of book layout would be to place chapters on the horizontal plane with content on a fluid vertical plane.And he posted this graphic as a better idea:
And I disagree heartily. But first let's talk about areas of agreement.
The Page Flip Must Be Extremely Fast
If you're going to use an animation, the page flip most be almost instantaneous. If you're going to have to flip thousands of times, a too-slow animation is going to feel like a little papercut every time.
But this demo shows that the animation completes extremely quickly.
The Page Flip Must Not Be Visually Fancy
There should be no explosion of little stars on the screen on a successful page turn. There should be no distracting sound effects. It must do its job without getting in the way, and I think Apple did alright here too.
There should be no explosion of little stars on the screen on a successful page turn. There should be no distracting sound effects. It must do its job without getting in the way, and I think Apple did alright here too.
The Page Flip Must Be Easy
Forcing a user to drag a finger to initiate a flip every time is unacceptable. I experienced this with early versions of the Kindle iPhone app and it was maddening. A page flip must be triggered even in the case of a single tap on the side of the screen. Again, Apple got this right.
Page Flip on iPhone Is Overkill
The iPhone's screen does put it in a new category. You're doing it so often the animation needs to go by so quickly that it's basically a page reload, or else it will be obtrusive.
But the iPad is larger, meaning less page turning. It also utilizes a "real-world object" design approach, where the page flip is just one more visual cue amongst many that the device is trying to feel tangible and physical.
Done Right, Page Flip Beats Scroll Every Time
Now that we've discussed the ways page flip can fail, how can it succeed?
Easy: page layout and never having to wonder where to continue reading. Each page can be designed as self-contained units, with precise placement of copy, columns, spacing, and media such as images and video. The integrity of the page layout is kept intact, and when your eye reads to the bottom right of a page, you press a button and always know to look at the top left to continue reading.
The scrolling fans argue that you should be able to know where you are. You should never blink, or accidentally flick the screen causing your place to be sent some number of pages back. You should precisely drag the text to the exact place where you want to keep reading, carefully, each time.
This isn't my first time at the rodeo, but I find my success rate with tracking my scroll position of long form content less than 100%. Page flips, on the other hand? I have never lost my place*, so I'm at 100%, and 100% is preferable to less than 100%.
Page flips, when done right, are more usable than infinite scroll.
* I have mis-tapped plenty of times, but the errant tap only ever takes me one page forward or back. Compare this to the "ice cube on the counter" slide that happens when my son reaches for the screen and I don't pull away in time. There's no contest.
• Something that most scrolly apps are terrible at: Getting from one part of a long document to another. With pagey apps, at least you can jump to a page number, although that (like the curling page animation) smacks of an outdated metaphor. Maybe both models could be well-served by something more like Cover Flow’s behavior.
• As I mentioned, I think the iPhone’s problems with pagey apps are overextended by Mod to the iPad. And at first glance, I don’t care for his “vertical chapters” layout (figure 7). But I’m really glad he’s not blindly copying the physical book’s layout onto the iPad, that he’s brainstorming things that are neither that nor infinite canvases.
• When I meant to type “amount”, I think I typed A, then missed the M to the right and hit delete, then missed the O to the right and hit P, then typed the UNT correctly.
• I still don’t know why you can’t scroll right.
I’m ready to try a pagey app on the iPad. I’ve pretty much given up on the iPhone at this point.
As for location, I find scrolling much more indicative of location than page flip. I scroll as I read, so that the entire screen is always filled with unread content. When I come back to a scrollable screen, I know exactly where to start reading again. With pages, I have to remember where on the page I left off, which means rereading up to a full page.
I think a really good implementation of page flipping is the Stanza app from Lexcycle (now part of Amazon) on the iPhone. The default turn effect is redundant, but the slide effect is pretty well done--I get a sense of where I'm going (left or right), all content has a fixed location in the book, and it's easy to go back or go forward, with a slider to help when advancing multiple pages. Ultimately, it feels natural and requires less work.
Having an endless page in every direction makes it difficult to design a self-contained layout. You have to keep part of the design in your head as you peer through a pinhole into a small fragment of the content.
But printed magazines can use edges and the dimensions of the page to great effect.
The iPad is a great opportunity to design around a device with a fixed size display. Everyone who uses it will be viewing the same content. No font worries or screen size variations such as are common on the desktop.
Now they changed to a Flash scrolling interface: it's very slow, unstable, and has full document scrolling, with even a horizontal scroll bar. It feels a lot clumsier. Full document scrolling is like having a Stargate, you never know where you're going to end up in the document when you use it. I'm talking 400+ page books here. Besides, the interface uses frames, so you have quite a few scroll bars all around the place. They have enabled some niceties like HTML view and the like, but the interface is still broken, and less comfortable than a PDF viewer, if such a thing is possible.
In short: I agree to every point on this article.
1.) Scrolling vs Pagination
2.) If Pagination: what's the visual treatment?
Just b/c you're a scroller, doesn't mean you have to be continuous. For example, the iPhone Kindle app does side-scrolling in a paginated way, and it works really, really well.
That said, you bring just the right set of tests to the conversation, Jon: if you make it crazy-fast, fluid, and interactively easy, a page-turning animation can work. It's just that so *many* times, those animations are very precious and far too self-absorbed in that "look how gorgeous and clever I am!" sort of way...if it keeps you from getting lost in a book, then the animation is too heavy.
Minor point:
I think all of the above holds for media that's meant to be approached like a traditional codex (book, magazine), but we should be open to the idea that there *might* be new digital forms of expression for which the infinite scroll is a better fit. Those forms might be more game-like, or comic-like or something else. The web's not really given rise to anything like this (though there have been some failed experiments). Will be interesting to see if the Tablet formfactor inspires someone to do something more clever (and useful) than a digital codex experience.
It does fall down somewhat when there's a photo, video, or similar that would span two pages, but I think with a bit of thought in intelligently splitting columns that could be mostly overcome.
This sounds a bit like what Matt Conway says the Kindle app does, and that seems like something to look at if I ever get an iPhone.