A new AJAX convention cropping up in a few places, one that is easy to implement and has real benefit to end users. I haven’t found a description of it anywhere, so I thought I’d write it up here.
The basic idea is that user controls (typically for editing the displayed data) should be hidden from the user until needed. At “rest”, an area of the screen displays information in read-only fashion.
On clicking an “edit” button, the div expands to display the widgets for changing the data.
This has the advantage of creating a much less intimidating screen. Instead of providing the user with 100 controls, users simply see the information in “read-only” fashion: i.e. in aesthetically pleasing html.
This is obviously an appealing approach (every AJAXY portal, from google to netvibes is using it. Why is it so great?
Why the Read/Write Div Works
Fewer controls means that the user has to make fewer choices before taking an action, and therefore it takes less time for the user to choose which item to click on. The technical term for this effect is “Hicks Law“.
Also, the “read-only” view of the data takes up much less space than the “read-write” view does, so much more information can be packed into a given page, which means that the user doesn’t have to scroll down to read content. Avoiding the scrolling saves the user a measureable amount of time while browsing (3.05 seconds, according to my back-of-the-envelope GOMS keystroke analysis).
Of course, the user has to do more work (1 extra click) to perform an edit of their data. The extra click is needed in order to put the div into “read/write” mode. But this is AJAX, so the extra click doesn’t initiate a trip back to the server, so there is no system “lag” time. Total extra time added to the “edit” process? 1.7 seconds.
So we save 3.5 seconds on browsing (a frequent activity), and add 1.7 seconds on customizing (an infrequent activity). Sounds like a win from a purely rational perspective. But from an emotional perspective it’s even better. The instant response of the div opening for you to edit has the satisfying feel of opening a swiss army knife. The responsiveness gives you a feeling of control that is often lacking in web applications.
This combination of cold logic of time optimization with an emotional response to the instantaneous response of the interface is the reason AJAX is such a great improvement over regular HTML. Over the next few weeks I’ll be pointing out other AJAX design patterns that I’ve noticed, and why I think they work.