New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addresses #31

Open
govuk-design-system opened this Issue Jan 12, 2018 · 4 comments

Comments

5 participants
@govuk-design-system
Copy link
Collaborator

govuk-design-system commented Jan 12, 2018

Ask users for addresses

Use this issue to discuss this pattern in the GOV.UK Design System.

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (In progress) Jan 12, 2018

@govuk-design-system govuk-design-system moved this from In progress to Published in GOV.UK Design System Community Backlog Jan 12, 2018

This was referenced Feb 20, 2018

@timpaul timpaul added the pattern label May 21, 2018

@dashouse

This comment has been minimized.

Copy link

dashouse commented Sep 7, 2018

For some time (pre Design System) our recommended multi-input pattern for entering an address has contained two inputs for "Building and street", with the second input having a visually hidden label (as well as visually hidden 1 of 2 and 2 of 2).

This second input is to support users that need to enter a Company name, building name, floor, department as well as their street address.

We are wondering if anyone who has tested this pattern has seen any issues with visually hiding the second label?

screen shot 2018-09-07 at 08 42 05

@nubz

This comment has been minimized.

Copy link

nubz commented Sep 17, 2018

I am struggling too with the hidden label concept - when there is an error in that field we are trying out error messages that reference Building and street (line 2 of 2) as the field descriptor in the message.

Also quite challenging is how to communicate that the second line is optional? (In our service line 1 and postcode are the only required fields).

@MahmoodAkhtar

This comment has been minimized.

Copy link

MahmoodAkhtar commented Nov 22, 2018

If the 2nd field in the address (address line 2) is an optional field then you could have "Optional" as hint text above it perhaps?

JSFiddle example

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented Jan 8, 2019

Dropbox Paper audit

The research below was taken from a Dropbox Paper document, which was reviewed and archived On 8 Jan 2019 by the Design System team.

The aim was to reduce the number of places containing guidance and code by:

  • migrating relevant, useful content into the Design System itself
  • recording important research findings in the community backlog
  • removing the original Dropbox Paper page

If you need to, you can see the original Dropbox Paper content in the internet archive.

Research

Open Address UK did some address entry user research  - qualitative testing (9 users) of free text box (which they describe as 'one single address field') against multiple fields. The results were mixed: some users preferred free text box, others preferred multiple fields. Users were faster with free text box, but ended up with more errors in the address. They made more mistakes to start with on multiple fields, corrected them as they moved address elements around, and ended up with fewer errors in the end.

The forms they used had some usability errors such as use of placeholders for example text, so those usability errors may have influenced the results.

Related links

http://www.formsthatwork.com/internationaladdresses
http://www.royalmail.com/personal/help-and-support/How-do-I-address-my-mail-correctly
http://www.uxmatters.com/mt/archives/2008/06/international-address-fields-in-web-forms.php
http://www.bitboost.com/ref/international-address-formats.html#Formats

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment