barnardos / design-system

The website and components of the Design System
https://design-system.barnardos.org.uk/
MIT License
29 stars 4 forks source link

Add how to find an address #341

Open kelliedesigner opened 6 years ago

kelliedesigner commented 6 years ago

As a user of the Design System I want to know how to provide the ability to find an address So that there's consistency across products

Description

Links and resources

Acceptance Criteria

kelliedesigner commented 6 years ago

Home Office Design system pattern Github issue

screen shot 2018-10-02 at 11 39 23

include the option of adding the address manually on the first step (instead of the second step if the postcode isn't found) We found this to be a common issue with lots of new builds in landlord checking services

kelliedesigner commented 6 years ago

Gov.uk Design system pattern

screen-shot-2018-10-02-at-11 43 37

Use this component when you’re asking users for a UK address

When using this component, you should: provide the ability to enter an address manually allow postcodes to be in upper or lower case and with or without spaces

kelliedesigner commented 5 years ago

Key findings from: Why You Should Use a Text Area for Address Form Fields

  • Users come to a confusing stop when they encounter the “address line 2” field
  • The second address field also caused them to incorrectly split their input in the first address field
  • The second address field forces the user to type their address in the system’s preferred format, not the user’s
  • By using a single text area instead of two text fields, you’ll help users fill out the address field quicker

address-fields-comparison

kelliedesigner commented 5 years ago

A first iteration of this pattern has been published: https://design-system.barnardos.org.uk/patterns/gathering-information/#addresses

However more work is required to add detailed example implementations of each option, and to improve styling, for example the large spacing between the Postcode input and submit button on Address lookup may mean a bespoke component is required