D ESIGNING A GOOD INTERFACE

The first question about a generated user interface is often, “Won’t it look like dreck?” Frankly, it’s possible. Bad templates and poor design will make for a bad interface. Generation will not make your UI better; all it will do is create the interface more quickly and more consistently than if you used hand-coding.

A user interface can be thought of in two pieces. The first is the look of the inter- face. Generated code can look as good as a hand-coded interface as long as you use well-written templates. The other piece of the UI equation is the usability of the inter- face. It takes great care to build usable interfaces with code generation.

Figure 5.2 shows an example record from a project management system and the associated simple interface. This is the type of interface that simple generators or wizards will give you. The dialog box maps one to one with the fields in the record. At most, the generator will alter the types of controls based on the types of the fields in the record.

DESIGNINGAGOODINTERFACE 103

This simplistic interface is not an ideal interface for the end user. An ideal interface matches users’ workflow and makes it easy for them to interact with the system in a way that reduces input error. An example three-dialog box system is shown in figure 5.3. These three dialog boxes map more closely to the workflow of the project manager. The first dialog box presents all of the fields required when a user starts a project. The second maintains the estimated completion time of the project. The user employs the third dialog box once the project is finished. Each dialog box shows only a portion of the complete record.

This example illustrates the difference between an interface built directly from the data definition and one built from an understanding of the user requirements and the need to create a usable system. Looking back to the case study in chapter 1, the user interface generator merged the data representation delivered by the database generator with an interface definition to create the final interface. It’s within this interface def- inition that the usability requirements play a key role. The interface definition details

Project Record

Name Status Start Date

Estimated Completion Date Completed Date Project Name: Status: OK Cancel Start: Estimate: Completed: Figure 5.2

A simple dialog box that maps to a record in a project management database

Project Record

Name Status Start Date

Estimated Completion Date Completed Date New Project Name: Start: OK Cancel Update Project Estimate: Status: OK Cancel Complete Project Completed: Status: OK Cancel Figure 5.3

A set of dialog boxes that map to a single record

what fields are put where and when. The relationship between the database generator and the user interface generator (from the case study) is illustrated in figure 5.4.

As engineers and architects, we spend a lot of time with our customers going through their workflow and capturing the data requirements as we design the schema. It’s a mistake to capture just the data requirements and discard the workflow infor- mation. The workflow information allows the engineers and usability and interface experts to design and construct an interface that is usable by the customer. Usability is the key to the successful deployment of an application. You can be sure that appli- cations that are difficult to use drive users away.

Here are some additional techniques to avoid building bad interfaces:

• Include your graphic designer in the process early on—The designer can use any web development tool to build one or two basic forms that present a variety of con- trols. Once you have these forms, you can decompose them into modular tem- plates for the body of the page, the menus, the control types, and so forth. The role of the generator is then to compose new pages from the form definition using the modular templates. I can’t emphasize enough the value of this workflow. Web development shops in recent years have used graphic designers to build complete forms for their applications. This is nonsensical. Talented graphic designers are great at coming up with web layout and style, as well as providing insight on novel ways to present data to the customer. To turn these people into form build- ers is a waste of talent. In addition, today’s web development tools are not geared to making changes across the structure of pages en masse. The resulting pages will lack consistency, which hurts the flexibility and the testability of the application. • Use multiple layout types—Not all pages and dialog boxes should be organized in

the same way. Developing a number of different meta-layouts that you can use on a form-by-form basis can mean better usability and a pleasing break from monotony. Figure 5.4 The user interface generator from the case study

A CASESTUDY: GENERATING JSP 105

5.3

WORKFLOW

COMPARISON

Figure 5.5 shows the standard UI generation workflow. You begin by editing either the templates or the definition files and then running the generator. The next step is to deploy the generated output with the rest of the application code and test it. You can fix any flaws that are found during testing on the next iteration of the cycle.