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. – Dominik Oslizlo Mar 26 '13 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 '13 at 17:28

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.

| improve this answer | |
  • +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. – Anna Rouben Mar 26 '13 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.

| improve this answer | |
  • could you describe what is "border management" in more details? – Dan Ban Mar 29 '13 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.