Breaking: Facebook Profile Redesign – Detailed Specs & First Impressions

As most people in the Facebook developer community are aware, the upcoming Facebook profile redesign is the biggest and most far-reaching project at the company so far this year. Its impact on users and developers will be significant, and Facebook hopes it will create a better and more valuable experience for all.

Today, Facebook is announcing detailed specs on how Facebook applications will interact with the new profile page. On the whole, the upcoming updates to the profile page will have a big impact on how users interact with each other and express themselves with applications. In order to get a detailed look at all of these changes, their significance for developers, and Facebook’s hopes for their impact on user experience, I sat down with Ruchi Sanghvi and Josh Elman, Product Managers of the Facebook Platform and leads on the profile redesign effort. Here are all the details.

Developer Documentation & Sandbox

Starting today, developers will have access to documentation on the upcoming profile changes on the Developer Wiki (see links below). In order to create a level playing field, everyone will have the next couple of weeks to read and absorb the changes and think about how they will affect their applications. Starting in late May, Facebook will open a developers’ sandbox that will allow developers to test their apps. A few weeks after the developers’ sandbox opens, Facebook will push the new profile design live to all users. If developers do nothing, their apps will continue to work as is. However, in order to take advantage of new opportunities for integration with the redesigned profile page, developers will need to update their apps in several ways.

With the profile redesign, Facebook wants to give users more control over their profile and make the profile more communication focused. In order to integrate with the new profile design, developers are going to need to adapt to and take advantage of several new integration points on the Facebook profile:

Changes for App Profile Boxes

Application profile boxes will largely be moving to a new home in the updated profile design. The new Facebook profile is getting 5 default tabs: Feed, Info, Wall, Photo, and Boxes. All current profile boxes will be moved to the “Boxes” tab with the update (the title of the “Boxes” tab is still up in the air). The specific migration flow has not yet been determined, but the specifics of how Facebook implements it and helps users decide how to organize their new profile pages will have a big impact on developers. On the Boxes tab, users will be able to add, remove, and organize their profile boxes.

In addition, the Feed, Info, and Wall tabs will have a left-hand column that will hold “main profile” boxes that will be height limited (to about 250 pixels) but otherwise will be very similar to current profile boxes. Users will be able to move their profile boxes between the Boxes tab and the “main profile” area fairly easily. Finally, users will be able to have up to 5 boxes in their “main profile” area – more than that will be put into the “Extended Profile” that developers have come to know well since the initial profile cleanup tool.

The New Info Tab

One of the new integration points for developers in the profile redesign is the new Info tab. This will be a very structured tab, much like the Info sections on the current Facebook profile page, containing key-value pairs on which information will exist in comma separated text or thumbnail lists. Unlike the Info sections currently on the profile page, content added to the Info tab from apps will link directly to the application (not Facebook search results). There will be an in-line editing flow on the Info tab for users; Facebook will provide a suggested type-ahead editing interface.

Users will be able to add content to the Info tab from within application canvas pages (in FBML). After users see a popup confirmation, the content will be added automatically. Each application will get its own section on the Info tab that look much like the different Info sections currently in Facebook’s current profile.

New Application Tabs

Another major new integration point for developers is app tabs. These will be built like “semi-canvas” pages, meaning Facebook will be proxying the images but hitting the apps for the tab’s content. Like profile boxes, app tabs can’t be built with iframes or using auto-play Flash, but developers will be able to build fully interactive FBML pages.

The only place users will be able to add tabs is on the profile itself, using the “+” button to the right of their default tabs, and up to 6 tabs will appear (the rest will be accessible via a “More” dropdown). Facebook will provide a drop-down list of users’ applications, sorted by those they use most. Facebook’s intention for app tabs is that they’ll meet the personal expression needs of those users for whom profile boxes are not enough. However, the page is also a place visitors will be able to initiate interactions, like starting a game. Developers won’t be able to create different views for the profile owner vs. profile visitor – similar limitations to the current app box FBML rules to prevent profile page spam.

Mini Feed 2.0

The focal point of the profile redesign is the new Feed tab. For profile owners and friends, it will be the default tab you see. For profile visitors who aren’t friends, the Info tab will be shown by default (Facebook says this is because it’s more likely you’ll want to learn basic information about non-friends, like where they live or go to college, before you want to learn detailed info about their recent activity).

With the new Feed, there will now be 3 different feed sizes:

  • One-Line Stories. This is very similar to what currently exists on the Facebook profile. In the profile redesign, app developers will still be able to use the API to publish feed stories to users’ profile pages.
  • Short Stories. Short stories will be slightly larger feed stories, that will have limited FBML. Users can embed images and (soon) Flash.
  • Full Stories. These will be up to 700 pixels of free form FBML.

Unlike one-line stories, app developers will not be able to automatically publish short and full stories via the Facebook API. Instead, users will have to approve them. Developers can use feed forms to create multiple versions of feed stories that the user can choose from for publication. When developers want to publish a short or full feed story, users will be given a popup preview of the story, the choice of size (one line, short, full), and the button to approve it. This is a major shift from the current framework of auto-publishing feed stories, but Facebook believes it must give users more control over their profile in this way in order to keep the Feed from becoming spammy.

After a story has been published, users can change which version (one line, short, full) of the feed story is published in their Feed via UI in the feed itself. This means that app developers can publish one line stories automatically, and users can “make them bigger” later on. Facebook will encourage developers to create feed stories in all sizes, so that users can choose which one they like best. Obviously, larger stories are likely to generate more application click traffic than smaller stories.