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