Java Web Programming with Eclipse contents
Last modified February 13, 2009 07:46 pm

back next

Item Management (continued)

Interface Design

A page flow diagram describes how the user goes from one page to the next in response to user input. The page flow diagram can be used as a basis for designing the servlets and JSP. The following figure shows the page flow diagram for the item management functionality that will be added to the publisher applciation in this chapter.

Page Flow Diagram

Page flow diagram

The page flow diagram above illustrates the connections between a subset of pages in the application. Not shown in the diagram is the publisher application home page. From the home page, the user will be able to go to the list items page or the create item page. These two transitions will be made possible through a global menu (appearing on every page) that provides the following choices.

The logout operation available in the global menu will be dicsussed in a later chapter.

The purpose of the create item page is to allow users to input data for the creation of new items. This page will therefore contain a form with fields empty or set to default values. A user chooses to either save the newly specified item or cancel the creation operation. When a user chooses to save the new item, the data being submitted is subjected to a validation test. A validation test decides if the data being submitted violates any constraints placed on the data. For example, in our application, the title field and the link fields cannot be empty. If a user submits an empty value for either of these fields, the submission will fail the validation test. If the submission fails validation, the user is kept on the item creation page, but the system adds notation to inform the user of the problems. If the data passes validation, the user is presented with the view item page. The purpose of sending the user to the view page is that it allows the user to see that the new item has been created in the system. The alternative to going to the view item page is to go to the list items page, because the user can also see on this page that the new item has been created, becuase it now appears in the list. However, if the list is long, the user must expend mental effort to search the list and locate the new item. However, only a summary of the new item appears in the list items page,\ so that user may suffer some doubt that all the details he or she specified entered into the system correctly. The user would need to go to the view item page in order to verify this.

The list items page lists all the items in the system. This can be developed, of course, so that the user can specify a filter in order to generate smaller lists that contain only items that satisfy the criteria in the filter. For example, the user might be given the choice of listing only news feed entries that fall within a given category of news. From list items page, the user can navigate to an individual news item, which is displayed in the view item page.

The view item page presents the detailed information associated with an individual item. The particular item that is being viewed on the page is considered the current item that is subject to the two available operations of delete and edit.

The delete item page is a confirmation page that is arrived at when the user selects to delete the current item shown in the view item page. It's important to provide a confirm step, because the user may have mistakenly selected the delete operation from the view item page. If the user confirms the delete, the item is deleted from the system and the user is sent to the list items page. The user can see that the item has been deleted because it no longer appears with the list items page. If the user cancels the delete operation, the user is sent back to the view page from where he or she came. Bringing the user back to the view page allows the user to verify that the delete operation was canceled.

It's important to use unambiguous and simple language in all the pages, but especially in the delete page. Consider the following two alternatives for the wording on the delete page.

Are you sure you wish to delete this item?   yes   no
Are you sure you wish to delete this item?   delete   cancel

The second wording is preferable to the first because the two answers can almost stand independently of the question. From the question, the user understands that the delete operation is being postponed until he or she confirms at this point. The yes/no answers require the user to refer back to the question to make sure that the answer given is correct, whereas the delete/cancel answers can be understood in relation to the simpler notion that the system is asking the user to confirm the delete operation.

The edit page allows the user to change data associated with the item. This page is the same as the create item page except for two differences. First, the edit item page presents a form with all fields set to the current values of the item, rather than being blank or set to default values. Second, when the user cancels from the edit page, the user is taken back to the view item page rather than the list items page.

back next

Copyright 2007-2009 David Turner and Jinseok Chae. All rights reserved.