Sunday, December 14, 2008

Repainting the OS in a browser

A couple days back when I was updating the newuprising logo, I noticed an added feature to the Blogger interface that was added with no fanfare. In fact, this may be a standard control you would find where form elements can be selected, e.g., radio buttons or checkboxes. For a browser, I definitely didn't expect this behavior. I accidentally clicked an area I normally wouldn't (unless I were utterly aware of where I was and at 8 am, I wasn't) and then did a double-take as I noticed this interface feature.

The 'feature' I refer to is usually reserved for operating systems, not browser-based forms. But javascript has come a long way. Clicking the text associated with a radio button is as good as clicking the radio button itself. The hit area doesn't extend very far from the boundaries of the highest and lowest parts of the font, either. The example below is a Mac OS Preference window for Firefox to illustrate the hit area for the mouse.

To be fair, I was using Firefox 2 on Mac OS X when this happened. I tried Safari 1.3.2 and it didn't like the DHTML-styled (javascript) button and linked text. It just reverted to the system widgets and behaved like the stogy, old browser it is. Here's an approximate area where text on Firefox can sense OnMouseClick and select a styled radio button, and possibly toggle a checkbox! Not much difference from the bounds of the Mac OS. Click on the pic to enlarge if ya really need.

Why go to (seemingly) great lengths to talk about something so seemingly trivial, then? Transcending the OS will only be fully embraced when interface developers recreate the experience of the operating system in a browser. Doing this requires recreating every nuance that makes the modern operating system usable. So, I'd say whoever recreated that functionality was thinking of the Mac while they were repainting the OS in a browser.

ED: I went back and looked at different elements and yes, you can toggle checkboxes, however not all radio buttons or checkboxes are actually linked to their respective text. It's kinda hit-and-miss... Beta-like now that I look at it with new eyes.

No comments: