This is a new browser window. When finished viewing, just close this window.

User Interface Design Specification:
Digital Agent Corp:
Server Management Console

Release 1.0

Prepared for Digital Agent Corporation by UI Wizards, Inc.
Author: Jeff Johnson,
UI Wizards, Inc.
Creation Date: 21 April 2004
Last Updated: 3 July 2004

This document shows a typical user-interface specification. The yellow boxes are annotations (not included in actual UI specs) that explain the document's various sections. For your convenience, listed below are the annotated sections of this document.

Annotated Sections of this Report:


Here, we describe the purpose of this document: to specify the UI for a Web-based server management application. [Back to Top]

This document specifies a user interface design for the Digital Agent Server Management Console, based on the previously prepared Management Console Conceptual Model document and on design meetings with the Management Console development team. This design is also based, to the extent possible, on the Digital Agent Management Solution document.

This document specifies designs for the major functional areas of the Management Console:  the Home page, and the management pages for Service Groups, xImages, Hardware, System Events, Users, and Console Settings.

The document begins with an overview of the Management Console's major functional areas.  It next describes design concepts and guidelines that pervade the entire the design. It then describes the proposed user interface for each facility, listing open design issues for each.

Management Console Major Components

The purpose of this section is to provide an overview of the functional components that comprise the application:. [Back to Top]

The Management Console consists of the following functional areas:

General Design Concepts and Guidelines

This section describes over-arching conceptual design decisions embodied in the proposed design. At the end of this section, we list unresolved issues pertaining to the general design. [Back to Top]

This section describes over-arching conceptual design decisions embodied in the proposed design.

Overall Appearance and Layout

The Management Console is a web-application that runs in a web-browser. This design assumes that the browser used to run the Management Console is -- or has capabilities equivalent to -- recent releases of the two most popular web-browsers: Netscape Communicator and Microsoft Internet Explorer.

The general design framework for the Management Console is illustrated schematically in Figure 1 and in detail in Figure 2. Everything that the Console displays (except for dialog boxes) is contained in a web-browser's content area. For brevity, the browser's content area is referred to in this document as "the screen".

Generic page layout

Figure 1: Management Console page layout schematic

At the top of the page, spanning the entire width, is a bar containing the Digital Agent Corp logo and the name of this product, e.g., "Management Console".

The left side of the page (about 1/4 of the width) is a Navigation Tree that lists the main content areas and all user-visible objects (e.g., Web Packs, servers, service groups).

The right side of the page (about 3/4 of the width) shows information and settings for the item currently selected in the Navigation Tree.

Nav tree and Home page

Figure 2: Navigation tree and Home page

Navigation Tree

The Navigation Tree looks and operates similar to the Windows File Explorer tree control (see Figure 3). It has the following characteristics:

Content/Control Area

The Content/Control area on the right side of the browser window shows information for the currently selected in the Navigation Tree.

Content/Control Area: Navigation "Breadcrumb" Path

At the top of this area is a representation of the branch of the object-hierarchy that terminates in the currently-selected item in the Navigation Tree. The tree-branch is represented in the familiar "bread crumbs" fashion, e.g.:

Hardware > Web Packs > Web Pack 47

in which all but the last item (which represents the currently-displayed page) are links that users can click on to return to the corresponding page. The arrow (">") should be an actual arrow symbol if possible, rather than being constructed from minus and greater-than characters.

Content/Control Area: General

Long lists of user-defined objects are displayed in scrollable lists or tables so the entire Content/Control page is not lengthened. Controls at the bottom of the page (e.g., Apply, Reset) should not be pushed down off the bottom of the screen by long lists of items.

Tables of resource items (e.g., Service Groups, Servers, xImages) are used throughout the user interface of the Management Console. They appear in control panels for all types of resource items. For consistency of use, all tables all behave as follows:

Data-entry fields and other controls also look and behave consistently from one control panel to another. All follow these rules:

Content/Control Area: Category Overviews

When a category (or subcategory) is selected in the Navigation Tree, the Content/Control area shows summary information for the category (e.g., status), and also a table of the resource items in the category, if any. Below the table are buttons for operating on the type of resource-item listed in the table. Operations provided by these buttons include: modifying, creating, copying (if applicable), and deleting items. The standard buttons for resource-item management tables are as follows:

Other function-buttons may be provided below the table if relevant for the type of item in the table, e.g., Activate/Deactivate for Service Groups.

Content/Control Area: Individual Resource Items

When an individual resource-item is selected in the Navigation Tree (or linked to from a table displayed by the system), the Content/Control area shows status information and settings for the object. The information shown for a resource item is divided up into tabs. The first two tab-panels are standard for (most) item detail pages. The standard two tab-panels are:

Each type of resource item may have additional tab-panels that are specific to the type of item.

If settings on a resource item's Properties tab-panel (or any other tab-panels that has Apply and Reset) have not been saved when the user tries to switch to another tab-panel, the user is warned, and asked whether the changes are to be saved.

Dialog Boxes

If a function invoked from the Content/Control area requires additional parameters, it includes "..." at the end of its name-label, and it displays a "dialog box" to collect those parameters from the user. It does not simply display a new page in the same browser.

Most "dialog boxes" will be implemented as browser windows in kiosk mode (i.e., with the browser controls hidden). Certain special-purpose dialog boxes will simply use browser-supplied dialog-box forms (e.g., filechoosers).

However they are implemented, they include OK and Cancel buttons. Examples of functions that display dialog boxes are: "Create..." and "Copy...".

Dialog boxes should designed so that they do not pop-up additional dialog boxes. In other words, we avoid having dialog boxes on dialog boxes, because multiple levels of dialog boxes can cause users to get lost or to lose the point of what they were doing. There are a few exceptions: common dialog boxes having very familiar functions (e.g., file-choosers, date-pickers) can be displayed by dialog boxes.


The Management Console provides facilities for creating printable reports on any aspect of the WebPack system. The idea is simple: the system can create a report for any Content page in the system (e.g., Home, Service Group Overview, xImage Detail, Filers Overview, Events Log). Reports are generated as HTML documents, then displayed in a browser, allowing users to either print or save them, as desired.

Users create a report by going to the page corresponding to the desired information and clicking on a "Print Report..." button. The button is positioned so that it is clear that it applies only to the Content/Control area of the screen, i.e., not to the Navigation Tree. One good place for this button is on the right side of the area enclosing the Navigation "Breadcrumb" Path. An alternative is to add a general purpose command toolbar to the top of the Content/Control side of the display, above the "breadcrumb" path, and put the "Print Report..." button there (in addition to other buttons that may be needed). The button should be labeled with an icon suggesting a printed report (e.g., a sheet of paper with lines on it). It should also have a textual tooltip: "Print Report...".

Clicking on the Print Report button displays a "dialog box" (kiosked browser) offering a radiobutton choice of the form of report to print, with "Regular" as the default (see figure 3.5).

Print Report dialog box

Figure 3.5: Print Report dialog box

Choosing "Regular Report" (the default setting) prints more-or-less the same information shown on the screen, but with resource-items listed in plain HTML lists rather than in scrollable tables. Choosing "Detailed Report" prints significantly more detail in each section and on each item in the resource list(s). Different sections of the report are separated by horizontal rules, and have headers identifying the section.

The OK button closes the "dialog box", generates the report, and displays it in a regular (non-kiosked) browser (but separate from Console UI's browser). Note: While the report is being generated, the screen pointer should be a wait-cursor. If generating a report takes longer than a few seconds, a progress bar should be displayed in the report browser window.

The Cancel button simply closes the "dialog box" and cancels the Print Report operation.

Once the report is displayed in its own browser window (neither the kiosked browser of the "dialog box" nor the Management Console's browser), a user can use browser's controls to Print the report or Save it in a specified file (as HTML).

Resolved General Issues

  1. Do we need a functional area for managing Packages? Resolution: Yes.
  2. If our UI for selecting a row in a table may not work, either because of implementation difficulty or because usability testing shows that users do not understand how to select a row. In that case, what to do? Resolution: the item number column heading could be labeled "Select". If necessary, we could add a checkbox for selecting columns, as many web-applications do. However, this is considered a sub-optimal solution.

Unresolved General Issues

  1. The Hardware categories in the Navigation Tree behave differently from other categories in that they don't list all their resource-items. Whether this inconsistency causes too much difficulty for users will have to be determined by usability testing.
  2. Would it perhaps make sense to add a command toolbar above the Navigation "Breadcrumb" path, for commands that apply to the Content/Control area of the display but, unlike the command buttons below resource tables, aren't specific to resource-items. E.g., the above-described "Print Report..." button.

Specific Component Designs

The bulk of a specification consists of detailed specifications for the design of each functional component of the Messaging application. [Note: In this sample specification, only a sampling of the component specifications are included -- enough to show what is included in each component's section.] It also contains unresolved (open) design issues. [Back to Top]

Home Page

Home Page

Figure 4: Home page

Description of Home Page

The Home page is a high-level overview of the status of the entire system. It is the top-level window onto the current functioning of all the Web Packs and supporting hardware.

At present, we plan to display the following information on the Home page:

Resolved Issues for Home Page

  1. If we get to the point where there is more information to show here than will fit on one page, we can break it up two different ways: a) tab-panels, or b) sub-pages in the Navigation Tree. Resolution: If necessary, divide up the Home page data by adding sub-pages of Home to the Navigation Tree.

Unresolved Issues for Home Page

  1. It isn't yet clear what information would provide system administrators with the an adequate overview of the system. It also isn't yet clear what summary information will be available to show users. In the long-term, Digital Agent should allow users to customize (personalize) the Home page, i.e., to choose what summary information is shown there. Medium-term, one way to provide limited customizability is to provide checkboxes (either right next to the info itself or on a separate page in Console Settings) for displaying or hiding each of several different sections of information. In the short-term, Digital Agent should try to determine what summary information will satisfy most users.
  2. In the long term, the data on this page should be displayed graphically; not just textually, numerically, and tabularly.
  3. The "System Summary (Servers)" label seems too vague. The parenthesized name suggests that we couldn't decide on a single good label. Suggested replacement labels: "Hardware Summary", "Server Summary", "Server Overview".

Service Groups Overview Page

Service Groups Overview page

Figure 5: Service Groups Overview page

Description of Service Groups Overview Page

The Service Groups Overview page lists all the Service Groups, shows their status, and provides a way to drill down to look in more detail at a specific Service Group. It also provides controls for modifying, creating, copying, deleting, activating, and deactivating Service Groups. The elements of the page are as follows:

Create Service Group dialog box

Figure 6: Create Service Group dialog box

Copy Service Group dialog box

Figure 7: Copy Service Group dialog box

Resolved Issues for Service Groups Overview Page

  1. When a new Service Group is created (not copied) should its Name default to blank, or should the system assign it a default name? Resolution: Assign a default name: "New Service N", where N is a number.
  2. When a new Service Group is created (not copied) what should its Number of Servers default to? Zero? One? Other? Resolution: The default # of servers for a new Service Group should be zero.

Unresolved Issues for Service Groups Overview Page

  1. It is yet unclear what the possible status states for a Service Group are, or how they should be illustrated.
  2. Eventually, buttons that are not applicable to the currently-selected Service Group (e.g., Delete, because the S.G. is active) should be inactive (grayed out) rather than displaying an error message when the user clicks them. However, this is difficult to implement in Web-based applications.
  3. On the Add and Copy dialog boxes, the controls for choosing a Service Group may eventually have to allow for the fact that Service Groups will be categorized into Service Group categories. This could be accomplished by: a) allowing the menu to list the categories (but not allow one to be selected), or b) providing a separate menu of Service Group categories than, when set, determines which Service Groups are listed in the Service Group menu.

Service Groups Detail Page

Service Groups Detail page

Figure 8: Service Groups Detail page

Description of Service Groups Detail Page

The Service Groups Detail page shows the detailed information and settings for a particular Service Group. It contains the following elements:

Status Tab-Panel

Service Groups Detail: Status Tab panel

Figure 9: Service Groups Detail: Status Tab panel

Properties Tab-Panel

Service Groups Detail: Properties Tab panel

Figure 10: Service Groups Detail: Properties Tab panel

Servers Tab-Panel

Service Groups Detail: Servers Tab panel

Figure 11: Service Groups Detail: Servers Tab panel

xImages Tab-Panel

Service Groups Detail: xImages Tab panel

Figure 12: Service Groups Detail: xImages Tab panel

Rollout Tab-Panel

Service Groups Detail: Rollout Tab panel

Figure 13: Service Groups Detail: Rollout Tab panel>

The current design, rolling a new xImage out to a Service Group's allocated servers consists of two major phases: a) making child-copies of the new base xImage for all the servers, and b) rebooting all the servers with their child-copies of the xImage.

The copying phase will probably take significant time, e.g., 10-15 minutes. It will be important to indicate the progress of the copying process.

The rebooting phase supports only manual rollout of a new xImage to a Service Group's allocated servers, i.e., the user selects one or more servers in the table to update, then clicks on an Update button to start the process (with an option to abort in mid-operation).

Resolved Issues for Service Groups Detail Page

  1. None

Unresolved Issues for Service Groups Detail Page

  1. On the Status tab-panel, for info that isn't shown in a table, how will users drill down to get more info?
  2. The goal of the Servers tab-panel is to show what servers are in this Service Group, what xImages they are each running, and where (i.e., on what Filer) the xImages are stored. In the long-run, this info might be better shown graphically/iconicly rather than in tables.
  3. The xImages panel may need to show rollout status, even though the controls for Rollout are on the Rollout tab-panel. The question is: how to show the rollout status compactly?
  4. On the Rollout tab-panel: The copy stage will probably take significant time, e.g., 10-15 minutes. It will be important to indicate the progress of the copying process. The question is: how? Tentative resolution: Show on Service Group's Status and on Rollout tab panels.
  5. Users will eventually want more automatic ways to rollout new xImages to servers. Rollout option to consider for the future: progressive: update N servers at a time at a given time-interval.
  6. The Rollout tab-panel may need a Select all button and/or an Invert Selection button (which selects all Servers that aren't selected and deselects those that are).

Hardware Overview Page

Hardware Overview page

Figure 22: Hardware Overview page

Description of Hardware Overview Page

The Hardware Overview page shows important status information about the Hardware components of the system. It contains the following elements:

Unresolved Issues for Hardware Overview Page

  1. What is on this page?