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.

enter image description here

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.

enter image description here

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

enter image description here

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?


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

  • Number inputs should always fallback to normal text inputs. So even if the browser doesn't support it, a text input will be shown. Commented Apr 14, 2014 at 17:32

2 Answers 2


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.

  • Thanks for the complete response. Just another question: Now imagine that instead the centimeters, the user have to put the size (XL, S, M...) then the slider would be a good choice, or will be better a select dropdown? will have between 5 and 10 options. And will initialized in the middle of the bar. What do you think? Commented Apr 9, 2014 at 7:26
  • 1
    @JohnDoe - Some sites provide a list of buttons where the user just clicks or taps their size. I think that would be the preferable solution because it shows users everything without too much of a bias toward any particular size, and it also is good for making it clear what is in stock and what isn't because out-of-stock sizes are just grayed out. If you can't do that, I'd suggest the select dropdown. To me, sliders seem better-suited for numeric values, such as volume for a music player.
    – David
    Commented Apr 9, 2014 at 14:07
  • Thank you David! :) But think the sizes could be strings (XL, L, S, XXL...) or numbers too (36, 38, 40, 42...). Then do you hold your opinion against the slider? If so, how do you order the sizes, from the smallest to the bigest, or vice versa? Commented Apr 9, 2014 at 14:41
  • 1
    Right, that's what I meant. Sliders are more natural for numbers like 36, 38, 40, etc. The way that I would order the sizes is smallest to largest because that is conventional. It might be different outside the West, but in Western stores I've always seen it done this way. My first job was as a stock person in a clothing store, and one thing I noticed was that if the small sizes are in front all of the clothes of other sizes can be seen easily behind it. This wouldn't be true if the biggest clothes were in front. I'm also not sure how you'd address 1 size being out of stock with a slider.
    – David
    Commented Apr 9, 2014 at 16:07

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.

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.