A library of reusable components, patterns, and examples that embrace modern product design practices. Additionally, a collection of in-house standards, guidelines, and principles for creating inclusive, user-friendly, and effective products and services.
From internal and external user testing having the field to enter their House Name/Number has been confusing users, they think they are entering their address manually.
What we need for the Design system is an example of the user flow for this interaction (how they enter their postcode, view possible addresses, and select their address) so that we can provide a consistent experience across our site as this is a common interaction. The proposal below would be to have this interaction split over 3 pages
They enter their postcode and click 'find address'
They view a list of possible addresses and select one from the list
Other websites use a dropdown that appears as the user types in their postcode with the list of options. This is what users said they would expect, however I wondered if this would cause issues for users using screen readers or who may have trouble if the options in the drop down change as they type. Showing a static list may prove a better experience overall.
Changes needed
Let's remove the house name field.
Change the flow to show a list of possible addresses to choose from. In this new flow they will 1. enter their postcode, 2. they be brought to a second screen that shows a list of addresses to choose from. 3. choose their address or if their address isn't listed they will select to enter their address manually
2a. Add a button beneath the postcode finder and above the 'enter address manually'
Postcode finder: The house name field confused some participants, they thought they were entering their address not looking it up. Users also would expect that if it was a postcode finder, as they typed a dropdown selector list of addresses would pop-up to choose from. Need further design specification.
From internal and external user testing having the field to enter their House Name/Number has been confusing users, they think they are entering their address manually.
What we need for the Design system is an example of the user flow for this interaction (how they enter their postcode, view possible addresses, and select their address) so that we can provide a consistent experience across our site as this is a common interaction. The proposal below would be to have this interaction split over 3 pages
Other websites use a dropdown that appears as the user types in their postcode with the list of options. This is what users said they would expect, however I wondered if this would cause issues for users using screen readers or who may have trouble if the options in the drop down change as they type. Showing a static list may prove a better experience overall.
Changes needed
2a. Add a button beneath the postcode finder and above the 'enter address manually'
2b.
Refer to Figma file for more details.
@EST-Karol and @lynsiepatient fyi
Solves this issue from this ticket: https://github.com/Energy-Saving-Trust/Design-System/issues/88
Postcode finder: The house name field confused some participants, they thought they were entering their address not looking it up. Users also would expect that if it was a postcode finder, as they typed a dropdown selector list of addresses would pop-up to choose from. Need further design specification.
However I would imagine we would rather solve this by having a two-step process. 1. they enter their postcode, 2. they are brought to a second screen that shows a list of addresses to choose from. (Refer to: https://find-energy-certificate.service.gov.uk/find-a-certificate/search-by-postcode and https://app.snugg.com/onboarding/find-property?postcode).