The disastrous Facebook redesign
September 19, 2008
Facebook seem dead set on an adversarial relationship with their users.
Last week someone worked out how to get the old Facebook design back, by adding the Facebook Developer application and then bookmarking a URL that turned on some kind of preview mode.
The day after I found out about it, Facebook deleted the group that contained the information, and yanked the Facebook Developer application from all the people who had added it.
What fascinates me is how something as awful as the new design made it through the development process. I can only assume that they didn’t do any focus groups or user testing. From my perspectice as a web developer, let’s go through a few of the things that are wrong with the new design of the main page (the one you get to when you click the word Facebook top left). Obviously, it’ll help if you open your version of the page in another window…
First off, it’s a fixed-width design, requiring 1024 pixels of width. This, at a time when more and more people are buying netbooks and mobile devices with limited screen sizes. Got a Nokia N800, iPhone or UMPC? Good luck. You’ll likely be stuck with Facebook’s dumbed-down mobile interface, or you’ll be scrolling horizontally.
A lot of the horizontal space is wasted, too–there’s a 120 pixel gap between the actual content you want to see and the right column; the only purpose this gap seems to serve is to provide space for the options links that control what appears in the content area. The options links only appear when you mouse over them; the rest of the time they are totally invisible. So there’s a good chance many users have missed them, and the entire purpose of the empty space is defeated.
The 40 pixels of horizontal page margin probably don’t help. The overall impression is that they asked a graphic designer (not a web developer) with a 24" monitor to put together something he thought looked nice, and then they implemented it without actually doing any UI testing.
Another bad idea is the new menu bar. There’s nothing wrong with menu bars per se; the problem is that Facebook decided to put one floating at the bottom of the window, with the drop-downs dropping up instead.
The intention was probably to make the Facebook applications mimic the Windows start menu; the problem is, nobody expects a web site to behave like the Microsoft Windows desktop. Also, it’s not as if Windows is a great place to learn good UI design to start with. Other than the Windows Start menu (and KDE’s shameless emulation of it), I can only think of one other place I’ve seen a drop-up menu–and that’s Lotus Notes, which is regularly vilified for its poor UI.
Perhaps at some point the awfulness of the drop-up menu bar became apparent to Facebook’s developers, because the right column makes it totally superfluous. The right column’s updates and requests area duplicates the functionality of the notifications drop-up menu, and the applications area duplicates the applications ‘start button’.
Of course, there’s still a normal menu bar at the top of the Facebook page as well. They just pulled some of the options out of it to move them to the bottom menu bar.
As if that wasn’t enough unnecessary navigational complexity, there’s a row of tabs on the main page too. Now, to be fair, this is where they’ve actually done one thing right–the tabs switch the mode of the content area, rather than navigating to different areas. Yes, someone has actually used tabs properly.
Having said that, I question how necessary all those tabs are in the first place. News Feed seems to be a combination of Live Feed and Posted Items. Status Updates seems to be Live Feed plus user icons. There are four more tabs that wouldn’t fit, hidden away under the Feed Filters tab/drop-down. All of these 9 tabs basically do the same thing: they perform a different filtering of the content area.
Now, that’s not a bad idea per se, but I can think of much better ways of implementing it from a UI perspective. So, let me move on to considering how Facebook’s new design could be fixed.
Given that I can’t work out the relationship between Live Feed, News Feed and Posted Items, I’m guessing that the names on the content area tabs don’t generally communicate what filtering is being applied. Some of them are clear, but the ones that fit on screen aren’t.
There are basically 7 types of things which appear in the content area: Events, Group notifications, Notes, Gifts, Posted Items, Photos, and Friend Status Updates. Since each kind of thing either appears or doesn’t, the obvious and familiar interface to change the filtering is 7 checkboxes.
My hunch is that if you tried some user-centered design, you’d find that most people have one particular set of things they want to see, and they don’t change their filter settings much. So the tabs could be done away with entirely, replaced with a single "Options" or "Filter" link–a visible one, please–that would bring up the checkboxes to decide what appears in the content area.
A benefit of this simple scheme is that it’s far more extensible than tabs. You can have 10 or even 20 checkboxes without too much user pain, whereas 20 tabs horizontally just won’t work.
In the unlikely event that most users do switch their filter modes regularly, the tabs could be brought back–but as user defined tabs, meaningful to the users themselves! Let me set up a "Quick" tab with one set of checkboxes checked, and a "Detailed" tab with a different set. Maybe I want a "Photos and videos" tab with both, or just a "Photos" tab with stills only.
The friend list editing functionality doesn’t belong under the content area tabs. It has nothing to do with the content area that I can see; if there’s a way to switch the content area to only show feed items from a specified friend list, I can’t work out what it is. So, friend list editing belongs in the Friends menu at the top of the page. (Duh.)
While we’re talking about the top menu bar, the Profile menu entry and the menu entry with my name take me to the same page. Get rid of one of them to make space; my vote would be for the top level menu item that’s my name. I already know what my name is, I don’t need to be reminded of it that prominently. Also, my name’s pretty short, I hate to imagine what Apu Nahasapemapetilon’s Facebook menu bar must look like.
The Facebook menu entry and the Home entry also both go to the same place. I’m guessing people would find out that they could click the word Facebook to go to the home page, as practically every other site uses that navigation metaphor, including Amazon, Google and eBay. However, another possibility jumps out at me: put the Facebook logo above the menu bar, and put the search box to the right of it along with the logout link, as they don’t really belong in the menu bar.
The Inbox menu is only used for Facebook person-to-person e-mail. In reality, people view their inbox as all their incoming communications. So, let’s move Requests into the Inbox menu as well.
The bottom drop-up menu is a disaster. Move Applications back into the top menu bar. Get rid of notifications, that’s what’s shown in the content area. Get rid of Facebook chat entirely, or federate it with the rest of the XMPP world and let us use a proper IM client. Then rip out the drop-up menu.
Now on to the right column. Requests we’ve already dealt with. Updates, those are another kind of feed item. Add an Updates checkbox to include them in the main content area, remove them from the right column. Applications is in the top menu, so that’s not needed either.
People I may know? That one’s debateable. The functionality’s in the Friends menu as Find Friends, but there’s a case for gently encouraging people. I’d maybe have two possible people shown at the top of the main page, arranged horizontally, a different two each time you reload.
With that, we’ve found a place for everything in the drop-up menu and the right column, so they can both go away. Or, you can keep the right column there for ads and other stuff nobody cares about, which is more likely.
Finally, the invisible "Options" links can go. Instead, have the person’s name bring up a pop-up menu with "More about John Smith", "Less about John Smith" (like the Options link), and "John Smith’s profile".
So here’s a quick mock-up of the result. You’ll have to imagine the drop-down menus.
All the current functionality, I even kept the right column for ads, and it easily fits in 800 pixels horizontally. I could come up with similar makeovers for the other areas of the site, but since I’m not being paid I’ll leave that to someone else.
So, will Facebook admit that the redesign has been a ghastly mistake, and fix it? It wouldn’t be hard to do, but it would require a certain amount of humility. They’d have to admit that when several million people tell you you’re wrong, there’s a good chance you’re wrong. However, it seems that they are dead set on imposing this new design that everyone hates. The only solution may be to simply stop using Facebook.
Filed under: Design | Comments (0)