How Flipboard Keeps You Glued To The Page

The new Flipboard app, released this week, looks similar to previous iterations. And for good reason.

Several years ago, Flipboard CEO Mike McCue was searching for the company's soul. He and cofounder Evan Doll had been playing with the idea of a magazine app for the age of the iPad, but they hadn't yet stumbled on the concept of making it personalized and social. The pair wasn't even set on the service's name, which they considered calling Gravity. But by then, the company's small team had started experimenting with promising app designs, inspired by the split-flap displays common in train stations.

"We had this idea of having these tiles flip down and later we had the usual page turns," McCue recalls. But, he remembers, "none of it was working." That is, until the company's first hire Gene Tsai showed him a novel mock-up. "He basically took the vertical flip that happens on train boards and set it up horizontally, so you could have it track your finger," McCue says. "The second I tried it I was like, 'Oh my god! That's it! That's it!'"

Today, Flipboard's refined flip gesture is the heart of the company's popular app—and it has remained so for release after release, even with this week's launch of its new shopping experience.

Just as Tweetie's pull-to-refresh and Mailbox's clever swipe interaction designs set the apps apart in a crowded marketplace, Flipboard's satisfying flip interaction—with its fluid animation, smooth page turning and snappy landing—is one reason the service has grown to more than 90 million users. It demonstrates how crucial good design is to an app's success—arguably on par with its business model and the service it actually provides. "It's the one iconic gesture that makes Flipboard Flipboard," McCue says. "We are constantly, constantly optimizing it. It's a huge area of investment for us."

That Flipboard still tasks its engineers and designers with polishing and evolving the flip is surprising. The company has already invested years in the project, making the interaction work across iPads and iPhones and Android devices. But when the team first showed the concept to its engineers, the reaction was unanimous. "They were like, 'You're insane; that's simply not going to work,'" McCue recalls. To the developers, the thought of coding such a complex gesture was a non-starter, especially considering the inevitable performance issues the team would face on early generation tablets.

But to McCue, the challenge was a sign that the startup might be onto something: If the Flipboard team could pull off what others couldn't, then maybe that would be enough to set the service apart. "That effect, there's no operating system support for it—it's incredibly hard to do," McCue says. "We had to take these snapshots of the next page and of the previous page; blend them together; and do all this transformation [work] which means we had to load each of the pages and keep them in memory. That's very challenging to do on these smaller devices, and it's why you haven't seen a lot of people replicate it."

McCue and Doll were not only convinced that the flip design was the most elegant way to navigate their app—it was also the smartest. They knew they wanted to create a metaphor for turning the pages of a print magazine, but in early designs, McCue says, they created a "more skeuomorphic, page-curling flip."

They also experimented with sliding content, where users could laterally scroll through one page to the next. McCue and Doll found both designs dissatisfying. "With a slide, your eyes want to follow the text—your eyes are locking on the text—and so you get this light motion sickness when you do it a lot," says McCue. "Whereas [with Flipboard's current design], at the most, only 50% of the screen is ever in motion at one moment, and usually it's a lot less than 50%."

"That's what makes this so wonderful: You don't have to track it with your eyes all the time, and it creates a sense of narrative, discovery, and surprise," McCue says.

Recognizing the flip as the gem of the app, Flipboard's cofounders were careful not to let the novelty grow stale, and pushed their team to add "constant performance optimizations" to the gesture. In Flipboard 2.0, the startup introduced the ability to "fast flip," enabling users to leaf through multiple pages at the same time without even a hint of delay. The team refined each turn "based on the momentum of the flip," says McCue, who wanted it to "feel like there's a little air cushion underneath [each page] when it drops down."

The mere mention of the flip gesture draws a big smile from McCue, who says he still "spends a massive quantity of time" on the interaction—before happily launching into a detailed, 10-minute explanation of its most intricate details. He knows tapping into these oft-ephemeral slices of design are a rarity: While Apple's inertial scrolling and rubber-banding features once helped distinguish iOS, for example, the interaction designs are now commonplace across platform.

McCue, though, isn't ready to give up on ownership of its beloved flip. Not yet. He hints that in the "not-too-distant future" the flip will evolve to incorporate ways to "take the pages of a magazine and bend them and flip multiple pages to scan [through the magazine]," creating a "more tactile feel to the flip."

And he promises more magic down the road. "We have some other surprises up our sleeves on that front—visual effects that are just astonishing with the processing [power] on the new iPads," McCue says. "They will blow you away when you see them."

Add New Comment

4 Comments

  • gobaers

    Mailbox's "clever swipe interaction" is actually borrowed from WebOS. I still miss that native WebOS mail client, with unified mailbox and multiple cards for email drafts, all in one fluid interface. Credit Matias Duarte and the amazing collection of talent at Palm circa 2008.

  • Angela Obias

    I like how this fleshed out the logic and development process behind a single user experience function (page-flipping). I should let all our clients read this. Thanks, Fast Company and Austin Carr!

  • Geneva Chapman

    Looks like American innovation didn't die with Steve Jobs. I'd love to know what skills you think should emphasize in the primary and elementary school curriculum I am designing to get American children ready to be the future innovators. We need more technology for them to use and explore, number one. Also, they need to be allowed to "play" with mathemstics as suggested by Dr. Constance Kami. Lastly, science, technology, engineering and math (STEM) should be the center of an intergrated that's not only synchronous with the language arts, social studies, and fine arts but with things in the real world, like this. That is what I'm trying to do with the help of companies like yours. I am scheduled to give a presentstion tomorrow morning at the national School Science and Math Association (SSMA) Annual Conference showing teachers how to use iPad apps starting in preschool to learn concepts about plants that will help them understand those related to photosynthesis when they reach middle school. I won't be there due to an injury, but my efforts to make technology the primary methodology teachers use in classrooms will continue. Gentile and Gentile (2008) proved in theit study of video games that technology is far more effective in teaching our milennial students than the old traditional methods that have resulted in a global achievement gap between our students and students in Asia and Europe. Use of technology like this that keeps students engaged is the only way to close that gap. I'm on Facebook if you have any pointers!

  • MDH

    Meh, it's a nice app and all, but I found myself using it less and less once the novelty wore off. Look past the flipping mechanism and there's not a lot here. I wanted to see all of the stories available, but felt that the app was guiding me and being overly selective. It may work for some, but certainly not for me.