How to format 'Same as Street Address'

Question

On the left I have the Street Address details, on the right are the Postal Address. (This is not for shipping but identifying a place for a technician to visit) Of course, the Postal Address has the checkbox for 'Same as Street Address'.

My way of thinking says:

1. Complete the Street Address Details
2. If the Postal Address of this customer are the same, check the box and the Postal Address fields become greyed out then if the Postal Address needs editing, uncheck the box, the fields are no longer greyed out, the details remain, but can be edited.

A developer I work with suggest the Postal fields should not be greyed out and should just be copied across.

Which is right? Is there a better suggestion?

Answer 1

I feel great resistance towards copying the values across. Somehow it seems to conflict with the checkbox that says they are the same.

Possibly because when these fields get a value even when the checkbox is checked, I'd feel the urge urge to check that they actually do hold the same values. And I would feel that urge even if the fields are read only.

I'd say that by greying them out and leaving them without values when the checkbox is checked, you lessen my cognitive burden.

I'd start with the checkbox checked and the fields without value. When the checkbox is unchecked, still leave the values empty. When someone want to enter a different address it is not likely to be the same is it... When the checkbox is checked while there are values in the fields, remove those values from sight, though you might retain then somewhere in case the checkbox is checked again so these values don't have to be re-entered.

Answer 2

Although both solutions are fine (greying out fields vs. duplicating values), I prefer the former.

Is this a development constraint? I know that with some platforms, disabling fields on page load will prevent their values from being submitted even after they're enabled with JavaScript.

Another option would be to hide the entire Postal Address fieldset, and show it when the user unchecks the "Same as Street Address" checkbox.

Answer 3

It seems that you are doing 2 different things with the "same as street address" checkbox. That is usually an indication of an issue. I think you should consider one of two options:

1. Keep the "Same as street address" checkbox, and when it is checked, hide the postal address, because you have identified it to be the same as the street address. Use the same address reference for both.

2. Change the checkbox to a button saying "Copy street address to postal address" (or something), and when pressed, this copies the existing street address into the postal address, but leaves it open to editing.

Answer 4

I would suggest copy paste the same, just because it would be crystal clear for the end user that both the address are same!. Coloring the same may be mis understood for a wrong validation message (possibly) or something else by end user. (Am assuming graying is just colouring and not making box readonly).

As @marjan says take care of the validation part.

Answer 5

I have recently tested a form where the developer copied the values when you check the box. The issue I ran into was that if I went back to change the original address, I had to un-check and re-check the box to update the other set of values. Definitely not helpful. If you go this route, be sure the field values stay in sync.

To grey out fields, buttons, and other functionality that becomes out of context is a commonly understood paradigm, and in my opinion the better option. It does, however, need to suspend the functionality as well as changing the color contrast of the controls.

As an additional option, you can simply display the street address fields and supply a button to access the postal address fields. This way, if they are the same, the user does not even have to stop and figure it out. If I remember right, amazon does something along those lines if you want to ship your purchase to an address different from your billing address.

Answer 6

I have the same problem and started out with the same approach as you did - checkbox to make the address the same and then greyed out fields.

However, I had two issues with this approach:

1) Users might want to copy an address just to get the same place and zipcode, then edit street and name. This would require them to check, then uncheck the box and the values should not be cleared.

2) In our process there are four different addresses, all of which can be the same - or not. (they may even be from a different country - don't ask for the headache that gives me...). Here, checkboxes are problematic for these mutually exclusive source addresses. Instead I would need use address X radios and a type new address radio to undo any selection The latter bugs me. It feels like baggage.

This brought me to consider a different solution: Instead of checkboxes or radios I currently use buttons to trigger a copy action. Fields start editable and remain so the whole time. The button is basically some sort of auto-fill to help speed up the process. Of course, if the user edits the data after copying, a second validation becomes necessary. Also, the copied address is not tied to the original one, so changes in one address do not affect the other (which might be a requirement in some cases).

However, depending on the nature of the address-input process this might be an alternative that is worth considering.