Today we added some Ajax-y goodness to the My Favourites page on Trade Me. This makes it much quicker and easier to save your favourite categories, searches and sellers. And on the page itself you can change the email frequency or delete existing favourites without a post back.
All good, and probably well overdue.
One of the lessons we’ve learnt with asynchronous buttons is the importance of an intermediate ‘Saving…’ state.
So, for example, as of today our ‘Save as a favourite search’ button starts out looking like this:
When you hover over it glows like this:
When you click, it immediately changes to look like this:
This makes it clear that the click was recorded and that “something is happening”. Then we go ahead and make the asynchronous call to record this change in the database.
Finally, when the asynchronous call returns, we update the button to look like this:
This is a simple thing, and very easy to implement. But, especially for people on slower connections, this can make the difference between understanding what is happening and confusion.
What other tricks are you using in your Ajax-based designs?
I think we’re starting to see some de-facto standards emerge, which is good news for users as all sites will tend to start working in a way that they are familiar with.
But there are still lots of problems which don’t have nice solutions.
For example, pages implemented using Ajax often break the back button. This is a problem as the back button is a concept that even the most novice web user quickly learns and relies on when they follow an incorrect link.
Also, using Ajax can cause the URL displayed in the address bar to get out of synch with the content displayed on the page. This makes it difficult to bookmark or link to the page. If you are relying on word-of-mouth to market your site then making it difficult for people to tell their friends (e.g. by sending them a link in an email) could be fatal.
A community site which documents these sort of simple common Ajax design patterns would be really useful. Is anything like this already out there?