The following is a library of common UI & interaction patterns and widgets for myPass; it is best to use these patterns to maintain consistency of use throughout the application.

The current iteration of myPass has minimal number of pages and thus a hub-and-spoke structure is utilized. The Home page acts as a hub and user is encouraged to always start at the hub to carry out their task, and return to the hub when they are done with their task. This pattern offers new users more guidance in moving through the site. Navigation Pattern resources:

http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/

http://time-tripper.com/uipatterns/Hub_and_Spoke

Generally, clicking on a link on myPass should keep user in the same browser tab/window, unless stated otherwise by the design.

• If it is extremely important for the current view state of the page to be preserved when user click on a particular link, usage of a new tab/window is acceptable for that link
  • e.g. when user has partially completed a form but would like to access the Contact Us page to get Help Desk’s phone number for help, opening the “Contact Us” page in the same browser tab would cause the user to have lost their progress on the form. Thus, the Contact Us page should be opened in a new tab/window.
• Note: Whether a new tab/window is used should default to the user’s browser behavior.
• Note: downloading a file (e.g. a PDF) should default to the user’s browser behavior, which may result in opening of a new tab/window, depending how the browser handles it. myPass should not add any additional processing to change the browser’s behavior unless stated otherwise by the design.

To respect smaller screen sizes, page content should be simplified to only show essential information to the user – detailed information is disclosed only when user requests for it. This can be achieved with expander panels, or one-window drilldowns.

On larger screen sizes, more details can be exposed if space is available, and as screen size reduces, these details can be moved into drilldown panels/windows to leave only essential information on screen.

Progressive Disclosure resources:

http://uxpatterns.org/affordances/progressive-disclosure/

http://www.nngroup.com/articles/progressive-disclosure/

“Accessibility refers to the practice of making websites usable by people of all abilities and disabilities” (from: UXmastery) There are a few practices myPass can employ to make the site more accessible:

• For important statuses, indicators and messages, colour should not be the only distinguish feature
• All non-textual content (audio, video, images) should have text alternatives
  • Ensure the “alt” attribute is defined
• Ensure texts have high contrast ratios
• Define proper browser titles, h1 (page heading) and h2s (page subheading) for each page for screen readers
• Ensure the increase/decrease of browser font size does not ‘break’ content and layout
• Functionalities should be available from a keyboard
• Avoid abbreviations with no explanation of its meaning
• Text should not require reading ability above lower secondary education level
• Ensure consistent navigation and behavior across all pages
• Actively identify and prevent errors
• Follow HTML5 Standards
  • Use semantic structure when possible, or use ARIA roles (http://www.clarissapeterson.com/2012/11/html5-accessibility/)
  • Use label elements and required attribute on form elements

Accessibility resources:

http://www.w3.org/WAI/intro/wcag20

http://www.clarissapeterson.com/2012/11/html5-accessibility/

Employ graceful degradation for handling less capable devices and browsers:

• Site should be viewable and functional with degraded user experience when user disables certain features, such as cookies, plug-ins, images, etc
  • The only exception is disabling javascript – at minimum, user should be alerted that they need to enable javascript to use the site, though having site content at least viewable along with the alert would be preferred (even if it is not styled or laid out properly)

Resources:

http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/1/

Specific guidelines have been established when using the following types of controls within the myPass user interface:

• Grids
• Master-Detail Grids
• Forms
• Wizards
• Overlay Dialogs
• Confirmation (Yes/No) Dialogs
• Additional Info Boxes
• Expanders
• Service Error Displays