Default input labels and text sizes

Question

Looking to get community feedback on a few small related form questions:

For standard forms:

How long should a standard text box input be? These text boxes would be for first and last name?

Should we use single or multiple text box(es) for specific value inputs like, Phone number, social security numbers, etc... ?

Would it be better to put multiple related input boxes on the same line or separate then vertically?

Example:

first name | last name

or

First name

Last name

Answer 1

In a survey of 56 high profile sign up forms that asked for first and last name, I found that:

• 30 had the last name under the first name
• 18 just asked for the full name in a single field
• 8 had last name to the right of the first name

However, although I don't have figures to back this up, I get the feeling the vertical arrangement is trending out, and if it does in fact have to be two fields, I would actually go with the horizontal arrangement. Especially if you are providing a form that also asks for address details, or other side-by-side information so that you can structurally layout the form in an address-like format for example.

If you don't really need to split first and last name - just use a single field.

Use flexible input fields for telephone number entry - but make sure it really is flexible!

As for the size of the fields - well that depends on the font, other fields and elements in the form, and probably a few other things besides - see the examples on the links provided and others on UX Matters. The length of the text box is not that important provided it is long enough.

Here's some nice example from foursquare and from Gist:

Answer 2

Read everything and anything by Luke Wroblewski:

http://www.lukew.com/

He has done and cites lots of research on forms. You can usually find an answer somewhere in there.

As for your questions:

How long should a standard text box input be?

As long as it needs to be and no longer. Add to that whatever makes sense aesthetically to help the form flow and not distract from the process of filling things out.

It's also nice when the size of the field helps

Should we use single or multiple text box(es) for specific value inputs like, Phone number, social security numbers, etc... ?

They are individual bits of data so should be in one field. Splitting them into multiple fields introduces frustration for users as they now need to tab while entering in the information.

Would it be better to put multiple related input boxes on the same line or separate then vertically?

Your specific example is name. Since most people write their name on one line, first then last, I'd say that's an example where having both fields on one line makes perfect sense.

Something like city, state pairs also tend to make sense on one line as well.

Answer 3

The terminology of "forename"/"firstname" and "surname" is itself flawed.

While many blended families use a hyphenated family name, such as Smith-Jones, there are some who just use both names separately, "Smith Jones" where both names are the family name.

Many european family names have multiple parts, such as "de Vere" and "van den Neiulaar". Sometimes these extras have important family history - for example, a prefix awarded by a king hundreds of years ago.

Side issue: I've capitalised these correctly for the people I'm referencing - "de" and "van den" don't get captial letters for some families, but do for others.

Conversely, many Asian cultures put the family name first, because the family is considered more important than the individual.

Conclusion: Prompt for the users entire name, not part of it - allow your users to enter their name as they use it.

If you need to know their family name, prompt for it separately.
If you need to know what they're called, prompt for it.

(I've quoted liberally from a previous answer of mine on stack overflow)