0

I have a form that allows the user to input their geographic origin. The origin is broken down into 4 specific categories: City, State, Province, Country. The province input field would apply more specifically to those outside the US. So for example most people that live in the United States would enter their city, state, and country vs. someone from the UK would enter only their city, province, and country.

The design challenge I'm facing is displaying one form that's applicable to both but showing only what's necessary to that particular user. I already have my validations setup where if a city is entered a province or state is required (a country is required at minimum).

What I'm currently thinking is having the form show as follows:

As far as an initial layout

enter image description here

If the user checks Non U.S. Resident? then the second input form would dynamically change to this:

enter image description here

Is there a better way to accomplish this that I'm not aware of in regards to input pairing, arrangement, or a different layout for that matter? My only concern is the width of the Country input field. Should I use a form this long for something that requires a mid-level range of characters (10-20)? I'm open to any suggestions.

Improve this question
2
  • 3
    Do they have to be free text fields? And do you have to be able to separate state from province? If you have a select boxes available countries then you can use that to assume whether the state field is US or not- and then you can make the province box simply say "State/Province". Maybe it's a personal thing, but I find that being from the UK and being bundled in with everyone as "non-US" is kinda alienating.
    – Matt Fletcher
    Commented Oct 26, 2014 at 17:44
  • I think you were definitely onto something as far as suggesting to provide one input box for both "State/Province". As far as feeling alienated that's completely understandable. I'm creating an app that will initially be U.S. based but its good to know things like that so I can make alternations and not even include the checkbox at all now. Thanks.
    – Carl Edwards
    Commented Oct 28, 2014 at 21:07

2 Answers 2

Reset to default
1

EDIT: I realized that my answer is much like Stephen Keable's. Don't know how I missed his!

Will you only have users from US and UK? I'm from Sweden and my address neither contain a province nor a state.

If this is a webform you could do a geo IP detection to detect the country and then use this information to automatically change the form. If for some reason you cannot detect the country (or detect the wrong country) the user can select the right county from a dropdown list.

Address form

Another idea could be to use fields like "Address field 1" and "Address field 2" and let the user decide how much information he/she thinks is necessary.

Improve this answer
2
  • The problem with @StephenKeable’s approach is that postal addresses have a conventional top-to-bottom layout with decreasing specificity. If you deviate from that you may confuse your users.
    – Crissov
    Commented Oct 29, 2014 at 21:24
  • I agree. It's too bad though, a bottom-to-top approach could be really useful in this types of situations.
    – bjornlof
    Commented Oct 30, 2014 at 9:01
0

Rather than using the Checkbox to decide, could you perhaps initially show just a country drop down.

Which after selecting shows the other fields and appropriate labels for the selected country.

Try this fiddle for an example

You could even pre select the country option based on IP address (with ability to override).

I would also recommend using drop downs for state/county/province where you can too.

Improve this answer

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.