webCOMAND Developer Guidelines

The webCOMAND User Interface is designed to provide an excellent user experience across a variety of applications, computers and devices.

The following recommendations will help developers build successful webCOMAND apps and components that provide an excellent user experience based on best practices.

User-friendly

webCOMAND apps and components operate within the webCOMAND environment and should empower all types of users to efficiently and effectively accomplish tasks and experience content.

At a high-level, they should be easy to:

Understand - Their purpose should be made clear through informative titles, descriptions, icons, labels and visualizations.
Discover and Get - Use packages, products and the Market to make it easy to discover, find, purchase and install.
Access - Apps and components can be integrated into the webCOMAND environment in a number of ways. Consider where a user will be in the webCOMAND environment when they will want to utilize the app or component. What is the easiest way for a user to accomplish the tasks it was designed to perform.
Navigate - The path to each feature should be clear and consistent. It should be also be easy to enter and exit each feature or mode.
Interact with - All user and app actions should provide immediate feedback. Mouse hover states, click/touch, drag-and-drop actions should all provide visual feedback using a consistent theme. If an interaction or process has multiple steps or will take time, a clear indication of each step and current overall status should be provided.
Use on any computer or device - All navigation, controls and visualizations should be easy to use and view on any computer or device. Consider small screens and touch input for all features.

Integration Points

webCOMAND apps and components integrate with the webCOMAND environment in many ways. The first job of a developer is to determine the The most appropriate type of app or component to implement depends on and should empower all types of users to efficiently and effectively accomplish tasks and experience content.

Dashboard - The best place for frequently accessed content (ie. contacts or documents), or to present important and frequently changing information that users want to stay on top of (ie new messages, weather or stock values). A dashboard component is implemented as a Content View.
App List - The best place for software that is in and of itself the "destination", such as a game. Or, if the app requires its own interface that will not integrate well into the greater webCOMAND environment. An app should "be the experience". If the app is designed for a user to experiencing, edit or interact with content, it may be better implemented as another type of component.
Panels - The best way to implement a feature that will present information or controls within one or more apps.
Content View - The best way to implement an interface that will present, interact with or edit content.
Method UIs - The best way to implement a distinct action that will be performed on one or more types of content. An action that requires no
Field UIs - The best way to implement a control or editor for a specific tpe of data or content.
Events - The best way to implement an automatic process. Events can be started at scheduled times or in reponse to another event. They typically do not have a user interface at all, or leverage the alert bar, pop-up dialog or a more passive way to communicate with the user.

UI Components

The webCOMAND Framework provides the following UI components.

webCOMAND apps should leverage the webCOMAND Framework's library of Components. They provide a familiar interface that work well across webCOMAND apps, computers and devices.

Objects

The COMAND ecosystem is object-oriented. That is, most user interface centers around objects. While this is the case in most software applications, COMAND apps provide a more open and integrated approach to working with objects. The concept of an object, and its common features across all applications is made clear to users with a common treatment.

Presentation - Whenever practical, an object should be displayed with an icon to the left and label on the right with consistent proportional spacing.
- Icon - Represent the object visually and should take one of the following forms with a preference for the most specific to the object: thumbnail/preview for visual objects such as images or video, object-specific icon in an icon field or attribute is available, content type icon if available, generic object icon (black dot).
- Label - The object label should be based on the object Summary. If the label is too long for the containing area, an ellipses should be displayed as far right as permitted by the area. If an ellipses needs to be displayed, mouse hover and wait or tap and hold should display the full label, potentially with additional details, in a tooltip above the object. If no ellipses is needed, mouse hover and wait or tap and hold should not display the full label, unless additional information is provided.
Interaction - Users should be able to interact with objects the same way, no matter where they appear in the user interface.
- Click/tap - Navigate to object.
- Click/tap and hold - Rename object title (edit primary title field, determined based on the FieldTitle attribute (object that points to a field to indicate it is the primary object label field. If the FieldTitle attribute is not set, the field type, field title and field order with preference for earlier fields, text-line or number and "Title", "Name", "Label", "Idenifier", "Filename").
- Click/tap and drag - Enter drag-and-drop mode, where the object can be placed into any container/area that represents an object collection. Orderable collections should represent where the object will be added/moved relative to other objects in the collection, if the other objects are visible, and potentially as first/previous (before active object)/next (after active object)/last when other objects are not visible.
- Double-click/tap - ?

Paths

When a path or breadcrumb list of objects is displayed, it should illustrate the path direction and seperate elements with a "wide arrow". Background color should be used when possible, but thin lines may be used instead when more appropriate. This makes the target area as large as possible within the arrow, makes the arrow less prominent and is also consistent with the COMAND Solutions logo arrows.

Paths should be reduced by default, to only display last item in path for simplicity, but allow the path to be expanded for navigation and context. If a user expands a path, it may be "sticky" so that it does not need to be expanded again each time it is displayed. If all path elements do not fit in container area, long paths can be swiped to display cut-off area to left/right. When a path is contracted, no arrow should be displayed around the object, except for on hover/touch. When a path is contracted, a longer more detailed title can be displayed when available (for example a page title instead of a navigation title).

An option to edit the path may be presented for advanced users, to toggle the visual object path to a cPath text input.

Content Views

Provides the following standard user interface elements and features common to all views.

Path Bar

The path bar is the primary way to navigate and understand the current location within the app, content navigation hierarchy, or object repository hierarchy. It also provides controls for the current view and view-specific options.

Action Bar

The action bar displays large buttons for easy (large target) access common actions for the an object (submit, save, cancel and method UIs) or object collection ("out" (share, export), edit mode, select and selected object options).

Collection Views

In addition to the common elements above, all collection views share the common features below.

Collection views display a group of objects in a way that allows a user to explore, navigate and/or manage the objects in useful and different ways.

Some collection views are general-purpose and can display any type of object. Others are designed for certain content types, and take advantage of features specific to those certain content types to provide an interface unique to those content type features.

Action Bar

Collection Actions - Actions that do no require a selection are listed first (Import, Export Collection, Share Collection).
Batch manipulation Actions - Enter and exit batch manipulation mode. When enabled, a selection button is displayed to the right to toggle select all/none and drop-down with selection manipulation options like invert, undo, save/restore, etc.
Object Actions - When batch manipulation mode is enabled and one or more objects are selected, batch manipulation options (delete, do: open, copy, move, share, export) and Method UI buttons for the "common content type" of all selected objects are displayed.

View Control Bar

Depending on the view, a view controls bar may be available, which can be shown/hidden from the Path Bar options menu, but is completely specific to the view. It typically appears between the Action Bar and Search/Filter Bar, but may also appear inside the view (for example as an overlay on a chart or map).

Search/Filter Bar

The Search/Filter bar is typically visible when the view is first displayed, at the top of the list or view. A pin and close button on the right can close or pin it in place. Scrolling the list or otherwise interacting with the view may hide the search/filter bar or scroll it out of view like it is ancorhed within the scrollable area.

The default bar includes a search on the left with a filter options menu, pin and close buttons on the right. On wide displays, common or selected filters may be exposed between the search and filter options menu, growing in from the right.

Common Controls and Gestures

The following options and gestures should be supported by views when possible.

Swipe down (from path bar or action bar grip on left) - Show action bar (method UIs).
Swipe up (from action bar or action bar grip on left) - Hide action bar (method UIs).
Swipe down (from action bar or search bar grip) - Show search bar (method UIs).
Swipe up (from search bar or search bar grip on left) - Hide search bar (method UIs).
Click/tap action bar grip - Show/hide action bar.
Click/tap search bar grip - Show/hide search bar.
Swipe up (from action bar) - Hide action bar (method UIs).

Interaction Modes

Collection views typically need to support several modes of user interaction:

Navigate - A user would like to drill-down into a single object in the collection. This interaction needs to be extremely easy to do, but will result in a complete view update, so it should require a deliberate action from the user.
- Click/tap - Select the item
Manipulate - Edit one or more object properties for a single object. This will require a lock on the object. Feedback must be provided if the object can not be manipulated because the content is locked by another user, user is not authorized to manipulate the object/property, validation fails, or there was a system error while trying to update the object.
- Mouse hover - When the mouse hovers over an item, common actions such as rename, delete should display right-aligned within the hover area. An "orderable handle" should appear at the left-edge of the hover area to indicate if the object can be dragged to change its position within the collection.
- Swipe right - Display common actions such as rename, delete to right of hover area, similar to mouse hover. This is neccessary with touch devices that can not perform a mouse hover, but should also work when a mouse is available, for consistency. NOTE: Swipe right is only available when not in batch manipulation mode because it is used to exit batch manipulation mode.
- Double-click/tap - Select the item
Batch Manipulate - Select, order, delete and edit one or more object properties of many objects. Also, details about the selection and selected items may become available.
- Enter/Exit - Batch manipulation mode should require a deliberate entry and exit, due to the potentially large impact, and introduction of additional actions and controls (selection checkboxes). A checkbox list icon can be used for this purpose when a button area is available. Swiping from left to right over an object or the collection area can also enable the mode, and swiping from right to left will disable it. The gesture especially makes sense when the swipe may animate/introduce selection checkboxes on the left of each object in a vertical list. Horizontally-oriented views may want to support top-to-bottom swipe gestures instead.
- Click/tap - Once in batch mode, click will select/deselect instead of navigating.

Common Actions

All collection views should provide some common features that users will need and expect.

Selection

It should be possible to select and deselect items one at a time or in a group. Selected items should provide a visual indication that they are selected, typically with a highlighted background or border color.

Selected

.active-background - { background-color: #0088cc; } in default theme
.active-border - { border: 2px solid #0088cc; } in default theme

Active

Object is the primary/last selected item and may display additional information. For example, when an object is selected in a view, which has determined which object or collection to display in a child view.

.active-background - { background-color: #bbddff; } in default theme
.active-border - { border: 2px solid #bbddff; } in default theme

Hover

Object is ready to be engaged by the user. This is typically when the mouse is hovering over the object, or when the keyboard has been used to select an item, but it is not engaged yet (spacebar or enter).

.active-background - { background-color: #0088cc; } in default theme
.active-border - { border: 2px solid #0088cc; } in default theme

Focus

Object is engaged by the user. An operation is either being performed on the object or is awaiting additional input.

.active-background - { background-color: #0088cc; } in default theme
.active-border - { border: 2px solid #0088cc; } in default theme

Single Object Views

Action Bar

If a single-object view can be used to edit an object, the following actions will be displayed in the action bar.