UI Elements in Technical Content: Style Guide

--- title: UI elements in content description: How to refer and interact with UI content keywords: ui, contribute, style guide weight: 40 --- This page contains information on how to write technical content that involves a user interface (UI). ## Format names of UI elements Always bold UI elements when referring to them by name. This includes names for buttons, menus, dialogs, windows, list items, or any other feature on the page that has a visible name. Don't make an official feature name or product name bold, except when it directly refers to an element on the page that uses the name, such as a window title or button name. In most cases, follow the capitalization as it appears on the page. However, if labels are inconsistent or they're all uppercase, use sentence case. ## Focus on the task When practical, state instructions in terms of what the user should accomplish, rather than focusing on the widgets and gestures. By avoiding reference to UI elements, you help the user understand the purpose of an instruction, and it can help future-proof procedures. |Correct |Incorrect | |:-----------|:------------| |Expand the **Advanced options** section | Select the zippy to expand the **Advanced options** section| ## Refer to UI elements Don't use UI elements as if they were English verbs or nouns. |Correct |Incorrect | |:-----------|:------------| |In the **Name** field, enter an account name. | **Name** the account.| |To save the settings, select **Save**.| **Save** the settings.| ## Prepositions When documenting the UI, use the following prepositions. |Preposition |UI element | Example | |:-----------|:------------|:-----------| |in | dialogs fields lists menus panes windows | In the **Alert** dialog, select **OK**. In the **Name** field, enter `wsfc-1`. In the **Item** list, select **Desktop**. In the **File** menu, click **Tools**. In the **Metrics** pane, select **New**. In the **Task** window, select **Start**. | | on |pages tabs toolbars | On the **Create an instance** page, select **Add**. On the **Edit** tab, select **Save**. On the **Dashboard toolbar**, select **Edit**. |

This document provides guidelines for writing technical content that involves a user interface (UI). It covers how to format UI element names (using bold text and sentence case when necessary), emphasizes focusing on the user's task rather than specific UI elements, advises against using UI elements as verbs or nouns, and specifies the correct prepositions to use when referring to UI elements such as dialogs, fields, lists, menus, pages and tabs.