How would you signify that a number entered represents the length of the sides of a square?

Question

For a web application I'm creating, users will be able to generate square-shaped images of sizes within some range (say from 50 x 50px to 500 x 500px).

Since the resulting image will always be a square, I basically only need one input field (perhaps a number field, or a slider), to signify the length of one (or any, for that matter) side of the resulting image.

How would you, most succinctly, yet effectively, show that the number the user enters represents the length of one side and that it will always result in a square-shaped image?

---

I was thinking maybe something like this example jsfiddle. Perhaps you can think of something even more concise, but with the ability for a little more precision, as well.

I could add an input field, for instance, or make the numeric values editable, as well. I'm just curious if you have anything to add to this, or something completely different, altogether.

Answer 1

In the web it is common the use of width and height to indicate the size of an element, so I would stick to those. You could:

• indicate only one (width or height)

• indicate both

If you only indicate one some users might look for the other and then realise it is a square, so the height is the same as the width and that is why there is no height to enter (I'm making emphasis in the "process").

If you indicate both there is no "missing input". In this case, you could:

• use two inputs where both can be modified. When one changes manually the other adapts automatically. Some users might want to modify only one and prevent the system from changing the other automatically.

• use two inputs where only one can be modified. This might make some users search for the way to enable the disabled one.

• use one input that indicates both options. In the label both width and height appear so it is basically one input for both.

I generally prefer to give both a number input to enter a number with the keyboard and a slider for the mouse.

Answer 2

This is a linguistic issue that could be solved by simply asking your users to input the "length of sides".

However, you could make it less confusing by asking for 'area' instead and offering a prompt that includes the mathematical 'squared' marker:

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