What is the best way to display properties on an editor?

Question

A little bit of context to make my self more clear. I am working on software tool that is meant for designing UIs. My next step is to create a properties area, where you edit the width/height, x/y, font colour, the action of the element, and other options.

I believe that the best way to do that is by grouping the different options to related tabs, for example one tab for Colour where you can set the different colours, one for size, one for other etc. (see picture below)

My manager on the other hand believes that this will make it slow and we should have all options together displayed in one tab. I managed to convince him that this is not a good approach. But his new suggestion was just create to tabs and split them to half. (see picture below)

I believe that the best approach is multiple tabs, grouping the different kind of options.

My question is am I right on this? if yes what other arguments could I use? if not, what would be a better approach?

Answer 1

My suggestions would be to keep two tabs horizontally. As already mentioned by @Pavel, vertical tabs are not good because it's difficult to read them.

• Create two tabs: Layout and Style. The layout contains the properties required for structure. The style will contain all the properties which change the appearance and style of given element.
• Group the properties together in a visually separated container (card for instance).
• Provide number inputs where a user needs to input the integers. Alternatively, provide sliders which can be used to update the values just by sliding left-right.
• Use different types of input elements to break the monotony and making the elements easily differentiable.

The reasons for this approach:

• Layout and Style segregate the properties at the very basic level. From a designer point of view, it will be easier for him to figure out what tab he should click or open to make the changes. For instance, if I have to change the layout then I will know which tab I need to choose. Fewer options are less confusing.
• Grouping is necessary to present the options clearly and separately.
• Using number inputs or sliders reduce user efforts for making any change or adjustments.

Answer 2

Tabs Location

The tabs on the side doesn't seem to look right, it might be better to put them back on top of the form.

Grouping

Any of the aforementioned groupings would be sufficient if it's consistent with what the properties are.

If the properties (and the actions to configure) are only size-related, putting them in the "Size" tab would work best.

Otherwise, if they are more general in nature, it might be better to create a separate tab for them, perhaps, reconsidering its name "Properties", since the controls that reside in all tabs are properties as well.