AJAX Design Pattern: Read/Write Div

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.

10 thoughts on “AJAX Design Pattern: Read/Write Div

  1. Richard January 5, 2006 / 7:18 am

    I agree this is a good thing, but the part of the process you’re talking about isn’t AJAX, it’s just Javascript. The AJAX part would be when you finish editing and the weather area updates without refreshing the whole page (assuming it does that).

  2. Jon January 5, 2006 / 8:12 am

    Thanks for stopping by!
    I stopped fighting that particular battle a long time ago. The term AJAX has come to mean, in everyday language, using Javascript to create a richer and faster user experience, period. Using it to mean anything more specific than than just confuses people.
    You are technically correct, however.

  3. Amy Hoy January 25, 2006 / 12:31 pm

    Just because it’s a losing battle doesn’t mean people should propagate such a dumb mistake. There’s a really critical functional difference in the meaning of the term. The people who might be “confused” by the actual correct use of language are the ones who don’t care if it’s AJAX or HOOT-NANNY or whatever, because it’s COOL. These are the users, they don’t care.
    The people who need to know are the developers. Let’s not call Javascript Java, and let’s not call random Javascript AJAX. If you called Javascript Java, somebody’s shoot you. And rightfully so. 🙂

  4. rubixor January 25, 2006 / 4:00 pm

    quoting Amy Hoy

    If you called Javascript Java, somebody’s shoot you.

    end quote

    We should also speak and write in proper English. But if getting upset over acronyms is your schtick, go big. Just try to not to make such a dumb mistake.


  5. Jon January 25, 2006 / 4:08 pm

    Rubixor, be nice.
    Amy, thanks for stopping by. (Nice blog, btw).
    I manned the barricades when this AJAX term came out (I wanted to call them “Javascript RIAs”). That ship has sailed … if you look at the contents of the “AJAX libraries” they are mostly about Div manipulation, animation, and widgets. If you look at the stories in Ajaxian they are about pretty much any kind of “heavy-duty” use of Javascript.
    When you consider most “AJAX” applications are NOT asynchronous and DON’T use XML, I think it’s time to abandon any attempt at “strict” usage of the term. But I don’t dispute your point at all, technically.

  6. Stoicho January 26, 2006 / 1:24 am

    Very nice observation. Live.com has similar functionality, which I find pretty much useful.
    Looking forward to see next patterns 🙂
    And I think AJAX is not XHR anymore. It was 6 montsh or so ago, not anymore.

  7. Alex de Waal January 26, 2006 / 4:21 am

    You “…don’t dispute the point, technically.”
    But you “…think it’s time to abandon any attempt at “strict” usage of the term.”

    It seems to me you’re just sloppy in your writing.
    Even worse: you are, by not discriminating it in your article(s), deteriorating this misconception.

  8. Chad Wagner January 26, 2006 / 6:41 am

    I think that every post I have gone to for AJAX has had someone griping about the imporper use of the word ajax. All you people who gripe suck! Look at this article and enjoy it’s content. If you want to comment on it, comment on how cool it was that he is putting together some ideas that he has, and that the widgets he explains actually make good sense. Was the article about the definition of AJAX…. no, just a good way for us to implement an interface for it. Can you have MVC without the view? No, so AJAX needs to be realized through some interface, and he is obviouslly making a good point about that interface… so
    SHUT UP!

  9. receptor January 26, 2006 / 2:23 pm

    nice article, btw, did you notice how easy it is to edit the title on netvibes? that’s really comfortable!

  10. baldo January 28, 2006 / 7:48 am

    nice article
    but this is javascript (and not ajax).

Comments are closed.