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.


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.


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

  • I like your first suggestion, but concerning your second suggestion: I was hoping to steer clear of mathematical symbols/terminology as much as possible and also make it as unambiguous as possible. For instance, I'm afraid the "Area" label in combination with the squared symbol could still confuse people, into thinking they need to enter the total area size, for instance. On that note: I certainly want to prevent people from having to calculate the area size. I merely want them to have to think about the length of one side. Feb 21 '17 at 12:15
  • In a square the length of the side squared is the same as the area: 5 multiplied by 5 = 5² - I think you'll struggle to both remove ambiguity and steer clear of mathematical symbols. You could always reinforce the idea of a square using iconography Feb 21 '17 at 13:48
  • Are you suggesting that, in order to create a square 460 pixels wide, I calculate its area first? Seems like the opposite of "don't make me think." Feb 21 '17 at 15:40
  • @KenMohnkern, The OP was actively trying to get their users to think in squares - I was trying to help reinforce that using basic high-school mathematics; a square 460px wide would also be 460px². It was also the second of two suggestions I made. Feb 21 '17 at 15:46
  • @AndrewMartin - Gotcha. I was repeatedly misreading your example as [___]sq px, requiring the user to find the value of the square. Feb 21 '17 at 15:50

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .