Positioning of additional form entry fields to avoid natural flow of entry

Question

I'm re-engineering a registration form on a client's site that is primarily targeted at UK users only. The site provides a post-code look up for easy identification of the end user's postal address. However, not wanting to completely alienate users from outside of the UK, there is a need to gather the country of origin for these edge case users.

In this situation, these users would activate a check-box to reveal a drop-down field containing a list of countries.

Where best to position this check-box? We have considered two options. The first is to place this check-box directly under the text fields where the user enters their postcode (see below)

This feels the most natural but there is a slight concern that such positioning breaks up the natural flow of filling the form. Also, it may be an element of the form users will feel they have to enter - or at least invest some time in reading despite not being of concern to the majority of them.

The observant among you will have notice the 'help' bubble to the right hand side of the image. As the user traverses through the various sections of the form, these 'bubbles' are revealed to inform the user what is needed to be entered and to reassure them what the data is used for. The alternative position for the check box is in the top-right-hand corner of the section as detailed in the screen below

Whilst this solution solves our concern over flow of form entry, it raises some thoughts that it may well be missed by those who need it and, as such, frustrate the end user.

Are we being overly sensitive to have issues with the first option, or is the solution just creating additional more difficult problems?

Answer 1

I believe a slight variation on the first draft would work best:

^{download bmml source – Wireframes created with Balsamiq Mockups}

As there is no checkbox unticked, users won't just change it while in 'auto pilot' mode.

It also allows you to recover gracefully when someone does actually change it - you can pop up an overlay that allows to set the country, but then also type in the full address (because you'll need that I assume). I said overlay because that seems to be a very common way to deal with ambiguities in the House number / name + postcode scenario in the UK. Therefore you can use the same mechanism for both UK (choose from list) and foreign users (type in street/city/state).

By the way, I believe you can cut the information box significantly (see mock up). Removing the extra text that is already implied in the way the form itself is laid out, you can make it much quicker for the user to 'get'. You're also only communicating the actually valuable part.

Answer 2

I'd only go for the vertical layout, no horisontal form elements side by side or even worse, mixed layout.

Also the bubble could then be more visible + you have benefits on mobile platforms that are generally narrower.