User Interface (UI) & User Experience (UX)

The following webCOMAND UI guidelines aim to provide an intuitive and consistent user experience within webCOMAND and the various apps.

UI Elements

Size

UI elements should typically be rectangular and at least 44x44 pixels whenever possible, to make them easy targets on a small touch screen. Exceptions for smaller sizes may be made for column headings like in Grid View and dense toolbars, like the Rich Text Editor.

Show/Hide

It should be possible to hide all UI elements from a button or menu in the "row" above, with the exception of the webCOMAND Header, which cannot be hidden because it provides:

a common visual anchor, so the user knows that they are in a webCOMAND app.
access to everything below, directly or indirectly.
direct access to critical core webCOMAND features, including the active app menu, launching apps, help, notifications and user information.

When possible, there should be a simple toggle option in the top-left or top-right above of a UI element to show/hide the element. The webCOMAND Header above has five good examples: the active app menu/sidebar on the left, and Apps, Help, Notifications and Users sidebar toggles on the right.

The cPath View right sidebar and variant sidebar toggles below are also good examples.

When it is not reasonable or worth the UI clutter to have a simple toggle, it may be tucked under a menu, such as a hamburger or three-dot menu in the upper-right or upper-left.

Expanders

Where it makes sense, it should be possible to reveal options otherwise only available in a menu (two clicks) so that they are directly available when there is room. If there is not enough room to at least some expanded options, it should be possible to expand as many as there is room for. If there is not enough room to expand options, the expand option can be hidden. If there are two menus that can expand into the same space and there is room to expand at least one, the most recently expanded options "win", causing the other to collapse as much as needed to reveal all options of the most recent expanded.

Object Toolbar - Hover

Object Toolbar - Expanded

Menus

Menus should extend down as far as required to show all content up to the the bottom of the browser window. They should only display a scrollbar if the content overflows past the bottom of the visible area. The z-index is of menus is above all other UI elements.

Sidebars

Sidebars should extend down the entire browser window or parent panel or element they are associated with. Elements in the sidebar should generally be arranged where the most-specific and/or commonly used groups/options come first.

Typically only one sidebar should be visible at once, but in the future we may want to make it possible to expand and pin multiple sidebars at once when there is enough vertical space (600px or more).

Sidebar Controls

Some sidebars may have controls off to the side, which can be used to show, hide and change which sidebar is visible. This makes sense when there is no toolbar above the sidebars, or there isn't enough room because it is utilized by other features.

The collection and object sidebar includes the following options (example to the right).

Toggle Sidebar Controls - Show/hide the sidebar controls and any active sidebar(s).
Field Options - Customize which fields are visible as columns (only in Grid View).
Info Sidebar - Show/hide the Info Sidebar.
Form View - Show/hide Form View within a sidebar, to edit the parent folder/object without having to switch to Form View or navigate up a level.
Versions Sidebar - Show/hide the Versions Sidebar.
Related Sidebar - Show/hide the Related Sidebar.
Edit Content Type - Show/hide the Content Type Sidebar, which provides quick access to edit the main Content Type fields, including: ? This option is only available if the user is authorized to edit the content type.
Edit Fields - Switch to the fields mode of the Content Type Editor of the content type of the object or collection filter. This option is only available if the user is authorized to edit the content type fields.
Edit cTemplates - Switch to the cTemplate mode of the Content Type Editor of the content type of the object or collection filter. This option is only available if the user is authorized to edit the content type cTemplates.
Edit Model - Switch to the Model mode of the Content Type Editor of the content type of the object or collection filter. This option is only available if the user is authorized to edit the content type model.

Panels

Title Bar

Panels should always have a title bar that includes:

Navigation - Typically just the back button and corresponding drop-down for:
- Back - Go to previous view.
- Forward - Go to previous view if we just went back.
- Up Level - Go up to parent of embedded object.
- Last - Go to item before the current item within the previous collection view (or parent field or primary folder).
- Next - Go to item after the current item within the previous collection view (or parent field or primary folder).
- Options - Popup to show/hide any of the above options in the Title Bar for direct access.
- History - List of View Info Object for each previous view.
View Info - One of the following options that indicate the current cPath.
- Object - Simple Icon and Summary with expander to switch to:
- Path Breadcrumbs - Icon and Summary for each:
  - Object
  - Folder+
  - Field
  - Filter
- Path Editor - Input that contains cQuery used to query object(s) in view.
Hamburger menu - Menu with all options and expander to reveal common options to left:
- Edit Path - Toggles View Info between Object/Path Breadcrumbs and Path Editor.
- View - Switch between available views.

Panel Toolbar

For existing functionality, see User Guide > User Interface > Panels # Toolbars.

The following updates that should be implemented in future releases.

Workflow Menu for Collection Views

The Workflow Menu is fairly straight forward in object views like Form View because they represent the current state and likely next action for a single object. The Workflow Menu is not so straightforward in collection view though, because you may be operating on more than one object, including specifically selected objects.

Collection views (both top level, and within an expanded reference or embedded field) should include the following options and functionality.

Collection Workflow Menu - This workflow menu is used to operate on changes to the collection's as a whole, such as re-ordered objects. It is not used to operate on the parent object of a collection, such as unapproved changes to a Folder Title. Instead, that approval is managed from the Form View sidebar, or by changing to Form View, where the modified fields are visible. It is also not used to operate on the individual objects in the collection. That is done from select mode. The Collection Workflow Menu should only be visible if there are unapproved changes to the collection as a whole AND not in Select Mode.
Select Mode - This should always be the first or second left-most option in the toolbar when it is available, only after the Collection Workflow Menu when it exists. It will toggle select mode, which reveals a drop-down arrow in the select mode toggle button and the ability to easily see and toggle the selection state of objects. For example, a column of checkboxes in List and Grid View, a checkbox in the top-left corner of Gallery View items, and a visual toggle state of objects in Map View. If a Collection Workflow Menu is visible to the left, it should animate to hidden, moving the Select Mode button to the left-most spot. Simultaneously, the Selection Workflow Menu should animate out just to the right of the Select Mode button (see next bullet for details).
Selection Workflow Menu - This is only visible to the right of the Select Mode button and drop-down arrow when in Select Mode. If no objects in the collection have unapproved changes, this menu will be collapsed to just the small grey button with chevron icon, which will expand to reveal disabled options, except those that are always allowed, like Preview/Publish. If there are any unsaved objects in the collection, this button should expand to reveal the Save or Save and Preview and become orange. Else if there are any unapproved changes, this button should expand to reveal the Approve or Approve and Preview and become green. If at least one object in the collection allows Preview/Publish than the Save & Preview/Approve & Publish option should be used instead of just Save/Approve.

Search

If the view is for a collection, a search input will be provided to search:

Repository - If the collection is the root folder, a full repository search will be performed.
Folder+ - If the collection is any other Folder+, a search will be performed on all objects in the folder or any of its subfolders recursively.
Content Type - If the collection is filtered by Content Type, a search will be performed on all objects of that type in the collection (not recursively).

Minimum Width & Scrollbars

Panels should be flexible and resizable down to 240px (320px - 44px sidebar plus some wiggle room) without a horizontal scrollbar necessary to see all of the UI Elements around the edges. The content area may have a horizontal scrollbar at any width, depending on the content. If the panel can be resized to narrower than 240px, a horizontal scrollbar may be required to see all of its UI Elements and content. 240px is also the size of some of the various smallest device screens, like smart watches.