用户希望随着时间的推移效率。透明命令名称和命令快捷方式帮助用户桥接湾执行和are essential for a smooth, fast, and painless interaction. Though often overlooked, these textual elements enable users of all types, including those withdisabilities,通过我们的数字产品快速移动。

Definition:User-Interface copy (UI copy)refers to labels for commands that appear in buttons, menu items, and other action-oriented elements in the user interface.

Understanding UI Copy

The phrase “UX copy” is also sometimes used to refer to these elements, but we prefer to use the more precise, less ambiguous term “UI copy” for these actionable items, as opposed to long-form content that’s intended to be read, but not clicked.UI copy is also different from微囊(或微覆), which represents very short content used for headlines, email-subject lines, page titles, or tooltips.

UI副本也与链接文本不同。Links simply help users navigate through a linked content space, whereas commands are associated with interaction flows and typically change the state of the system. They are normally displayed as buttons, icons (最好用标签或至少悬停文本),menu项目,radio buttons, or other similar UI elements.

命令是应用的面包和黄油;由于应用程序经常需要提供大量功能和命令,因此命令名称通常很短 - 应用程序屏幕中根本没有很多空间来容纳很多长命令名称。这意味着有压力来创建命令标签,以简明的方式捕获命令的含义。

Guidelines for Effective UI Copy

  • Keep command text short without sacrificing clarity.One-word, self-explanatory command text is easiest to scan, but obscure commands or those used infrequently will require more context. Use just enough text to accurately describe the command and include no more than 2–4 words. Avoid overexplaining commands and remove articles (“a”, “an”, and “the”) to speed up scannability, comprehension, and task completion. While short commands are preferred, use enough text to explain the command sufficiently.
minesweeper ui复制在一个对话框中,这太令人讨厌和复杂。
The UI copy in this dialog box is too wordy and complicated (left). A better version of the dialog box (right) removes the extra words without sacrificing clarity; this version makes it easier for users to understand the available options and choose the correct command. (In this case, additional explanations are unlikely to be needed, but when they are, inline contextual help can be provided.)
  • 描述后果,而不是当前状态。命令应始终反映系统将移动到的状态,而不是当前状态。例如,当视频正在播放时,我们看到了一个Pausebutton, which signals the state the video will move into as a result of clicking the icon. This type of changeable label helps to communicate subsequent states while preserving space in the interface. If all commands were always displayed, the UI would become overly cluttered and highly confusing.
“视图”菜单中的命令描述了所需的状态。
The items in the看法在Apple的邮件应用程序中找到的菜单描述了所需的状态,而不是当前状态并根据状态而更改 - 例如,显示标签栏(左)变成了隐藏标签栏(右)当标签栏是可见的。这些变化避免了杂乱和最小化混乱。
  • 使用动词来启动动作或提交信息的命令。带有动词或动词短语的引导,清楚地概述了所选命令后会发生什么。例如,打印或者接受并登录。常见标签如背部,前进,新,接下来,之前,撤消Settings通常由用户识别,因此,不需要伴随动词。但是,记住他们(例如,Next, Previous)可以模糊,而且,只要有可能,更喜欢特定的动词到其中一个通用名称。
SweatyBetty.com uses specific verb phrases in checkout.
sweatybetty.com而不是使用模糊的命令标签使用特定的动词短语,如继续计费通过结帐进程引导用户。
Experian asked users to review and accept new Terms of Use as part of the Sign In flow,
最近重新设计后,Experian要求用户审查并接受新的Terms of Useas part of the登入flow. The button text used the verb phrase接受并登录有效地为用户需要做的事情以及接下来会发生什么。
  • 使用形容词进行触发系统状态或接口中元素的外观的调整的命令。形容词应始终反映元素如何变化。例如,对于文本编辑,形容词如,常规,大胆,或者Italic用于描述外观的变化。
Photoshop的all-alias菜单与命令。
Photoshop'sAnti-Aliasmenu item triggers a submenu of options that describe how the image edges will change after selecting an adjective command.
  • 避免使用模糊的命令名称。Users shouldn't have to Google a command name to understand what means, what it does, or how it differs from other commands. Command text should be straightforward, descriptive, and accurate; not cutesy or faddish.
  • 包括澄清结果的工具提示。当使用图标或按钮启动动作时,包括tooltipsthat activate on rollover, and provide contextual help so that users understand exactly what will happen. Whether you use native tooltips, custom-designed tooltips, or a combination of both, the explanation in the tooltip should be informative and nonconflicting.
Illustrator中的动画工具提示
Illustrator使用动画工具提示来提供关于一个新的,晦涩的命名命令的更多上下文,Puppet Warp。Though a better command name would likely be扭曲和扭曲,Puppet Warptooltip clarifies what will happen to artwork after selecting this command.
  • Limit the use of branded terms.应用程序的名称可用作主应用程序菜单的标签。而且,虽然品牌术语可以为菜单项添加有用的上下文帮助菜单在大多数情况下,应在命令文本中避免它们。不熟悉任务流或应用程序的用户将无法理解它们的意思。
Adobe Acrobat Pro DC uses branded terms in main menus.
Adobe Acrobat Pro DC仅在主应用程序菜单标签和菜单项中使用品牌条款帮助菜单。所有其他命令都显示为简单,非宽容的短语。
  • Use consistent command words, even if they appear in different contexts.If the same command appears in more than one menu, dialog box, or task flow, use the same label text in each instance and place it in a similar position. When the resulting action or the element impacted is not clear from the verb or adjective alone, use a noun after the verb to disambiguate the context — for example,Draw Table或者Delete Folder,rather thanDraw或者Delete.
Dropbox uses consistent command labels
Dropbox uses consistent command labels at each level of the application. For added clarity, adjectives and verbs are accompanied by a noun, which is especially helpful since common commands such as,UploadNeware repeated.
  • 避免通用命令文本,如好的Avoid using the generic phrase好的for button labels in confirmation dialogs. Out of habit, users might select it without reading the surrounding text, assuming that it’s the correct option. Explicitly state what users are doing by pushing that button. In the event that users do make an错误, always include the ability to undo their actions and use clear UI copy to help users recognizeUndo或者Cancel作为可用的选择。
Dialog box that uses Discard for the primary command
Google Calendar: Before navigating away from a calendar invite, a dialog box appears to confirm the discarding of unsaved changes. Using the word丢弃(代替好的) is helpful and reinforces the action that the user is about to take.
  • 在命令文本中包含省略号(“...”),以指示需要更多信息。椭圆区分命令所需要的参数(in the form of further input from users) from immediate ones. Ellipses can also indicate that a selection hasn’t been made yet and lead users to make a choice.
Excel文件菜单中的省略号
Excel: The ellipses in theFilemenu indicate that the corresponding commands require more information from the user before they can be executed.

Guidelines for Command Shortcuts

除了命令文本,传送命令快捷方式的文本和符号也被认为是UI副本。

Definition:命令快捷方式are combinations of keys that are typed on the keyboard and allow users to perform frequent commands quickly.

命令快捷方式不同于访问键:而快捷键允许用户通过在键盘上输入的字符,选择从可见区(扩)菜单命令,命令的快捷方式通常包括功能键,并允许一个命令的直接调用,但是深深地可以埋在一个命令菜单。

Access keys vs. keyboard shortcuts
Access keys vs. keyboard shortcuts: In Windows (left), access keys are represented by underlined letters in the command name. In MacOS (right), access keys work similarly, but they are not underlined. On both operating systems, keyboard shortcuts are represented by displaying the modifiers and key combinations to the far right of the menu.

因此,命令快捷方式的常见示例是Ctrl + S.to save or命令+ N.打开一个新的浏览器窗口。快捷方式有助于通过界面加快移动,并简化频繁任务的完成。例如,打字Ctrl + V.或者命令+ V.is faster than finding the复制paste从菜单中的函数。但是,需要UI副本和熟悉的约定使用户了解这些时间保护程序并记住它们,特别是当在界面中有很多空间时,当界面上有很小的空间。

  • Prioritize keyboard shortcuts for frequent app tasks.不是应用程序上的每个任务都需要快捷方式,因此请遵守与应用程序的用户交互以确定最常见的任务和优先级键盘快捷键。例如,当用户通过桌面浏览器访问Facebook时,它们可以使用一组键盘快捷键快速导航接口和完整的通常操作。(有趣的是,Facebook还有一个叫做快捷方式它出现在左侧导航中,并指的是常用的页面。确保用户不会混淆键盘快捷键和应用程序中的快速接入点,包括单词键盘快捷键在命令快捷方式的标签中。)
Facebook keyboard shortcuts
Facebook提供了应用程序中的常规命令的键盘快捷键列表。
  • Don’t repurpose or override standard command shortcuts.一些命令快捷方式(例如,Ctrl + S.或者命令+ S.to save) have a widespread use and many people have become accustomed to them. Don’t过载这些命令- 例如,不要使用Ctrl + S.滚动该页面。在创建新的快捷方式时,请始终考虑键盘快捷键required for accessibility to prevent interference with assistive technologies.

  • 使快捷方式可被发现并重新定制。等效快捷方式应该适用于Mac和Windows操作系统,用户应该能够能够定义自己的快捷方式,除应用程序设置的默认值之外。提供快速的参考点;如果可用快捷方式,请在工具提示中包含函数键和附加密钥的序列。帮助部分还应包括用户可以轻松查找和共享的键盘快捷键列的可打印图像,备忘单或列表。

Google Sheets uses the same familiar keyboard shortcuts
Google Sheets uses the same familiar keyboard shortcuts that are available in other worksheet applications and displays them in the hover text that appears on rollover of a command button.
Trello offers a responsive cheat sheet
To help users learn keyboard shortcuts, Trello offers a responsive cheat sheet that could be accessed on any device or printed out and referenced.
在Evernote中分配键盘快捷键
Evernote allows users to assign their own keyboard shortcuts for common actions.
  • 快捷方式should be learnable and memorable.Don’t set a keyboard shortcut just because you think the combination is unique; it needs to be easy to learn and memorize. Use a clear, consistent system and always associate symbols and functions with the name of the button on the keyboard. Many users don’t know what certain symbols or button names mean off the top of their heads, without looking at the keyboard itself.
转录应用程序中的常见快捷方式
The Transcribe application offers a list of common keyboard shortcuts in the interface. It also shows the keyboard shortcut next to the media-player function that’s controlled by the shortcut; this approach makes the shortcuts more learnable.
  • 使用最小修饰符。意识到有多少shift, control, option, and命令functions you include in your shortcuts. The simpler the better. If possible, rely mostly on one- or two-letter shortcuts to ensure they help users rather than increasing their memory burden.
Action screenshot command shortcuts
The browser extensionAction Screenshot在其菜单中显示键盘快捷键;但是,关键组合涉及多种修饰符,很难记住。

Conclusion

编写良好的命令名称和熟悉的肖tcuts direct users through the interface and help them learn how to use it. In contrast, poorly chosen UI copy confuses people and forces them to spend time to figure out how to use your UI. To learn more about writing meaningful command text, take our full-day training courses写下引人注目的数字副本Application Design for Web and Desktop