Replicating Flipboard Part III – How Flipboard lays out content
Shifting the focus back to the iPad app, let’s take a look at how Flipboard processes and lays out Facebook and Twitter feeds. Does it really employ any social signal based ranking?
Here’s a sample of some Twitter feeds I receive, shown in a browser and in Flipboard:
Alright…what can be deduced from this? A few things became obvious when the same data is shown side-by-side:
- Ranking of the Twitter articles in Flipboard more or less retains the original sort-by-time order! Don’t think there’re any clever hidden social ranking at play here.
- Some Tweets were dropped by Flipboard, presumably because they do not contain links. Examples like (#3, #11, #15, #17, #18) are simply Twitter conversations.
- Tweets that have links to sites with Images (e.g. #7, #9) seemed to be given higher display priority.
What about Facebook? The typical Facebook feed is a lot more complex, with mixed content ranging from Check-ins, uploaded lmages, to Likes and notifications from whatever apps/games a user has added. The prospect of having to analyze so many different types of content itself is daunting enough, let alone the additional efforts of re-ranking and laying them out in an app.
As above, this is a snapshot of my Facebook News feed (names, faces and updates blurred out – don’t worry people!) in a browser and in Flipboard:
Immediately we are striked with much more intriguing findings:
- Flipboard completely ditched the published time of the feed articles and laid them out entirely based on readability attributes (text length, image size.etc.).
- Quite a few Facebook articles were dropped:
- Article #5 – a Facebook Places-Checkin: Due to lack of images?
- Article #6 – An Image uploaded from iPhone. Not sure why it wasn’t shown in Flipboard.
- Articles #7, #13 – These were “xxx started using xxx app” messages, which contain no links or images and frankly, nothing interesting.
- Articles #20, #21 – These were messages from Groupon. As article #14 was also a Groupon article, I guess #20 and #21 were dropped as Flipboard prevents showing too many articles from the same source all at once.
And while looking at Facebook articles, we might as well take a quick look again if Facebook-Likes contribute to the layout or ranking at all. The verdict – NOPE. If social signals play a major role in ranking, then #12 and #19 should have higher placements in Page 1 or 2 at least.
- #1 – 1 reply
- #2 – 1 Like
- #3 – 0 Likes (but 82 youtube Likes)
- #8 – 0 Likes
- #4, #9 – 0 Likes
- #11 – 4 Likes, 7 Comments
- #12 – 1 Reply, 92 Likes
- #14 – 0 Likes
- #16 – 3 Comments
- #19 – 34 Likes
- #17 – 4 Likes
- #18 – 2 Likes
- #22 – 2 Likes
From such observations, I suspect Flipboard conducts workflows that roughly compose of the steps below:
Initially, I found it hard to accept this interpretation of templates-over-content. It is basically saying there’s no magic, that Flipboard merely puts together a random collection of page templates then proceeds to filling those templates with the next most suitable article from a content feed.
Putting an end to this suspicion, I switched on Flipboard after a few more articles emerged in my Facebook feed. Given a largely unchanged set of data, if Flipboard employs a content-centric ranking criteria, then the layout of the pages should remain more or less the same? From the screenshots below, this was clearly not the case. Notice how the same data was laid out much more differently:
So that concludes the brief study on Flipboard’s layout algorithm. From this point on I shall start firing up the IDEs and getting my hands dirty on building that prototype. Pretty thrilled by the amount of attention and support this little project seems to be garnering – thanks and please stay tuned!