The navigational structure of the administration interface was set at the beginning of the planning phase. The interface has seven basic locations. They are shown in Figure 5.
Figure 5 - Navigational structure of the administration interface
For consistency, each location uses the same basic layout template: “The use of a page template allows you to establish a consistent and simple page structure throughout the web site.” [2, p. 184]
The template has seven distinct layout elements. The elements are shown in Table 2.
Table 2 - Administration interface elements
| ID | Element | Description |
|---|---|---|
| 1 | Logo | Holds the logo for quick visual identification. |
| 2 | Location header | Displays the function of the page. |
| 3 | Date and time | Acts as a time stamp. |
| 4 | Primary navigation | Holds the links for the major functions in the system. It is always visible and has two modes. The modes and links are shown in Figure 7. The selected item is indicated by changing the background color of the link. |
| 5 | Secondary navigation | Provides access to additional functions. It has two modes, which are shown in Figure 8. |
| 6 | Content area | Displays the content. |
| 7 | Footer area | Contains links to additional functions and contact information. |
The placement of the seven elements in the design space is shown in Figure 6.
Figure 6 - Administration interface Elements
The layouts of the navigation elements 4 and 5 are shown in Figures 7 and 8.
Figure 7 - Primary navigation elements
Figure 8 - Secondary navigation elements
The navigational items use distinctive color combinations of black, white and yellow: “Highly contrasted elements grab the users’ attention, whereas more subdued contrasts require conscious effort to be noticed” [2, p. 188]. Red, yellow and green colors were used to indicate the status and priority of a specific bug.
In general, the visual design of the interface was kept simple: “A truly elegant design reduces the page to its required elements. This allows each element to be intimately tied to its message and increases the page structure perceived by the user.” [2, p. 180]
Screen captures of the final interface are shown in APPENDIX A.