Facebook Paper aims to deliver a seamless marriage of both social media and popular news, and does so by providing a refreshing and open-ended approach to viewing content. Brilliantly displayed full screen photos with a tilt-to-pan parlor trick are sure to impress your coworkers. Facebook Paper also leaves much of the old chrome at home and hastily assumes that gestures should be the backbone of the user experience. If you take a look at the iTunes Ratings and Reviews for the app, there are an overwhelming number of positive marks, heralding Paper as a worthy replacement for the boring, outdated regular Facebook app.
The designers and engineers at Facebook Creative Labs worked on Paper for the last two years, busily hacking away to create something new and different. It’s safe to say they’ve accomplished that. Let’s take a walking tour of the app and find out what was done right and what design missteps were taken.
Settings
- A separate Settings subheading just below Settings is a space waster and since it’s the first “section” within Settings, it really doesn’t need a subheading spacer at all. The iOS Settings app does subheadings this way but they certainly don’t use the same subheading title as the heading.
- A poor choice in displaying inactive and active states contributes to a second-guessing of whether or not the toggle is on or off. Instead of a semi-transparent white a more confident color should have been chosen.
- Facebook Paper only affords the user one option for saving content for reading later, which in this day and age, is kind of lame. While other apps generously allow for a true buffet of Read Later options—and rightfully so—Paper falls short on this front.
- Tap on Account Settings or Privacy Shortcuts in Settings and you are welcomed by a very crude animation of a newspaper opening up into an antiquated blue Facebook settings menu. Yeah, okay. This is what happens when you make sacrifices to “ship on time.” If this was done right, they would have made sub-menus available via chevrons like they did for Read Later and Legal. Maybe they will actually build this out in a future update when they have more time.
Create Post
- The Privacy selector has created a new category for a touch target size: tiny hot dog wiener. Not only that, but the pop-out list has a very awkward scrolling cut-off at the top, given there’s no semi-transparent heading to allow the text to run under. It’s not an elegant solution.
- I know this is a lowly instructional page to allow for a tagged location, but it looks like a design intern was allowed to “go crazy” with the justification (centered on top, jagged (?) on bottom). Not only that, but the breaks in the top dialog is off (in the on the second line should have been dropped to the third line).
Carousel
The text in the carousel is incredibly hard to read comfortably on the iPhone’s smallish screen. The sad part is that there is no middle ground to this: you either swipe the card carousel from right to left squinting to read the headline text on each card, or you flick up the carousel to swipe through the cards individually. The main culprit is the content on the top of each view, which houses the profile picture of the card along with a bunch of valuable, unused white space to the right of it. The proportions are off, especially in the carousel view where that space occupies roughly 25% of the view. When you expand it to full-screen, it drops to 16% of the view. Whereas if you look at the photos within the designboom card, it stay roughly at about 50% of the card at either size.
Compare this with the Facebook app and you have to wonder why they thought it was a great idea to make that area take up more room that it needs to be.
So what’s a good compromise? There are many solutions to be had obviously, but this one results in the top portion taking up just 15% in the carousel view, which proportionately is in line with what you might see when you go full-screen and see more pertinent icons and information. By moving the profile icon to the right side of the card, reducing its size and moving it up to the top edge, a larger text size may be used, and in turn, afford the user more visual breathing room for content.
Getting Back to Search/Settings
From the main stage, if I pull down to reveal Search and go to someone’s profile card view, it’s not entirely clear about how to go back to search. Since you can’t tap a button to get to it, that option is out.
So you have to drag a very narrow area near the top of your screen to get access Search again. Grab too high and you’ll pull down the Notification Center tab. Grab too low and that’s sexual harassment. Jk. Grab too low and you will start to “unstick” and exit that someone’s card. Try it and see if you can do this repeatedly and successfully on the first try every time.
Edit Sections…Section
While this is visually one way to go about having a user pick out sections/interest, there’s definitely simpler ways to go about it. But hey, you’ve got the guy who did the iBook shelves of iOS’ past, so this was expected. There’s a lot of visual jelly/webOS/rubberband animations going on here, and it’s fun to play with, but how necessary was it to take this design route when you think about Paper as a whole? This is one of those instances where you really see the seams of compartmentalized app development, where teams are tasked with different “areas” of an app and then in the end, it gets pieced back together. And then it’s like, wow, you’ve built and designed something that really looks cool, but how does it really fit in holistically?
Paper has a total of nineteen different topics or genres to choose from, yet you are only able to add nine to your queue (the Facebook card is not disposable, for good reasons).
Bold, Bold, Bold!
Mike Matas said Paper was heavily influenced by print designers, so where’s the typographical sensitivity?
All of the text, heading and body text, in the About card, including About, Details, and Contact, is bold, bold, bold (Ok, the website and email addresses are not bold, you win).
Alternating Duplicate Card Views
There’s also some strange behavior concerning opening up duplicate cards, but Paper will only do this if you open up alternating cards. Say I open up a group card, then I use the method above to go back to Search and try tapping on that group again. It will open up that previous card. Okay. Now if I go back to Search and go to another group’s profile, and then back to Search and tap on the first group card, whaddaya know, another card of that first group pops up. If you don’t alternate it this way, it will just go back to the same card. How incredibly nonsensical! If you’re going full tilt with the cards metaphor, at least make the behavior consistent with rules, as in no duplicate cards should be conjured up at any point of navigation, alternating or not.
Disappearing Card Trick
If there are multiple cards in the cascading card view, and I tap on a card, it will automatically discard the card(s) below it. If I tap on a card and there are cards above it, those will still be there. Make sense?
Lists
If you’re a Facebook user and you’re not using lists, you‘re probably not wasting time as efficiently as you could be. Lists are accessible from the Facebook app and on the web, but they are nowhere to be seen in Paper.
No one seems to know how to get to Lists in Paper, and the ones that think they know don’t know the difference between Lists and Groups. So much confusion! Hopefully Lists will come in a future update, but as for now, Paper is nowhere near a replacement for the Facebook app, no matter how yummy it looks.
Mirror, Mirror
If you drag down on the card carousel view, you will see a thoughtless mirrored execution of the main story image. Is that the best design solution for this “behind the curtains” area? Steve Jobs disapproves.
Still Viewing Web pages as Web pages
Some cards will feature a link to a webpage or article, that you then have to tap on or drag up to open in one of those Flipboard/newspaper thingies. So then it will load the mobile webpage with all the useless ads and widgets and junk that you don’t really need. How is that for a mobile design solution in 2014? Just like the iOS app Interesting, which looks great from the App Store preview pictures before you actually pay for it, but then you find out that it does the same thing. Paper is the visual epitome of a streamlined consumption model, yet they don’t offer a way to choose between an optimized reading mode and the actual web page with all the unnecessary junk. Zite does this, Pocket does this, Reader in Safari does this, but Paper chose to cut corners, and the users get a sloppy, five-year-old solution.
The Facebook app still exists and still does its job quite well, but Paper does leave it looking a bit visually and interactively outdated. But as slick as the animations were, I could not get over the main stage view of either having tiny little cards to glance at or swiping through each and every card and not having the slightest idea what’s coming up next. It’s a boxed-in feeling where there is no happy medium, especially on an iPhone. Scrolling/swiping horizontally isn’t natural, and as long as our web culture exists where web pages scroll vertically, it never will be.
I would encourage the Creative Labs team to take another look at the typography in the app, specifically size and weight, and utilizing the most out of each. There’s a large amount of work that can be done to massage the most out of screen real estate and still maintain a clean aesthetic, but I think many of the typographical mistakes of Paper were done because of time restraints and getting the product out the door. The same goes for the unfinished and sloppy settings menus.
The cards metaphor in Paper is there but it is neither smart nor logical. Paper achieved the look of the card, but they did not fully support the behavior of having a visual card UI, and that’s discouraging.
I’d like to know if users prefer Paper over a dedicated news consumption app like Zite or Digg or Paper’s biological twin Flipboard. Those apps know their role and do their jobs quite well.
When trying to answer what Paper does well, if anything, it serves as a good platform to build on but it does not nail a truly pleasant mobile experience. Creative Labs did a fantastic job of exploring different solutions, but as far as being a dedicated news source or reader, it is decidedly pork cosmetics.
