Saturday March 04, 2006

• Rating, voting, yes/no. In some pages, the user may cast a vote or rate things, like movies. This is not, however, the main feature of the page, so a whole page refresh after voting would disturb the use of the page. Which is where Ajax comes in. The best example I've seen so far is Blinklist. Look at the list of stars under the postings, hover your mouse over a star and see a popup with the text "Rate this 4 stars out of 5", click on a star and watch the number of votes go ++. Very nice.
• Input suggestions. This is one of the oldest Ajax examples, probably for a reason. Perhaps the one I like best is the Compose page of Yahoo mail, where a list of suggested emails pops up when you start typing in the To input field.
• Direct validation of form data. Many kinds of input data can be validated in the browser, but some data has to be passed on to the server first. A typical example is picking a user name when signing up for a service. Is that user name taken or not? You can't know until you've done a database lookup. The nicest example I've seen so far is the signup page for Remember The Milk. Try "mats" as username and see what happens! Clean, nice, well done.
• Status area. Lets assume you have a search form, where you know the number of hits is crucial. Too many hits is not good, for example when searching for a new house. The only good example I have for such a status area display is my own Universal Packing List. Unfortunately it works no good with Internet Explorer. With Firefox you can see the number of hits changing when you change settings in the form. Not so well done. Boo, hiss.
• Automatic update. Ajax Patterns calls this Microcontent. Maybe I should stick with that name. Whatever, the idea is to have each input field (typically text input) work as a form in itself. When the user is done editing that field, the change is immediately sent to the server to be saved. A nice example is Thomas Baekdal's XMLHttpRequest Business Card Creator. He may not pass the data on to the server, but you get the picture.
• Microlink. When displaying search hits, hide some details of each hit behind a link. When clicking on it, more information on a particular item is displayed. A nice example is from Eniro in Sweden. If you search for "mats henricson" you are shown a list of people with my name. Click on one of the names and you are shown more information, plus a map. Nice.
• Live form. The idea is to improve the user experience by changing a form while it is used. Not sure if I'm using the name in the correct way according to Ajax Patterns. A quick and dirty example that shows the main idea is my own country picker. If you change the selected continent, the countries list is changed immediately. Not pretty, but works.
• Active Search. Searching is often time consuming, with posting form data over and over again till you find what you are looking for. With Ajax you can be shown the result all the time, dynamically. A nice example is University of Wisconsin's People Search. Type in a name and see the search result change.
• Data navigation. Navigating data can be made so much more interactive with Ajax. A really nice example is del.icio.us direc.tor. Dive town the soup of tags by clicking on them, and see the results immediately under the direc.tor. Cool.
• Panning maps or large pictures. We've all seen Google Maps. The old way of panning maps is so 20th century.
• Filtering data. By far the best site I've seen where a user can set filers for searching is Amazon's Diamond Search. Sure, looking for expensive diamonds is nice in itself, but as an Ajax example, this is outstanding.
• Chat. Lets assume your website has connected a seller and a buyer. Perhaps they would like to chat about the last details before the deal is done. Let them use an Ajax chat for that. I haven't seen any slick Ajax chat examples out there, but one that seems to be working all the time is Alexander Kohlhofer's chat. Not trivial to implement, but could be a very nice part of a site.