I'm trying to find the best pattern to use in a sales service flow where some employers will be using an app to sale products in local stores. They will keep in touch with many clients so they need to spend little time on feedback (it's an important issue here).

My problem came up trying to accomplish the best use in the below flow:

Client address is required, but the billing address may be different from the first option.

I've worked two alternatives, but I still have doubts about the best pattern:

two ways in which I might do this

Option 1 (with checkbox): unselected by default, when it was selected, appear the billing address with "X" to go back.

Option 2: I've defined a condition with radio buttons. It's much simpler than first but looks better!?

I'm a native Spanish speaker so the labels may need to be improved as well.

  • 2
    This is a pattern that's already been figured out by nearly every online retailer. I suggest looking through their solutions.
    – DA01
    Commented Sep 8, 2015 at 17:03

2 Answers 2


check out amazon.com shipping process. you fill out one address ( client address ) there is a check box that says bill to the same address, if the box is unchecked second address form appears.

  • thx! i saw that but I was wondering whether it's not an illogical use (show element when checkbox was unselected)?
    – JuanMa
    Commented Sep 8, 2015 at 17:09
  • i would hide it, until the box is checked off. better use of the space, clearly.
    – Stanley VM
    Commented Sep 8, 2015 at 17:12

Ship to a different address?

In the US the distinction is usually between "shipping" and "billing" addresses. I realize this might not map directly to your situation, but the concept might.

The pattern that is most common/simple/effective:

  • allows for the capture of one address (whichever address make most sense as default - in most scenarios it's billing, as this changes less frequently than shipping)
  • assumes that both addresses are the same
  • allows the user to input an alternative address

This is done with by using a checkbox to toggle a the second address form, which is hidden with javascript. The string that accompanies the checkbox usually says something like "Ship to a different address?"

This mockup shows what it looks like when the billing address is default.


download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.