Flipboard iPad App is addictive. At 3 billion flips per month, its growth is phenomenal. But I did not need those statistics to convince me that the secret of its success lies in its careful attention to the reading experience. In this post, I am contrasting it with the reader app by Google called Google Currents. It became clear to me that there are lessons to be learned from both of these apps for designers and developers, when looking for that special sauce that will delight the user. This secret sauce will make the difference between your app going from “mheh” to “oh cool” to “truly addictive”.
1. Go Beyond Native Controls & Reinvent
Slide Action
Google Currents defers to the swipe to slide mechanism, which Apple has debuted since 2008. There is nothing wrong with using this mechanism. It works. There are tons of apps that use it. But there is a problem with this. On some emotional level, it feels unnatural. I thought about this a while, and concluded that it is too close to the “Scroll View” paradigm which uses the scroll bar. And the brain registers this as the start of an regular scroll experience, only to be reminded that its a controlled scroll lasting a single page at a time. A regular scroll experience involves swiping to slide followed by immediate stop to decelerate and stop at a point. It is not the most frictionless way to move through content. The paged scroll is an improvement on regular scroll. However, the emotional experience does not transcend the negative connotations associated with scroll.
Flip Action
Contrast this with the “Flip” to scroll mechanism. It closely mimics real life flipping of a magazine. The brain is attuned to understand this experience. The other killer emotional factor is induced when the “flip” action follows the speed of the swipe. This deference to the user induces feelings of absolute control in the user. Another win. The swipe to slide mechanism does not provide this level of absolute control to the user and the slide speeds don’t always correspond to how fast you swipe.
Slide is useful for quick glancing. Controlled Flip is superior for focused reading.
2. Check if Design Deviations are Good or Bad
Ask any iPad user where they expect the back button to be on an app. Most likely, you will get the answer “top left corner”. This location is common. It is expected. It is fundamental. Now lets see how the two apps tackle this simple issue.
Google Currents takes a curious approach. The entire navigation bar is at the bottom with icons for Home, a Back button and other Settings button. This is truly unexpected for an iPad user. I thought a lot about why the designers chose to do this. The closest explanation I could come up was that the designers must be thinking that users hold their iPads with both their hands, with the hands positioned at the bottom of the iPad. Very similar to holding a gaming console. If this was indeed true, positioning the buttons at the bottom of app makes it easy and perhaps even possible to navigate just with their thumbs.
Notice the natural holding position and how unnatural it is to move your thumbs down to reach the Back button in the Currents app
This was an interesting gamble, but quickly I found the navigation friction increase. My instincts took me looking for a back button on the top left corner. I felt I was not holding my iPad in a way that app was demanding.
Flipboard App uses the natural positioning for the Back button and forces the natural movement of the hand upwards only.
3. Avoid Magical Appearances/Disappearances
Google Currents makes stories just appear and disappear. The refreshes are done without the aid of transitions. This is very rude. Unexpected. Refreshing in this manner leaves you without a sense of absolute control. Just don’t do it.
Flipboard refreshes are all asynchronous with the user completely aware of what the app is doing. Each section updates independently and does a mini flip as soon as its done.
4. Make it less taxing to read
Apps like Readability and the Safari Reader feature tell us something important. Users would just like to get to the content without the clutter. Web sites abuse readability all the time. When it comes to readability, simplicity wins. Designers need to resist the temptation to jam in too much. Google Currents does a pretty decent job at readability but when you look at the layout and compare it with Flipboard, something important stands out.
Google Currents uses a thick border and padding mechanism around article summaries. The thick border creates artificial boundaries around each summary. The thick boundaries get in the way of the eye drifting from one summary to another.
Notice the strong segregation of each article summary
Flipboard uses a subtle light gray single line border around each summary which your brain does not consciously register, but subconsciously it knows its there. The friction is reduced significantly when moving from summary to summary.
Notice how seamless the segregation of the article summaries are in the Flipboard design
5. Blend in Controls and Content
Flipboard effortlessly blends in the Back button on top of images. This layout is very pleasing. A bar is not used rather a hanging Back button where it is expected provides the feeling of a superior design.
Flipboard Photos Blend in the Controls Seamlessly
Google Currents defers to the bottom bar for everything, thereby, permanently losing that space for better use.
Bottom bar gets in the way when viewing photos and other contents in Google Currents
Buttons that don’t seamlessly blend in with the content feel like “tax” or “work” that the user has to do. Avoiding this cleverly, Flipboard maintains a superior experience.
Conclusion
Flipboard does not seem in a hurry to ship until they get the experience right. This situation is a luxury that not many teams can afford. This situation is contradicted by many tenets of Lean and Agile development, where you try something and put it out for customer to try and iterate on it. Flipboard’s iPad and iPhone apps showcase how products with superior sense of design tend to do better.
