Patterns
Zero Data State
First time use/zero state for a page
When the user lands on a page for the first time, and there is no content.
Examples:
Make Payment on L, M:
Make Payment on S:
Make Payment on XS:
When creating a widget on the online banking homepage, please use the zero state design @xs.
Zero state on tables
A list that doesn’t contain any items, or a search that doesn’t display any results.
Examples:
Errors
Unable to Load
If a view is not able to load data, display an error at the page or widget level.
Example:
Error message
Page-level errors are placed directly below the header at the top of the page. They may report a system or feature failure, or direct the user to attend to errors that are also identified at the field or control level.
Example:
If the form is very long – the error message can go directly above the buttons.
Example:
Field-level Errors
Field-level error states identify specific controls that have invalid input.
Example:
Forms
A form comprises of different form controls and introductory label for these form controls. The guidelines listed below are best practices for creating forms. They are not hard and fast rules, as each form may need to adapt a unique design.
Form Controls
Information on individual form controls can be found in the UI Elements section of the guide. Some examples of form controls are input fields, Drop Downs, Date Picker, Buttons, Toggles, Radio buttons & Check Boxes etc.
However, please note controls are designed to work with finger sizes on touch devices and, as a general rule, those controls do NOT change size by breakpoint. The only reason to use the smaller size of controls is to save space in a complex form.
Examples:M
XS
Fonts on a form
It is not recommended to change fonts sizes at different breakpoints in the design. The single exception is the main header on a page. This, however, is at the discretion of the designer. If there are changes to font sizes by breakpoint, typically the font size will increase to the next standard size. See Typography by Resolution for more information.
Input field widths
- Align fields to be the same widths whenever possible to make scanning easy for the user.
- Fields widths in responsive design are typically defined by the number of columns or percentage of page width.
- As the screen size reduces, the fields should wrap to the next line.
M
XS
Using placeholder information versus labels in fields
We use placeholder information to help give the user an idea of the format expected inside any given field. As soon as the user starts typing in the field, the placeholder information disappears. For this reason we do not rely on the placeholder information to help the user understand the information required in the field; the field label should provide that key information to the user.
Example:
Masking information:
Sensitive information is masked (or partially masked) using multiple letter x (e.g. xxx).
Example:
Grouping on forms
Information can be grouped using the following:
- Gray call-outs defined by the call-out component or by using 3px or 1px lines to separate the content. Please note that in simple forms at the XS breakpoint the pattern is that call-outs no longer show, so that max horizontal space can be preserved.
- If necessary, further grouping can be be accomplished with line separators.
- If there are multiple groupings on a page, use expand and collapse sections. More details below.
M
XS
Expand and collapse of sections
Complex forms can collapse information so that the user can focus on one section at a time. At the XS breakpoint it may be necessary to break the groupings into separate pages so that the user is not overwhelmed by the requested information. Only one grouping should be expanded at any time. If the user selects another grouping, the previous section should automatically collapse.
Additionally, infrequently used information or help information can also use an expand and collapse pattern.
Example:
Icons
Icons take the financial institution’s branding color unless the designer specifically states that the icon should take one of the fixed colors of #666666 or #333333. This depends on page hierarchy and how much attention the designer wants to bring the information the icon is conveying.
Tool tips
A tooltip provides the user a brief contextual explanation for a form element. Tooltips allow information to be provided optionally, at the time of need.
Use either a tooltip help icon or a text link that acts as a trigger point to open the tooltip. The help icon is usually placed to the right of the form label. A text link are usually placed to the right or bottom of the form element.
Examples:
Language Translation
Make sure the design will work with text of varying lengths. For example, Spanish text often takes up much more space than the same information does in English. In order to accommodate such variances by language:
- Place labels above fields at XS breakpoints (at larger breakpoints labels can be above OR to the right of the field, depending on space constrictions)
- Make sure text will wrap as the screen width reduces
- Define button width as “text” and add 20px of padding on the left and right
Accessibility:
When designing a form it is necessary to indicate the tabbing order of fields and information for screen readers to assist people with low or no vision.
Loading Screen
Page or Section Data Load
Display the processing spinner and "Loading..." if a page or part of a page, like a widget or table, will take longer than a couple of seconds to load.
Example:
Processing Feedback
Display the spinner and "Processing..." while submitting all forms (including forms shown in overlays). During a form's submission, disable its buttons to prevent inadvertent duplicate submissions. Once the process is complete, remove the processing feedback, display the appropriate messaging (success or error), and re-enable the buttons.
Examples:
L, M, S
XS
Saving
When something needs to be saved inline on a long form, use the small spinner animation, and text "Saving". Ensure the indicator displays in context, adjacent to the input that is being saved.
Examples:
