UX/UI Design Library

Usage rules for components

Accordions

Description

A way to categorize information, with the ability to show and hide sections. Accordions vertically stack information and designed primarily for blocks of text; however, it can also contain tables, lists, and other elements (on a case by case basis)

Usage rules

  • Teams can decide on the application-level whether multiple accordions can stay open at the same time or if only one accordion can open at a time.
  • Never put crucial information into an accordion.

Address validation modal

Description

Allows the user to compare two addresses; the one that they’ve just entered, and the system's recommendation. The address validator includes two choices for the user to pick from.

Usage rules

  • Allow the user to continue with the address they have entered if that is their preference.

Alerts

Description

Provides serious error or failure messages to the user.

Usage rules

  • Always place near the top of the page
  • First line (heading) is a short, plain-language statement of what has happened. The remaining text explains what action to take.
  • Always include the ‘alert’ icon

Badges

Description

Small status descriptors; typically contains a number or other short set of characters.

Usage rules

  • Do not mix and match between the light and regular coloured badges; choose one set per application
  • Do not exceed 20 characters
  • Badges are not clickable (i.e., they are not buttons)

Buttons

Description

Use WorksafeBC custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Usage Rules

  • Use no more than one primary button per page
  • Use secondary buttons if there is multiple actions
  • Never present a secondary without a primary
  • Primary buttons are solid, and secondary buttons are outlined
  • Action buttons should be labelled as actions (Ex: Report your payroll)
  • Button actions are labelled as sentence case
  • Buttons should be one line as possible
  • Default button size is medium
  • Small buttons can be used when inside tables
  • Large buttons can be used

Breadcrumbs

Description

Indicates the user’s location within the hierarchy of a website or application.

Usage rules

  • Use only if indicating more than 3 levels down a page.
  • Labels should match the name of the page and link to the page (in most cases)

Breadcrumbs

Description

Indicates the user’s location within the hierarchy of a website or application.

Usage rules

  • Use only if indicating more than 3 levels down a page.
  • Labels should match the name of the page and link to the page (in most cases)

Bulleted lists

Description

Used to make items stand out from a block of text (without explicitly stating the order of importance).

Usage rules

  • If a bullet is a complete sentence, then a period at the end is needed
  • If a bullet is not a complete sentence, then no period is needed
  • Always maintain the standard indent and spacing between bullets
  • Avoid nested lists (second level bullets) if possible; if needed speak to the UX team

Callout Box

Description

The callout box is a user-interface piece that presents contextual information appearing besides or below other content. The callout box summarizes content and displays it in a short digestible way.

Usage rules

  • Content should be kept short and to the point
  • Can have colors but only the pastel version of the palette
  • Defaults to silvergrey color

Cards

Description

A card is a flexible and extensible content container. It includes options for headings, images, paragraphs and buttons. Cards allow for a wide variety of content, contextual background colors, and display options.

Usage rules

  • Use primarily for landing pages and main pages
  • If using images, always use along with thge WSN image library
  • Image ratio is 4:3

Charts

Description

Charts are used for data visualization and for presenting statistics. These chart examples are all using the same library (amcharts). Charts can be customized but with the technical limitations provided by the charting framework.

Usage rules

  • Charts are subject to corporate design standards 

Checkbox

Description

A singular, or set of small, interactive boxes, for the user to ‘check’, indicating a selection has been made; used if more than one can be selected

Usage rules

  • Use vertically by default
  • Use horizontally only if having less than 3 items and in special cases
  • Checkbox should not have any selection by default

Colours

Description

Colour palette is the official color set to be used across all apps within WorkSafeBC. There are currently 5 color sets available.

Usage rules

  • Always use the warm grey palette
  • Traditional grayscale is an exception and requires a business reason and UX approval
  • Do not abuse red colours to emphasize error messages or negative information
  • The colours of all elements in the library are set and should not be changed. The colour palette is provided for information only and should not be needed by developers

Confirmation box

Description

Typically follows a “submit” action. A box at the end of an application, which provides the user important information surrounds the action(s) they just made.

Usage rules

  • Always include a heading inside the confirmation box with a clear statement of success or failure
  • Never change the color of the border in the confirmation box
  • Always include the confirmation number or a reference number to instill confidence
  • Ensure correct date format is used · e.g., Monday, January 1, 2020 at 2:45 p.m. (PT)

Data bar

Description

The data bar or "thumbstone" presents summarized data at the top of a page

Usage rules

  • Maximum number of columns is 6
  • Minimim number of columns is 2

Date picker and date range picker

Description

A control that allows the user to make a date selection from a calendar

Usage rules

  • If presenting a date range (e.g., from xx to yyy), use two separate date fields. Only use the single field date range if space is limited
  • Use the two-field date range as the default
  • Only use the one field date range if space is limited
  • Do not use a date picker if the date is likely to be too far back or into the future (e.g., within three to five years)

Disclaimer cox

Description

A container that includes a disclaimer and a checkbox. Allowing the user to make a conscious acknowledgment

Usage rules

  • Use at the bottom of the page and before a confirmation action.

Document block

Description

A block of content that highlights a document and descreibes it.

Usage rules

  • The styles where the name (and/or thumbnail) are clickable are the preferred options.
  • Options with the download link may be used on the advice of the UX team

Dropdown menu

Description

Use dropdown menu to navigate to a different screen on the same application. This menu is different from the select input.

Usage rules

  • Use as an optional control when showing multiple navigation choices

Error pages

Description

Error pages are displayed when the most common system errors occur (404, 400, 401, 403 and 500). They indicate the error code, the issue and provides the user with a solution to the problem or additional resources to deal with the issue.

Usage rules

  • The title should briefly describe the error and provide the error code (in brackets at the end)
  • The other text, should provide any further explanation, if needed, and tell the user what they need to do next. It may include additional links or references for the user to resolve the issue

Footer

Description

The default footer style is the fluid (100%) version. The footer is always part of all web templates used for WorkSafeBC apps.

Usage rules

  • On longer pages, the distance between the top of the blue curve to any other element should be at least 30px
  • The footer should never scroll above the bottom of the window (i.e., a user should never be able to see below the footer)
  • Always have the current year showing on the footer (preferably dynamic)

Form Fields

Description

Form fields allow users to enter text data into a UI. Form fields typically appear in forms and dialogs.

Usage rules

  • Form fields should have a descriptive error message associated with the label and input
  • Form fields should not include any default text except when a mask is applied to set expectations
  • The width of the select field should generally match the length of the longest item in the list
  • Form fields are usually laid out in a vertical, left-aligned column and the flow of the page is top to bottom, left to right
  • Users who prefer to use the keyboard in place of the mouse should be able to tab through all fields in the top to bottom, left to right order

Template layouts

Description

Templates are pre-built layouts to be used across all WorksafeBC apps. All templates are responsive by default and they all allow multiple configurations.

Usage rules

  • Always use one of the 3 provided options
  • Use the fixed template for narrow content
  • Use the fluid template to accomodate wider content blocks
  • Use the mixed template as a hybrid solution to accomodate both narrow and wide content blocks

Table - Striped

Description

Table striped is an opt-in table recommended for large data sets where fast scanning and scrolling are essential.

Usage rules

  • Use striped table for tables longer than 6 rows
  • Do not modify colors, fonts or spacing
  • Table stripped is expandable, additional functionality can be added

Table - Striped Bordered

Description

Striped bordered table is used as an optional alternative to the simple stripped table. It can be used interchangeably with other tables as per designer discretion.

Usage rules

  • RULESHERE
  • RULESHERE
  • RULESHERE

Table - Grid

Description

The table grid component is designed to handle small data sets with few rows and columns. There is no mandatory use for this table and it's usage depends on the context of the application.

Usage rules

  • RULESHERE
  • RULESHERE
  • RULESHERE

Headers

Description

The WorksafeBC web application headers are the standard for all web apps in worksafe BC and they come in 2 formats: full screen and fixed screen.

Usage rules

  • RULESHERE
  • RULESHERE
  • RULESHERE

Font Awesome

Description

Font awesome is an external, open source symbol font library containing a limited set of icons that may be used in various applications and cases, specially those cases with action items (print, save, view etc)

Usage rules

  • Font awesome is the default source for generic UI icons
  • Usage of icons in menus and items is optional
  • Icon selection requires marketing approval and it's usage is considered depending on the team

Progress Bars

Description

The progress bar is an element that provides a visual indication of progress. It also provides a description and an option to cancel

Usage rules

  • Percentage number should match the real loading amount 
  • Use only to load pages that usually take longer than 10+ seconds
  • Always use progress component along with a descriptive title
  • Always use progress component along with an option to cancel
  • Always provide contextual information about what's being processed
  • Always provide the ability to delete the uploaded file

Loading animation

Description

Loading animation is an indicator of an element or a page being loaded

Usage rules

  • Always horizontally centre on any given page or component (vertical alignment depends on the situation)
  • Use only if the time is beyond 2 seconds with internet connections of 1mb/second
  • This is used to explain a delay and give confidence to a user that progress is being made, so do not introduce delays in processing or displaying pages to the user in order to show the loading indicator
  • A progress bar should be used instead of a loading indicator when the application can give the user an accurate estimate of percent complete and the user would benefit from knowing this data.

Modals

Description

A modal window is a graphical control element subordinate to an application's main window. It creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it.

Usage rules

  • Should be used to interrupt someone’s attention with imperative information
  • Should always have a descriptive heading, but does not have to have instructional text (i.e., paragraph text)
  • A user should not be able to click and drag the modal
  • Click out of the modal to close
  • Modals are available in three sizes. Choose the smallest size that fits the content without making it feel cramped and allows for white space

Opacity

Description

Backdrops are designed to serve as a layer overlay on top of a screen or a component. Backdrops come in two colors with 95% of opacity. They are mainly used along with loaders, modals or sliding panels.

Usage rules

  • Black for overlays (components on top of the page)
  • White for loading
  • RULE3
  • RULE4
  • RULE5

Pagination

Description

Pagination is meant to divide a page or a table into discrete, numbered sections. Pagination are an important element in web application design. Especially in content heavy websites pagination is used to divide content and present in limited & digestible manner.

Usage rules

  • Always highlight the page you are in
  • Always provide an option to go to the first and last page
  • Always indicate how many pages are in total
  • Pagination is an option to infinite scroll

Progress bar

Description

The progress bar is an element that provides a visual indication of progress. It also provides a description and an option to cancel.

Usage rules

  • Always use progress component along with a descriptive title
  • Always use progress component along with an option to cancel
  • Always provide contextual information about what's being processed
  • Provide a secondary animation to show loading progress if loading will not be quick (e.g., more than 60 seconds) 

Radio Buttons

Description

Radio buttons are used in forms and applications for presenting multiple choices, but only allowing one.

Usage rules

  • Use vertically by default
  • Use horizontally only if having less than 3 items and in special cases

Search bar

Description

Search box is a combination of input field and submit button. The exception is the "Type-ahead Search bar" which reveals the results as the user types in.

Usage rules

  • ‘Lipstick’ search bar is the default
  • Use when there are other controls on the same line
  • ‘Lipstick compact’ search bar is used when space is limited
  • ‘Type-ahead’ search bar is only used when there is no need for a button to trigger a search
  • Make sure the context for the search is clear to the user (e.g., search forms, search employers etc.)

Select cards

Description

The select card is an element designed to provide the user with choices. These cards are typically laid out side by side.

Usage rules

  • A select card may or may not take the user to a new page
  • If including images, always include images from WorksafeBC image bank

Separators

Description

You can use horizontal (or vertical) lines to create any necessary visual dividers between related sections of content. Separators help users understand how content is organized by establishing a rhythm and hierarchy on a page. A separator is a thin, lightweight line that groups content in page layouts.

Usage rules

  • Orange line may be used in financials to signify a total
  • Are used as content separators only
  • Separators not to be used directly under the header or above the footer without the approval of the UX team

Side panel

Description

The side panel is screen overlay that swipes in from either the right or left side of the screen. It is triggered by a button or link and is used to reveal information or features that wouldn’t fit on the screen.

Usage rules

  • The side panel width is adjustable, but its height remains 100% (and sits on top of the header/footer)
  • The side panel is dismissible
  • Side panel can vertically scroll if needed

Stage bar

Description

A stage bar, different to progress bar or step bar, displays information about the status of a process happening outside of the application. For example, in the case of eCommerce, the stage bar would be used to show stages such as "order accepted, shipped, delivered".

Usage rules

  • Stage bars are for information only and not used for navigation
  • Stage bars indicate stage name and timestamp

Stepper

Description

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.

Usage rules

  • To ensure process are simple, there should not be any sub-steps. If however, a process cannot be simplified, the UX can advise on styles for sub-steps.
  • Need to establish the character limit before it wraps?
  • Stepper should allow the user to move backward in the process (if moving backward is a valid action)
  • If moving backward is not allowed and it is not obvious to a user why that would be, a hover can be added to explain this to a user
  • Always provide a prompt to the user if they are going to lose data by moving back
  • If a user may not be shown a step based on entries in earlier steps, this must be made obvious to the user through messaging or an alternate page in place of the real step

Table grid

Description

The table grid component is designed to handle small data sets with few rows and columns.

Usage rules

  • Must have a title in the header of the table
  • Use if you have 3-5 rows or columns
  • This grid is available in two colours
  • As there are no vertical separators between columns, allow sufficient padding between columns (i.e., xx px)

Table stripped

Description

Table striped is an opt-in table recommended for large data sets where fast scanning and scrolling are essential.

Usage rules

  • Do not modify colors, fonts, or spacing
  • Table stripped is expandable, additional functionality can be added
  • As there are no vertical separators between columns, allow sufficient padding between columns (i.e., xx px)

Tabs

Description

Striped bordered table is used as an optional alternative to the simple stripped table.

Usage rules

  • Tabs for desktop do not apply for mobile and the other way around.
  • Tab container should stay visible above the fold of the web page

Templates

Description

Tabs are used to nest content into more manageable groups. It is also a way to categorize data and information without having to display it all at once.

Usage rules

  • Always use one of the 3 provided options 
  • Use the fixed template for narrow content
  • Use the fluid template to accommodate wider content blocks
  • Use the mixed template as a hybrid solution to accommodate both narrow and wide content blocks

Toast notification

Description

Alerts about something that requires attention

Usage rules

  • Use for non-critical messages
  • Use only with approval of UX lead, Marketing, and Corporate Communications

Toggle buttons

Description

Toggle switches and toggle buttons are mainly used for changing the state of system functionalities and preferences. Toggles may replace two radio buttons or a single checkbox to allow users to choose between two opposing states or filter through various conditions.

Usage rules

  • Always use switches for "on" and "off" cases
  • Use toggle buttons as alternative to select menu or radio buttons when having two or three less than 4 short named choices

Tooltips

Description

Tooltips display informative text when users hover over an element. Tooltips are always paired nearby the element with which they are associated. Typically a question mark "?" beside an element that requires additional explanation.

Usage rules

  • Tooltips appear on click or hover and disappear when hover out or click elsewhere on the page
  • Tooltips only include short, descriptive text
  • Links in tooltips should be supported

Top navbar

Description

The top navbar is a sub-component of the header. It includes an array of horizontal links to other pages or sections within the application.

Usage rules

  • Number of links at the top should be at a minimum so that it doesn’t interfere with the logo
  • When resizing down, the top nav bar switches to a mobile menu

Typogaphy

Description

WorkSafeBC uses a modified Halis font as the official spec. This guide includes the main headings, body copy, links and default paragraphs.

Usage rules

  • H2 exception should be used rarely and only when the orange colour conflicts with the background or surrounding elements
  • Always use the fonts as-is, do not change character spacing
  • If using safe fonts only, always default to Verdana
  • Never change the font colors