I reluctantly joined Facebook about 3 years ago, while researching for a social network application I was designing. But like the rest of the world, I’ve become part of the inane fabric of white noise on the social internet. Overall, I think FB is a brilliantly designed application with tons of usability revelations. And throughout my Facebook tenure there have been several small redesigns and re-alignments that have mostly improved the usability of the site. However, the most recent redesign has unleashed a virtual sh*tstorm of criticism among FB users. Commentary ranged from the less sophisticated “where’s my stuff?” to more subtle arguments like “You took away the verb in my status. How am I supposed to fill it out now?”

In fairness, the most fundamental change to the interface is that they expanded the fixed-width of the design to embrace a higher minimum width target for their audience. I can appreciate the desire to do that but I also recognize that it poses certain real estate challenges they’ve had to overcome. But here are a few observations.

Some finer points of UI interest in the new Facebook redesign that represent a shift in philosophy. In green are the point I feel are improvements and in red are the points I'm not happy about for usability reasons or personal annoyance.

The good.

1. “What’s on your mind?” FUNCTIONALITY – FB has integrated a tabbed system allowing users to update their status or add links, photos, video etc. This helps centralize the initiation of these functions which were seen as scattered and unintuitive before. The selection process is slick, animated and super intuitive.
2. Live feed preferences – Each item in your live feed has preference options allowing you to hide updates from certain users, or hide updates from certain annoying applications. However, I’m not aware of any setting that hides ALL application announcements. I’ve taken to hiding updates from certain users who either update too much or who’s updates are not relevant to my life.
3. The footer – This is one of the best improvements I’ve seen in Facebook and it came from a previous re-design. The additional chat functionality and easy access to applications are a huge improvement. What’s more, the footer’s fixed position helps its accessibility, which is perfect for a utility bar like this.
4. Left column applications – Facebook’s newly expanded width has afforded them to reserve this column exclusively for applications that were previously stored on the right. The expandable list keeps the column clean and forces the user to prioritize those apps which they use the most.

The Bad.

1. “What’s on your mind?” APPROACH – This may be my number one complaint with the new Facebook. You may recall the “status” window used to be a permanent fixture atop your FB home page as well as your profile page. It started with your name in large bold letters, followed by the simple (but editable) helping verb “is” initiating the predicate of a sentance waiting to be completed. It’s a simple change that has destroyed the consistency of users’ status updates. It can be argued that that lack of structure encourages creativity, but I would argue that it has actually decreased users’ motivation to update. It could be the pressure of originating a complete thought without guidance, but I hope not. I think the simpler explanation is that the page no longer begins with one’s name, which exonerates the user from any accountability to update their present status. I know I’m getting obscure here but I can guarantee you the people at Facebook went into much greater detail before making this decision.
2. Left column spareness – I love white space. But the truncated list of applications in the left column leaves a missed opportunity for other important bits of content to be displayed above the fold. This white space also exposes the ragged left edge of the center content. This center column used to be much tighter and cleaner in the old, narrower design because, well, it had to be. Anyway, birthday reminders or notifications would be great examples of things that would occupy this space beautifully because they are short and tightly formatted.
3. Suggestions (formerly “PEOPLE you may know”) – Suggestions used to only consist of users who had two or more mutual friends with you. If there was no one who fit that criteria (sad) The list would be empty. Now, not only does the criteria for users seem to be less strict, but the list also includes pages and groups your friends to which your friends lay claim. That’s frustrating for me but I can get over it because they also allow you to cancel a listing if it’s not in fact relevant to you. It then replaces the  listing with a new one served almost at random. However, by the very nature of the process of elimination the new listing is inherently less relevant and asinine than the previous. I call this “Suggestion Whack-a-Mole” where you hammer down one undesirable result in favor of a less desirable result. Anyone else find this  frustrating?
4. Highlights – Highlights seems to celebrate the most annoying aspects from my live feed by listing them in a more graphic way. In this snapshot alone, I’m seeing announcements that my friends like flipflops, love handles, some stupid nightclub in Miami, and a number of pointless applications I will never want to use. I’d much prefer to be able to customize this box to show only photos and videos (or media interactions perhaps) by my friends.
5. Birthday Reminders – Facebook birthday reminders are a long-overdue and mindless method of fulfilling the social obligation of acknowledging an insignificant acquaintance’s birthday with the least possible effort. This is the perfect tool for me. However, it’s new location beneath the fold and BELOW the aforementioned sea of mind-numbing trivialities is problematic. By the time I’ve scrolled that far down the page, I’ve already seen 10-20 insipid announcements about idiotic applications and quizes and have moved on to questioning why I’m spending any time at all on Facebook. So by the time I see an “important” birthday reminder, the juvenile triteness of Facebook has already washed over me and my attention span has failed. I’d much rather see these reminders listed above the highlights box or over in the left column.

Anyway, I know this is a long and silly rant. I still very much like certain aspects of Facebook and I guess you have to take the good with the bad. Facebook does offer a clean and sophisticated interface with many usability merits from which to draw UI design inspiration. It’s a great social platform where design snobs like me can appreciate user-generated content on the same level as the unwashed, techno-peasant masses. And that’s what the web is all about.

Check this out: http://www.homedepot.com

Beautiful vertical rhythm, hierarchy, varied value, and manicured line breaks make this menu beautiful.

There are a lot of negative things I could say about HomeDepot.com, like the unintuitive architecture etc. But instead I’d like to mention a VERY minor detail that I think 99% of designers would never think of. Let’s face it, the entire Home Depot experience, virtual or otherwise, is overwhelming. Take a look at the quicklinks on the left hand side of the site. They’re there to give you smarter access to the high-demand product areas of their daunting product selection.The type size hierarchy is gorgeous, the color variance ads a nicely priortized foil to the signature orange they could be over-doing (but they’re not), and the almost retro usage of the link underline is unmistakably usable.

But here is where I totally geek out. Notice how each category of links has two lines. Now, notice how the first line always ends with a comma. Why is that, you ask? Well whoever designed this menu (props) took the time to add a simple attribute to the links in this definition list to disallow the links from wrapping onto a new line. Essentially, this CSS author added the following attribute to the definition data type selector:

dd a { white-space:nowrap; }

This allows each line to end with a complete link. Why would anyone bother doing this? This is the usability quivalent of a print-designer manually setting type to clean up any awkwayd hyphenation. To put it another way, consider the user’s mentality when viewing this list. Am I looking for “Toilets, Tubs & Whirlpools?” or do I just want “Toilets?” Well, without this attribute, “Tubs &” would probably reside on the first line potentially causing confusion about where the which link is which and where each ends. I know I’m making to much of this, but I’d love to think that someday, someone might spaz over my attention to detail like I’m geeking out over this right now.