The purpose of this document is to outline guidelines and templates for the user interface of PASIprep. These guidelines will change over time as new releases of PASIprep are developed.

Tool when designing and testing a PASIprep page: PASIprep UI Guidelines Checklist

PASIprep will follow these GOA UI Library guidelines to the best of its ability; this guidelines will state any deviations from the GOA guidelines, as well as define rules, look-and-feel and components that is not found in the GOA guidelines.

PASIprep will be built using Angular Material; for more information on Angular Material please see https://material.angularjs.org/latest/.

Angular Material is an implementation of Google's Material Design Guidelines: http://www.google.com/design/spec/material-design/introduction.html.

If a style/widget is not defined in the GOA UI Library, the styling of a widget should follow the Angular Material standard (or the Material Design guidelines if it's not defined in Angular Material) as much as possible, unless there is a reason for the customization.

If there are situations not covered by the GOA UI Library guidelines, (Angular) Material Design nor this UI guidelines, patterns/widgets from the myPass User Interface Guidelines can be used as possible options/ideas for addressing the situation.

The high-level goals and desired outcomes for PASIprep are:

• Accessible through touch and desktop devices
• Responsive layout to accommodate, at minimum, a tablet resolution in landscape orientation
• Consistent navigation patterns and layouts throughout the application
  • It is highly recommended that components are designed to be shared and reusable, especially if the component displays Business Objects / Data Elements that are utilized in multiple areas of the application.

Like myPass, PASIprep should follow the standard from Architecture Services and support the 'common'¹⁾ browsers' current version, and current version - 1²⁾.

For data display formats, please refer to the common Data Format Guidelines. The Data Format Guidelines should be followed on all screens; in an exception case where the screen deviates from the Data Format Guidelines, it should be clearly noted in the screen documentation how and why the format deviates from the guidelines.

It is recommended that the Page Layout & Template Guidelines be reviewed first to gain an understanding of the various screen layout components of PASIprep.

• PASIprep Page Layout Guidelines

• PASIprep Add Item Template
• PASIprep Edit Item Template
• PASIprep Error Page Template
• PASIprep List Items Template
• PASIprep Multi-Step Form Template
• PASIprep View Item Template

• Crosslinking Guidelines
• Navigation Between Bulk List of Items and Individual Item View
• PASIprep Button/Function Link Guidelines
• PASIprep Long Running Request Guidelines

• PASIprep Dialog - Alert/Confirmation/Information
• PASIprep Dialog - Custom
• PASIprep Dialog - Find
• PASIprep Dialog - Prompt

• PASIprep Error Display Guidelines

Note: Most widgets will follow the GOA UI Library's guidelines; the list of widgets here are PASIprep widgets that requires more details or slight deviation from the standard.

• PASIprep Audit History Grid
• PASIprep Business Object Grid
• PASIprep Card Group
• PASIprep Caution Item Card
• PASIprep Combobox / Dropdown
• PASIprep Date Input
• PASIprep Date Time Input
• PASIprep Field Value List / Form
• PASIprep Field/Value Pair
• PASIprep Input with Find Control
• PASIprep Stepper
• PASIprep Work Item Card

See PASIprep Common Controls

• PASIprep Analytics Guidelines

• PASIprep Writing Guidelines

These guidelines complements what is described in the GOA UI Library.

1. Text
   1. Sub-text font size: 12px
   2. Field Label font: bold version of the body font
   3. Heading 1 font: 1.6em bold
   4. Heading 2 font: 1.4em bold
   5. Heading 3 font: 1.33em bold
   6. Heading 4 font: 1.2em
   7. Heading 5 font: 1.0em bold
   8. Heading 6 font: 1.0em italic
2. Button/Link/Tap targets
   1. All 'clickable' controls should have a minimum height/width of 48dp (generally equivalent to 48 CSS px)
      1. Source (https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately, http://www.lukew.com/ff/entry.asp?1085)
   2. Less-frequently used controls can be reduced to 32px
   3. Adjacent controls should be spaced 2mm (~13px) apart.
3. Button/link styles
   1. Most buttons should use the “Flat” button style from Angular (https://material.angularjs.org/latest/demo/button) except the text is coloured in the GOA UI library secondary color (green)
      1. The exception to this rule is Primary action buttons (e.g. [Save]) - they should use the “Raised” style with the background coloured in the GOA green.
   2. Links should appear similar to “Flat” buttons (i.e. green text) except it should not have the same padding/margins as a button (to blend with surrounding text)
4. Icons

• PASIprep Icon Library

User should be able to get a permalink URL for any 'views' of PASIprep. The browser URL should always display the URL that leads to the view the user is currently viewing.