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:
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.
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.
These guidelines complements what is described in the GOA UI 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.