Please note : This page is under construction. Additional content, including visuals, code snippets, and layout information, will be available soon.

Overview

Popups are selection elements which present the user with multiple settings options that can be enabled or switched between. Popups help organize related choices, settings, or actions into a single interface element: These versatile components can be used to assign an object’s layer, toggle a camera’s render settings, or enable certain views.


Heuristics

Specialized. The contents of a popup must directly relate to their label’s context.

Consistent. All option items within the same a popup must follow the same format and relate to the same subject.

Discrete. Popups condense their choices to show only the active selection by default, indicating their subject through their label.


General Guidelines

Popups are limited to choice-selection actions and should not contain additional interfaces, though they can contain an item used to redirect the user to a separate window or menu when necessary (see extensibility below).


Popups should, by default, be set to the most basic or frequently-used selection applicable to the subject. This is also true for multi-selection popups; if the most frequent choice involves multiple items (or all available items) the default should be set to “mixed” or “everything”.


Extensibility

Some popups concern a subject whose number of potential choices cannot be predetermined, as seen in GameObject tags (which can be created by the user): In these situations the element may contain an additional option, separated from the initial list, which offers the ability to create a new choice and extend the list of available items.

Usage Guidelines

Popups are used for assigning specific single-level choices related to a subject; they occur in circumstances where a variety of settings are available to choose from. These elements should only contain immediate selections and not require additional specification for their choices except for the option of extending the available list.

Popups are limited to choice-actions and do not include additional elements or controls.


Do

Have each selection be a singular setting.


Don’t

Include fields, checkboxes, or other elements on the selection.


Popups must also confine their available selections to a specific option context.


Do

Include all relevant settings in a popup (including creating a new selection when applicable)


Don’t

Merge two categories of settings into a single popup.



Types

While there are many different popups in the interface they fall into two main categories relating to their primary function, making a choice; popups can either confine a choice to a single selection or can allow multiple selections to be enabled and disabled at the user’s discretion.

Single Selection

Some popups impose a restriction that only one item can be active at a time. These popups are limited to single-layer user actions, presenting the choices directly and limiting deeper functionality. These are often used for multiple setting selections that are conflicting in nature; an example can be seen in the type of shadow to be cast by a light, which can not be both hard and soft simultaneously. Instead the user must choose between the available options.

Multi Selection

Popups that allow multiple selections to be made can feature additional indicators like check marks or other glyphs to show which options are enabled. These elements are often used for aspects that allow for greater complexity, like the display of Culling Masks on Camera objects; here the user may want to allow the camera to see specific elements while hiding others, so a multi-selection popup allows them to customize the setting.

Style Guidelines

Popups consist of a label, an interaction element, and a content list of possible options. While the label remains consistent, the interaction element changes to reflect which selection is active. The list of available selections is stowed until it’s invoked by the user, at which point it displays all the available options relating to the element’s subject as single-line text strings.

Layout / Anatomy

Label

A popup’s label appears to the right of the element in the interface, with the element’s body displaying the active selection. The label provides the context for the decision being made; this allows the user to see both the choice and context simultaneously, even when the element is open.

Labels should be written in 11pt font, clearly and directly address the popup’s usage, and contextualize the selections available within.


Interaction Element / Live Area

The popup interaction element itself shows the live area which displays the active selection or selections that are currently enabled alongside the popup Expander glyph. This text should be left-aligned, as should all options within the content.

The live area text should directly match the enabled selection’s text unless more than one selection has been made; when two or more selections are active the live area should display the word “Mixed” followed by ellipses to indicate multiple selections have been made.

Clicking on a the interaction element will display the popup’s content list above the element until a selection is made or the component is navigated away from.


Content List

The content list of a popup appears over the interaction element and is aligned so that the active selection remains in-line with the popup’s label.

The contents of a popup can vary depending on the popup’s utility: On single-function setting popups the selections appear as a list of available options, left-aligned and ordered, with the inclusion of checkmarks to the left of active items. Multi-selection popups may include other minor elements such as indicator toggle-glyphs which act as an extension of the selection, identifying whether or not the selection is active and performing the same behavior as clicking on the selection itself.


List Items

Selection options should relate to a singular setting or state for the popup label, for example whether or not shadows are to be cast by an object. 

In popups that allow multi-selection the available settings do not have to be mutually exclusive but cannot be in direct conflict. Although these lists can feature inclusive options like “Everything” directly redundant options should be avoided.

List items on multi-selection popups must include a glyph to the left of their text, indicating whether or not a selection is being included: These glyphs should always be used for confirming a selection is active, not inactive. A checkmark is commonly used, though this may vary for specific cases depending on the popup’s subject.

All selection item text should be written in 11pt font, including the active selection.

Creation Options

As noted in the Overview tab, some popups include the option to create a new selection not listed in the original popup contents (for example, in the assigning of tags or layers in the Inspector header). These choice items must be kept visually separated from other selections with a divider to ensure they are distinct in the interface. They must also feature text which is followed by ellipses to indicate that their selection will prompt an additional action or menu.

An example of this can be seen in assign an object’s tag; users can create custom tags for objects and so the option is listed in the Tag popup. 

Do

Include the ability to create a new selection at the bottom of the popup’s content.


Don’t

Shuffle the creation option in with other selections or place it at the top.


States

Popups display selections on activation. Once a selection is made the popup will close until it is intentionally reopened, even on multi-selection popups. Due to this behavior they can be understood to have two primary states; Open and Closed.


Closed

Closed popups display the current selection label along with an expander glyph indicating its function. 


Open

Open popups appear over the trigger element, displaying the contents to the user. The content body should also appear so that the active element is inline with the trigger. This helps remind the user which option is currently active while they are making a selection.

Do

Open the content body directly over the trigger element.


Don’t

Open the content body detached from the trigger element.


Don’t

Display the content body with the active element out of line.


In addition to these two main states popups, like any other component, have a Hover, Disabled, and Focused state.


Hover

Hovering over a popup’s label will prompt a Tooltip explaining the popup’s function, but only when hovering above the label. Hovering over the interaction element will not prompt a Tooltip, but will cause the element to become highlighted, signifying it is ready to receive interactions. Conversely, the interaction element will not be highlighted when hovering over the label.


Disabled

The Disabled state is conveyed in both the element’s live area and the label which are both made semi-opaque. Disabled popups cannot be interacted with, however hovering over their label will still prompt a Tooltip.


Focused

Popups continue the standard Focus styling, presenting a blue border to indicate they are the current element in focus. Opening a focused popup will display the content, with no items selected. Users can then toggle through the available options which are highlighted until one is selected, closing the popup.


Active

When a popup is active the content list will be displayed, with the current selection highlighted. Highlighting will follow the cursor’s position, switching to whichever item the cursor is above until a selection is made or the element is navigated away from. On multi-selection popups, active selections are indicated with glyphs as described in the Anatomy section above

Behavior


Selecting

Once open, a popup displays its contents as a list, with the active selection highlighted. Selecting an option in a popup will cause the element to close, placing the choice in-line on the element’s body so the current choice can be seen without opening the element.


Multi-selection

Some popups allow for multiple choices to be assigned: These elements feature a row to the left of their items where checkbox glyphs are used to signify which choices are active.

Multi-selection popups frequently feature blanket “Everything” or “Nothing” choices, allowing users to batch-assign or remove active selections.

When two or more (but not all) choices are selected the element will show a “Mixed” menu item, indicating that an assortment of choices have been made. This option does not appear in the menu itself unless invoked through making multiple selections, automatically disappearing if it is not the active choice.

Do

Indicate the active selection(s) with a checkmark glyph to the left of the label.


Don’t

Use other methods of indication to signify which selection is active.


Don’t

Leave the active selection unmarked.


Deselecting

Deselecting an option or setting on a multi-selection popup is performed by selecting the option again (once it’s already active). This can only be performed on multi-selection popups and when multiple selections are active. For single-selection popups, the item that is clicked on will always be set as the active selection.
Certain multi-selection popup entries with an “all”, “nothing”, or “everything” label behave differently than other entries; re-selecting these options will cause them to remain active and will not toggle the selection inactive. This behavior can be seen in a Camera GameObject’s Culling Mask popup, where selecting and then reselecting “Nothing” will not provoke a change in the active setting.

Do

Allow deselecting on multi-selection popups.


Do not

Have deselecting cancel the active selection if multiple selections are not active.


Extending

For popups that allow extensibility, clicking the extension option should prompt an additional interface or menu where the entry’s labels and/or parameters can be set. For example, clicking the “Add tag…” item on the Inspector’s Tag popup will prompt the Tags & Layers menu to be displayed, where users can add or remove custom tags that will be made available in the popup: Once a new entry is made the popup should display the option in its list.