Crisalix 3D
Crisalix 3D (also known internally as Estetix) is patient management platform where HCPs can schedule appointments with their patients, generate 3Ds of their patient, configure their personal website and carry out videoconsultations amongst other important tasks.
Copy
Well written copy is essential for a good user experience. Take example from the Do's & Don'ts below when writing your copy.
Be clear and concise
Try to remove any unnecessary words or phrase. Avoid computer speak and system generated errors, and aim copy at humans ensuring copy is meaningful and guides the user towards their next step.
| Would you like to save your changes? | Save changes? |
| Upload three photos | Upload 3 photos |
| An authentication error has occured | Please enter your password |
Use the present tense
Write in present tense to make the copy simpler and more digestible. Avoid future tense.
| Video has been downloaded | Video downloaded |
| This will send you a notification | This sends you a notification |
Platform friendly
Use language that’s consistent with the user’s platform. Terms used when describing the interaction with a desktop app may not work on mobile platforms. Eg. for mobile device interactions:
| Click | Tap/press |
Easily translatable
Use simple and direct language to make content easy to understand, and easy to translate. 4 things to consider when writing for localisation:
- Word length
- Word order
- Grammatical gender
- Cultural differences
- Lay out the form in one column
- Use asterisks * to indicate obligatory fields
| iOS, macOS | -apple-system |
| Windows | Inter |
| Android | Inter |
| Linux | Inter |
| Fallback fonts | Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif |
Avoid widows and orphans
A widow is a short line or single word at the end of a paragraph. An orphan is a word or short line at the beginning or end of a column that is separated from the rest of the paragraph. Widows and Orphans create awkward rags, interrupt the reader’s eye and affect readability. They can be avoided by adjusting the type size, leading, measure, wordspacing, letterspacing or by entering manual line breaks.
Limit line length
Having the right amount of characters on each line is key to the readability of text. Limit line length on desktop to 65-75 characters.
Iconography
Iconography uses symbols to represent an object or an action. They should be used to provide clarity.
Grid
A 4 point grid system is used to ensure user interface layout consistency throughout the app. This simply means to use ‘increments of 4’ to size and space out the elements on a page. any defined height or width should be divisible by 4, including padding, margins and line heights.
Layout
The max widths of container elements.
$container-max-width-sm |
Max 576px |
$container-max-width-md |
Max 720px (tablets) |
$container-max-width-lg |
Max 960px |
$container-max-width-lg |
Max 1240px (desktop) |
Breakpoints
Breakpoints are the points at which the content adapts to provide the user best possible user experience and assure that the design and layout does not break.
$breakpoint-xs |
321px |
$breakpoint-sm |
544px |
$breakpoint-md |
868px |
$breakpoint-lg |
1200px |
$breakpoint-xl |
1300px |
States
The following are the general state styles that should be applied to all UI elements.
Surface/white containers
Enabled |
|
Hover |
Overlay: 8% primary-color |
Selected |
Overlay: 12% primary-color |
Primary containers
Enabled |
|
Hover |
Lighten primary-color by 2% |
Selected |
Lighten primary-color by 6% |
Modifiers
Use the following modifier classes on elements in order to alter their style.
| Text | .txt-center |
Center aligns text |
|---|---|---|
.txt-left |
Left aligns text | |
.txt-right |
Right aligns text | |
.txt-justify |
Justifies text | |
.uppercase |
Transforms all characters to uppercase | |
.lowercase |
Transforms all characters to lowercase | |
| Spacing | m[t,b,l,r]-[0–5] |
Adds margin, size 0 to 5, on a specific side (eg: mt-3) |
p[t,b,l,r]-[0–5] |
Adds padding, size 0 to 5, on a specific side (eg: pt-3) | |
| Visibility | .is-hidden |
Hides element |
.vis-hidden |
Adds visibility hidden | |
.hide-sm |
Hide up to $breakpoint-md |
|
.hide-md-up |
Hide from $breakpoint-md |
|
.hide-md-up |
Hide from $breakpoint-md |
|
.show-lg-up |
Show from $breakpoint-lg |
|
.hide-lg-up |
Hide from $breakpoint-lg |
Input
Input fields enable users to provide information.
Standard
Dropdown
A dropdown presents a list of options.
Standard
Checkbox
Checkboxes are used when there is a list of options and the user may select multiple options, including all or none.
Standard
Toggle
A checkbox can become a toggle button. Toggle values should be saved immediately upon switching.
Radio
Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option.
Standard
iOS style
No more than 3 options should be displayed when using this format.
Loader
Loaders are used when information takes an extended amount of time to process and appear on-screen, notifying users that loading is underway.
Standard
Progress
Tabs
Tabs are used to quickly navigate between views within the same context.
Standard
Colored
Block
Boxed content
Table
Table presents data sets in an easily scannable and comparable way. If data sets lead to a sublevel view, then the data shown in the first column of the table will be linked to it as shown in the example.
| Patient details | Type | Desired procedure | Confirmed date |
|---|---|---|---|
| Jenny | In-person | Chemical peel | 12-10-2021 |
| Sandra | In-person | Chemical peel | 12-10-2021 |
| Patricia | In-person | Chemical peel | 12-10-2021 |
| Julie | In-person | Chemical peel | 12-10-2021 |
Striped
| Patient details | Type | Desired procedure | Confirmed date |
|---|---|---|---|
| Jenny | In-person | Chemical peel | 12-10-2021 |
| Sandra | In-person | Chemical peel | 12-10-2021 |
| Patricia | In-person | Chemical peel | 12-10-2021 |
| Julie | In-person | Chemical peel | 12-10-2021 |
Tag
Tags are used for items that need to be labeled.
Form
Forms are used for submitting data. Wrap any Input, Dropdown, Checkbox or Radio button in .input-group to present them in a consistent manner throughout a form.
Range slider
Range sliders are used on web pages to allow the user to specify a numeric value that should not be less than a certain value and not greater than another given value. That is, it allows you to choose a value from a range represented as a slider.