Understanding Application Layout and Interface

CAMP attempts to provide consistent experience across all pages. The standard design layout, navigation methods, action icons, and interaction elements are used where appropriate for simplicity and ease of use.

This page outlines the common elements used across most of the pages. Each application page has its own help page describing page-specific layout, navigation and content. See Working with CAMP section for help on individual application pages.

There are two ways to get to the page you may want to go.

  1. Using side menu bar
  2. Using “jump” tiles on the home page.

The application uses a progressive and responsive design in an attempt to accommodate various size of devices while maintaining a minimal level of content readability and ease of use. The information on various pages is organized into panels of information. The panels are displayed progressively. Each panel can be minimized, resized or expanded to full width of the available screen.

The header of each panel has following four options to manage the display of the panel.

Icon Action
Close the panel. To re-display the panel, select the menu item again.
Minimize the panel. Click on the panel title to display the content of the panel again.
Resize the panel width - toggle between two settings.
Size the panel to screen size of the device. The panel is shown on the screen. Other panels can be accessing by swiping or dragging the displayed panel.

In information pages to find out detailed information about one or more objects, such as capabilities, the page generally includes two ways to select objects.

  • Navigate the hierarchical view, organized by collections, domains and clusters. Select a collection to display the domain-cluster-object hierarchy for the collection. Drill down to select the objects.
  • Search from the list of objects available. Select the object(s) directly or use simple search. Search will find the objects with the text in their names.

All heat maps, dashboards and analytics charts provide a filter to select the data and display options. For heatmaps and dashboards, select the filter icon to open the filter page. For analytics charts, select the chart and filter page is displayed in the next panel.

Most filters are organized into four (4) sections.

Filter Section Purpose
Scope Filter Select the one or more objects for analysis or data visualization. Use the navigation tree, or list to select the objects.
Attribute Filter Select one of the associated properties to specify the type of records to include in the analysis.
Time Filter Select the snapshots or dates where applicable, to further select the records related to the selected timeframe.
Display Options Set the chart or display settings e.g. title, chart type etc.

Below is a list of commonly used action icons across pages. Click or touch the icon to perform an associated action. The icons specific to a page are explained on the respective help page.

Icon Action
Save and download any data visualization (heatmap, chart, roadmap etc.) as an image file. The image is saved in PNG format.
Open the data visualization (heatmap, chart, roadmap etc.) as an image in a new browser window.
Print the graphics.
Explains how to zoom in/out or navigate the map depending upon the touch or non-touch device is being used.
Click to view, add or edit the comments during assessments.
Many data grids provide additional data fields, not included in the default view. Click on this icon at the top of these data grids to drag a field and drop it between column headings of the data grid. Similarly, drag a column from the data grid and drop into the opened customization window to remove the column from the current display.
Adjust the chart width to fit the available space in the panel.
Display three (3) dashboard items in a row. The size of each item is adjusted to display three charts side-by-side.
Display two dashboard items side-by-side in a panel.
Display each dashboard item using the available width of the panel. Multiple charts will be stacked.
Toggle display of capability practices in the panel.
Toggle display of help tips in the panel
Print report in landscape format. Toggle between portrait and landscape modes.
Clone the existing data visualization graphics with the current settings and save for subsequent use. The cloned items will appear in the navigation panel.
The sharing symbol, identifying if the cloned item is shared with other users of the application.