How wide should input fields be?

Question

I'm trying to find a good default width for money input in my forms. If I assume that the amount people will put in is under 1 billion Euro, the width of the value, including decimal places and punctuation, would be around 100 pixels.

But how wide should the field at least be with regard to Fitts's law? How much additional space should I add to maximise clickability and keep the design minimal?

Also the user's expectation of how much they can put into the field plays an important role.

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

Answer 1

To supplement Matt's answer…

Are there other controls on the screen?

Research shows users have more confidence in a product—they believe the product is more accurate—when its visual elements are nicely aligned.

If there are multiple controls, or text boxes, sizing each one to fit its anticipated content (below, left) would be a poor choice. Look at the two options separately—so cover one side with your hand, then the other side.

As always, different design goals will be in tension. Make an appropriate compromise.

—

I hope that helps you move forward.

Answer 2

You have a few mixed concepts here. Fitts' law basically means that the wider the field is, the easier it is to hit, so option 3 would be the winner in that regard. You're rightly trying to design the field length to reflect the expected entry so option 1 would win in that case.

You say you “assume that the amount people will put in is under 1 billion Euro”. What are you basing that assumption on? If the numbers are likely to always be that large then option 2 is probably a good fit. If the numbers are likely to be smaller in most cases but occasionally reach 1 billion then option 1 is the better choice.

In summary:

1. If numbers are generally smaller, but can reach a billion = option 1
2. If numbers are always close to a billion = option 2
3. Fitt's law only = option 3

For further reading Baymard have a good article on form field lengths

On another note, the alignment of your fields is not recommended. Labels above the fields or both label and field aligned left are both superior to the layout in your sketch.

Answer 3

Do you think the widest fields could lead to errors if the input is expected to be lower?

Think about the tracking of the labels and the way the users will tend to fill out this form. Will they use the keyboard tab? Or maybe they'll go for the cursor selection? Perhaps, making the fields wider isn't helping at all to make them easier to be clicked.

I have a similar problem, about long labeling that exceeds the field width: "What's the best way to show form labels that are longer than the corresponding fields (which require a short input)?"

Answer 4

A minimalist textfield without a visual border could work, depending on your design.