Ask users for height and weight

[sarawilcox]

What

A pattern to help users give NHS services or tools their height and weight.

Examples

The NHS.UK Tools team has examples in the:

• heart age tool
• BMI calculator (currently being updated)

From the heart age tool

From the BMI calculator

Text in details: Your height is required to calculate your BMI.

[sarawilcox]

GOV.UK example from their text input component: https://design-system.service.gov.uk/components/text-input/. Asking for decimal numbers.

[StephenHill-NHSBSA]

As requested by @sarawilcox in Slack (and referenced in the Text Input component discussions), here is the code I used in my prototype to add prefixes:

1. Add a new file called _prefix.scss into your sass/components folder
2. Use the following code:

// ==========================================================================
// PREFIX FOR TEXT INPUTS
// ==========================================================================

.nhsuk-input__wrapper {
  display: flex;
}

.nhsuk-input__prefix,
.nhsuk-input__suffix {
@include nhsuk-font($size: 19);

box-sizing: border-box;
display: inline-block;
min-width: nhsuk-px-to-rem(40px);
height: 40px;
padding: nhsuk-spacing(1);
border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color;
background-color: $color_nhsuk-grey-4;

text-align: center;
@include mq($until: tablet) {
  line-height: 1.6;
}
white-space: nowrap;

// Emphasise non-editable status of prefixes and suffixes
cursor: default;

flex: 0 0 auto;

// Split prefix/suffix onto separate lines on narrow screens
@include mq($until: mobile) {
  display: block;
  height: 100%;
  white-space: normal;
}
}

.nhsuk-input__prefix {
@include mq($until: mobile) {
  border-bottom: 0;
}
@include mq($from: mobile) {
  border-right: 0;
}
}

// Split prefix/suffix onto separate lines on narrow screens
.nhsuk-input__suffix {
@include mq($until: mobile) {
  border-top: 0;
}
@include mq($from: mobile) {
  border-left: 0;
}
}

3. Import it into your main.scss file:

// Components that are not in the NHS.UK frontend library
@import 'components/prefix';

4. To add a prefix, use something like the following HTML:

<div class="nhsuk-input__wrapper">
  <div class="nhsuk-input__prefix" aria-hidden="true">£</div>
  <input class="nhsuk-input nhsuk-input--width-5" id="newSalaryAmount" name="newSalaryAmount" type="text" spellcheck="false">
</div>

[KatMitchell92]

Hi everyone, thanks for sharing the first iteration Sara.

We're currently in discussions with the Dev team about how we show the graph at the end of the journey, on the results page.

We're unable to show one axis in metric and the other in imperial (however one user suggested this morning that she would input her height in imperial and weight in metric).

We've been asked to look into designing an option that means a user can only enter both height and weight in metric or imperial and not mix it up.

With this in mind, we've created this version of the screen, with one option to switch at the top:

For now, it feels like the switch message is at the top of both boxes.

We also decided to include both inputs on the same screen as they sit together as a pair in the journey. They're both required for your BMI, unlike ethnicity, which is asked on the next screen.

We'll update on the final version when we're aware of the tech requirements for the graph. We're currently looking to understand what our default measure should be, with metric looking like an early favourite due to the service manual.

We also talked about instead of saying 'switch to metric' whether we should say 'switch to kilograms' 'switch to cm' but if we opt for the option above, this would probably confuse matters.

[vanessapereira-nhs]

My team is working on the BMI tool (same as Kat, who commented above) and we have updated the height and weight screen.

• Metric system by default. Even though the YouGov survey says that the majority of people still uses imperial (and that the metric system has been growing a lot in the younger generations), the team decided to follow the recommendation from NHS and use metric as default.

• Added the feature of changing systems to each fields instead of a single one: height and weight. The reason for this was that while doing usability tests, we came across some users that used different systems for both (for example, height in imperial and weight in metric)

--- Screenshot updated:

[StephenHill-NHSBSA]

My team is working on the BMI tool (same as Kat, who commented above) and we have updated the height and weight screen.

• Metric system by default. Even though the YouGov survey says that the majority of people still uses imperial (and that the metric system has been growing a lot in the younger generations), the team decided to follow the recommendation from NHS and use metric as default.
• Added the feature of changing systems to each fields instead of a single one: height and weight. The reason for this was that while doing usability tests, we came across some users that used different systems for both (for example, height in imperial and weight in metric)

--- Screenshot updated:

Just wondered if you'd tried it with the new suffixes e.g.

[Zeno001]

I suspect some will not know what 'imperial' means - its use seems unnecessary.

Why not just say:

Switch to feet and inches Switch to stones and pounds

[steph-w-nhs]

I suspect some will not know what 'imperial' means - its use seems unnecessary.

Why not just say:

Switch to feet and inches Switch to stones and pounds

Hiya, for MVP we are going with imperial/metric. We will be monitoring feedback on this, and experienced no confusion in user testing. For now, as the user will be looking to enter information into the boxes, with the measurements above the boxes, we think there's enough context to use the main action of 'switch' to find the opposite measurement.

[david-evans84-NHSD]

We're using similar in the GP registration service. We opted for 'Switch to [UNIT]' rather than 'Switch to imperial/metric' as we felt the units were more recognisable to users. My assumption would be older users might recognise both imperial/metric, but younger users might struggle with 'imperial'. Also, with the units above the data entry field the suffix are just extra noise on the page.

[Ahnji1]

The latest height and weight screens in the child BMI and Heart Age Tool have been divided into two screens. Because of the addition of prefixes, the interface became complicated with repeated texts. e.g. prefix, label, questions and H2 heading. It was not a good UX for users who use screen readers either. To resolve this issue and keep the screen accessible. the team updated the screen as follows:

1. One question per screen to make it clear what users are being asked.
2. Some users are not familiar to imperial or metric units. To make this button more intuitive, the copy was changed to "switch to centimetres" or "switch to feet and inches".
3. As two screens are very similar, heading and input field with suffix and a switching unit link-style button were used. To differentiate the two questions clearly, the questions were rephrased. For example, previous two questions were "What is the child’s height?" and "What is the child’s weight?" but they have been changed to "What is the child’s height? and How much do they weigh?".