With the new enhancements and layout changes to Facebook I figure it’s high time for me to take some time and get back to the old blog.

I must admit that upon a sub-surface evaluation of Layout, Navigation and Interaction Elements, I’m quite impressed with the changes to “The New Facebook”. I do have a few complaints but they’re far outnumbered by worthy improvements and advantages gained so here we go…

» Global NAV «

1. Removal of arrows for drop down menus

Perhaps they were just ready for a change but I can’t agree with the decision to remove a) the navigation functionality previously made available through the old nav and b) the visual cue suggesting to the user that there is more information hidden under the arrow should they click on it.

The look/feel is cleaner but I see several clear disadvantages:

• removed the ability to select from multiple friend options in drop-down menu

• removed the ability to navigate directly to specific “Inbox” options such as Notifications. If I’m not on the home page, how do I get to them?
  

I’m sure there is a reason behind this decision and it’s up for debate until one of you out there feels compelled to clear it up for me.

2. Addition of “Applications”

Seems like a logical addition but referencing the applications as “bookmarks” the “Status” container on the home page can be a bit unclear at first. Sure, I can easily figure out what they’re inferring with the icons but some a labeling change to “Application bookmarks” would clear this up greatly. With the previous observation negligible in scale, the major oversight here is that there’s no link in the Applications menu to “Find more applications”.

3. Changed “Profile” to “user.name”

Personally I liked it how it was before because it creeps me out a bit to see my name all over the place. I wonder what the meeting must have been like to justify that change?

» Home Page «

1. Layout

The first change I noticed was obvious in that they’ve increased the overall content container width to 964 pixels, a significant increase of 20% from the previous 799 pixel container.

This has gave them a nice advantage to condense the home landing page information vertically and in this case, contrary to my comparison of profile page footprints coming later, they actually increased my home page height, albeit by a negligible amount (134 pixels).

2. Visual changes

It’s nice to have the vertical bounding box removed. The content blocks now “float” in space and IMHO give the entire site a slightly lighter visual feel.

3. News Feed navigation

Having the newly added ability to browse through your News Feed by facet (Top Stories/Status Updates/Photos/Posted Items) is a welcome addition. This feature alone gives them arguably a 4x increase in information density by footprint w/o having to increase total page height. Nice work indeed in terms of IA and UX.

4. Inline Preferences/Editing for content chunks

I love this addition!! Incredibly useful and powerful for the user that will take advantage of it (of course).

. Wall: Edit posts
. News Feed: Set Preferences for a particular Friend being displayed
. Info, Apps, Friends all now have inline preferences found under the “Edit” box

AWESOME enhancement!! I love inline preferences. Incredibly useful.

» Profile Page «

1. Introduction of new profile navigation

Another addition that I am diggin’ on for various reasons. First and foremost by reworking this page and implementing a sub navigation they effectively reduced the height of my home page by 45.3%!!! (3487px » 1907px = 45.3% reduction in Eye Miles to view content). Those numbers are tough to argue with, especially in light of the fact that I now have more information at my disposal than before!

With the sub-nav now enabling inline viewing of Wall, Info, Photos and Boxes users, much like the new nav introduced on the home page for News Feeds, users can now browse 4x the info previously unavailable to access within the old layout. The best feature of this new profile navigation is the sub nav (Share Link - Add Photos - Give Gift - Fun Wall). I specifically like the Photos component that now allows users to create photo albums, post photos and take a photo directly within their profile page. IMHO this is one of the best small changes that they could have made in light of the fact that they have brought users one giant step closer to a core element of sharing experiences through social networking applications, PHOTOS!

Without going into every point in detail here’s my general list of advantages and disadvantages of the new profile navigation:

Advantage(s):
- Profile page is significantly shorter in height (3487px » 1907px = 45.3% reduction)
- Increased customization of profile view
- Greater IA priority and separation given to Photos
- New quick add interaction for creating albums/adding photos gets users that much closer to a core element of sharing experiences through social networking applications

Disavantage(s):
- Unnecessarily disruptive layout changes for navigating to Photos and Boxes.
- Photos page: No interaction element displayed for adding photos, only can Create and Album. They should consider including that interaction element as a component of the “Photos” sub nav which would help maintain the layout consistency and alleviate the disruptive layout change noted above.
The remaining items that I jotted down for the profile page alterations were….

- Wall and Mini Feed have been merged into one stream under “Wall”
- The additional tab in the profile NAV noting a “+” for adding a new tab to the mini-nav. I can infer that I’m able to add something via that interaction element but there’s no hover state indicating what it is until you select it. Small quirk, but easily addressed.

» Summary «

To sum things up I think the Facebook usability crew made some great decisions in the changes that they made to the new version. I’m quite interested to see how they address some of the dangling UI issues I have mentioned and any other once that surface over time as people make the switch. If you made it this far thanks for reading through my comments! Feel free to share yours or debate what I have to say.

Recently, the IxDA list has been discussing a couple of commercials that Ford is running. One of them is focused on UI Design. Check it out...

Watch Commercial

I'm not normally one for Flash interfaces with "different" navigation techniques, but I thought this was impressive, smooth and relatively usable:

http://www.whitevoid.com/application.html

One of my first posts discussed how anything to the extreme is not a good thing. I came across a comment today that really drove me crazy and reminded me of this past post.

"I can only say that getting a Mac Book will make you a better designer - and a better person."

I want to know how the type of computer I use will make me a better person. Wow, some people need to get a clue.

Dispite it's sometimes sluggish performance, here is another great distance whiteboarding tool.

http://www.twiddla.com/

Wow...

Padded lampposts are being trialled in a London street to protect inattentive pedestrians.

A pilot scheme has been launched in Brick Lane after it was found to have the highest number of 'walking and texting' injuries in the country.

A study carried out by 118 118 found one in ten people has hurt themselves while focused on their mobile phone screen.

If you want to see how far we have come in technology, and in society, check out this site. Brings a nostalgic tear to the eye.

http://obsoleteskills.com/Skills/Skills

Google's VP of search products and user experience shares the rules that gives the search company its innovative edge.

http://www.fastcompany.com/fast50_08/google_marissa-mayers-9-principles-of-innovation.html

Many times it is impossible to interact face to face with clients or peers. However, whiteboard and collaboration sessions are an essential step to the User Experience design process. Here are some suggestions to overcome the distance, without sacrificing the collaboration.

http://www.conceptshare.com/howitworks/

http://us.ajax13.com/en/ajaxsketch/ free, browser based so multi-platform.

http://www.cumulatelabs.com/cumulatedraw/ free for individual use, browser based so multi-platform.

http://www.gliffy.com/ free, browser based so multi-platform.

http://flowchart.com/ free, browser based so multi-platform, rather geared to specific diagram types, so may fettered.

http://www.skrbl.com/ $10/month, browser based so multi-platform, describes itself as an online whiteboard.

http://thinkature.com/ free, browser based so multi-platform, describes itself as an online whiteboard.