I'm designing a online store in which the users could save their sizes in a database and when they want to buy something, we'll calc and display the size of this specific garment according to their measures.

So I thought in a section like the sketch below. Please, obviate any mistake of orthography, I'm afraid my english level is not very advanced...

  • The image of the left is a silhouette of a male/female body (according with the gender of the user).
  • When the user puts the mouse hover a list item, this part of the body will be highlighted in the image of the left.

enter image description here

When the user click a list item, a modal will be opened.

There are two ways of saving your sizes:

  • Measuring yourself
  • Entering the data of a garment you already have.

Lets see a sketch of the modal:

enter image description here

And if they choose the alternative method (pressing the Garment tab), will see the following:

enter image description here

I'm wondering if is user fiendly. If you have any idea to restructure it is always welcome. We focus on a minimalist design, so the structure have to be simpler/clearer as posible.

If you need more info, please, let me know and I'll edit the post. I have no problem to rewrite, or reexplain anything that has not been 100% clear.

1 Answer 1


Going with just your first mock-up is probably going to be your best bet (assuming those are text fields): ask for the user's measurements and provide them with good instructions on how to get them. The placeholder box on the left would be a good spot to load an instructional video (use JS to change videos for each location to measure, don't try and do a single video).

I'm a hobbyist seamstress (I'm smaller than average and have a difficult time finding clothes that fit properly), so there's a few things that you need to be aware of when fitting garments:

Garment measurements vs Body measurements

Taking the user's body measurements are always going to be the most accurate way to get clothes that fit. This is because of what's called ease. Garments rarely ever fit skin tight (unless we're talking about knits or swimwear). Depending on the style of garment, anywhere from 1 to 3 inches is typically added to the measurements of the person it is designed to fit. How much is added can depend on the type of garment (jackets have more than shirts), the weight of the fabric used (knits or spandex blends have less than wovens), or the garment's style (trousers have more than jeans). Also, some people like more or less ease in their garments than others (I like less).

If a user measures their garment, you won't really know what kind of garment they've measured or if they've chosen that particular size of garment because of their ease preferences, which can lead to incorrect sizing through your store.

You would have to have a massive amount of data regarding garment measurements for your 3rd mock-up to be useful to the user, unless you're banking on the user having purchased a garment through your store previously (if so, how will this help new customers?).

Provide good instructions for obtaining measurements

Photos/diagrams with instructions are good, but this is one of those times where I would really recommend doing videos. You may want to show how to measure on models with different body types (average, plus sized), since where a person stores their extra fat (some have it in their waistline, others in the hips/thighs) can make it difficult to measure the correct location.

Natural waistline vs waistband

Many people are not aware of this, but your natural waistline (the narrowest point on the torso, about 8" above the hips on an average woman) is not the same as the waist size for pants or skirts. These garments tend to sit below the natural waistline; how much below depends on the style of the garment. As a result, the waistband will be larger than the user's waist measurement (eg. years ago, I had a 24" natural waistline, but my jeans had a 27" waistband). The waistline measurement is more useful for fitting a shirt or dress than it does for skirts or pants.

You may wish to ask for an additional measurement that's about 2" below the navel to get a more reliable waistband measurement.

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.