I need a simple and intuitive control for editing rectangle borders.

At the moment I have the following:

enter image description here

At the left - preview box and current border selector at the same time. User can click on particular border to edit one (lower picture) or double-click on box to select all (upper picture). By default all borders are selected.

Other controls: color picker, style toggler, width and border radius.

But I think the control became busy and confusing for the average non-technical user.

Any suggestions or studies or articles on improving this and making it more compact.

  • Can you give us some bigger picture? I mean - is it a toolbar with a miniature representation of a rectangle placed somewhere else or is it the actual rectangle within some editable area (like a CAD app)? Is it necessary to provide numerical controls for the roundness or a slider would be fine? How big are the rectangles? Is it a desktop or touch interface (phone or tablet)? I have some idea, but need to know these first. Mar 26, 2013 at 17:16
  • @dominik-oslizlo This rectangle is just a preview, there is actual big rect on canvas that is not visible here. It is a desktop interface. Numerical inputs can be changed with dragging mouse up/down, no sliders required.
    – Dan Ban
    Mar 26, 2013 at 17:28

2 Answers 2


I think double clicking may be confusing, so I suggest a simpler solution instead. Clicking within the mini-rectangle on the toolbar would trigger selection of all borders:

enter image description here

I have also added some tooltips while hovering over the borders or the center of the rectangle. I don't think presenting the style of the borders within this mini-rectangle is a good idea - it will be visible in the canvas anyway, and presenting it on toolbar leads to clutter, methinks. Anyway - the one on the toolbar is just a simplification - in fact it is a square, so it does not reflect the actual shape (aspect ratio) of the rectangle.

Regarding tooltips - I think you should provide them for other tools as well. You can also consider adding a small triangle down next to style and color to indicate that these trigger a list of available options.

In the same time, you could consider providing some other control for the roundness, which - I believe - is more corner attribute than border attribute. Of course you could control both corners, but in this case what would happen if you change roundness while modifying right border and then switch to top border and modify it again? They share a corner, thus roundness of corners should be separated from border adjustments.

  • +1, Agree with double click confusion and no need to show the look of the borders in the little rectangle. Other controls that are shown on the right of the control show the state already. Mar 26, 2013 at 18:42

I would get rid of border selection entirely, and show border management controls above, to the left, to the right, and below the box for each respective border. This means that you don't have to make users hit a small target to select a border, and that you don't have to give each border affordance such that it looks 'clickable'.

I would also use text labels instead of the semi-conventional icons you've chosen.

If this becomes too busy as a design, I would look at perhaps withholding certain elements on the border controls until its 'segment' is clicked.

  • could you describe what is "border management" in more details?
    – Dan Ban
    Mar 29, 2013 at 14:26

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.