General Reporting Features in CERS

User Interface

Navigation and Menus

Navigation within CERS is designed to be user-friendly and intuitive, primarily relying on hyperlinks to drill down into further detail.

When a user navigates to a page, a navigation path or “breadcrumb” appears, showing the current location within the system and an icon to navigate back to the Home Page. Each item in the path is separated by a forward-slash (“/”), representing the path from the Home Page to the current page. In the following example, the user is on a screen presenting results for student responses. To return to the Home Page, the user can select the [Home icon] (shown in figure 1).

Figure 1. Home page icon

General Tools

In addition to the standard navigation, various tools are used throughout the site to search for, select, and display information.

Selection Tools

Drop-down Lists

Drop-down lists allow users to choose one item from a list. CERS uses multiple types of drop-down lists to present and organize information.

Basic Drop-down Lists

The basic drop-down list contains a short list of fixed information to allow easy and predictable navigation. Select the search field to access the list (figure 2).

Figure 2. Sample drop-down list

Drop-down List with Search

Some drop-down lists may have hundreds or thousands of items. In those cases, a search field allows users to type in a keyword to filter the list of items. The filtered list includes all items that contain the keyword, so a search term of “oak” would match “Oak Persimmon School,” “Elaenia Oak School,” and other schools with “oak” somewhere in the name (figure 3).

Figure 3. Sample drop-down list with search

Dependent Drop-down Lists

Dependent drop-down lists are two or more related drop-down lists where a value must be selected in the first drop-down list before the second drop-down list is selectable. In the following example (figure 4 and figure 5), the user must select a school name before selecting the grade.

Figure 4. Sample dependent drop-down list

Figure 5. Sample dependent drop-down list with selectable list

Live Search

Some input fields include “live search,” in which matching results are displayed as the user types. In the following example (figure 6), the value entered retrieves matches anywhere within the group name.

Figure 6. Sample live search

Context Menus

Context menus provide additional options for a button or icon (figure 7 and figure 8). For example, when users select the [Student Reports] button, a context menu pops up with the ability to filter by School Year, Assessment Type, and Subject, and sort by one of the Sort Order drop-down values (e.g., Student Name).

Figure 7. Sample context menu

When users select the context menu’s three-dot icon [] next to a student’s name, a small context menu displays with additional links specific to that student (Figure 14).

Figure 8. Sample context menu with drop-down list options shown

Buttons

Selectable Buttons

Selectable buttons may appear in different colors, depending on the purpose of the button. Typical buttons have a blue background and send or retrieve information when selected. If required information is missing, the button will be disabled, in which case it will not be selectable. To enable the button, provide the required information in the associated text field(s) or drop-down list(s). An example of a disabled button (greyed-out) and a selectable button (white) is shown in figure 9 and figure 10.

Figure 9. Sample selectable button disabled

Figure 10. Sample selectable button enabled

Toggle Buttons

Some values and data types can be displayed in different formats and view preferences. For these content types, there is a display toggle button for each option. Select the button associated with the preferred format or view preference. In the following examples shown in figure 11, the currently selected value is shown with either a gray or blue background.

Figure 11. Sample toggle buttons

Advanced Filters

Test results have an advanced filtering capability that uses a variant of toggle buttons to allow users to select what to display in a report. As with toggle buttons, select the value to display; selected values are shown with a blue background (figure 12).

Figure 12. Sample advanced filter

Display Tools

Column Ordering

Any tabular data containing columns a user can reorder will have a column ordering control. This allows the user to move any selected column left or right to reorder the columns as desired. Examples are shown in figure 13 and figure 14:

Figure 13. Column ordering control

In this example, if the user selects the [Academic Year] button and then selects the [Left Arrow] button twice, the tabular data will appear as shown in figure 14:

Figure 14. Column ordering control with change shown

Columns can also be reordered by simply dragging and dropping them with the mouse (select the column, hold, drag, and release).

Sorting

Tabular data are presented with column headers, and any sortable column displays both an up and down arrow. Select a column name to sort by that column and select it again to reverse the sort order. The currently sorted column displays either an up or down arrow indicating its sort order. In the following example, figure 15, the results are sorted in ascending order by the students’ last names.

Figure 15. Column sorted in ascending order

Expanding and Collapsing

Additional up and down arrow icons are provided to show/expand or hide/collapse results (figure 16). These icons are displayed when a page contains information that might be shown or hidden by default. For example, selecting the applicable icon with text (e.g., [Expand All]) expands all results for all hidden items. Selecting the icon with the arrow expands or collapses that item only.

Figure 16. [Expand] and [Collapse] arrow icons

Add and Remove Icons

Elements with a [Remove] “x” icon [] can be removed by selecting the icon. When it is possible to add elements to a list, the [Add] plus sign icon [ ] appears next to the list. Select the icon to add a new element to the list. Example icons are shown in figure 17.

Figure 17. Sample [Add] and [Remove] Icons

Informational Icons

Whenever an [Informational] lowercase-i icon [] is displayed, users can select it to display an explanation of the term it accompanies (figure 18). For example, when selecting the icon next to a table column, a pop-up bubble displays additional information.

Figure 18. Sample informational icon

Other Tools

Exporting and Downloading

Users may export certain reports to a file in comma-separated value (CSV) format by selecting the [Export CSV] button (figure 19).

Figure 19. [Export CSV] button

Some screens in the application allow users to download reports. Figure. Figure 20 shows an example of downloading a report to the user’s computer by selecting the Download Report Data menu option from the My Reports page.

Figure 20. Download Report Data option

The location of exported and downloaded files is dependent on the web browser used to access CERS. Please refer to the web browser’s user guide for more information.