How to structure a form within a tab?

Question

I'm developing a online clothing store where the user could save their measures of the body in the cloud, so we'd calculate the size of the garment automatically.

Then I have a form to do this which contains:

• Paragrah explaining briefly the purpose of the form.
• Combo box to choose the body part to measure.
• Tab with two sections (measure yourself and garment I have - In garment I have the user can input the data of a garment that already has on which we rely to take the body measures- ).
• Button to submit the info.

The dilema is in the measure yourself section. Where I have the following:

• Photo of the part of the body (200x200px). If you click on the image, you cloud see it in a popup at 400x400.
• Brief explanation of how to measure this specific part of the body.
• A input number where the user will put the size.
• And finally, a select box where the user chooses the unit of length (inches or centimetres).

---

I though in this three different choices:

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

The third option looks great, but may be the information is a little piled.

What do you think is the best choice to structure the tab? Why? Do you have any alternative?

Answer 1

To be honest, you're probably overthinking this one. The general concept is pretty good, so minor tweaks like this aren't really ones to get bogged down with really. None are wrong.

I would say that you should use some labels above/against the text fields, so that probably makes the 3rd option move visually appealing (so the description text and the field labels don't end up being too close together).

I'd also suggest mocking up the designs using some actual images / text rather than placeholders and lorem ipsum. Once you have real data in there you may see the layout fits better than it does with empty wireframe content.

Answer 2

I totally agree with JonW's answer but have a small addition. Consider placing the form element to the top so the text can be longer than the image. As JonW stated, add a label for clarity besides or above it.