A Proposed Model for GV Express

October 2008 BLUE version

Introduction – Design Elements

This model combines primary design elements from 3 applications:• Microsoft Outlook: resize-able page sections, familiar workflow, selectable lists• Abode Dreamweaver: resize-able page sections, viewable Properties • Certain Events: familiar navigation tree

Microsoft Outlookpage sections can be easily resized by dragging

Microsoft Outlookdrag a frame to resize the section you want to view

Microsoft Outlook drag a frame to resize the section you want to hide

Microsoft Outlookfamiliar workflow: 1) primary selection 2) sort-able list of secondary selections 3) details

1 2

3

Adobe Dreamweaver also has page sections that can be easily resized

Adobe Dreamweaver drag a frame to enlarge/reduce the section you want to view/hide

Adobe Dreamweaveran expandable Properties section can be opened anytime

Adobe Dreamweaverproperties show for any object selected in the section above

Adobe Dreamweaverdata can be quickly entered into Properties fields

Certain Eventsusers make selections using a navigation tree to view related record details

Certain Eventsusers make selections in one section to view related lists in another section

The Blue Model

This proposed model was based on Microsoft Outlook, Abode Dreamweaver, and Certain Events because they are some of the most familiar software applications to our customers – and thus the new product will be easy to learn and easy to use. Let’s start by logging in….

Certain Express

The Customer Section

The Blue model has 3 main sections. Unless a different preference is set, the Customer section shows first. Based on the login, the application knows the user’s organization, the user’s name, and what navigation options are available (determined by predefined permissions). A link to the Support site and Administration area, and a Log Out link are also included in the header.

The primary navigation tree in the Customer section deals with options available “across all events” or outside any single event (e.g., master lists of suppliers and contacts, consolidation reports, surveys, etc.). This is where the user can view the contents of an Events folder or a CE Course folder in order to select the event he or she wants to work on.

familiar workflow - As in Outlook or Events, the user initially makes a selection from the panel on the left (1) to show related information in the section on the right (2).

resize-able sections - By default, a list of 20 records is ready to be displayed, though the user can resize the list anytime by dragging the frame (or by selecting a different Show option.)

1 2

Many users will begin by viewing the contents of an Events folder as a list. Every list can be searched, filtered using View options and/or sorted alphabetically.

Other users will want to view scheduled events on an annual or monthly calendar.

Hovering over an event on a calendar could display some basic details about it.

Depending on roles, permissions and the selection, various tools are available to enable the user to add, copy, view/edit, and delete records to/from the list. Other tools enable the user to import, export, and print lists. (These list tables could be also be directly editable.)

Here one event has been selected from the Events list. Selecting (by double-clicking?) any row in a Customer section list will show info about that record in the Selection section below. To make it easier for the user, sections open and close automatically whenever appropriate (see next slide).

The Selection Section

The Selection header always shows what was selected. The navigation tree in the middle Selection section includes all the corresponding navigation options (i.e., tabs). In this example an event was selected, so event-specific options show in the tree (address book, functions, etc.).

The Selection section might be the initial default screen that many event managers may choose to use. Therefore, the Customer section (or any section) can be collapsed or resized whenever it is not needed. Perhaps the user wants to see all the speakers participating in the selected event…

After the Speakers folder is opened using the navigation tree in the Selection section, a list of speakers scheduled for this event is displayed. Here 19 of 48 speakers show in the list. As usual, lists can be easily resized --- manually or numerically.

As before, selecting any row in a list will show info about that record in the section below (sections open and close automatically whenever appropriate). The Properties section -- see next slide -- is used frequently, as it is where most event related details are entered and edited.

The Properties Section

To hide distracting information the Selection section can be collapsed, or resized by dragging the frame or by using the Show option to shorten the list. To provide the user with navigation feedback, (i.e., to remind you what you are working on), the Properties header will always show what was selected above.

Here the top two sections have been completely collapsed so a data-entry person can easily click thru the links in the Properties section’s navigation panel and complete the record.

In this example, there are various number of navigation links (to sub-tabs) that make up a Speaker’s properties. Here, the Properties section opens to the Details screen.

Note: Not always pictured – every properties screen should have an OK/Cancel (or Cancel/Save) button or, in the case of a sequential Wizard, a Next button (see next slide).

Other Stuff

Easy Wizard - One way to walk users thru mandatory steps (such as when adding an event) might be to number the links, show a Next button on-screen, and not allow navigation selections that are out of sequence the first time data is entered.

A Resource Frame containing Recent Items, a To-Do list, Links (favorites?) and Help information could display whenever the Help button is clicked or the user opens the frame.

Branding: Customer and/or Certain logo could be added to the header (not pictured).

Review

familiar workflow: 1) primary selection 2) sort-able list of secondary selections 3) details

1 2

3

each selection has viewable and editable properties

sections that can be collapsed/expanded or resized

Here, all 3 sections show.

Note that the entire navigation tree is visible, making it easy to know exactly where you are.

Each section has a title bar that matches the selection above.

Sections are also colored differently to provide visual cues.

The End