From 01dad912d6297cf2321ebfe42537c55c27ff44c5 Mon Sep 17 00:00:00 2001 From: "tom.yems" Date: Thu, 30 May 2024 16:07:13 +0100 Subject: [PATCH] Updates based on crit --- apps/docs/src/common/pages/patterns.tsx | 14 +-- ...ress-not-uk.tsx => address-outside-uk.tsx} | 22 ++--- .../country-list.tsx | 0 .../delivery-address.tsx} | 90 +++++++++---------- .../familiar-address.tsx | 41 ++++++--- .../record-given-address.tsx | 14 +-- 6 files changed, 100 insertions(+), 81 deletions(-) rename apps/docs/src/common/pages/patterns/{address-not-uk.tsx => address-outside-uk.tsx} (72%) rename apps/docs/src/common/pages/patterns/{address-not-uk => address-outside-uk}/country-list.tsx (100%) rename apps/docs/src/common/pages/patterns/{address-not-uk/valuable-delivery.tsx => address-outside-uk/delivery-address.tsx} (77%) rename apps/docs/src/common/pages/patterns/{address-not-uk => address-outside-uk}/familiar-address.tsx (79%) rename apps/docs/src/common/pages/patterns/{address-not-uk => address-outside-uk}/record-given-address.tsx (90%) diff --git a/apps/docs/src/common/pages/patterns.tsx b/apps/docs/src/common/pages/patterns.tsx index b673b9b7..98153c08 100644 --- a/apps/docs/src/common/pages/patterns.tsx +++ b/apps/docs/src/common/pages/patterns.tsx @@ -8,23 +8,23 @@ export const menu = ( Ask users for = ({ location }) => ( {subsection} {title} -

Ask for address in different ways depending on what the user needs to do. They might need to enter:

+

Ask for an address in different ways depending on what the user needs to do. They might need to enter an address:

The country index has specific information about addresses in certain countries.

@@ -46,16 +46,18 @@ const Page: FC = ({ location }) => (
  • how the address is used
  • how reliable the address needs to be
    • -
  • are there internal processes that can correct or validate addresses
    • +
  • if there are internal processes that can correct or validate addresses

Accessibility

-

Consider that users may need more than one method for capturing the information. What do they do if they hit a barrier?

+

Consider that users need more than one method for entering their address.

Help us improve these patterns

-

Asking for addresses not in the UK needs improving. We need evidence about:

+

Asking for addresses outside the UK needs improving. We need evidence about:

    -
  • +
  • standard address formats in different countries
    • +
  • the barriers users with low English confidence face
    • +
  • if images or visual information helps users to enter their address

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.

diff --git a/apps/docs/src/common/pages/patterns/address-not-uk/country-list.tsx b/apps/docs/src/common/pages/patterns/address-outside-uk/country-list.tsx similarity index 100% rename from apps/docs/src/common/pages/patterns/address-not-uk/country-list.tsx rename to apps/docs/src/common/pages/patterns/address-outside-uk/country-list.tsx diff --git a/apps/docs/src/common/pages/patterns/address-not-uk/valuable-delivery.tsx b/apps/docs/src/common/pages/patterns/address-outside-uk/delivery-address.tsx similarity index 77% rename from apps/docs/src/common/pages/patterns/address-not-uk/valuable-delivery.tsx rename to apps/docs/src/common/pages/patterns/address-outside-uk/delivery-address.tsx index 5d5c28dc..c152f88f 100644 --- a/apps/docs/src/common/pages/patterns/address-not-uk/valuable-delivery.tsx +++ b/apps/docs/src/common/pages/patterns/address-outside-uk/delivery-address.tsx @@ -5,7 +5,7 @@ import { A, DateInput, Details, Radios, TextInput, Select, Fieldset } from '@not import { menu } from '../../patterns'; export const title = 'Valuable delivery address'; -const description = 'How to ask users for a valuable delivery address not in the UK'; +const description = 'How to ask users for a valuable delivery address outside the UK'; const section = 'Patterns'; const subsection = 'Ask users for'; @@ -29,10 +29,10 @@ const Page: FC = ({ location }) => ( {title} -

Ask users to provide reliable addresses for a valuable delivery.

+

Ask users to provide reliable addresses to delivery something valuable.

When to use this pattern

-

This pattern is for services where the user has a barrier to completing the service if the address is incorrect.

+

This pattern is for services where the user has a barrier to completing the service if the address is incorrect. For example, not being able to receive an important document.

Consider if a process to correct the address after the user has entered it would resolve this barrier.

How it works

@@ -101,13 +101,13 @@ const Page: FC = ({ location }) => (

I cannot find the country in the list

-

Postcode

+

Postal code

-

Only ask for a postcode if you know the country uses them.

+

Only ask for a postal code if you know the country uses them.

Include an option for users to enter their address manually.

-

If possible, use the country specific word for the postcode, such as 'postal code', 'zipcode'. If not, use 'postal code'

+

If possible, use the country specific word for the postal code, such as 'postcode', 'zipcode', or 'Eircode'. If not, use 'postal code'. Check the country list.

= ({ location }) => (

Enter address manually

-

Postcode to town

+

Postal code to town

-

Some delivery companies have a defined list of towns or city for each postcode or country.

+

Some delivery companies have a defined list of towns or city for each postal code or country.

Only use if the spelling of the town or city impacts the user.

Allow users to:

    -
  • change the postcode
    • +
  • change the postal code
  • enter the full address manually.

For address lines 1 and 2 allow:

  • free text inputs
    • -
  • accented latin-based characters
    • +
  • letters a to z, lowercase, and uppercase, including accents (extended latin character set)
  • punctuation, such as full stops, commas, apostrophes, hypens, exclamation marks
  • a blank address line 2
@@ -140,13 +140,13 @@ const Page: FC = ({ location }) => (

If there is only one town or city:

-

Enter your home address

-

Postcode

-

9007 Change

+

What is your address?

+

Postal code

+

9007 Change

- Home address + Address } > @@ -162,7 +162,7 @@ const Page: FC = ({ location }) => (

Town or city

Oslo

- Check your postcode or enter your address manually. + Check your postal code or enter your address manually.

Country

Norway

@@ -171,12 +171,12 @@ const Page: FC = ({ location }) => (

If there are 2 to 10 towns or cities, use the Select component to allow the town or city to be selected. Show how many towns or cities are in the list.

-

Enter your home address

-

Postcode

-

9007 Change

+

What is your address?

+

Postal code

+

9007 Change

Home address +

Address

} > = ({ location }) => ( ]} />
- Check your postcode or enter your address manually. + Check your postal code or enter your address manually.

Country

@@ -221,12 +221,12 @@ const Page: FC = ({ location }) => (

If there are more than 10 towns or cities, use autosuggest to allow the town or city to be selected:

-

Enter your home address

-

Postcode

-

9007 Change

+

What is your address?

+

Postal code

+

9007 Change

Home address +

Address

} > = ({ location }) => ( name="town-city" />
- Check your postcode or enter your address manually. + Check your postal code or enter your address manually.

Country

Norway

-

Postcode to address

-

Sometimes there is a defined list of addresses for each postcode in a country.

-

Use when users are familiar with this use of postcodes.

+

Postal code to address

+

Sometimes there is a defined list of addresses for each postal code in a country.

+

Use when users are familiar with this use of postal code.

Allow users to:

  • select the address from an autosuggest
    • -
  • change the postcode
    • +
  • change the postal code
  • enter their address manually
= ({ location }) => (
- Enter your home address + What is your address? - }> + } + className="govuk-!-width-two-thirds"> Address line 1 - } + label="Address line 1" name="address-line-1" /> = ({ location }) => ( = ({ location }) => (

For address lines 1, 2 and town or city allow:

  • free text inputs
    • -
  • accented latin-based characters
    • +
  • letters a to z, lowercase, and uppercase, including accents (extended latin character set)
  • punctuation, such as full stops, commas, apostrophes, hypens, exclamation marks
  • numbers
  • up to 255 characters
    • @@ -148,14 +159,18 @@ const Page: FC = ({ location }) => (

    For postal code allow:

    • free text inputs
      • -
    • up to 10 characters
      • +
    • numbers (0 to 9)
      • +
    • letters A to Z (unaccented)
      • +
    • spaces
      • +
    • hyphens
      • +
    • up to 10 letters and numbers

    Accessibility

    Consider that users may need more than one method for capturing the information. What do they do if they hit a barrier?

    Research

    -

    Familiar address not in the UK is used by:

    +

    Familiar address outside the UK is used by:

    diff --git a/apps/docs/src/common/pages/patterns/address-not-uk/record-given-address.tsx b/apps/docs/src/common/pages/patterns/address-outside-uk/record-given-address.tsx similarity index 90% rename from apps/docs/src/common/pages/patterns/address-not-uk/record-given-address.tsx rename to apps/docs/src/common/pages/patterns/address-outside-uk/record-given-address.tsx index 8af033ab..7150656c 100644 --- a/apps/docs/src/common/pages/patterns/address-not-uk/record-given-address.tsx +++ b/apps/docs/src/common/pages/patterns/address-outside-uk/record-given-address.tsx @@ -5,7 +5,7 @@ import { A, DateInput, Details, Radios, TextInput, Select, Textarea, Fieldset } import { menu } from '../../patterns'; export const title = 'Record given address'; -const description = 'How to ask users for a given address not in the UK'; +const description = 'How to ask users for a given address outside the UK'; const section = 'Patterns'; const subsection = 'Ask users for'; @@ -32,7 +32,7 @@ const Page: FC = ({ location }) => (

    Ask users to enter an address that they have been given.

    When to use this pattern

    -

    This pattern is for internal services where both:

    +

    This pattern is for internal services where:

    • there is a need to record an address that is not verified
    • staff are given addresses to record
      • @@ -40,11 +40,13 @@ const Page: FC = ({ location }) => (

      How it works

      -

      Check whether there is a need to record the data in a structured format.

      +

      Check whether there is a need to record the data in a structured format. For example, the address may be recorded in a database that requires a particular format.

      Structured address lines

      -

      This structured format can be used to send letters with GOV.UK Notify. This is the maximum number of address lines GOV.UK Notify accepts. Ensure there is a process to handle with undeliverable letters.

      +

      This structured format can be used to send letters with GOV.UK Notify. This is the maximum number of address lines GOV.UK Notify accepts.

      + +

      Ensure there is a process to handle with undeliverable letters.

      = ({ location }) => (

      Allow:

        -
      • accented latin-based characters
        • +
      • letters a to z, lowercase, and uppercase, including accents (extended latin character set)
      • punctuation, such as full stops, commas, apostrophes, hypens, exclamation marks
      • numbers
      @@ -111,7 +113,7 @@ const Page: FC = ({ location }) => (

      Consider that users may need more than one method for capturing the information. What do they do if they hit a barrier?

      Research

      -

      Record a given address not in the UK is used by:

      +

      Record a given address outside the UK is used by:

      • an internal reporting service for operational Border Force officers