Web Management Interface - Core UX Elements & Concepts

These are product code names: title & version

Top level categories and system messages

Per category (top level) navigation. Supports Groups and Sections. Build as a tree. Can carry more complex navigation widgets (i.e. picker)

Each section (main navigation) leads to am editor panel. Editor panels support nested structures (top level tabs & pages)

Groups high level use cases within the same section

Common pattern: Master table and details tabs at the bottom. Each selection wtihin the table populates the details below.

Master that provides toolbar and paging

The contents depend on the selection within the master table. Typically used to group contents by use case.

Provides toolbar and context help. The form is driven by a "open-save-close" model

In edit save state the form provides input fields and "save" / "cancel" operations.

Regardless of the form state, the context help is accessible. It remains open until explicitly closed. Can be used as reference while editing.

Except for the form editing most input tasks happen within a modal dialog window. Can be multistep wizard.

All input dialoges re-use the form interaction pattern and context help.

All user interaction with the domain model (i.e creating, removing entities) leads to a system message. Messages are shown as a notification (auto hide after n seconds) and can be retrieved through the top level meta navigation.

The message navigaton shows the number of unread messages. Read messages are kept in the list, but are muted.

Messages support brief (used in the list) and detailed (as model dialog) descriptions.

In some cases the editors hirarchy depth isn't sufficent. In that case an additional level (aka page) is provied. It's access through the master table "View ->" links.

Pages are represented as second level tabs within an editor panel. A "<- Back" button is provided to return to the pevious level. Each page in itself can be used as a regular editor panel (master/detail, etc).

Besides the actual interface version the footer provides access to functionality that should be accessible from any screen.

Tools are any kind of interface components that shold be acccessible across all screens and use cases.