The New Facebook 9.08.08

A friend messaged me a while back telling me to look at the new Facebook layout and tell her what I thought. I was slightly confused at first, since I had been on Facebook less than 10 minutes prior and it looked the same. It turned out that they were slowly rolling in the new layout via a new URL. So I took a quick look at it and decided it needed to be spoken about.

I decided that before I could honestly speak about the layout, I’d give myself a bit of time navigating; seeing what this redesign has to offer, and I even went back and used the old Facebook for a few days to draw comparisons. So what did the Facebook redesign have to offer me? Unfortunately, the conclusion was very little.

This is the look of the New Facebook. You'll be seeing it a lot from now on.

This is the look of the New Facebook. You'll be seeing it a lot from now on.

The first problem with the design is the free-floating mess of everything on the main page. Quite honestly, to me, it’s nauseating. Since the conception of this article, Facebook added a bar above the News Feed allowed you to sort through different kind of updates. As an anchor, this is helpful, but not nearly enough. Besides that, though, there are very few anchors on the page to plant your eyes and create a sense of beginning and end. This isn’t to say that all websites without definite borders evoke that feeling. However, the lack of fluidity and consequent forced width is really unsettling.

If we were to dissect it, it would go a little like this: The minimum width to see everything clocks in at about 960px, which should be fine if you’re going to abide by the Rule of Thirds - 960 divides perfectly into thirds. Regardless, something doesn’t add up. After a few minutes of looking at it, I was able to figure that there’s too much tension on the sides of the page, contributing to that nauseating feeling that something is not right.

A breakdown of the Facebook Redesign.

A breakdown of the Facebook Redesign.

That decision doesn’t make much sense from a resolution standpoint. The standard resolution nowadays according to ShortStat, Mint, Google Analytics, and other data-mining tools that I use seems to be 1280×1024. If you auto-align 960px within 1280px is giving you about 160px on the side for negative space -  not enough negative space for that much width, and that many characters. When you consider that many people may not be running their browsers at full screen, you’re looking at a very crunched page. To me, it feels like a page of letters and characters with little to no organization.

One of the only anchors on the page is the “Status” box to the right. Floating there. All by it’s lonesome. It’s a nice improvement from how that information was displayed on the Facebook prior. It needed some friends in that vast sea of words, and the addition of the aforementioned content organization bar was a big help to make it seem more in it’s place.

The profile pages are slightly less of a disaster. They managed to do something I hoped they would - organize the content (read: in most cases, spam) added by various Facebook applications - but they did it in a terrible way. In most cases, this was an unnecessary move; although it was a desire of mine, I didn’t need it. I’m sure many people on Facebook would concur (and they have).

Tabs are great for organizing information, but make sure you organize the right information, and present information to the end-user in the correct order. When I go to a person’s Facebook page, it’s for very few reasons:

1) Most of the time, I need someone’s screen name, e-mail address or phone number to get in contact with them.
2) Wishing someone a happy birthday is very popular, but not a priority
3) I end up there from looking through pictures.

The new Wall/Status Updates fusion is the first thing you'll see when you go to someone's profile.

The new Wall/Status Updates fusion is the first thing you'll see when you go to someone's profile.

I imagine that there are much more aggressive Facebook users than me, people who use the Wall feature obsessively, but basic information organization really should be observed more. Present the most basic information first, secondary information second, and tertiary, or optional, information last. This isn’t at play here. The most basic information that you can get from a person’s Facebook page is the static information that they input; the information about them. This should be the most important group of information on a social networking site, as when you meet someone, you don’t care so much about what other people talk about with them opposed to who that person is and what they’re into. So then, why is the “Wall” the first thing I see? Sure, it’s been fused with the “Status Updates” box (we’ll talk about the logic behind this next), which was the previously one of the first things on a profile page, but remember that it’s the “Wall” box too now. That used to be the last thing on the page by default. There’s some serious identity crisis going on here.

Logically, since the “Wall” contains much larger blocks of text, at the maximum, the same rate as the “Status Updates” box, with much less crucial information, this new fusion should stay at the bottom. In fact, they probably never should have been combined. “Status Updates” was always around one line, or a short excerpt of a comment; very brief information complimented by descriptive icons of the action. Meanwhile, the “Wall” contains a back and forth between friends, adding in lots of metadata such as Name, Post Date, and a thumbnail of the Profile Picture. Then you also have people sending links, where you get another image, excerpts of the link, as well as any post text they might have entered as a supplement. That’s a lot more information than a descriptive image and one-line summary. They also are two completely different kinds of information. One set is computer-generated summaries of how you’ve used the site, the other set is human-generated content - a verbal exchange. No matter what angle you take it at, they don’t belong together.

The tab issue is easily solved. The functionality is actually already there. Why not allow people to select an order for the tabs they want viewed first on their page? You can already do it for non-default applications. Hell, surprise me and allow me to choose what information I want to see first on any user’s page. It doesn’t have to apply to every application in existence, but if you let the user choose their own universal default order of the main three applications, that would be a huge step in the right direction.

To avoid being a complete negative nancy, I do like what they’ve done with the actual design of the profile page. Despite their incomprehensible information hierarchy, it looks quite nice. It’s a lot cleaner than the default and doesn’t suffer from the lost-at-sea feeling that the main page gives you. Why? Anchors - most notably, the blue backdrop used to accentuate the tabs. This wasn’t there when I concieved this article and was one of the things I said “Oh!” to, in pleasure, while using the site on a day-to-day basis. Unfortunately, it occurs to me now that I deleted the proof of this. Regardless, there’s so much information here in the three column layout that it’s really not that bad. Furthermore, outside of those three columns is much more satisfying amount of negative space to either side when viewing in a 1280×1024 browser window.

You can now choose how many friends to display as well as select a specific network.

You can now choose how many friends to display as well as select a specific network. Also, customize your tabs.

The added functionality is also quite nice. The ability to show 6, 9, or 12 friends, hide the mess of Networks, and choose which Networks to include in your Friends box is quite nice. Looking through all of the default tabs, everything is a lot cleaner. The ability to move things from your main page to your box page for that extra-minimalist feel is a great option for all the users that began to feel that there’s still just a little bit too much going on. (Ha ha, that was a joke.) Regardless, I’m quite impressed from the design standpoint. The AJAX employed to quickly load new information without a page refresh is quite nice, and while I’d wonder if it was stepping a bit too far into the future for such a large site to employ AJAX so widespread amongst its features, this is Facebook. They can get away with anything (Another joke).

Another thing that Facebook did quite well was add localization functionality. I’m not sure if this was available before, but if it was, it’s in a much better place now. If you go to the bottom of any page, in the footer, next to the copyright information, is a language. If you click on it, there’s a long list of languages to choose from to localize your Facebook’s interface. It won’t do any auto-translating of Wall posts, but that’s not expected, is it?

Stepping away from the profile page, let’s focus on the last major aspect of this redesign that I feel needs talking about. It’s something you see on every page of Facebook and that you’ll never escape: the header. The technique behind the top-aligned header is not new, it’s something that Binary Bonsai has been using for years now, and they might not have been the first either. Facebook is kind of doing it wrong. It’s got a great aesthetic to it, but it doesn’t match with most of the pages. The only place it really fits is on the Profile page, where you have that nice light blue as a medium between Facebook’s trademark deep blue and the complete white of the background. In all of the other places, it just feels weird. It’s such a sudden transition, and the whitespace between the header and the current page’s information is far too tense. It’s very close, but it needs an extra 5-10 pixels to be perfect.

The way Facebook has redesigned it’s layout is very odd. It has a lot of what it needs to make it a lot more comfortable at it’s disposal, but refuses to use them. The blue backdrop found on the Profile page is a great step to eliminating the nauseating feeling on the main page, and the awkwardness of the header on all subsequent pages. The information hierarchy miscommunication is an easy fix, and you can satisfy everyone by extending the user-organizable tab function. Why leave it at this?

Old vs. New: Putting them side-by-side

Old vs. New: Putting them side-by-side

The New Facebook, as it is now, feels highly incomplete and very rough around the edges. I’m not going to say it’s terrible - it’s not. I actually think that in most cases it is a step in the right direction; the old Facebook was indeed very far from perfect. The thing is, if you’re going to take a step in the right direction, you need to take a more concrete step than this before introducing something to millions of people worldwide. I think more limited beta testing and listening more to their users could have easily averted this disaster.

Also, if you’re not going to get rid of “People You May Know”, Facebook, at least make it optional. If people that I know aren’t already on my Friend List, 9 times out of 10, it’s because I don’t want to be their friend.

(If you have anything that particularly irks YOU about the New Facebook, or anything you like about it too, feel free to drop a line in the comments.)

  1. Gravatar
       
    1 Mosey

    I have to admit this is completely news to me (that Facebook is bringing in a new design) but then again, I never did keep up. After logging in and trying it out, I have to say I still prefer the old design for the moment. I thought it very strange as well that when clicking on a person’s profile, it takes me straight to their wall rather than their profile info?

    I could get used to the tabbed/horizontal navigation though at the top. Not sure about the ‘full’ layout at the moment either as I quite liked the ‘compact’ Facebook ;)

    Gravatar
       
    2 Eleo

    I like the new layout and see very little wrong with it. I wouldn’t describe it as a massive improvement but I don’t see it as detrimental either.

    How about this: come up with a new layout. I want to see what you would view as an improvement to the old layout.

    Gravatar
       
    3 Justin

    Eleo, not a problem. I already had to do a MySpace redesign for class. Maybe when I have some free time I’ll make some revisions to the old layout, as well as some to the new layout.

    Gravatar
       
    4 Mosey

    @Justin: I’ll look forward to the new design :)

    Gravatar
       
    5 Paulina

    I do not like how asymmetrical the new Facebook is. There is also too much empty space. You should not tell jokes.

    Gravatar
       
    6 Eleo

    Let me see yo MySpace design, dawg.

    Gravatar
       
    7 Justin

    Eleo, you can see the Myspace redesign here: http://www.designdraft.net/uploads/myspace-redesign.jpg

    It’s a little rough around the edges as it was just a supplement to a paper, but the gist of it is that Myspace needs more consistency, even if at the cost of reducing user customization abilities. The real problem, though, is that it was forcefully changed from a very demographic-specific service into something that ideally caters to everyone, just so that they can make more money.

Post a Comment


The New Facebook: 7 comments.