Redesigning Facebook

So I decided to redesign Facebook. Because, you know, it’s a beautiful summer Saturday afternoon, what else would I do with my time?

I’ve sort of grudgingly started using Facebook, but I’ve never really felt like the interface worked for me: the newsfeed churns by so quickly that unless you check the site obsessively you can easily lose track of who’s doing what. Plus there’s the minefield of questionable third-party applications, games, and other irritations to skip past.

So like any good UI nerd, I decided to fix it. This has taken the form of a GreaseMonkey script, for the time being, which if you’re interested in following along, you can install by clicking this link. (It will only work if you are using Firefox and have GreaseMonkey installed, of course.)

(Update: if you came here via a facebook link, you’ll also need to close the oh-so-helpful “you came here via a facebook link!” frame first for the script to install. Marking that as another possible feature addition…)

Here’s an overview of what the script does:

Eliminates a lot of crap

Ads: gone. Third-party applications: gone. Quizzes: gone. I know some people enjoy constantly being kidnapped by mafia vampires or planting scrabulous puppies in their superpoke gardens or whatever. I am not one of those people, and I got tired of clicking the “Hide” button next to each and every individual facebook application.

(The current version of the script also removes notes, photos, links, basically everything but status updates. I’ll probably bring them back in a future version.)

Changes the sort order of the newsfeed

If you don’t check facebook constantly, it can be difficult to tell what people are talking about: they’ll make an update that refers to an earlier update which you missed and is now buried three pages deep.

This script groups all status updates from the same person together. So if you have one of those friends who updates his status a dozen times a day — and you know you do — all of his updates will be shown grouped together. The “Show older posts” link at the end of the feed still works, but instead of tacking the newly loaded posts onto the end of the list, it sorts them in with the existing ones. The idea is to make it easy to see what any given person is up to without having to scroll up and down through the feed to find all their separate posts.

Drastically simplifies the comment interface

Comment threads are now hidden by default, profile pics are gone, the “View all _ comments” thing happens automatically. This was a lot more complicated than it sounds.

(Someday I am going to make a concerted effort to learn how greasemonkey’s event handlers interact (or more often fail to interact) with a page’s built-in ajax events. Today was not that day; I threw in the towel and used setInterval to just constantly poll the page for changes. But it’s okay, I kept my nerd cred by wrapping that setInterval in an overcomplicated daemon object.)

That’s about it. The script is pretty far from releasable as is — for one thing posting a comment throws it into an infinite loop, which is, you know, bad — but if any of you play with it at all I’d be interested to hear comments or suggestions. Hat tip to Alberto Gonzales for suggesting the name “Facebeck”. My working title of “CleanUpAllThatGoddamnFacebookGarbage” was maybe more informative, but lacked concision.

4 Comments:

Hm.

This sounds intriguing. I am also a reluctant recent FB user and I find its interface pretty frustrating because it’s so unlike what I’m used to.

The end of your post here makes it sound like if I install facebeck, I won’t be able to post any comments. (Which I don’t do especially often, since I forget to check FB for days at a time, but still.) Am I reading you right? If so I might wait and install this when that particular squidgy bit is fixed… :-)

You can currently post new comments or status updates with the script in effect — the script gets stuck in a loop that it shoudn’t, after that, but that doesn’t have any effect other than taking up more CPU than it should. So you might see a bit of spinning beach ball or the scrollbar acting jerky until you next reload the page.

That said the script is definitely more still in the “play around with” than the “use constantly” stage (if only because it removes a few things it probably shouldn’t…)

That’s an interesting take on it. Personally I like the sidebar, especially the Requests, Highlights, and Events sections. Often I’ll see something in there that I’d miss otherwise.

As for profile pictures in comments: I actually really like how FB’s current comment system works. It feels very light and usable. I find that avatars, even tiny ones, help me recognize a person often more than their name, and faster to boot.

Removing app posts is nice, except when I’m bored.. ;) Mostly I’d like to see apps that I haven’t authorized to use my profile not show up in my feed either, but I know FB wouldn’t set that as it’s a crucial part of app marketing.

You might want to check out this firefox addon called Yoono. I’ve been using it for about a month now and it’s been a great way to keep on top of all my various friend inputs (except for LJ, arg! I swear LJ is the most annoying system.. not allowing rss feeds of my friend page, wtf?).

I’m really impressed how much you can change a site with greasemonkey though. I’ve never really looked at a script, but it looks very straightforward, especially when you import a lib like jquery. Btw, aren’t you double-initializing your Daemon? in the main init() and then at the end of the file?

Yeah, the risk with simplifying an interface by removing features is that somebody is going to want those features you just removed. Probably what I ought to do instead of simply ripping the sidebar out of the page completely is to hide it by default, and include links to bring part or all of it back if requested.

Profile pictures in comments: I think this one comes down to personal taste. For me, I’ll often recognize an icon but not remember who it corresponds to — or there are the people who change their profile picture frequently, which screws with my memory of who looks like what. I have the same problem on LJ, sites that use gravatars, etc… names (especially real human names) are just easier to recognize for me than icons.

Greasemonkey is pretty powerful; you can do any DOM manipulation at all, make ajax calls, etc., the only real complications are some funky issues about interacting with js that’s already embedded in the page. (I think what’s going on is that the injected GM functions are scoped separately from the existing ones, so you can’t call an existing function directly but can write a link to the page which calls it and invite the user to click on it. Hence that silly daemon instead of just attaching an oncomplete event to facebook’s ajax calls.)

Thanks for pointing out the multiple Daemon inits, that’s now fixed. (it’s really completely unnecessarily complex as is; the initial idea had been to have it running only while an ajax call was in progress, but the test loop turned out to be fast enough that it was much simpler to just let it run constantly. I should probably just pull it and use a plain loop instead.)






Now meeting all your syndication needs:
RSS Feed   RSS blog-only feed   RSS image-only feed