Ajax is a technique that works in more recent Web browsers. It involves the use of JavaScript and extensible markup language (XML). Traditionally, each time a Web page needed data from a different database table, a request was sent to the server and a whole new page was loaded. This is effective but slow, because an entire page must be loaded just to provide additional data for a drop-down list or some other Web form control based on the one selected previously.
Ajax allows Web developers to build a Web page that works more like a traditional desktop program. As new data are needed, the browser sends a request to the server, and the server sends a small amount of data back to the browser, which updates the current page. This means that the viewer does not experience an interruption of work and the Web page does not reload. The page is dynamically updated with the new data.
The data may be either a small text file or an XML document containing many customers or other repeating data. If the data is an XML file, each customer element is called a node, and each node is numbered (starting with zero) from the beginning of the XML document. This allows the Web page to go to the first or last customer or to loop through all the customers one by one with a button click.
Let’s say a systems analyst was designing a traditional Web site, without Ajax, for making a reservation for a European ferry. The resultant Web site might contain several pages. The first page would ask the customer about the origin and destination of the journey, the date of the planned trip, and the number of passengers. Since pricing is determined by the number and ages of the passengers, a second Web page would display asking for the ages of the passengers. A third would ask the type of vehicle desired for land transportation, and so on.
The same information may be obtained using Ajax techniques, illustrated in the figure below. The same starting and ending destinations, as well as dates, are entered on the top of the Web form. The Web page uses the destinations and dates to determine whether there is any available space on the ferry. After the customer changes the number of passengers, the form dynamically changes to add the three drop-down lists for each passenger, along with instructions on the side—without reloading the entire page. When the type of vehicle changes, in this example to Car, the selected vehicle type is sent to the server. The caption on the form changes the text from vehicle to Car Make. The server sends the possible car makes, and the Car Make drop-down list is populated with the data. When the car make is selected, the chosen value is sent to the server and the Car Model drop-down list is populated, and so on.
The Web page used in this example responds much faster than the alternative, which is having several different pages displayed, and it is easier for the user to work with. There is still a need to have a confirmation Web page (although the page could dynamically change to remove form fields and replace them with text), and another Web page for name, address, and credit card information.
The analyst must decide how to partition the transaction into a series of pages, some using Ajax and some not. If small amounts of data need to be obtained to continue the transaction, and the data logically fits on a singleWeb form or page, then Ajax may be the best approach. At times it is better to use several pages, as in the case when a user makes an airline reservation. One Web form would obtain all the flight information, and another page would be used to display the flights. A third page might be used to obtain passenger information, and a fourth page might use Ajax to select seat locations, meals, and other individual needs for each passenger.
Ajax has the advantage of making the Web work faster and of providing a smoother viewing experience for users. The disadvantages are that JavaScript must be enabled and that the Web page may violate the Americans with Disabilities Act. Security must be taken into consideration if needed. There are numerous examples of Ajax Web sites. Some notable ones include Google Earth (earth.google.com), and Google Suggest, which responds to the viewer’s keystrokes by providing a drop-down list of possible search terms. Ajax Write (www.ajaxlaunch.com/ajaxwrite) is a Web-based word processor. There is also an Ajax spreadsheet and a sketching tool.
Using Color in Display Design
Color is an appealing and proven way to facilitate users with tasks requiring computer input. Appropriate use of color in display screens allows you to contrast foreground and background, highlight important fields on forms, feature errors, highlight special code input, and call attention to many other special attributes.
Highly contrasting colors should be used for display foreground and background so that users can grasp what is presented quickly. Background color will affect perception of foreground color. For example, dark green may look like a different color if taken off a white background and placed on a yellow one.
The top five most legible combinations of foreground lettering on background are (starting with the most legible combination):
- Black on yellow.
- Green on white.
- Blue on white.
- White on blue.
- Yellow on black.
The least legible are red on green and blue on red. As can be gathered from these foreground and background combinations, bright colors should be used for foregrounds, with less bright colors for the background. Strongly contrasting colors should be assigned first to fields that must be differentiated; then other colors can be assigned.
Use color to highlight important fields on displays. Fields that are important can be colored differently than the rest. Take into consideration cultural norms. Red usually means danger, but “in the red” also means a company is losing money. Green means “go” and is a safe color in Western countries. By observing Web accessibility guidelines, you will also want to take into consideration that 8 to 10 percent of the male population has color blindness, but less than 1 percent of females suffer from it. Use other indicators in addition to color to support users in completing their tasks.
As with any enhancement, designers need to question the added value of using color. Use of color can be overdone; a useful heuristic is no more than four colors for new users and only up to seven for experienced ones. Irrelevant colors distract users and detract from their performance. In numerous instances, however, color has been shown to facilitate use in very specific ways. Color should be considered an important way to contrast foreground and background, highlight important fields and data, point out errors, and allow special coding of input.
