What is the best way to input cm of body measures?

Question

In my web application the user have to save their measures of the following parts of the body:

• Head
• Neck
• Chest
• Hip
• Feet

The value stored in the database could store two decimals too. So I thought in three different ways to ask for this:

---

Option 1: jquery-number-plugin.js

A text input which would auto-format the numbers entered, and supports float values.

You can check it out here: http://jsfiddle.net/7nuA6/3/embedded/result/

---

Option 2: Slider

A slider with a step of 0.5 cm. I would indicate the actual value, this feature is not included in the example. I will set the minimum and maximum value depending of the gender of the user, and the part body. I mean, the feet could be comprended comprised between 15 and 35 cm, for example.

You can check it out here: http://jsfiddle.net/8GNrd/7/embedded/result/

---

Option 3: Input type number

I think is the best option. It has two to arrows to add or substract the number, and you can type directly the value desired. The bad point is the browser support: http://caniuse.com/input-number

You can check it out here: http://jsfiddle.net/ZNKrb/66/embedded/result/

---

These are my questions:

1. What do you think is more user friendly?
2. Do you have another alternative with good browser support?
3. What do you think is the best default value to set after the user puts the measure?

---

EDIT:

Finally, I found this: http://bootsnipp.com/snippets/featured/buttons-minus-and-plus-in-input

Answer 1

For question 1, I would rule out option 2 (slider) because many people have problems with their body image. Sliding a slider to the right gives someone a perception that they are fat. People of extreme size (one way or the other) may have a greater sense that the website is not helping them, even more than if a list of sizes on a clothing site does not include theirs. With clothing sites, I am not sure if people deliberately visit the sites of stores that do not include their size, knowing that there are a great deal of clothing stores that would have their size. My point is, I think it's more of an issue for a generic body-measurement app which caters to all than for a clothing store that caters to a specific audience.

While I don't have sources on this question specifically, About Face 3 has a section on Ethical Interaction Design, which says this:

"Products shouldn't harm anyone, or given the complexities of life in the real world, should, at the very least, minimize harm."

The authors go on to list five types of harm: interpersonal, psychological, physical, environmental, and social/societal. Someone's size not being available in the slider may cause them interpersonal harm ("loss of dignity, insult, humiliation") and/or psychological harm ("confusion, discomfort, frustration, coercion, boredom"). The User Experience Professionals Association's Code of Conduct contains a similar "do no harm" statement.

(As a side note, Peter Morville and Louis Rosenfeld give a full chapter to ethics for information architects in Information Architecture for the World Wide Web.)

So that leaves your other two options.

I tested option 3 (input type: number) by entering a non-numeric value. The value stayed there. I think that would be more user-friendly if you would change the value when input focus is lost, if the control will allow it.

Option 1, I think, is too restrictive as it merely ignores non-numeric input and users can't see what they typed. Ideally, for me, non-numeric input would show up briefly on the screen and then be corrected to an appropriate default numeric value like zero. JohnGB's answer at Is it good practice to only accept numeric keystrokes in number-only fields? speaks to this.

Ideally, I'd pick another option between option 1 and option 3, as JohnGB's answer linked above would indicate. If that's not possible, I would pick option 1 or option 3 and just make sure the error messages (if 3 is chosen) make sense to users.

For question 2, alternatives with good browser support, that may be more of a development-related question. If no one here has an answer for it, Stack Overflow may be a better place to ask. An answer to this question at SO mentions a number polyfill shim for incompatible browsers: https://stackoverflow.com/questions/17976393/html5-input-type-number-not-working-in-firefox. (I haven't tested that solution myself.)

For question 3, I was considering recommending that you choose an "average" value. However, that would allow users to continue through the setup with a value that is probably incorrect. It also raises the body image / ethics concern again to me because of people's perceptions of what is average. 50% of people (minus those who actually are the average measurement - less likely in cm than in some other methods of clothing sizing) who are, by definition, bigger than the average person, run the risk of feeling insulted by that.

So with that in mind, I would recommend for question 3 that you pick an invalid value as a default. Put in zero, or leave it blank and show an error if users try to continue to the next screen. When users see this form for the first time, the fields should be blank. A negative value won't really make sense and will expose people too much to your web app's implementation model (see also Donald Norman, The Design of Everyday Things and Emotional Design). In either case, make it clear that users have to enter something correct, which ideally is accurate to them so that they will derive maximum benefit from the app, in order to continue.

Answer 2

For question 1.

In the slider when you keep a step of 0.5 cms it will be an extra effort for the user to set it at a specific value on the first attempt. Moreover you will have to keep sliders with different range configurations for all the five aspects you want to capture (which you will have to do as range validations for the other two options as well) but for a higher frequency of usage entering values would seem rather more user friendly than setting the slider.

Although options 1 and 3 are quite similar in nature, consider the fact that if you have to edit an entered value, since you have set the step value as 0.5 cms for option 3 it will be easier to manipulate data within that field (even using the up and down arrow keys) hence it gives you an edge in user experience over option 1.

For question 2. I'll agree with Matt, you can try stack overflow to get some really good solutions.

For question 3. The default value for the fields can be the ideal 0. Since if you keep a minimum, maximum or average value its highly likely that the user may feel that he/she is over/under sized since the brain automatically sets the value as reference (not consciously though). So using a 0 would keep it simple and while the user submits the record you can check for 0 value validations on the fields quite easily.