Facebook Interfaces, Privacy Panels, and Humans

Declarative visualization in internet applications loosely follows a paradigm that was originally established by Xerox PARC in the 70's and made ubquitous by IBM, Apple, and Microsoft, among others. IBM's Common User Access Guidelines, Apple's Human Interface Guidelines, and Microsoft's User Interface Guidelines are veritable bibles to the programmer writing interfaces for these operating systems, and largely follow the same visual grammar: one that over time most every modern computer user has become quite comfortable with. Radio buttons are used for mutually exclusive choices, while check-boxes signify the toggling of mutually independent selections in a list, and check-marks are used in menu items to toggle independent selections just like check-boxes in a list.
The enrichment in web interfaces over the past 5 years has seen many graphic designers invent a slew alternate ways of visualizing information. The fact that the internet is pretty democratic despite the best efforts of governments, so far, means that there is no graphical police, and that some very squirrelly ways of implementing declarative actions often find their way onto popular web-sites and sort of infect choices other designers make, knowing that users are familiar with this or that way of doing x. Ignorance is no doubt to blame for a lot of these declarative slangs, but I'm guessing that concerns of 'look' over a solid visual grammar, and to an even greater degree the unrelenting pressures of time to market are really at the root of a plethora of visual patois that defined the internet until quite recently much like pidgins in remote islands.
Recently, that has changed a great deal - in no small part thanks to the internet shake-out brought about by major sites like Facebook & YouTube. Facebook is pretty big - not just in terms of its popularity & user-base, but the complexity of the site is big and growing every day. Overall, Facebook has done a fantastic job clarifying their visual metaphors with each redesign so they are more self-consistent with each iteration.

That's why it bugs me when I see things like this:

The Facebook Privacy panel must be visited a million times every day. There is a check-mark below the right pane with the legend "This is your current setting." To the savvy user this is such a small problem that it's hardly noticeable, but it is an interface design problem that will confuse the learner and basically train them to ignore information that is poorly presented, or worse, confuse them to the point that they do not understand the information because of the miscommunication. At least in part, this is why we see recurrent comments about people declaring themselves unable to use Facebook.

So let's have a look at why this is a problem. First, the panel has a list or menu in the left pane, with "Custom" currently highlighted, and checked. No visual clue is present to explain that this is misusing the "navigation panel" metaphor, because selecting different elements of that list does not change the right pane, but rather changes values in that pane to specific presets. It's not the same thing.
Then, the Custom selection is checked. Check marks in GUI guidelines are intended to show that a visual selection has been made from a menu item, like this:

It's pretty obvious looking at this menu that I have the Status Bar turned on, and that if I click on it, the check-mark goes away along with the check-mark.

So the check-mark in the selection at the left (in the Facebook case) is actually telling me that I have selected "Custom" presets for my security settings, which means no presets at all, while the highlight is telling me that I am looking at Custom presets on the right, and the legend in the bottom right corner of the panel, in the right pane, is explaining what the check-mark clear on the opposite side of the panel means.

Well, just to see, let's change the selection of presets to a different one to see what happens:

OK - that at once got clearer and messier. If I get off my Human Interface Design Guidelines high-horse, and accept that the check-mark is to the right of the text instead of the left, that is is being used to denote the current selection in a set of mutually exclusive choices, and that I can't make a different selection by clicking on it, but rather have to navigate to it and then click the button in the lower right corner to get the selection to change, then I am a typical Facebook user. It makes its own kind of sense and has definitely been thought through 80% of the way. But notice one thing more: Now, there is no legend, even at the opposite corner, to clue me in to what the check-mark means, exactly.

The truth is, when I first noticed this, I had just landed on this page and thought: "How silly - they have a legend showing a check-mark to indicate what the little gray dots mean. Must have gotten the wrong information from the person that did the right pane to the one that did the legend!" - Silly me - I guess I'm just not enough of a Facebook expert!