You can create custom templates for care plans in PKB to suit your patients unique needs. The PKB usability and design guidelines simplifies the process of customising your care plan and describes how to make sure your form is workable for all users.

Note: this customization is done by PKB staff. We will consult with you about care plan templates on an individual basis.

General principles

Accessibility

PKB complies with the WCAG AA standards. You can read more about it here. You have to make sure that your care plan forms are designed with these standards in mind, so that people with disabilities can use them.

• Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose

• Contrast: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following

  • Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.

• Non-text contrast: The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s)

  • User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

  • Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

• Test-spacing: In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property

  • Line height (line spacing) to at least 1.5 times the font size;

  • Spacing following paragraphs to at least 2 times the font size;

  • Letter spacing (tracking) to at least 0.12 times the font size;

  • Word spacing to at least 0.16 times the font size.

Colour

We do not recommend changing the use of colours from how it’s specified in the PKB colour guidelines. One of the most important usability principles is consistency. Every page in PKB should speak the same language with similar phrases, concepts, components and colours throughout the entire experience rather than have task-specific solutions. Patients should be able to recognise the layout and its elements and not have to wonder about their meaning or behaviour. Think about the traffic and how lost you would be if at a junction you suddenly met with a blue stop sign instead of the usual red.

Typography

• Section titles to use “H2” (24px)

• Sub-section titles to use “H3” (20px)

• General text to use “Body (paragraph)” (16px)

• Section and input description to use “Small-text” (14px)

  • Only use small-text for secondary section description. The main description of a section should use “Body (paragraph)”

Keep it short

The mathematician Blaise Pascal famously said: “I have made this longer than usual because I have not had time to make it shorter.” This principle applies to web forms as well as prose writing. Eliminating unnecessary fields requires more time on your side, but the reduced user effort and increased completion rates make it worthwhile. Every time you cut a field or question from the care plan template you increase the likelihood of a patient actually using it.

Group related elements

• Related elements should be closer to each other than unrelated elements

• Use sections - separated by bigger spacing or separators - to group a set of related input fields

• Avoid ambiguous spacing (certain elements - e.g. labels - are in even distance from related and unrelated elements)

• Labels should be close to the input fields

One column layout

• Have only one input field in a row

  1. Possible exceptions: logically related field e.g. date-time

• Labels should be immediately above the input field

• Place checkboxes and radios underneath each other

Sequencing

• Have the most important or frequently used sections and inputs first

Defaults

• Input fields are set to empty

  • Dropdowns are set to “Select”

• For submit forms

  • Radio buttons are empty

• For settings

  • Radio buttons are filled

Show all selection options if under 6

• Use dropdowns if there are more than 5 options

Use field length as an affordance

• Match fields to the size of the input (e.g. zip code, month selector)

Distinguish optional and required fields.

• Eliminate as many optional fields as possible. For the fields that truly are necessary, but only apply to a subset clearly label them as optional.

Explain input or formatting requirements.

• If a field requires a specific format or type of input, state the exact instructions above the field itself. The same applies to syntax rules such as punctuation or spacing for phone numbers.