Cecilia Huster, User Experience Designer

 Portfolio  |  Resum√©  |  Contact

Entering a Date:
Comparing Conventional and Ajax Interactions

Purpose

The purpose of this article is to show an example of a common Ajax interaction and how it can be wireframed so that visual designers, business stakeholders and developers all get the same idea about how the user interaction works. The example I chose is entering a date.

Ajax Explained

Ajax really only does one thing: It routes information between the browser and the server without reloading the page. On the other hand, that's a bit like saying that a car really only does one thing: it transports people and goods from one place to the other. It may only be one trick -- but it opens up limitless possibilities.

Anything you can do in a web server without Ajax, you can do with Ajax. And the interaction will appear faster and smoother to the user. Some examples of interactions that are typically implemented in Ajax:

Conventional Date Drop Down Set

Old school date entry

This was my preferred conventional date-entry drop-down field set back in 2009. The month drop down is longer than the day and year, because the month has been spelled out. This avoids confusion between the American month/day/year order and the standard for the rest of the world, day/month/year.

There is however no way, short of validating the field upon form submission, to make sure that the use didn't select, e.g. a date in the past or February 31. Obviously this interaction pattern also can't alert the user to e.g. black-out dates without putting them in instructional copy near the field. Nor can it combine the user's own information, such as family birthdays, with information from other sources.

Ajax Date Entry with Calendar Modal

Using Ajax, we can construct a much more sophisticated date entry interaction. In this interaction pattern we can also prevent the user from making invalid choices before they've set mouse to pixel. All this, and making it easier for them to choose the date they want.

Text field for data entry

Text Field with Calendar Icon

The user comes across a text field that requires them to enter a date. There's a calendar icon to the right of the text field. The icon is meant to indicate that this is a date field and that the use will be able to select the preferred date from a calendar.

A calendar modal opens

The Ajax Calendar Opens

When the user clicks on the text field or the calendar icon, a calendar opens in a modal window. The page behind the modal is greyed out to show that the user cannot interact with it.

Advantages of Ajax

This is where the advantage of using Ajax and DHTML shows: the calendar comes up instantaneously. It's in a modal, rather than in a pop-up window that can be buried under other windows. Dates can be coloured and have hover text. The information in the hover text can come from the server, again without reloading anything. Only the new information is updated. That's the beauty of Ajax.

Common Design Mistakes: Too Small

The most common design mistakes for pop-up calendars is to make them too small. It's a bit of a mystery to me why this is so common. There is no technical limitation that requires modals to be tiny. Putting a larger calendar on the screen doesn't take longer than putting up a small one.

Making the calendar too small has two disadvantages: it's hard to see the numbers and it's even harder to hit them. The calendar in the wireframe is from the Yahoo design pattern library but I made it slightly larger so that it's easier to see.

Common Design Mistakes: No Way Out

A problem with Ajax is that it breaks the user's Back button. Either it doesn't work at all, or it takes the user back several steps. To counteract this, Ajax modals typically have a Cancel or Close button so that the use can change their mind. After all for many users the Back button is like a life line.

In the Yahoo calendar shown above, the only way out is by selecting a date. Presumably the designer felt that adding another button would clutter up the interface too much. If all that happens if you select a date is that a date is entered into a text field, that may well be the right decision. If, however, selecting the date leads to any kind of commitment on the part of the user, a way of cancelling out of the modal is a must.

The date has been entered into the text field

Success

The date has been entered into the field. Below is the full wireframe, as it would show up in the user experience specification.

Ajax Interaction Wireframe

Complete Wireframe

< Return to Learning page