Common Controls First

Consider which controls the majority of users are going to use, and design your interface to always show those controls first. There are two ways to ensure common controls are shown first:

• Order common controls first in groupings.
• Require a secondary action to access uncommon controls.

For interfaces that have relatively few controls, grouping common controls first is usually sufficient. However, when there’s an abundance of controls it can be overwhelming, so it’s more beneficial to show only the common controls by default. Hide the uncommon or advanced controls behind an action that the user needs to take to expose those controls. That action can either be a foldout (a temporary change to the interface only), or it can be an explicit action (usually a toggle or pop-up) to put the object itself into an advanced mode (a persistent change that can be shared between users).

Group Similar Controls

Group conceptually similar controls. You may make use of the following design patterns when grouping controls. Using these patterns comes with the cost of using up valuable real-estate. Always strive to communicate groupings by context rather than adding spacing/headers if possible.

Vertical Spacing

Vertical spacing between controls serves two purposes. It allows for controls to have some space to breath aesthetically and it can provide a way to visually group elements.

Spacing and line height is handled automatically when using built-in controls. However, you can add additional spacing to separate groups.

• Wireframing Notes
• Each line is 16 pts in height.
• Standard vertical spacing for controls is 2 pts of margin between each line.
• Vertical spacing for a group of controls is 10 pts of margin between each group.
• Vertical spacing for sub-elements of a control is 0 pts of margin.

• API Documentation
• EditorGUILayout.Space
• Only necessary when authoring new controls:
• EditorGUILayout.GetControlRect
• EditorGUIUtility.singleLineHeight
• EditorGUIUtility.standardVerticalSpacing

Headers

Grouped controls sometimes need a header to better explain their context and meaning.

• Use the bold label style for headers.
• If the header isn’t the first element in the component/Inspector, then add a group space above it.
• Do not indent controls under a bold header. Control indenting should be reserved only for foldouts and expanding controls.

• API Documentation
• EditorGUILayout.Space
• GUILayout.Label / EditorStyles.boldLabel