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.
<!--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">
When entering any character, the button will become active
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.
When clicking the toggle button, different options will pop up
When clicking the toggle button, different options will pop up
Try it out
When entering an invalid entry, the in-field error validation message will show up
When clicking radio A, show div A, radio B, show the div B
When selecting item B from select menu, show a div and hide other
When clicking the "Next" button, reveal next step's content.
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 |