Wednesday, May 28th, 2008

Addressbook: An example of the Form History Pattern

Category: Gears, Showcase, UI, Usability

One of the examples that Ben and I give in our State of Ajax talk at Google I/O today revolves around form history.

We were thinking about the case for Undo on the Web that Aza Raskin is proposing and it got us thinking about the usage patterns of form data.

An example that got me was the Address Book application on the Mac. I find myself storing past addresses in the general “Notes” section at the bottom, but what if history was built into the system so I could go back in time? This could be a nice metaphor in general that goes beyond undo.

I took this use case and put together a working example that uses Gears to store the history locally so it can be speedy through the history.

The slider component comes from, and you can check out all of the code.

In the video below I show the application in action and then do a quick code walk through:

This is just the beginning of course. A slider if fun, but it would probably be more usable if it was simply left and right arrows that click through the versions, or at least putting tacks onto the slider.

Posted by Dion Almaer at 11:34 am

3.6 rating from 18 votes


Comments feed TrackBack URI

Just an FYI your missing an end quote in your href attirbute in a link in the yahoo story below, messing up your whole page layout (and not letting me comment on it).

Comment by tj111 — May 28, 2008

Not sure why you would want to keep past address but the concept I think is good. I occasionally have an app where different versions of a record must be kept. Usually I just have some sort of list of the past version. I like the concept of using a slider to move between the versions so from a UI perspective they are using the same interface they are used to using for current data.

Nice work!

Comment by eric2 — May 28, 2008

demo is broken.

Comment by boodie — May 28, 2008

Good UI, the markup should be less obtrusive though.

Comment by Tr0y — May 28, 2008

Very cool, good job :)

Comment by jdalton — May 28, 2008

Good concept.

However I can’t get my data posted at the end of the history (Now side) when I go back in time and edit-then-save a past record. Well, I’m not sure that it should work like that, but this is what I expected to happen.

I guess that there is a lot to think about when starting to implement something like this, that potentially lets users create different timelines into a database.

Comment by pmontrasio — May 29, 2008

Nice tutorial, but shows (like so many javascript tutorials out there) not the best practices of unobtrusive javascript. starting with simple things like inline event handlers. With showing people onclick attributes in your code you can destroy the efforts of Keith or Heilmann to make the web a bit less obtrusive. Especially when you already include prototype which has element-observers. Tutorials always should enforce and describe best practices (or add a big-red hint: DON’T do this at home)!

Is it expected that the vimeo video bleeds into the sidebar?

Comment by Harald — May 29, 2008

Doesn’t seem to work in Firefox 2 or IE 7

Comment by rstackhouse — June 3, 2008

Re: address history in Address Book on the mac.

If you have leapoard, then when you are in Address Book, just clikc on the Time Machine icon, and you can use the slider to access old addresses very easily. Even works on searches, as you go back in time, the address bok search is updated as you go. Very neat.

Comment by diroussel — June 4, 2008

Leave a comment

You must be logged in to post a comment.