© 2009
Advanced Web-Application Development / Browser-Enabled MS-Access Conversions
User productivity is derived from and can be measured by the effectiveness of application GUI’s. The effectiveness of GUI’s is proportional to the functionality provided by the building-blocks available to the application developer. This paper details and illustrates the advantages of GUI’s that employ a framework offering intelligent input and form components, multiple-record forms, presentation and collection of data based on related record sets and sizable/movable windows with programmable interfaces; built upon a high-performance, scalable architecture.
Databases typically form the foundation upon which most GUI's are built. This discussion focuses on applications that collect and present information from DBMS. Building applications based on properly designed database models (in third-normal form) is strongly advised. A poorly defined database model can complicate the GUI for both developer and user, cause unacceptable response times and may be the main determinant as to whether the application is ultimately accepted by the user community.
It is assumed that a thorough analysis of user needs has already been performed and it is time to prepare the GUIs that comprise the application. Although the examples used in this document are implemented using browser / web technologies, the concepts apply to all GUIs.
The main goal of effective GUI design is to provide a mechanism for the entry and collection of accurate data that maximizes productivity. To achieve this goal, the GUI must be easy to learn and operate, minimize erroneous data entry, and be responsive to user actions.
The most common GUI container is the Single-Record Form, which presents data from one record within the form area. In general, evenly spaced input areas with clearly marked labels for easy user identification are placed, uncluttered within the form frame so that borders are symmetrically aligned in a visually pleasing manner. Color schemas may be applied to differentiate forms and add to their visual appeal.
Providing users with visual cues and/or associations within the form’s layout and throughout the data entry process makes the interface simpler and less stressful to learn and use, and can be helpful in reducing input errors.
At every step of the entry process, the user should be able to easily discern input requirements (ex. date, number, etc.) and available actions (save record, navigate to next field or record, etc.).
Visual cues at every keystroke and mouse-click also provide users with a frame of reference that instills confidence that the entry process is proceeding correctly. For example, after the program detects a field change, an “update in progress” icon informs the user that a database change will occur unless the operation is undone.
User keyboard and mouse actions should be intuitive and consistent among forms. For example, tab and Shift-tab should always move the focus to the next or previous input area within the entry flow, and pressing the Esc key should always undo the current field.
Containing forms within moveable, resizable windows adds flexibility to multi-form GUI applications. User may find it useful to compare information from two or more forms, or minimize the current form for later reference. Windows also provide a consistent method for closing forms; separate "close" buttons for each form are unnecessary.
Enabling users to work with multiple records within the same form can yield significant productivity gains. By loading a set of records that are relevant to the current user, changes can be quickly made to multiple records without having to fetch each one by key from the server. Forms that include sorting and filtering help users find specific records when working with relatively large record sets.
The following example illustrates a data-entry form that is empty when first loaded, but accumulates records as they are entered. Feel free to add some records if you like. The database is refreshed periodically.
When valid entries are limited to one or more values, the use of Combo-Boxes, Selection-Lists and Check-Boxes are an effective way of collecting valid data. Common examples are a Combo-Box that lists products, a Selection-List showing shipping alternatives, or a Check-Box to accept an agreement. Selection-Lists are most useful with multiple entry input choices.
The multiple-column combo-box presents users with a list of available choices. Additional columns can be used to offer users related information to help narrow down their choice. The auto-extend feature allows users to choose entries from lists by typing the first few letters of the entry.
An Input Mask is an intelligent text element that provides a fixed data input template and controls values users are allowed to enter. Studies show that the longest string of characters one can readily recall is five. When users are required to enter long sequences of characters, like credit card or social security numbers, providing a fixed format that matches the card imprint makes it much easier to enter and visually verify than typing a contiguous string of 9-16 digits.
To further ensure valid data, application specific editing rules that issue clearly stated error messages when validation fails, should be liberally applied.
Retrieving the latest data based on user input helps ensure timeliness and accuracy. For example, the Unit-Price should be retrieved and displayed after the user selects a Product.
Retrieve default input entries from the DBMS. For example, the primary shipping address should be displayed when a Customer is selected.
Productivity gains can be realized by all participants when data is retrieved from external sources, like from manufacturers or shippers. As an example, we’ll use the USPS (United States Postal Service), which provides API access to shipping data.
Typing an address can be cumbersome and error prone. Even when correct, address information may not conform to the USPS formatting standard, which could lead to delivery confusion. By allowing users to enter just the Zip Code and retrieving the associated City and State from the USPS, entry time is shortened and correctness ensured.
The following form illustrates Zip Code lookups and also retrieves an entered address, reformatted using the USPS standard.
Note that although the Customer Form Example contains international addresses, it could be modified to utilize postal APIs from any countries that offer them.
Response time is a key element of effective GUI and directly linked to productivity. The less time a user must wait for an application to respond to an action (load, save, navigate, etc.), the more work they can accomplish and the fewer errors they are likely to make. Sluggish GUI's cause us to lose track of what we were thinking, increases anxiety, and makes us prone to errors.
Implementing client-side edits to enforce database constraints like NOT NULL, and relational constraints that check for key-existence for example, provide the user with much more meaningful error messages than those issued by DBMS, and take less time to process than their server-side equivalents.
In addition to explicit “Save” operations (those performed by clicking a button or menu item), productivity gains are realized when database updates and inserts are implicitly performed based on user actions, ex., the user navigates to another record or closes the form when then record is in a “changed” state.
Employing techniques that ensure data is rapidly updated enables users to accomplish more in less time.
Datasheets (or Grids) display all of a record’s data fields on a single row, much like spreadsheets do. They enable viewing of multiple records within the form area and provide a mechanism for finding and changing data more quickly than with single-form view. The ability to adjust column width's and row heights is typically built-in to datasheets as well as navigation, filter and sort capabilities. For added flexibility, some GUI’s enable switching between Form and Datasheet view, as with the following example.
Another useful presentation type is the Continuous-Form or List, which uses a form template, but displays multiple rows within the form area as the following example demonstrates.
Tab Pages provide a mechanism for organizing and compactly presenting related data and operations in a relatively small viewing area.
It is often important to create forms that present and collect information based on DBMS relationships, typically referred to as parent-children (one-to-many) relationships (Order / Items Purchased or Customer / Ship-To Addresses).
The next example depicts Customer-Order relationships. Each form page shows the customer’s name and country, and lists all orders placed for the customer in the first grid. Clicking or navigating to an order record displays detail information (product name, price, etc.) for each line item in the order (bottom grid).
Enter the Demonstration at bunkerhill.com (click the "View as BAB/E Application" button) for additional form examples.
By employing the techniques discussed in this document, application GUI’s will require less user training, collect more accurate data, and provide a very productive and agreeable user experience.