User Controls

Cross Select

Cross Selects offer a user-friendly solution for inputs that require multiple selections. A user can add available options from the left to a set of selected options at the right. Each Cross Select has functionality to "Add", "Add All", "Remove", or "Remove All" which is set to each button"s title attribute for Section 508 accessibility. The display on the button uses the common UI symbols ">, >>, <, <<" respectively.

Cross Select User Control

Tabs

Presenting a persistent single-line row of tabs in a horizontal bar provides high-level navigation for the web site. The tab row spans across the entire width of the page using limited as well as short and predictable titles with the current selected tab clearly highlighted to maintain the metaphor of file folders as well as providing navigational context.

Tabs

Buttons

Buttons are constructed for maximum usability. They are a uniform size, color and reside in logical locations in proximity to their intended action. Button clicks result in an action that is indicated by the text on each button face (i.e., Submit, Reset, Next, etc.)

The browser"s back button is disabled in order to ensure stability of each web application. The user is warned before navigating away from any page using the browser"s back button so that data may be retained.

Search Buttons

Updatable tables only have the "Add" button, with no clear/reset button.

Add Button

Reset Buttons

Reset buttons return fields to the initial state when the page was loaded. If the page loaded with blank inputs, they will return to blank. If the page loaded with prepopulated information from the database or with hard-coded value attributes, inputs will "reset" to the original loaded information.

"Reset Page" will be used whenever the entire form is affected by the button.

Clear Buttons

Clear buttons delete all data from input fields leaving them blank, regardless of if they were prepopulated or not.

Clear buttons are generally paired with submit-type buttons. Clear buttons are always required in the following UI scenarios:

• Next to all general submit buttons.
• Next to all search submit buttons to clear the user entered search criteria.
• Next to all "Add" buttons whether they be to add an emphasis row to a data grid, or to add a fieldset of similar data (i.e., PE, Accreditation).

Note: The example below illustrates the Clear and Reset Page buttons on the Accreditation screen from Provider Enrollment. "Reset Page" resets the entire page to its initial load state. "Clear" removes all data from input fields within the containing fieldset.

Clear/Reset Page Buttons

Custom Buttons

Special buttons have been created for unique circumstances. "Previous" and "Next" are for overall application progressions (used in Provider Enrollment and some tabbed browsing progressions). An inline form search button has also been created for inline form search capabilities. This button comes after a text input field.

Inline Form Search Button

Previous/Next Buttons

Icons

Icons will be used to represent commonly used functions and user tools.

	Required Field
	New Window/Offsite Link
	Downloadable PDF
	Downloadable Excel Doc
	Downloadable Word Doc
	Print
	Font Size Up
	Font Size Down
	Audit Trail

Page Tools

A page tools area, located across from the page title, consolidates user functions based on availability. This section includes items like printing and text-scaling as applicable to the page content.

Page Tools

Access/Shortcut Keys

Access or shortcut keys are used to add additional keyboard functionality for power users as well as additional accessibility features for screen reader software and users who are unable to use a mouse. Key combinations of ALT + (for Windows users) or CONTROL + (for Mac users) are indicated by an underscore beneath the applicable letter in the control. For example, File would indicate an access key of ALT + F (or CONTROL + F) to activate the file menu without using the mouse. Access keys can also be employed to focus the user's cursor in a form field.