Introduction

Asking for information plays a key part in our customers’ experience with British Gas. All functional journeys include elements of data capture and asking a customer to make a choice. Grouping questions, information, and choices together in logical and relatable sections can make our experiences as intuitive as possible.

Framing your content

The lakeside type of the ns-landmark, is ideal for introducing and framing your pages. It is non-decorative, therefore reducing the distraction. It supports a sub-heading and heading, along with a single paragraph. You can use this to signpost the journey, and frame the context of the information you are asking the customer for.

Further research: We are currently researching the use of legends and labels as headings, with the view that you would not need to use an ns-landmark to start each page.

ns-form

The <ns-form> component is a wrapper used to contain all your form controls. It’s primary purpose within the design system is to manage the validations of your form controls. Semantically it sits at the top of the hierarchy.

ns-form-group

The <ns-form-group> component is an element that sits directly in an ns-form. We use the form-group to help group form controls such as inputs, radios, and checkboxes. Within ns-form-group there is a legend element - this can help describe the form controls and provide context to the customer.

It is unnecessary to use ns-form-group and legend when presenting the customer with a single input field relating to one piece of information.

Grouping your questions

As expressed in the journey patterns documentation we advise that you approach each functional journey in the same way - breaking down the journey into smaller sections, asking the customer a single question or group of questions at a time. The idea is to reduce the cognitive load and help a customer complete what they need to do as efficiently as possible.

Group by theme

Grouping questions together thematically can help a customer understand the context and objective of what you are asking.

Group by type of control

Radio buttons and checkboxes should be grouped in their own respective form-groups. The legend should be used to provide context to the choice(s) a customer is being asked to make. Each form control should use their own label as the answer.

Form inputs

The <ns-inputter> component is a multi-purpose wrapper component for displaying form controls such as text inputs, radio buttons, and checkboxes. The component has a number of features that allow for things such as validation, masking, and formatting.

Common information

The ns-inputter component is capable of supporting the following common types of information you might ask a customer for:

• Names
• Telephone numbers
• Email addresses

Complex information

Along with these, you can use a combination of validation, mask, and separator to ask the customer for more complex information such as:

• Meter reads
• Sort codes
• Reference numbers

Further research: We are currently developing pattern documentation for the use of these patterns, by doing this we look to ensure that there is a consistent approach to asking customers for this information across customer journeys.

Making choices

Radio buttons and checkboxes are common form control elements used to ask customers to make choices from a small list of options, or to answer simple yes/no questions, or to toggle a single option on or off.

For accessibility, the heading attribute found on the ns-inputter must be used to provide a <legend> to describe the options. These are usually in the form of a question - such as “Are you a British Gas customer?” or “Which British Gas services would you like to choose?“.

Radio buttons

Checkboxes