Exit to UX Library

UX Interactions patterns for prototyping

Common Interaction design patterns, demos and snippets for WorksafeBC applications.

Why UX interactions

Because details matter and details make or break the designs: When designing web application products for desktop and mobile, the interaction part is key. It is challenging to communicate detailed, complex interaction patterns with static mocks or stiff prototypes. This is a solution to make UX prototypes more engaging, interactive and testable. All this while making design concepts more explicit for designers, developers and users. This is also a reference for best UX interaction practices.

You need this to start:

1. Grab the CSS library from CDN and the JS file (wsbc.css + wsbc.js)
2. Copy the interaction snippet and paste it into your project
3. You are done

Dependencies for the snippets to work


      <!--INCLUDE CSS along with FONTAWESOME/ MANDATORY-->
      <link rel="stylesheet" href="https://ux.online.dv.worksafebc.com/latest/wsbc.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Enable submit

Type anything to enable the button

When entering any character, the button will become active

Conditioned URL

Type any charater to go to different URL

On click of a button "go", if user types "worksafe", go to WorksafeBC.com, if user types "canada", go to canada.ca, else, show error line.

Toggle options - Simple

Click the button to enable the options

When clicking the toggle button, different options will pop up

How workers report a workplace injury or disease.

If you have a work-related injury or disease, we want to help you as soon as possible. Be sure to seek medical attention and report your injury to your employer. If you miss work or seek medical attention, be sure to contact us. We'll need some information from you to start your claim for services and benefits.

How employers report a workplace injury or disease.

If a person working for you has a work-related injury or disease and gets medical treatment from a doctor or other qualified practitioner, as the employer you must report the incident to us. We need to hear from you as soon as possible. Using our online tool is usually the fastest way to make your report.

Toggle options - Complex

Click the button to enable the options

When clicking the toggle button, different options will pop up

Open Modal

The button below opens a modal

Try it out

Wrong error message

Type the keyword "wrong" to enable the error message

When entering an invalid entry, the in-field error validation message will show up

Radio button options

Click any radio button to enable the div

When clicking radio A, show div A, radio B, show the div B

How workers report a workplace injury or disease

If you have a work-related injury or disease, we want to help you as soon as possible. Be sure to seek medical attention and report your injury to your employer. If you miss work or seek medical attention, be sure to contact us. We'll need some information from you to start your claim for services and benefits.

How employers report a workplace injury or disease

If a person working for you has a work-related injury or disease and gets medical treatment from a doctor or other qualified practitioner, as the employer you must report the incident to us. We need to hear from you as soon as possible. Using our online tool is usually the fastest way to make your report.

Select menu options

Select anything to show the list

When selecting item B from select menu, show a div and hide other

How workers report a workplace injury or disease

If you have a work-related injury or disease, we want to help you as soon as possible. Be sure to seek medical attention and report your injury to your employer. If you miss work or seek medical attention, be sure to contact us. We'll need some information from you to start your claim for services and benefits.

How employers report a workplace injury or disease

If a person working for you has a work-related injury or disease and gets medical treatment from a doctor or other qualified practitioner, as the employer you must report the incident to us. We need to hear from you as soon as possible. Using our online tool is usually the fastest way to make your report.

Content options

Click anything to reveal the content

When clicking the "Next" button, reveal next step's content.

Step 1

Prepare your documents

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.


Step 2

Enter your data

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Step 3

Submit your application

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


Sortable Table

Click to sort the column

When clicking on the specific column it will sort either in ascending order or descending order.

Invoice number
ID Number
Injured worker
ID Number
Injury type
ID Number
Role
ID Number
5435-3455 Jack Otto Third degree concussion Web Developer
4363-4634 John Walter Knee injury Designer
5435-3455 Jack Otto Finger injury Web Developer
5658-3455 Tim Turner Elbow injury Accountant
5658-3455 Tim Turner Brain injury Accountant