Friday, December 31, 2010

Funny little Facebook interface oddities are like a butterfly beating its wings.

Facebook has struggled mightily in its short history to evolve, providing a richer & richer interface with each successive push. It seems most code pushes are staged & deployed to selected subsets of the userbase, testing, modifying, and redeploying to set n+1 - sort of like the ripple of a pebble dropped in a lake. Often, these changes help one group of people while causing some ruffling among another, and in a very evolutionary way, the ones that stick are the ones that work for the users. In this sense, Facebook does not steward for a well-developed interface grammar - it is more of a tremendously ephemeral collection of interface adaptations that users can acclimate to and accept, and that can be tooled & re-tooled several times in a single week and selectively deployed and tested on large segments of the fb population, leting test results drive the evolution of implementations. It's like building a castle by tossing rocks and seeing which ones don't roll away...

Unfortunately, that does not make for interface changes that are particularly longevonous or even follow the interface conventions that made the standardized GUI possible in the first place. Today, I noticed while posting up this important news item

that there is an exceedingly odd behavior in the management of the link title when using javascript to share a link on Facebook. Notice how the name of the link in this case appears to be the full URL of the image I am trying to share. So as the mouse passes over the bolded URL, the pointer changes to a hyperlink pointer, but if I click on the hyperlink, it is replaced by an edit-control, and the pointer changes to an i-beam, even when its hot-spot is outside the client-area of the edit-control. This creates a confusing scenario because, strictly speaking, it is a misuse of the classic finger indication that when you click you will be taken to other content referenced by the hyperlink under the pointer. Minus 1.


So suddenly the focus is in this edit-control which has replaced the former representation of the title URL with the entire URL highlighted in an edit control, meaning in the Design Guidelines, that were just flouted, that if you start typing, your type will replace the current selection. This works fine, and with your first keystroke the clunky URL is gone. Except that because of the dimensional change (the edit control is a single line text-box, while the former representation of the URL was muliline) the position of everything below changes and possibly the pointer, which you clicked on a different shaped object than what is there now, is left where you clicked, away from the focused control, though shaped like an ibeam. Minus 2

Now, here's the big problem: If you delete the URL & replace it with nothing, or with white-space, 


you tab out of the control, and the anchor text you could click on to edit the title of your post simply disappears!

...and now, if you move your mouse in that neighborhood, there is no anchor to be able to re-edit the title. As your mouse hovers over the appropriately grayed-out reference to the source hyperlink that used to be below the title of the post, the cursor changes to an i-beam, letting you know that this text, although abbreviated, is selectable. Well - not the contents, as in the actual URL, but the visible abbreviation.

Now, it looks as if the title control for the post is gone forever, but if you keep hovering, you will find an invisible one-space anchor that gets all highlighted, underlined, and happy when the mouse passes over it,

...and there you are - you can edit the title once again, so at least we're not stuck in an irreversible state-change in an edit dialog when we visually lose the title, but the adaptation of leaving it with no border, stuffing it with a space to make it accessible, and rolling it out like that, letting users figure it out, is doing the internet a disservice, because people will learn the kludge and even get used to it, and the next thing you know perfectly clean solutions to interface problems all over the web will get tossed out in design meetings because it's 'easier' to do the way that everyone knows from Facebook, just like it's 'easier' to think that Obama is Muslim, and the next thing you know you have a bunch of frustrated users on an Easter-egg hunt for links on every page they visit, if you catch my drift... Minus 3

Hence the title reference to Butterfly Effect. This is only an example, but it gives an idea of how grammars, including visual ones, can deteriorate as a result of perfectly innocent misapplication like this getting rapidly embedded. Given that Facebook surpassed Google back in March as the single site with the majority of all internet traffic, at 7% back then, these are weighty matters.

1 comment:

  1. Amazing to be sure; perhaps FB needs new blood if not talent in their technical department. Obviously they are not doing much beta testing prior to release and we are left with sink or swim. Thanks for noting.

    ReplyDelete