What's the best way to show resize handles for objects

Question

I'm working on a web-based editor that lets people include shapes, images and different kind of objects on an interface. Considering this, they must be able to resize the objects, place them anywhere they want on the screen and save.

Each of the objects the user may add include all or some of the following options:

• Delete
• Rotate
• Stroke color / type
• Fill color
• Send to back / Send to front
• Object information
• Ability to resize

In the original design a toolbar containing these options is placed on the top part of the canvas where the person is working, and if he scrolls, the toolbar remains fixed. See the following example though the options are not the same...

What I would like to do is:

• Avoid using a fixed toolbar and bring the options closer to the object.
• Unclutter the interface considering we already have another toolbar.
• Enable the person to modify the size of the objects without difficulty.

So I came up with this:

and would like to know:

• your overall opinions.
• What do you think of the resizing handle? Some people at the company think it's bad not to have handles on the other corners... and I'm wondering how useful they are.

All of your comments and/or references will be appreciated.

Thanks!

Answer 1

I like the out of the box thinking. But established convention is often your friend in ux.

Having those handle bars in all corners can quickly become intrusive if multiple objects are selected.

Toolbar still is your best bet because there is tremendous benefit in having it in one fixed place from productivity perspective.

You can and should hide the toolbar when an object is not selected.

Your concern about proximity of object to toolbar is a valid one but it can be addressed by providing redundant contextual menu invoked by right click.

Answer 2

It’s a good thing to have needed controls nearby. It’s also a good thing to have controls always in the same place.

Your colleagues are probably right about the resize handle. Although mono-directional resize works well for a text edit box like the one I’m typing in now, it usually makes sense to choose which edge or corner remains unchanged – i.e. the opposite one works as an anchor – and to be able to resize just height or width. It‘s also often useful to keep the aspect ratio unchanged or to keep the resized box anchored in its center (vertical / horizontal / overall), both are frequently achieved with intransparent but standard modifier keys like Shift and Alt, but the latter could also be done with an actual modifiable anchor point. Also note, that even Mac OS now supports size dragging of windows at every edge and corner – after decades of complaints. Anyhow, if it’s just one handle the bottom right corner is the best place for it in a L→R T↓B context, i.e. top left is fixed.

Rotation is closely related to resizing. Some mouse UIs support planar object manipulation supporting both at the same time, e.g. with a tenth handle in a different color, which may be located at the geographic center or above the handle at the top middle. Others make it simple to switch modes (resize|rotate), e.g. by switching them when clicking a selected object again. You didn’t say whether rotation is limited to 90° steps which would afford a completely different UI than arbitrary angles. Mirroring (flip, turn) is also related.

You also didn’t mention repositioning, except for the z-axis which (in a 2.5D scenario like this) is just stacking order, i.e. depth index. All of these – and delete – deal with the outer properties of the box, i.e. how it interacts with other boxes or the canvas. This group of actions should be associated with the object in a consistent way and should work similar to each other.

Stroke and fill color, on the other hand, deal with the interior. Both groups should be clearly separated in a GUI. Inner content may be made accessible on double-click, for instance.

Finally, retrieving object information is a general function that probably applies to more elements in your application than just 2D boxes. It may be reasonable to put the toggle in a fixed place. Please consider interactive information where shown numeric dimensions can be altered by the user.

Answer 3

Taking into consideration that the "Photoshop" of the common man, MS Word, uses your first example then I would highly recommend just sticking with it. There will be a far smaller learning curve.

Yes, as a professional I understand that I can do everything I need with just one resize handle but I would guess that the average person is going to have a panic attack because they are not as tech-savvy.

Yes, I like the uncluttered interface but I think you are increasing the cognitive load for 99% of users.