UI Lessons For Instagram, From Facebook’s New Instagram Clone

Article: Source

FACEBOOK JUST RELEASED AN INSTAGRAM-LIKE PHOTO APP OF THEIR OWN. AND IT HAS SOME GOOD IDEAS INSTAGRAM COULD, AND PROBABLY WILL, LEARN FROM.

So Facebook buys Instagram for $1 billion. Then last week, out of nowhere, Facebook releases the Facebook Camera app—what is clearly the not-so-secret Instagram knockoff they’d had in development for a while now. In other words, Zuckerberg bought the original, and then he started selling knockoffs.

I LOADED FACEBOOK CAMERA EXPECTING A LOUSY, ME-TOO APP.

A strange move? Maybe, maybe not. It seems to me that Facebook is buying themselves a bit of time, offering consumers better photo sharing on the go while deciding how much or little they should ingest the soul of Instagram (I’m guessing very little). But it is a fascinating case study, either way, like when Batman and the Joker battle one another one day, just to team up to take down the Penguin on another. And there’s a lot each could learn from one another’s apps. Let’s look at them side-by-side. 

THE FEED

The Feed is the core of Instagram’s experience, and it’s here you most realize that Facebook Camera was always meant to be Instagram. You see your normal Facebook feed, simplified in Instagram’s mobile style, presented in single square photo blips. You won’t find any straight text updates or links. It’s all photo content here—and much of it is pretty high resolution, since it’s not all suffering from Instagram’s aggressive compression.

Facebook adds a drop shadow to each image that I’m not crazy about, and they somewhat clunkily lead each photo with your caption (while Instagram leads with the photo itself and allows comments below). But Facebook cleans up the UI with a great trick: They lay the like and comment icon over the image itself. This watermarking is subtle, and it gets rid of needless buttons. Instagram should steal this idea tomorrow.

THE FILTERS

When you take a photo, you can add a bunch of retro filters, presented in the exact same thumbnail preview ribbon. I actually preferred Instagram’s precise alchemy of contrast and burnouts more, but this could be a placebo. Instagram also has a few more filters. But notice how Facebook overrides the iPhone’s top bar to soak up some extra space? It spends this space adding a bottom bar like we see in Camera+. You only pull up the retro filters by clicking the magic wand. [Update: Actually, Instagram’s latest version had tweaked their UI in this regard. They, too, ditched the carrier information at the top of the screen, milking an extra UI bar out of the process.]

THE UI RIBBON … OR LACK THEREOF

When you load Instagram, you know you’re in an app because a ribbon UI sits at the bottom of the page at all times. This makes it easy to navigate Instagram, but it also eats a lot of the screen. Facebook doesn’t use any sort of navigational ribbon. Instead, the only place where you can select your camera is the very top of your feed, where an icon sits in the upper right corner. Then, if you pull the page up further, breaking the feed’s frame, you’ll be able to see your entire photo library.

It’s a clever trick that adds to the app’s seamlessness, but hiding the camera up top creates one little problem. When you open Facebook Camera to take a spontaneous picture, you’ll probably be loading the page somewhere in the middle of your feed. Without the camera in the ready, it’s easy to lose the photogenic moment.

Is one approach better than the other? I don’t think it’s so clear cut. Maybe a combination is in order. Instagram ditches the ribbon, but Facebook displays a “take photo” icon overlay for two seconds whenever you load the app. Users would get the best of both worlds.

THE POWER USING

Instagram made their name by stripping away the unessential. You were forced to use the app one way (the right way), take a photo, add a filter (or don’t) and share it. For better or worse, Facebook has a much deeper infrastructure to think about, but Facebook snuck in their power tools ingeniously. It’s here we really see where Facebook could push Instagram, retaining most of the app’s identity, but making it more Facebook compatible.

For one, Facebook Camera enables the upload of multiple photos. But their share page is no more unwieldy for it. You just tap a plus icon to add another.

And within Facebook Camera’s feed, they accommodate these extra images almost invisibly. You scroll down, looking at single images—but then you can flick right to view more images from a friend’s post. For those of us who’ve filled our friend’s Instagram feeds just to share a few photos in a row, this is a wonderful way to prevent any one loud person from running amok.

Then there’s the little issue of tagging. Tagging photos doesn’t exist in Instagram, but it’s a mainstay of Facebook sharing. How did Facebook squeeze tagging in? They put a tiny dialog box on the photo preview screen, and you click it to fill in a friend’s name (autopropagated by Facebook’s servers). Again, it’s a subtle maneuver that prevents Facebook from adding extra screens to power user workflows.

If these side by sides show us anything, it’s that Facebook actually found ways to make Instagram’s UI even simpler and more real estate efficient, though much of this advantage was eventually squandered through choices like adding sourced captions to the image feed.

Honestly, I loaded Facebook Camera expecting a lousy, me-too app that would make the butt of a good joke. What I found was a shameless Instagram knockoff, sure, but one that had earnestly considered how a simpler Instagram experience could thrive within a richer (and far more complicated) Facebook ecosystem. Who would have thought: Facebook’s clone has enough cleverly crafted power tools (and just good UI ideas) to have at least a few of us wondering, can I send my Facebook Camera shots to my Instagram timeline?

Maybe this Facebook/Instagram merger isn’t going to be such a bad thing after all.