Hmm, thinking about it, I guess the post title might be a bit misleading :-)
Today I showed donjon during the lunch to two IT-world friends. Seems that they really really liked it. My biggest concern was that the all usability points wouldn’t be well received, or that the interface wouldn’t communicate the intentions very well.
My test was showing them the app, making them look at a specific piece of the page and asking ‘what do you think this is for’. They were able to immediately tell what it was. And if you’re wondering, no, I wasn’t using some labels or text to identify the functionality.
Wow, I’m happy – and I’m not known for being happy about the things I create. Certainly tells me I’m in right path.
Pretty easy to get something working with YUI BHM (documentation). However I think Google’s manager – used by GWT is prettier. Yahoo’s support multiple modules, though.
The differences
If you have a GMail account you can see for yourself. Once you get into your inbox you’ll see the following on the URL:
/#inbox
Click on Drafts and you’ll notice it’s an ajax call. However the url changes to
/#drafts
Clicking on the back button will go back to /#inbox as expected. If you click Older you’ll notice the pagination parameter:
/#inbox/p2
Searching will also add its parameters:
/#search/MonoRail
Clicking on a message from a search results adds the message id:
/#search/MonoRail/11928f3d966eb997
You can then click Back three times to go back to your inbox.
With Yahoo’s implementation you’d register a module (just a key), a initial state and a callback function. Your initial url would be unchanged:
/something/
Once the user perform some action that changes the state, and you want him to be able to back to the original state, you’d call the function register passing the module name and the new state (string). Imagine a call like register(“mymodule”, “newstate”) would result in the following url:
/something/#mymodule=newstate
If you were to have more modules, it would generate:
/something/#mymodule=newstate&othermodule=otherstate
As you can see it’s not as nice as in the end it’s just a querystring. In my case, search criterias are going to state, so it end up like:
/something/#criteria=p%3D1%26psize%3D10%26f.Type%3DSome
Not as pretty as google’s, but works for now.
This is something that we – developers – don’t pay much attention. “Ajaxy” apps keep changing the content/state and once the user navigates somewhere else, she looses everything when going back to “that” page.
You might want to design in a way that the user never navigates off (awful), you might provide something that somewhat replaces the bookmarking ability of the browser, and you can keep inventing things to circumvent the very nature of web apps. It all comes down when you realize that the most used button on the web browser is the BACK button.
My attempt to deal with this was, like always, searching for a jquery plugin that handles history. I found two, but they are very limited. I was about to start to write my own when I bumped into YUI Browser History Manager. No idea on how well it will play with jQuery.. but seems very complete.
