View Components

A page flow diagram is a good place to start on the design of a simple web application such as this. At the same time, decisions must be made about fundamental layout and style. I opted for the familiar pattern of a set of fixed navigation links or “menu”, on the left side of the page, with particular content and associated form widgets on the right (in other words, just like this site). These will be referred to as the menu pane and the content pane. A single menu pane is common to all pages.

Figure 1 illustrates the pages in the application, and the user actions defining all transitions between pages, originating in either the menu pane or the content pane. Note that this defines the flow from the user’s perspective; it does not define server side components or control flow.

Figure 1 Page Transitions

A circle is used for the login to emphasize that, with BASIC authentication implemented by the browser, the UI component is normally a pop up dialog box, rather than a rendered HTML page. The New User page is an exception to the dual pane pattern. It is a simple form in which the first time user enters a personal name, and is seen only the first time a user signs in; thereafter the name is retrieved from the address book.

The Folder page lists all the messages in a given folder. There are four variations of the Folder page, one for each of the four standard folders. The Address Book page is used to create, edit or delete entries in the address book. The Address Select page is the one from which existing addresses are selected for insertion into the message.

Figure 1 is rather cluttered, since it shows every possible path between pages. We can simplify it by noting that the paths can be divided into two categories:

The menu pane links define paths from any page (other than New User), to the Folder, Compose or Address Book pages. We can produce a second, simpler diagram by removing paths originating in the menu pane, and introducing a second form of page symbol. We define the menu pane links to be implied by the use of a rectangle with rounded corners for the target pages. Occurrence of this shape implies “this page can be selected from any other page via the menu pane”.

Figure 2 Page Transitions From Within Content Pane

Next, we create a table listing the transitions, one per row, with columns for:

Table 1 Page Transitions
Origin Page Purpose Action Trigger Condition Destination Page
Label UI Type
(Browser login dialog) Authenticate user Submit (browser) new user New User
existing user Folder
New User Enter personal name Proceed button   Folder
any (menu pane) Start new message Compose text link   Compose
any (menu pane) Open folder Inbox/Sent/Drafts/Trash text link   Folder
any (menu pane) Open address book for editing Address Book text link   Address Book
Address Book Save new or edited address Save Address button   Address Book
Address Book Edit selected address Edit button   Address Book
Address Book Delete selected addresses Delete button   Address Book
Address Select Insert selected addresses in message Insert Selected Addresses button   Compose
Compose Open address book for selection Addresses button   Address Select
Compose Save message in Drafts folder Save Draft button   Folder
Compose Send message Send button   Folder
Compose Locate file to upload as attachment Browse (browser)   Compose
Compose Upload selected attachment file Add button   Compose
Compose Remove uploaded attachment files Delete Selected Attachments button   Compose
Folder Change message sort field and/or order Sort image link   Folder
Folder Delete selected messages Delete button   Folder
Folder Open message to read Read text link   Read
Folder Select all messages Select All text link   Read
Read Delete the message being read Delete button folder not empty Read
folder empty Folder
Read Move to next/previous message Next/Previous button   Read
Read Forward the message Forward button   Compose
Read Reply to sender Reply button   Compose
Read Reply to sender and other recipients Reply All button   Compose
Read Resume writing from a draft Resume Draft button   Compose