The new Facebook Interface

July 23rd, 2008

Facebook has always impressed me with its user interface. The adjective that I would use to best describe its interface is “restrained”. Workflows are always simple, colors are muted, icons are simple in presentation, and you’re never far from what you need to do. It’s quite a compliment to think of its interface as “restrained” when it’s dishing out data to the scope of what Facebook is dishing out.

Facebook recently announced an interface redesign, and you can see the fruits of their labor here : http://www.new.facebook.com

It’s really a workflow redesign above all things, and a pretty broad one at that. Just like any redesign, I’m sure there will be publish backlash and outcry, but overall I’d say it’s a nice improvement.

To online interface designers, Facebook’s interface carries a lot of weight. The sheer number of users they have combined with their primary market (which is essentially a vocal tech-savvy younger crowd) provides a good insight into what works and what doesn’t. When they change something their users don’t like, everyone knows it.

They lead the charge in social interaction, and you can bet that any tricks they have up their sleeve will propagate quickly among other apps of its kind.

---

Overall

The application overall feels less “tight”, and that’s mostly due to the lack of containers and hard lines connecting to their containers (nearly all containers have a good amount of padding). The width has changed from 799px to 940px. Since the side navigation has been completely removed, this provides an enormous space improvement for content (646px vs. the full 940px).

Applications have also taken something of a back seat. Profiles no longer advertise their apps with the icons, and application information has been banished into the Boxes tab. It also appears that applications have the ability to add tabs to your profile page, but I haven’t seen any instances of that so far.

Toolbar / Navigation

The focus here (and with most of the redesign) seems to be on your content, and less on the application itself. The persistent left navigation is gone, and the toolbar is as minimal as possible. Account settings, privacy, and log out have been buried under the lock icon.

The burying of “log out” is definitely a bold step, and many UI designers would definitely cry foul. I think it’s great, though… almost akin to “start -> shut down” or “apple -> shut down”, and with a web app like Facebook, I don’t think people log out all that often. I could be wrong, though.

The home icon mouseover on “facebook” matching the home icon next to home is a nice touch of visual affirmation.

It peeves me a little that the buttons across the top are inconsistent in their behavior, though. The “Applications” button triggers a drop down, while the rest jump to a page.

Speaking of drop downs, it seems they have a server side process to generate this crazy single tone invert of an image to create a “hover” state for it. Seems strange to do for a result that doesn’t really add anything to the experience (indeed not changing it would have looked better), but there you go.

Home

Lots of white space here. It would be nice to see some visual separation in the commonly used actions up top, or even just remove that section altogether. I know who I am, I know my avatar, update status is already on the right, and so are links to bookmarks such as photos, videos, links, and notes. Really this is the only new addition to the page, and I think it’s a bit useless.

The sidebar is wider, and now includes a sponsor, and is now rounded… which is strange. It remains the only rounded element I can find in Facebook and I think it’s rather ugly.

My Profile

BAM. Here’s where most of the change is, and where the most time planning workflows was spent, I think. Welcome to the new facebook.

Actions & Tabs

Instead of trying to fit everything on one page, it’s now split up into tabs, giving your photos and boxes (custom application inserts) equal weight to the likes of your information. This allows each bit of your profile some breathing room, personal information in particular.

Since the wall is the default tab (more on the new wall in a bit), it’s reinforcing the notion that what people are doing is more interesting than who people are. Your personal info is buried under a tab. Facebook is capitalizing on the fact that they pull in photos (who needs flickr?), status updates (who needs twitter?), and friending / connections and present a nearly perfect interface for displaying this information.

Again, the common actions are up top, but this time it’s more fleshed out, providing the ability to update status, write a note, add photos, add video, etc without leaving the page. Strange the “Home” page doesn’t have this.

I love the concept of being able to quickly get data into facebook with this one little toolbar. In the old view, it’s difficult to figure out exactly how to, for instance, get photos into facebook. Now it’s super easy to tell how to get information into the app, and I’m quite partial to the ability to take a picture via webcam. The ajax interaction here is superb.

[qt:/video/webcam.mov 566 536]

The New Wall

I love the new wall. Essentially it’s just the regular wall with the mini-feed thrown into it, but it’s amazing how much that helps. What this results in is a decidedly “me-centric” view that provides an enormous amount of context to what’s going on between you and your friends.

For instance, let’s take this exchange:

The context is obvious. I know exactly what Kris was talking about here. The filtering out of noise (stuff that I don’t care about, ie, the friend feed) and adding in signal (stuff I do care about, ie, anything that has to do with me) makes this timeline almost feel like it’s telling a story. Fantastic.

However, let’s take a look at how this would be presented in the old Facebook layout:

The information is in two different places, and context is ruined.

To be honest, I never really cared for facebook due to the sheer amount of information given to me (such as the feed on the home page). I don’t like spending time sorting out what is and isn’t important to me… I’d rather be presenting that which pertains to me directly, then given the option to find out more information if I care to. The My Profile page does exactly that; plus, I can view other peoples’ profile pages, and consistency in the way the information is displayed allows me to know what to expect. Fantastic.

The Look

Comparing wall posts, the new version is decidedly better. There are fewer calls to action, less meta, the dates are grouped and the time is grey (faded into the background). Gone are the hard lined borders, instead opting for a greyish-blue background hue that I personally find noisy.

The avatars are enough to set off wall posts, but if they needed to distinguish them more (based on feedback or whatever) there are better ways. Perhaps it just seems noisy to me because I don’t do much in facebook, so incoming wall posts is a majority of what I have; but good design should scale

[qt:/video/facebook.mov 564 232]
Editing the size of a status message is kind of a strange option– I think this feature isn’t fully fleshed out– but I do like that drop out animation.

Visually, the actions up top lack cohesion. They act like tabs, but don’t look like tabs (there’s no connection to the container they control), and if you click “Add Photos” you’ll see yet another tab style, this time it’s centered instead of left aligned. The effect is cute but super noisy, and in an interface that is almost completely devoid of gradients, this stands out as tacky.

Summary

Facebook has always been a relatively simple application, which is a supreme compliment to the interface designers, because they’re working with tons of interactions with tons of information. This latest interface seems to bust open all of the frames and containers, and put more focus on the data that is most important to you.

They’ve done some really great things: They’ve kept the single color hue scheme; kept the simple icons; made it more apparent how to get information into the app; dramatically increased the usefulness of your wall; buried your personal information a bit; and opened up the layout to use the full 940px.

However, the app feels a little floaty without the Facebook containers we’ve all come to know and love, and sometimes it feels as though everything is screaming for your attention. This is a common falling down point for single-page apps chock-full-o-ajax (like the new My Profile page is). Hopefully they can find a way to give the My Profile page a bit more focus in a second revision.

They still have a few interaction dead ends. I believe that the following rule should always be followed: If I, as a user, can view content and it’s possible for me to contribute, then it needs to be obvious how I can contribute. I don’t want to have to navigate somewhere else to find my actions. The context is already developed, so let me take it a step further by contributing data.

Take the following page:

From here I see pictures of me… fantastic! I’d like to contribute by adding pictures of me to this page! Too bad. There’s no easy way to do this.

Same goes with this page :

What is this? Applications? How do I get more stuff in this page?

In addition, once you remove that box, the entire tab goes away. How do you get it back? Install an application? But I already have the application installed, all I did was remove the box. Now what? It’d be much better to keep it there with a description of what the tab is, and how to add things to it. My favorite example being Cultured Code’s Things for OS X:

I’m definitely looking forward to the launch of this workflow redesign; it’ll be interesting to see how their multitude of users react. It will be more interesting to see, then, how their designers react to the feedback.

The “me-centric” approach is something I see taking off in the next year or so. So many companies have been pushing social interaction, but things can get a little noisy with the sheer amount of data flying around.

Putting a “what does this have to do with me?” filter on all of that data is something I think is sorely lacking in many social interaction-based applications. I hope to see Facebook drop the Home page completely in lieu of the “me-centric” Profile page, and turn the Home page into a “what’s the buzz?” type of page.

So what do you think? Is it a decent redesign, or were you hoping for something more? Does it feel quite finished to you? Do you know any good examples of “me-centric” social interaction sites?