Facebook app UI through the years

It’s been a long time since Facebook was first introduced to the iPhone. Many changes have been made and many improvements have been welcomed by designers and consumers, alike. We’re going to take a look at where the Facebook app has been, where it is now, and draw a borderline hypothesis as to where it’s going.

The beginning

To start at the absolute beginning would be to start in 2006 when Facebook mobile made its debut. While this doesn’t exactly count as an application for Facebook, it does lay down the initial format for portable devices, which would later become the foundation of paradigms that the Facebook app would follow.

In August of 2007, Facebook released a site dedicated for the iPhone. This was an even more refined version of mobile Facebook and was essentially a rough cut of the first official Facebook app that was bound to happen next.

The emergence of the official app

In July of 2008, the Facebook app officially hit the App Store. This would prove to be the beginning of social media on the go.

The initial design for the Facebook app was one which seemed to be the design of choice by developers for the first iteration of most iPhone apps, as they got the hang of it.

The navigation was based around five tabs located at the bottom of the screen: Home, Profile, Friends, Chat, and Inbox. In the upper-left-hand corner, you had the refresh button and in the upper-right hand corner, you had a camera icon for bringing up the camera to take and share photographs. To update your status, there was, what looked like a search bar at the top of the screen, which allowed you to easily type what you wanted to share with your Facebook friends. All of these seemed to follow some aspect of the basic app design paradigms that I covered in a previous article.

Also, instead of displaying other’s updates as we see them now – in their entirety, they were laid out in an abbreviated manner. In fact, it looked quite a bit like the current iMessages app in that it showed each update in a short summary, with you having to click on the individual update to view the entire post and comment on it.

iOS Facebook 2.0

Mere months later, Facebook released the 2.0 update for the iPhone app. This added a vast majority of functionality and added a new depth to the UI. Within certain tabs, such as home, there was a secondary and even tertiary layer of navigation.

This update also managed to tie in the mobile application much more with the web version as the news feed started to look much more dynamic and essentially mirrored the web’s rendering.

iOS Facebook 3.0

This update seemed to change up the UI more so than any update in the past, and even since then. Instead of using any sort of tabs, Facebook went with what was essentially a secondary homescreen with icons; side-swiping screens and all (think Flipboard).

Besides an entire list worth of features that they added and improved on, this update went to show the priority change as far as UI goes. The navigation was turned much more visual than it ever had been before; and everything was centralized. By making the UX more centralized, they minimized the amount of navigational depth, keeping users focused on the specific task they were trying to achieve when using the application.

However, this centralization made the UX much less intuitive by adding an extra step to going from say, your news feed, to your photographs. You had to go back to the centralized screen, then choose where you wanted to go next, instead of being able to easily navigate with minimal transition time.

This UI change seemed to have strayed away from many design paradigms we were (and are) used to seeing. In a very vague manner, they essentially created a social OS within the iPhone. The icons for each feature, the side-swiping navigation to get other features, and even the bubbles above each icon for notifications.

Yet another complete change

With the release of the iPad, Facebook had to work on finding an efficient manner in which to create a similar, but separate experience on both a 3.5″ screen and a 9.7″ screen. Despite it taking a while, they managed to do just that.

When Facebook hit the App Store for the iPad, it reigned in an entirely different UI; both to the iPad and iPhone. Gone were the days of the centralized navigation and to life were the days of left-hand-oriented navigation; a paradigm I went over in relatively great depth a while ago.

Also, with the update, the process of making any sort of update – status, photo/video, check-in – is all done via a bar at the top of the newsfeed, making for the entire process of checking for updates and making your own as easy as can be on the user; it seems natural.

One place the newest update seems to shine the most is within the timeline itself. For this you have designers like Joey Flynn and the rest of the timeline team to thank. They’ve done a killer job making it look as good as they can. The content seems much more dynamic, if you will. Larger photographs were implemented, links show more fluidly than before and it just seems to glow with media content more so than just words as most iterations before.

Granted, Facebook doesn’t have much of a choice, other than to capitalize on the mobile market, when you combine the multiple aspects that were implemented into the 4.0 update, it’s quite obvious to see where Facebook is headed on the mobile front.

Standalone

Even before some of their most recent updates, Facebook decided to create standalone apps for specific features that are the most widely used.

Facebook Messenger

Facebook Messenger focuses on purely the messaging system of Facebook. Since the conglomeration of the Facebook inbox and chat features, many people resort to the messaging built into Facebook rather than many IM alternatives.

As for the UI, Facebook Messenger goes against the grain in the fact that bringing up the list of contacts, you need to swipe in from the right, where as most other applications use the left-hand of the screen for such navigation. The messenger app also features the floating button. The most logical reason for using these two methods is because that’s how the main Facebook app is laid out; your friends that you chat with most are available on the right hand side and the button is where you’re used to seeing and tapping it. They chose consistency rather than sticking to the “norm.”

Facebook Camera

Facebook camera was heralded in with a lot of bad press. Just weeks after purchasing Instagram for $1 billion, they put out an extremely underwhelming photo app of their own.

Despite not being what people were expecting, the usefulness and UX of the Facebook Camera app is actually quite impressive. Your most recent photos are along the top and to browse through more, you swipe down, viewing your entire photo library. This makes for quick and easy access to your photos where other apps consist of having to select a button and browse through your various albums; yet another step in the process which Facebook eliminated. It also acts as a photo-only timeline (new paradigm? — Path and Day One app), sharing the various photographs that your friends decide to share.

Facebook Pages

While the average consumer will never use this standalone application, for those who have a fan page or business page on Facebook, this is beyond valuable. From posting content to viewing analytics, it can get the job done.

20121122-111241.jpg

It’s UI is identical to the main Facebook app, despite being tailored specifically for managing your “page” on Facebook. Navigation is brought in by swiping from the left and the composition tools are laid out on the top, exactly like they are on main Facebook app. As mentioned above, this just goes to show their priority is consistency across the Facebook ecosystem of apps; something vital in the UX department.

Where to from here?

To be frank – though I’m actually Gannon – there are plenty of ways Facebook could go from here in terms of their mobile UI. There are a few things about the UI in the most recent updates that intrigue me and lead me to believe a few potential directions they may be going in.

One thing I noticed is that when in the messages with the latest Facebook app, in the bottom-right-hand corner, there is a floating button for composing a new message. This is a first for Facebook and could be a starting point for implementing a different UX. Floating buttons seem to take up less screen real-estate and prioritize content over anything else.

Also, the overlay method for hiding navigation and messages is a simple solution to the problem of a feature-rich experience. It allows you to easily access different parts of the application without it overriding what you’re currently on.

Conclusion

While Facebook was never designed to be a mobile application, I feel they have come along way since 1.0 for iOS and are bound to make many more enhancements in the future.

If anyone has the resources to build an application that is leaps-and-bounds above the rest, it’s Facebook. Only time can tell, so I guess we’ll just have to wait it out and see.

Are there any paradigms within the app that I seemed to have missed? Are there any that you think should be added to improve the experience? If so, leave your thoughts in the comments!

Fashion and Tech

Designer as Architect

Good Design is Thorough Down to the Last Detail

What I Would Wear on My Wrist

Metis NYC Product Design Bootcamp: Acquire Skills, Build a Career

Good Design is Long-Lasting (Part 7)

Good Design is Honest (Part 6)