A Look at Paper and the Future of Facebook Mobile

With Facebook cherry-picking tons of talented designers for their Creative Labs over the past few years, in combination with their more recent acquisitions, we probably should’ve anticipated an innovation on the mobile front at some point. However, I’m quite confident in saying none of us really expected a full-fledged app and experience as Facebook Paper presents.

Despite the controversial name choice, almost every aspect of Paper is incredibly well done and a very welcomed departure from the now-stagnant experience of Facebook we’ve come to know since it’s inception a decade ago (today… yes, a decade).

Facebook Paper-001

The overall experience of Facebook Paper seems to be a conglomeration of features Facebook has offered in their past apps, such as Facebook Home and chat heads, as well as what they’re considering offering in the future; external sources of content, which are then curated by an in-house editorial term, much like what we’ve seen in apps such as Circa and Flipboard.

It’s a new direction. That much can be agreed upon by all of us. But what it means for Facebook is all but unknown.

 

A New Look

What started out as – and still is – an experiment by the Creative Labs team, led by Mike Matas, to make Facebook look better seems to have lead to an application whose aesthetic doesn’t actually look like Facebook at all. Gone is the blue we’ve all come to associate with the social giant, gone is the ubiquitous “f” we’re all used to seeing on our homesceens, and gone is the timeline structure Facebook made it’s billions with. The branding is non-existent, with the sole mark being a small, Helvetica “Facebook” in the upper-left-hand corner of your timeline feed.

It’s the Facebook app that isn’t.

Taking a note from the ongoing trend of keeping content as the focus, Facebook Paper turns your entire screen into a content curation and delivery ecosystem. Full-bleed images reign in familiarity a la Medium, whereas the typography is very reminiscent of news and reader apps such as Circa and Pocket. By keeping the content at the forefront of the experience, Facebook Paper makes the app itself disappear, leaving only the actual consumption and creation to shine.

According to Matas, many of the designers who worked on Facebook Paper had a much more traditional design background. This made for a unique style, as the app takes quite a few queues from more physical publications, taking many principles from magazine and newspaper design.

Facebook Paper-004

This approach allows for a much more organized experience, even as you’re browsing through the large amount of content Facebook feeds you. Between the grids, the folds, the baselines for the text, and everything else, just enough affordance from more physical counterparts is given, while still keeping it a natively digital experience.

Of course, text aside, a great deal of the quality of visuals within Facebook Paper will depend on the photos being shared by your friends. Without quality images from those you interact with, the design sometimes feels inadequate, but to no fault of Facebook. This may prove to be a bit detrimental for the average user, as not every Instagram selfie is a charm, but it’s one of the trade-offs for making content king.

Interactions

This is where Facebook Paper truly stands out among the crowd. Interacting with the app is as smooth and fluid as I’ve ever seen in an app. Be it a swipe, pinch, or pull, every single gesture seems responsive and natural. So natural in fact, that I’d say it rivals any stock app on the iPhone.

To thank for that, we have none other than Loren Brichter, a former Apple employee, creator of Tweetie and Letterpress, as well as the creator of the pull to refresh gesture. Matas reached out to Brichter to make an experience unlike anything Facebook – or anyone else for that matter – has done, and he certainly accomplished the task.

Edit: In the initial publishing of this article, I made the mistake of giving a great deal of – if not all of – the credit for the animations within Facebook Paper to Loren Brichter. And while Loren did work on a few animation components, particularly the carousel used for adding specific interest categories to your feed, it certainly wasn’t a one-man job. An entire group consisting of 15 or so engineers at Facebook worked very hard on every single, beautiful animation within the app, making sure to get every detail perfect. Thus, I apologies to the individuals on the team whom I overlooked credit for and would like to thank Jillian of Facebook PR for reaching out to me about their concern.

Coinciding with the actual look of the app, these gestures combine both the affordance of reading and viewing physical content, while implementing it into a digital ecosystem.Facebook Paper-008

The buttons are gone, with but a few necessary ones, letting the gestures do much of the brunt work. This allows for a more fluid experience when browsing through your feeds, but also slows you down a bit, as each update or article takes up your entire screen with each swipe. This slowing down of the Facebook experience forces users to actually view the flood of statuses, photos, and posts they’re self-subjected to, making users better choose what gets seen and shared. It seems to be a very deliberate effort on Facebook’s part to suggest some purges by users, to only focus on the more significant content, be it their friends or companies they’re following.

Beyond the use of gestures, Facebook makes use of the sensors in mobile devices, by making images wider than the devices display pan left and right as you tilt/rotate your device. Such immersion into images allows the interface to take a backseat for a minute while viewing the content and making it interactive.

Even beyond the gestures and interactions, small details within the app make the app come alive more so than any app I’ve ever used. When managing your card categories, the cards slightly wiggle and nicely slide into place, giving them life. Oftentimes these small interactions can feel like gimmicks, but the combination of smooth interactions and subtlety of these truly add to the experience rather than distracting from it.

Facebook Paper_11

Going Forward

All the above aside, the greatest question we as designers are probably wondering is, what does this mean for the future, both for Facebook’s UX, as well as app design as a whole.

Facebook

For Facebook, this new approach to a dwindling social network means a great deal. As are many of the endeavors by the Creative Lab team, Facebook Paper isn’t anything concrete, yet. It’s an experiment. One they were too afraid to push on their hundreds of millions of mobile users in years past.

Facebook Paper-005

Rather than the A/B testing approach, Facebook delivered something completely new – although you could argue this is nothing more than a large-scale A/B testing scheme. And, sure, it may just look like a new UI for many users, but it’s deeper than that. They’re taking a completely different approach to social media and wrapping it in a smooth, beautiful experience. They’re taking essentially all of their current – and previous – apps and bringing it into one.

As is stated by Ellis Hamburger, of The Verge, “Facebook realized that it’s bigger than your group of friends.” They’ve realized that external content is just as, if not more important than their internal network of people. And in doing so, they have equaled out the playing field between user-created content, and content from elsewhere on the web.

Facebook Paper-009

Sure, it’s not as well-curated as Flipboard or Circa yet, but for a 1.0 product, the selected content seems to be of good quality, and over time I can’t help but to realize that as time goes on, the content delivered to individuals will be customized, making use of the insane amount of information they take in from their users habits.

Another thing currently missing from the app is advertising. It’s safe to say it’s on it’s way, but in the meantime let’s enjoy the ad-free experience. That being said, even upon the arrival of the ads, I see great potential for a better approach than what their current model delivers. With content from publishers and companies being a main facet of the Facebook Paper experience, the solution is quite obvious. More native advertising, which better fits in within the content you are already viewing.

Say you’re subscribed to the “Tech” feed offered in Facebook Paper; it wouldn’t be too intrusive at all for Facebook to allow a “featured” or “sponsored” story or product to be included in the first few posts. Facebook could also charge a great deal more for this, as it’s almost a guarantee users will swipe through it as a regular story, rather than quickly scroll over it as most currently do. This is where that “slowing down” of the content can dramatically affect Facebook.

The last thing I’m curious about is just how Facebook will go about translating this experience to the web, if they do. It’s probably a year away, if it’s to come at all, but it’ll certainly be interesting to see their approach if/when it happens. The approach in Facebook Paper is a very mobile-first one, so translating this to the big screen would present quite a few problems.

Facebook Paper-010

For Designers

The new paradigms being established by this updated experience are vast for designers across the board. Whether we like it or not, Facebook still has a user base larger than anyone else and what they make known, gesturally and otherwise, will be known by almost everyone.

By a company such as Facebook stepping up and presenting many of the trends and paradigms we’ve all viewed as unique and innovative in the last few years, they will become the norm. Meaning the more niche apps in terms of interfaces, such as Clear, are going to be better understood by the masses.

It will also challenge us to think even more outside the box when creating experiences within apps. We’ll be forced to better make digital design human; creating new paradigms for more efficient navigation or consumption. Smaller startups can iterate at a much faster pace than Facebook, allowing for many rounds of trials and error before a new paradigm is deemed a success. Ultimately, with time and dedication, this will lead to yet another shift in paradigms.

Facebook Paper-008

In Closing

Facebook Paper surprised us. Or at least most of us. It’s something unlike anything Facebook has ever done before. In fact, it seems like it isn’t even Facebook that made the app.

Because, Facebook Paper isn’t just a new facade, or a fresh coat of paint. No, it’s an entirely new concept and approach to everything people came to love, then hate about Facebook. They aren’t just polishing a turd, here. Designer Dustin Curtis puts it as elegantly as possible, sharing via a tweet, “Facebook Paper is the prime example of what’s possible when amazing design is inextricably paired, equally, with amazing engineering.”

Facebook Paper_1

Right now, there doesn’t seem to be any plans by Facebook to push this as an all-in-one solution for mobile users, yet. But, it does seem to be their goal in the long-run. With users scurrying away from the service thousands at a time, something needs to happen. And although there will certainly be pundits and skeptics to this new approach, I see great opportunity for the new experience.

Of course, these are my thoughts on Facebook Paper and the experience it creates. I’m curious to hear yours, as more and more of you download it. What are your thoughts on the design as a whole? Could this spell trouble for companies such as Flipbook? What does this mean for Facebook going forward? Share your thoughts and I’ll be in the comments below, responding.

Facebook Paper-007

Extra Tidbits

Beyond my thoughts above, I’ve come across a couple related articles and resources which will prove useful and as interesting reads.

The first of those is an article written up by Techcrunch, which shows just how to download Facebook Paper, even if you’re currently residing outside of the US of A.

The second is an awesome piece of work by John Tregoning, which uses plain old HTML, CSS, and javascript to recreate the panning photo effect found in the Facebook Paper app. It doesn’t work on every device, in every browser, but it manages to work on more than enough to make good use of it.

The last is a fun little piece of trivia regarding the process of creating Facebook Paper. Through the process of building Facebook Paper, the design team created and utilized a toolkit they called Origami, in combination with Quartz Composer, to prototype the design throughout development. They were kind enough to offer Origami up as a free download to anyone, so if you’re interested in taking a look at it for your own prototyping, head on over to their Github and check it out.

Jumpstarting a Design Community

Understand Your Compensation

Designer Monoculture

The State of Design Leadership

The Science of Product Design

Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat

The Importance of Design Conventions