Facebook just made an interesting change to their home page. They introduced the option to view two “different” feeds. The “news feed”, the highlighted stuff we are all used to, and new “live feed,” everything all your friends are doing play by play. The way they designed the user interface and the language they chose is a bit clunky and creates some interesting problems going forward.

1) The design presents itself as if there are two separate feeds, a live feed and a news feed. This is reinforced through their awkward navigation-like treatment of the functionality. The truth is there is ONE feed with different filters to apply. Those filters are lists, networks, locations, apps etc… You know, all the stuff in that big left column.

2) There is an over focus on realtime. I can’t believe they included an unread count for the live feed. Its probably there to get people to discover the feature and hang around longer. If people do discover and use the feature they are exposed to unfiltered information, a lot of which I find completely useless. Not exactly something new, and not helping solve the information overload problem. Is a raw unfiltered list of stuff really a new feature these days? Do I need an unread count for my Facebook news?

I would love to have been a fly on the wall for some of the design conversations that led to this. I thought facebook had a big filtering win with their last major re-design. The addition of lists, the ability to change the default filter on the homepage and the other application and network filters in that left bar were fantastic enhancements. So what happened here?

I sketched up a few other ways they could have gone…

“Live feed” as a filter

They introduced this powerful left-hand filter column last re-design… why not just make the live feed part of that? Certainly more elegant than adding another layer of clunky navigation on top of the news feed. The only logical reason to not do this is that they may want you to view other filters (lists, networks, geos etc) as both live or highlights in the future. So why did they not include the live option for all the filters? Why can’t I see my TBG list bellow as both live and highlights? I would wager because it would take A LOT of computing power and other difficult tech. Understandable, but it sure would be nice.

“Live” as a persistent option

Computing power be damned, lets pretend. Lets also try something a bit more usable and clear. If you use the new feature you will notice the navigation items swap places and become headers for the news feed when clicked on, tisk tisk. Here is a quick n’ dirty sketch of what it could look like if you were able to see all filters as either live or highlights. Even though this probably wasn’t an option, I think it underlines the problem with the language they have chosen. News Feed and Live Feed imply two separate feeds… when in reality you are seeing either highlights or live updates of one activity stream. At least that is the mental model / agenda I am arguing for. All in all this approach is too busy. I really liked the simplicity of the filters on the left and a clean header. Although I am sure there is a more elegant solution in there.

My gut says the way they implemented this feature is going to feel confusing and not so useful to users. I think what Facebook chose not to include in the news feed was part of its charm. Giving the user the ability to see more information is not a bad thing, but getting there is not an A/B, black and white thing. Right now the faucet is either open all the way or at a trickle. Its the smart multi-levels of filtering, refinement and nuance that are missing. It doesn’t feel like the same level of polish was applied to this as was to the lefthand filters.

The key to the realtime web is filtering and I like what Facebook did last redesign around it. But here, Facebook has backpedaled a bit and given its users the key to wide open faucet, again. Im being a bit hard on them yes, but these issues around filtration and pulling value out of activity streams are the problems to solve in 2010 for the realtime web. I was expecting more from one of the leaders in the domain, and hope they have some better thought out moves up their sleeve, or perhaps this a transitional interface to something new.

1. Learn how to design with form elements. These are a fundamental flaw of millions of sites on the web, and something that is sadly overlooked by many designers as an after-thought. I can’t stress this enough. If you can’t design a form that gets a user from the beginning to the submit button within a form without making them think, then I suggest you read this book: Web Form Design – by Luke Wroblewski
2. Research! In nearly every aspect of web design, examples of solutions can be found everywhere. If you’re designing a page that needs to display a recipe, find out what others are doing online. But don’t stop there: you can take cues from magazines, video games, letter-pressed posters, television, and even architecture and industrial design. They all have a wonderfully rich history to reference. The best answers will be found in the most unlikely of places.
3. Every pixel counts. The entire screen is your canvas, so don’t let all your hard work go to waste because you didn’t think anyone would notice that your buttons look like ass. Your horizontal rules are just as important to telling a visual story as your video player or main navigation. Don’t let a few flat notes ruin an otherwise awesome web site.
4. It’s alive! This isn’t print media, and this isn’t television. It’s not a passive experience, so give the user an experience they can invest in, something that is uniquely only available on the web. Make them fall in love with the actions of the site, not just the content. Make them love clicking a button. Make them smile as often as possible.
5. Step back as often as possible. Let your Mom, who is scared of the internet, test your site. Don’t help her. Just watch and listen. You’d be surprised at how much a few confused comments will help your work. Always test for your audience, since no one will ever know you design’s intentions as well as you do.
6. You aren’t the King of the Planet. OMFG RAD! You made an award winning website! So what, that doesn’t mean you have all the answers. Know what others are doing, because they might have solved a design problem you ran into way better than you ever thought to do. Never stop learning from others just because people tell you that your agency is totally epic. (But definitely be stoked to be there!)
7. Simplicity, simplicity, simplicity! Never fear, even the most complex problem can be solved with the least complex of design solutions. Don’t make your users have to think about the interface, but rather make considerable efforts to make them enjoy it.
8. Understand the nerdy shit. Get your feet wet in as many aspects of web design as you can. Learn how to code what you build. Understanding the strengths and limitations of the “nerdy code stuff” will help you design a site is an all around better experience. Hell, you might even realize that all those awesome gradients you love to use are actually a pain in the ass to code.
9. There are no rules yet! Everyday, a new site pops up with wonderful new solutions for presenting content to a user. Break boundaries and rules as often as possible. Make your own rules, and then break those as well.
10. Enjoy everything you make! Just like anything else in life, if you don’t put all your heart and soul into it, people will definitely know. Some of the best sites out there were obviously fun to design. Find what you love in every project, and then dive in!