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:
- transitions initiated by links in the menu pane
- transitions initiated by links or form buttons in content panes
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:
- The origin page
- Purpose of the transition
- How the user triggers the transition, by selecting either a link (text or image), or a form button. In the case of the login and the attachment selection Browse button, these are shown to be a function of the browser
- Conditions, if any, which determine the destination page
- The destination page
| 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 | |