iView Framework - Trays

Introduction | What if there is no content yet? | What is a Tray? | Tray Functionality | Tray Design

Introduction

An iView consists of two parts: The actual application written by a development team and a framework encapsulating the application. This framework is implemented through a design element called tray which serves as a container for iViews. While the application implements most of the functionality and the behavior experienced by the user, the tray delivers interfaces to common functions used by nearly all iViews. These functions comprise a refresh mechanism or the ability to personalize an iView. The tray is responsible for displaying the appropriate user interface elements, while the application delivers the content via standardized interfaces.

What if there is no content yet?

Sometimes an iView does not yet contain any information, e.g. if a "My Events" iView has not yet been personalized. Instead of just presenting the empty iView, use the opportunity to provide some explanatory text on the iView and its functions. This way no space is wasted and the user is given some hints on how to operate the iView.

What is a Tray?

A tray is part of the Workplace. It serves exclusively as a container for iViews. A tray provides (or will provide in the future) the following standard functionality:

loading animation (planned for the future)
personalization
refresh
dynamic tray header text (planned for the future)

Trays are available in four different designs (see Tray Design), seen together in a mock up of a Workplace in figure 1 below.

Figure 1: A Workplace with all 4 tray designs

The tray framework consists of a border (which may or may not be visible) around the entire iView and a header bar with a title and icons.

Figure 2: The iView tray framework (in the simple tray design) in the Workplace

Tray Functionality

The tray provides the following functions (see figure 2):

Refresh

Some iViews will contain data that is changing over time. Examples are stock quotes or inbox items. Depending on the character of the iView, knowing exactly how old or recent the displayed information is can be crucial to overall usability of the application. Besides knowing about the 'age' of a piece of information it will in some cases be necessary to update the content of an iView as required. The intervals for the updating or 'refresh' procedure can vary from once a day to every minute, from automatic to manual refresh. Setting this parameter will be handled via a 'refresh' button or personalized settings.

Until now, there is no solution for automatically providing the refresh button in the tray. It must be placed within the iView manually and should be the rightmost button of the row which also contains iView's emphasized button (if there is any), i.e. usually at the bottom of the iView. Provide a hint on how old the information displayed in the iView is - don't just enter the last screen refresh's date, but when the last query was conducted (if appropriate).

Toggle Open / Close

The tray will have a toggle button that allows users to open and close the iView. An open iView's header will show the "close" icon. When the button is pressed, the iView will be reduced to its header, and the toggle button will show the "open" icon.

Remove

If the user clicks the "remove" icon, the iView disappears from the user's Workplace.

Further information

For information on messages in iViews see Messages, for error handling, error prevention and user support see Help and User Support.

Tray Design

There are four types of trays: a tray well suited to host forms, a tray for complex content, a simple tray and a tray for texts. The trays differ from each other on the following three dimensions: header bar color, background color, and border color. A variety of tray designs reduces monotony in the visual appearance of the Workplace and helps the user differenciate the iViews from one another.

Each of the trays comes with a name referring to its proposed content and a technical name. The TrayDesign enumerator is given as well. They are presented here in order of importance.

The Form Tray (tray design 3, enumerator "form")

The form tray has a colored header bar, no outside border, and a light colored background color for content. It should be used whenever the iView content has an entry field, a dropdown box, checkboxes or radiobuttons: White input fields differ clearly from the slightly colored background. Grouping of the elements rises from the colored area.

Figure 3: The form tray

The Border Tray (tray design 2; enumerator "border" - was: Complex Tray)

The border tray has a colored header bar, an outside border, and no background color for content. A collection of different elements is hardly recognized as a group. If these elements belong together they need a frame. This design can be used to group such collections of elements but the grouping is still very decent.

Figure 4: The border tray

The Borderless Tray (tray design 1; enumerator "borderless" - was: Simple Tray)

The simple tray has a colored header bar, no outside border, and no background color for content. Should be used for clearly shaped elements, e.g. link lists, that do not need an additional frame to group them. This design allows a very light appearance of the portal.

Figure 5: The borderless tray

The Text Tray (tray design 4; enumerator "text")

The text tray has a light colored header bar, no outside border, and a light colored background for content (the same color as the header bar when the iView is in the open state). The slightly colored background makes text easier to read than a pure white background. If there is a large amount of body text, like in news or articles, this design matches very well.

Figure 6: The text tray

For more information see the PowerPoint presentation on tray design.

For more information on column layout and iView sizes see the PowerPoint presentation.

top