Co.Design

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

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.

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.

Mandatory spousal disclaimer: the duck lips were ironic.

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.

Download it here.

[Image: Everett Collection/Shutterstock]

Add New Comment

17 Comments

  • Prescose

    But why is it only available on Apple products? SO SICK OF THAT! ANDROID USERS ARE PEOPLE TOO!! urgh

  • 起重机

    Check it. Take awesome picture with Camera+ then touch up in Pix upload through Instagram and publish on Facebook.

  • Andy Roberts

    Like your page, the FB app didn't find a way to include a "tweet this" button in their glorious UI.

  • TaylorLing

    Put aside UI in the new Facebook Camera, the feature that I like is the instant preview of the filter on the selected photo. I always wonder why Instagram always show me the picture of a tree for those filters, so I think that is a feature that I hope Instagram can steal it right away.

  • Tim Minor

    Have to agree with the early posters, I'd hate for those icons to sit on top of my photos. I pray Instagram doesn't steal this idea tomorrow.

  • Daniel Gullo

    I would just be happy if one or both wouldn allow rectangular photos instead of forcing me to crop them into squares.  Yeah, I know it's supposed to be emulating a Polaroid Instamatic.  Just sayin'...

    -DJG

  • Tom Hall

    I don't think these are lessons for instagram at all. The Facebook Camera App looks cluttered and actually serves a different purpose - sharing photos with friends, on facebook. Instagram is simple and all about sharing photos with everyone. 

    I will continue to use instagram, where I can optionally, if I so wish to, share my instagram photos with my facebook friends. 

  • Stoney

    Thank you so much for this great article. In the german speaking area the Facebook App is still not available. Your article gives a great overview of what to expect of this new Facebook add-on. I will check it out and describe it as well, once the App has been released.
    Personally, I am addicted to Instagram and very sceptical about the Facebook Camera App. We will see ...

  • cia

    I'm a huge fan of Instagram and I tested the Facebook Camera app over the weekend. I was 3 hours away from New York City in the woods and could only get Edge signal and the Facebook app worked; I was unable to use Instagram on Edge until I was in an area covered by 3G.

  • Bradley Schnell

    I agree with  the new Facebook Photo App is a nice contribution, however, it seems more like an incremental step towards a replacement of the badly implemented mobile Facebook App.

    The reason for Instagram's great success and $1 Billion price tag is precisely the same reason that Google beat out Yahoo, and Apple beat out Microsoft—simplicity. Google made its name with a single white search page. Apple arguably the single button interface. Instagram is a single function app that shares people pictures—nothing more.

    The UI additions in the Facebook Photo app (watermarks, drop downs, ribbons, etc) are gimmicks that conceal an underlying "feature creep" that plagues the Facebook ecosystem as a whole. And while I would agree that certain UI aspects of Instagram are awkward and could use some refinement, an adoption of these new Facebook Photo App features would undermine Instagram's single operation appeal.

    On the bright side, Facebook has never had a single service philosophy, the fact that they have recognized Instagram's value possibly for this reason is promising. It is possible that Instagram might be a way to mediate the trending "feature creep" in Facebook by simplifying it. Still, this sort of merger will be painful, I hope mostly for Facebook. 

    While Google and Apple are clearly moving away from their founding principles of single service, it is exciting to think that Facebook is moving in the oposite direction. But then again, I might be wrong, maybe tomorrow Instagram will look more like Facebook and I will be sad.

  • Bryan Seow

    I think boiling down the Apple vs. Microsoft and Google vs. Yahoo battles to simplicity is a little bit short-sighted and not appreciating the greater picture and complexities behind the companies' offerings.  Compelling single service offerings are always a start, but customers' increasing expectations require that companies include more features to create a more fleshed out customer experience.  It's a starting point, but never an end, in my opinion.

    In keeping to the topic, I actually think the Facebook Camera app is decent.  It crams in a lot of features, such that it's not immediately intuitive, but after a while of using it, it does streamline the process of adding/sharing photos.  Plus...multiple files, yeah!

  • David Senior

    Personally I feel this is far from an Instagram knockoff.  The mobile photo-sharing app space has been looked at by Facebook for over 2 years.  Take a look at Project Titan.  Titan was likely this app. Early leaked mock ups of this app appeared in techcrunch almost a year ago.  

    This app, to it's differentiation or it's detriment, is about multiple photos at once; clustering photos in the timeline and removing the album convention to make photos more event/moment driven.

    The filters are superfluous.  Just something you have to build if you have a dedicated photo sharing app these days.

    With photos and tagging being one of the key growth/interaction drivers for Facebook, a dedicated, native and fast photos experience is a no brainer.  This was in development long before the Instagram acquisition and it's a big stretch to call this an Instagram clone.

  • Design Sensorial

    Hey Mark, how are you doing?

    This saturday I made some tests with this Facebook app with some users at my class that proved me totally the opposite of what you described. The interface is not intuitive and it has some serious usability issues, specially to the light users.

    The icons over the picture, depending on how complex it is, get invisible to the eyes of the user. Besides, tagging a friend's pic icon is hidden and asks for tremendous effort to find out how to leave the tagging mode.

    The back button at the bottom confuses the iPhone users, that are so used to find it on the top left area (and the fact that it disapears when you click on a photo to see the details makes it even more confusing).

    The photo effects are hidden and people didn't actually notice them before sharing a photo, because they didn't know what the icon stood for. Maybe because they don't have this effect feature on their regular Facebook interface, they didn't look for it on the app. Maybe it should be more obvious at first, with an option to be hidden if wanted.

    I understand the concept of the app to be a stimulating photo sharing tool and they are going on the right track (the fact that my iPhone gallery is right there for me to access makes it very clear, they got that right) , but I think they need a lot of improvement to make it really simple. I still like Instragrams experience best, not because I'm used to it, but because it's more intuitive.

  • John G Howard

    Re the Facebook watermarked like button - this sucks. Don't put anything atop my photo! As Dale Shephard also pointed out- on instagram, you just double tap the picture to like it.  I agree, that's better.

  • Da Citizen

    Re the Facebook watermarked like button, on Instagram, you just double tap the picture to like it. Thats better!

  • Fabian Galon

    That's a hidden shortcut, it's not the main point of interaction and hence has no bearing on this argument of button placement.