App Dissection

← App Dissection
Paper

Paper

Posted 5 years ago · 24 details

Paper by Facebook has been out for a day now and the reviews are, for the most part, quite divided. I haven’t been an avid Facebook user for some time, but the design and attention to detail on Paper is unmatched, and is worth sharing with other designers.

The Design Details for Twitter post I wrote yesterday received some great feedback, so I thought I’d quickly compile some of my favorite interactions in Paper!

The email newsletter

Get updates about new posts, new projects, or other meaningful updates to this site delivered to your inbox. Alternatively, you can follow me on Twitter.

View pages and groups

Notice the ‘hamburger’ menu flipping into an X, with the most subtle bouncing effect. I love the slight delay on the sliding animation as my pages and groups come into view.

Closing a popup

Just about every popup or menu in Paper can be closed by pulling up or down when there’s no more room to scroll. You can see this implemented on the publicity setting here when composing a new post.

Glossy headlines

Just about every heading or title in Paper has this beautiful shine effect to it, which reminds me of iOS’s ‘Slide to Unlock’ text. Turns out that this shine doubles as a loading indicator.

Closing tooltips

Watch this one a few times and pay attention to everything going on. When you pull down, the background slides down just a tad, the arrow at the top of the message bubble stretches and ‘pops’, and everything bounces lightly back into place. Amazing.

Background loading

I noticed that as you’re opening a card to view a webpage, Paper starts to load things in before you’ve fully expanded the card. This beautiful little bit helps keep browsing fluid and fast.

Closing a webpage

Again, pay attention to the light bounces in different parts of this view as you flip a web page closed. Did you see that little sheen of light go across the top of the card as it closes? Stunning.

Panorama photos

This one was highlighted in Paper’s debut demo video, and has certainly gathered a lot of attention. I love the small scroll bar that shows your current position on the photo. Someone has already replicated this effect with HTML/CSS/JS – here’s the tutorial.

Searching

No animation in Paper is jerky or unrefined. When I start to type out a search, notice the subtle fading in and out of the various elements on the page?

Typography matching

Pay attention to the typographic changes on web cards, as Paper changes its own style to reflect those of the origin website.

Swipe to close

Yep, you can even swipe left/right to close a news story, with the card folding neatly and bouncing back into place.

Chat heads

Chat Heads aren’t new to the Facebook ecosystem on iOS, but it’s still a delightful little interaction to see the person (or page’s) avatar slide into view with a familiar bounce.

Delete a draft

If you’re composing a post, you can pull down once to reveal the ‘Delete’ button. If you start pulling down again, we get this beautiful interaction that allows you to delete the draft by completing the ring.

I was surprised that you had to pull down twice to activate this interaction, rather than having it be one longer-pull. Perhaps in user-testing the designers found that it was too easy to accidentally delete a draft with one pull.

Back in time

I still haven’t figured out the utility of this detail, but swiping left/right when viewing a page or profile lets you navigate back in time through the timeline of updates.

Viewing/dismissing photos

We’re used to seeing this interaction on the main Facebook app, but it still remains fun to play with. Flinging pictures around the page toggles them open/closed. I love how easy, and fun, Paper makes it to interact with photos.

Toggles

This is one design detail in Paper that had me scratching my head. Which one is off? Which one is on? iOS toggles are turned ‘On’ when moved to the right, but for some reason this doesn’t feel obvious on Paper.

Add/remove photos in composer

I love everything about this view. When adding or removing a photo from the composer, we are met with all sorts of subtle bouncing animations, paired with the text resizing/relocating.

Manage categories

Tap + hold on the large photo that covers the top-half of the screen to open the customize view. I love how the cards slide around, just ready to be moved, rearranged, added and deleted.

Search details

Pull the search results side-to-side to see a beautiful rubber-banding of the list items.

Expanding likes

Click on the “more likes” box on a popular post to see people’s names fly out into a long list.

Fading titles

This one is super slick. Watch the category title fade out as it gets closer to the icons in the upper right corner. And then right as the category title hits the right side of the screen, it fades smoothly back in.

Status bar reveal

I love the way that the cards slowly peek out from behind the front card. Even the status bar fades in and out of view, another small but beautifully executed detail.

Like button fireworks

Tapping the ‘like’ button on a post results in a colorful explosion of blue fireworks, coupled with the signature Paper bouncing effect. I love this one!

Toggling tooltips

It’s still amazing to me to see how fluid the transitions are when toggling between different tooltips. Watching the icons in the bottom bar bounce and wiggle as they’re selected/deselected provides subtle context about which view the user is currently seeing.

Expanding cards

As you expand the card views across Paper, it’s worth noting the way the background slowly scales back and fades into the distance. This interaction builds the user’s sense of location within the app and provides depth among the views. Beautiful!