Showing posts with label gui. Show all posts
Showing posts with label gui. Show all posts

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.

Sunday, December 7, 2008

Interactive header design eminent


Header interactivity started as a subtle, fun addition to an obvious space not known for being fun. With Flash headers becoming more ubiquitous I'd assume many users weren't even aware certain sites they were visiting even had an interactive header.

Most of the interactivity you'll see consists of simple scripts that follow the movement of a mouse (usually leaving a trail of colored swirls or fairy dust) or morphing shapes that move in random directions. The picture above is from a design blog that makes wonderful use of Flash 8's Filters.

As this trend grows in the future we may see meta-rich info stray to other sections of a website. Expect designers and developers to add more interactivity to headers, sidebar elements and widgets. As bandwidth increases, we may start seeing dynamic RSS-like image streams with mouseover media clips in lightbox-style windows. This evolution of information architecture may attempt to keep people within the confines of a single window while providing a wealth of information and entertainment in nested windows.

The Flash Player's 'full screen' mode reinforces this ability to keep a user in a single window, but then again, Flash has always had that ability to confine information in a single square. We've become so accustomed to thinking outside the box that we may have to start thinking 'inside' the box again.