Dynamic Web Pages
Dynamic Web pages change themselves as the result of user action. They often use JavaScript to modify some part of the Web page or a style. Changing an image when the mouse moves over it or rotating random images at a given time interval are common examples of dynamic Web pages. The Web page may detect the width of the browser window and modify the page accordingly. Menus that expand when the user clicks a small plus sign to the left of the menu or when the mouse moves over a menu are other examples of dynamic Web pages.
The power of dynamic Web pages has been greatly expanded in recent Web browsers. By using JavaScript, a Web form may morph or change itself to add new fields or remove old fields, or change field attributes, such as the length of a field or a radio button changing into a check box. This makes the Web page more responsive to user actions and often will eliminate the
need to load new Web pages based on user choices.
The analyst should think about the information that would make sense to the Web site viewer. For example, placing the country selection list on a Web page before other address elements would allow the user to change the country list and then to change captions to reflect the country. If the person selected United States from the drop-down list, the captions would say ‘State’ and ‘Zip Code.’ If the country was Canada, the captions would say ‘Province’ and ‘Postal Code.’ If Japan, ‘Prefecture’ and ‘Mail Code.’
Three-Dimensional Web Pages
Dynamic Web pages may also be used to temporarily display information, such as a block of help information, a calendar with clickable dates used to assist date entry fields, airport codes, and other information. This information may be stored by using a series of stacked layers (using the cascading styles z-index property) in the Web page design, each on top of another. The main Web page is the base plane, the standard layer of the Web page that displays or obtains information, while others below the page are not visible.
When help is requested or the user clicks in the date field, the layer is either moved to the top and becomes visible or is generated by JavaScript code and appears. The position of the layer is determined by the designer or analyst, such as a calendar appearing on the right side of a date field. When a date is selected, a close link is clicked, or the user clicks outside of the calendar, the layer then moves below the surface of the Web page or is removed. The analyst must determine when it makes sense to include a layer, often examining each field on a Web page to determine if additional information would help to ensure accurate information and good communication with the user.
The analyst should determine the following:
- How is the layer built? Is it created using JavaScript code, such as a calendar, or is additional information required to build the layer? If additional information is required, where is the data located and how should it be obtained? Ideally the information is obtained from only one database table on the server using Ajax techniques.
- What events cause the layer to be created? These include a user clicking or tabbing into a field, clicking a link, or counting the number of keystrokes entered into a field. An example would be a hotel chain with many locations. To include all the locations in a drop-down list would make the list too long. When the user enters three characters, a block surfaces listing hotels starting with those three letters, including the country, city, state or province, and other information. If the event was detecting only two letters, the list may be too large for the display block.
- What events remove the layer, such as a close button, clicking a date, clicking outside the region, or selecting a hotel from the list?
- Where should the surfaced block be placed? Typically next to the field that created the block, in x- and y-coordinates.
- How large should the block be, measured in pixels? If the information is too large for the block, such as a list of hotels, the analyst should decide how to handle the additional information. Options include adding scroll bars or positioning a link at the bottom to the next page of information.
- What should the region formatting attributes, such as color and border, be? If there is a series of links, review their appearance with the users. Ask the users if they would like the color to change as the mouse moves over each row.
- What should happen when an option is selected? In the case of a reservation calendar, when a date is clicked, the date is placed in the starting date. If a hotel is selected, the city, state or province, and country information, along with a link to the hotel, should populate the Web form fields.
Using layers is an effective way to build Web sites since it does not require any pop-up pages (which may be blocked by Internet security software). Additionally, a new Web page does not have to load, and, because the information is contained in a layer, it does not take up any space on the main Web page.
Figure illustrated below is an example of a Web form used by an insurance company to change client information; to add a new location for a client, such as a new store or restaurant for an existing client; or to remove a store for the client. If the Corporate check box is checked, the Last Name, First Name, and Middle are changed to a Company name field, with the caption text changing as well. If the Add New Property button is clicked, a new set of fields for the third property is added. Care must be taken to generate unique names that the server will recognize for the additional fields. When the form is submitted, the server updates the database tables for the additional fields.
The analyst must decide when the use of dynamic Web pages is appropriate. If the data change when other parts of the Web page change (such as clicking a radio button or selecting an item from a drop-down list), it may be good policy to design the Web pages as a dynamic form. If, however, some parts of the Web form are unsecured and other parts require encryption, it is probably best not to use dynamic forms.
Dynamic Web pages have the advantage of modifying themselves quickly, with fewer interruptions to send and receive data from the server. However, there are several disadvantages when creating dynamic Web pages. One is that they will not work if JavaScript is turned off. The analyst must decide what to do in this situation.
If the person must use the Web site (as in a corporate intranet environment, in a site used to obtain student loans, or in the case of processing government or other transactions), the Web page can state clearly that it will not function if JavaScript is turned off and then direct the user on how to turn it on. Most commerce Web sites will not require JavaScript to be turned on and will have an alternate Web site for customers.
A second disadvantage when using dynamic Web pages is that they may not be compliant with the American Disabilities Act.
