Faintest Notion

If you’ve logged into Facebook lately, you couldn’t have missed the new design. This design brings some much needed features. I especially appreciate the ability to filter my News Feed by friend group. Since I already keep my friends in separate groups (a painstaking process), this was a freebie for me.

But overall, Facebook disappoints for several reasons. I’ll start with the non-technical reasons so I won’t bore my non-geek readers.

Managing friends

As I mentioned above, I keep my friends organized and it paid off this time. But many of my friends and colleagues don’t. I imagine that this is indicative of the population at large. Therefore, the new News Feed Filters feature is fairly useless to most of us. That is, unless we start organizing our friends into groups. If you have hundreds of friends, you’ll probably never, ever find the time.

With all of the computing power available to Facebook, why can’t they help organize our friends for us? They already mine our data to suggest new friends, and, if you notice, they even show the source of the relationship. For instance, I’ve got several friend suggestions for people whom I know from high school and college. But I know that it’s not that simple. UMass recruits 20-30,000 students per year. The suggestions are way too accurate to based off of our mutually-attended school alone.

No. Facebook mines our personal relationships to find friend suggestions. So, why can’t they use the same computing power to help us organize our friends? The simple is answer is they can, but for some reason, chose not to.

Relationships are not like trees

One might argue that our relationships are too complex to effectively mine. This is a good argument on the surface. Let’s dig in a little deeper to see why:

As humans, we like to organize our data — our thoughts, our belongings, our relationsip — into simple structures. Here’s a typical illustration of a friend graph that you’d find on a presentation or blog post. It looks very much like a corporate “org chart” or a family tree.

Hub and spoke graph from UnderstandingSociety

However, in real relationships, the following picture is often a more accurate situation when extended to a few “degrees of separation”. (Can you find Kevin Bacon?)

Mesh social network graph from Wikipedia.com

Yes, it’s a mess — or more accurately, a mesh! How on Earth can anybody make sense out of this?

You can’t easily. Not without a some degree of uncertainty. The more complex the mesh, the more uncertainty. Unfortunately, it’s the Facebook users that have the most friends and, therefore, the most tangled meshes.

It all starts with one

Fortunately, our social networks don’t start out looking like a mesh. They start out with a single link and build continually, one link at a time. Valuable and informative data can be discerned every time you add a new friend. If you’ve used Facebook’s Friend Finder features to find a friend, you’ve informed Facebook that their guess about your relationship with this friend was correct.

Even when you’re not using the Friend Finder feature, many of your friends are. When they use the feature to discover mutual friends, they’re helping Facebook discover the nature of your relationship with these mutual friends.

More importantly, there’s usually a flurry of “friending” that happens soon after a friend comes into a new group (whether defined explicitly as a group or not). The relationships defined during this flurry are highly likely to define a group of some sort.

Facebook stores all of this data. They use this data to suggest friends. They mine our other data to show us (hopefully) pertinent advertisements. So why aren’t they using it to help us build our friend groups?

If you’ve used Apple’s iPhoto or iTunes, you’ve already seen what a little bit of data mining can do. iPhoto’s Faces feature can identify and catalogue photos of people you’ve identified in only a few pictures. iTunes’ Genius feature will find music that you’ll likely find interesting based upon the music already in your collection. Amazon and Google aso use data mining (and very effectively) to suggest products or advertisements.

I hope Facebook has at least considered mining their vast repository of relationship data to provide usability features like this. So far, they’ve only used this vast resource to grow membership and increase revenues. These are important endeavors, I know, but it shows a serious lack of focus on the needs of their most important asset: us.

Lameness #1: You missed the boat, Facebook, when you failed to make it easy for us to use the new features.

Who put that guy in charge?

Earlier today, my wife came across a very funny web site and decided she wanted to share it with her friends. We investigated Facebook’s new Publisher feature that unifies the interfaces for publishing your status, a link, a video, etc. We copied and pasted the link into the box labelled “http” and clicked the Attach button. As in the previous Facebook, it showed a preview of the link, including a snippet of the first few words of the site.

Unfortunately, the first few words of the site included about 80 underscores. They were all scrunched together in an effort to create a horizontal line, apparently since the author of the site isn’t aware of the <hr> element just for this purpose. No biggie, right? Well, this exposed a bug in Facebook’s link preview. The preview appears between the time you attach a link or video and you publish it by clicking the Share button. If you’ve used this feature you probably know that you can edit the snippet, the title, and the thumbnail image before publishing. You simply click on any of these and an editable version of them pops in place.

This is called “Inline Editing” and is perfect for this application. It’s apparent, though, that Facebook’s developers don’t have much experience building inline editors. Remember in the previous paragraph that I mentioned that there was a long sequence of underscores? A bug caused the underscores in the preview text — as well as the inline editor — to push the Share button off the screen! (Hello, Facebook QA? The developers aren’t the only ones to blame! This should have been a standard test case!)

[Update: the fix for this is a simple 1-line CSS property called max-width in all browsers except Internet Explorer 6, which requires a more complex fix.]

After a confused 60 seconds of us both studying the screen, I realized what happened. “No problem”, I thought. It’s easy to navigate to buttons (or links or form inputs) using the keyboard. If we just hit the Tab key a few times, we’ll end up on the Share button. “Just hit the Tab key,” I said.

No love. We could not navigate to the Share button. At first, I thought the worst: “Facebook did not make the Publisher feature handicap accessible!” But this was not [completely] true. She was using Safari, which has a configuration option that allows the user to specify whether buttons and links are accessible via keyboard or only accessible via the mouse. My wife typically uses the mouse, like most folk, so she has this feature turned off.

I eventually figured this all out after doing some snooping behind the scenes. Facebook is using links and buttons as they should. Score one for Facebook!

But wait. Why can’t I see it working? If I hit the Tab key, I can’t seem to navigate to the links all over the page. Again, I did some snooping and found out that they have turned off the visual indicator for all of the links! Usually, there is a thin outline that encircles a button or link that has the keyboard focus (it’s actually called an “outline”). Since they have turned this outline off, we have no way of knowing which link is currently active.

There’s absolutely no reason to hide the outline. Well, except one. The only reason one might want to hide the outline is because she/he doesn’t like the way it looks.

This was truly one of those WTF moments for me. Somebody took the time to ensure that the entire site was fully accessible to people who could not use a mouse. It was probably no small effort by a couple of engineers. But apparently somebody who has no experience building web applications of this magnitude b0rked the whole effort through one CSS (HTML styling) rule.

(Actually, after further study, it seems that there are a handful of styling rules affecting the outline, with some specifically targeted to certain browsers. This only further strengthens the evidence that this was done purely for aesthetics.)

I imagine it all originated as an edict from management. At least I’d like to think this is the case since I have to trust that Facebook has some great design and engineering talent on staff.

Lameness #2: Clueless Facebook managers rule-out over good engineering and accessibility.

Let’s punish our smartest users and ourselves, too!

Later, while investigating the new Facebook facelift some more, I started clicking around to see what hidden features I could find. I noticed that a note below the Filters at the left stated that they could be reordered by dragging them. Neat! “What else can I drag and drop?” I thought. “Maybe drag-and-drop can help users manage their unwieldy task of organizing their friends!”

So I did what any ordinary geek would do. I clicked on an avatar (a.k.a. profile picture thumbnail) with my mouse and pulled it across the screen to one of my groups. For a second, I thought my browser was freaking out. The image did not move when I tried to drag it. Instead, there was a strange spread of dots across the page. Whaaaa????

I tried it again and watched more closely this time. Sure enough, my mouse captured and dragged an image composed of small dots, not the avatar. I had to drag the image around a bit — over dark images and lighter ones to see the dots more clearly. It didn’t take long for me to understand what I was seeing. The Facebook designers thought they’d be clever. They’re using an image clipping technique to round the corners of the avatars.

This technique, unfortunately, is not actually very clever. I found out several years ago that this technique causes more headaches than it solves. The technique uses a mostly-transparent image that covers the corners of the image with tiny curved triangles. These tiny curved triangles match the background color. When placed over the edges of the avatars, it looks like they have curved corners.

Since avatars come in all shapes and sizes, there are several of these sets of tiny curved triangles. One for each combination of avatar size and background color. The entire image of tiny triangles is about twice as wide and four times taller than the 50 pixel by 50 pixel avatars. Only one set is shown at a time, though, since the image is effectively clipped to the right size and position and placed on top of the avatar to hide its corners. (Web designers and developers might be thinking that I am describing the “CSS Sprite” technique, but that technique uses background images.)

(In the Safari web browser, this is much more evident since Safari expands the image to its full height and width when dragged. Try it out if you are using Safari!)

The two major drawbacks to this technique are that (A) the user cannot interact directly with the avatar image and (B) each avatar now requires 60% more HTML code. Drawback A means that we can’t right-click the image to copy it and we can’t drag it to our desktop. OK. Minor points. Drawback B, though, means a degraded experience for all of us. 60% more code means slower loading pages. It also means our browsers must use 60% more memory (roughly).

Lastly, the 60% more HTML also likely means more sluggish drag-and-drop in Internet Explorer if/when Facebook decides to add drag-and-drop.

Ugh. Strike 3 for the Facebook developers: first, inline editor FAIL; second, link accessibility FAIL; lastly, rounded corner overlay FAIL!

If you’re wondering why Facebook chose this method, it is solely to allow Internet Explorer users to see the rounded corners. All other browsers created since 2006 (Firefox, Safari, and Opera, for instance) are able to draw rounded corners with only 1 line of code. But not Internet Explorer.

As usual, Internet Explorer lags way behind the rest of the bunch. And because of sites like Facebook, we’re all suffering for it. You suffer because your superior browser’s features are not being used and its resources are being unnecessarily over-burdened. You also suffer because the Facebook engineers had to work extra hard to work out this half-assed solution. They could have spent this time working on better tools to organize your long list of friends. So what if Internet Explorer users see square avatars? That’s what they saw before the facelift!

(The consensus around the globe is that working to ensure compatibility with Internet Explorer consumes an additional 20% to 40% on all web projects. I am looking for a link to confirm this, but haven’t found one yet. However, you can ask any talented web developer and they’ll tell you that their own experience holds this to be true.)

Lameness #3: Facebook forces us all to suffer even if we’ve made good technology choices.

Of course, I suspect that the Internet Explorer work-arounds were implemented because Microsoft is [allegedly] a 3% stakeholder in Facebook. Hmmmm…. Wow. It’s all making sense now. Yes, it’s crystal clear: Microsoft is handing down the edicts. It makes me wonder who it might be…

Is it the same committee chair that mandated that Internet Explorer 6 should annoyingly click and beep at the user as she/he navigates through pages and forms? (True story, according to inside sources. Doh! Need link to support this!)

Is it the same engineering manager who decided that it was safe to embed ActiveX into web pages? (”Sure, it’s unsafe, but nobody’s gonna figure out how to exploit the security holes… Right?”)

Or maybe it’s the Vista security oversight committee that decided that the user needs to be reminded every 5 minutes that running programs on their Windows machine could be hazardous to the privacy of their personal identity and to the security of their financial information and passwords? (Don’t get me wrong. Vista desperately needed additional security measures over XP. They just screwed it up when they decided the best way to handle it was to pop messages in the user’s face ad nauseum.)

So what’s this all mean?

Let this be a wake-up call to Facebook. If the foibles of this release are a result of its relationship with Microsoft, it’s time to start listening more closely to the other 97% of your shareholders. If it’s not a result of Microsoft’s big investment, then it’s time to start hiring real web developers over there and not college interns.

Oh. And let this be a wake up call to all of you Internet Explorer users: you’re not just unnecessarily suffering by yourself, you’re also dragging the rest of us all down with you.

It’s time to download and use a real, modern browser. Try any of these awesome choices. You won’t be disappointed. They’re several times faster than Internet Explorer. They have awesome features you’ll love to use. And, best of all, the more you use these browsers, the more time companies like Facebook will have to create features you’ll love.

Firefox (Mac, Windows, Linux)

Safari (Mac, Windows)

Opera (Mac, Windows, Linux)

Chrome (Windows only at the moment)

Facebook, Social Networking, browsers