Design Specifications and Guidelines - Visual Design


User Interface Text

User interface text in your application is text that appears on screen in both primary windows and secondary windows, such as dialog boxes, property sheets, wizards, message boxes, or controls. Clear, consistent, informative, and well-written text in these elements is essential for a usable interface. This section provides guidelines for writing and displaying interface text.

Font and Size

The default system font is a key element in the presentation of visual information. The default font used for interface elements in the U.S. releases of Windows 98 and Windows NT 4.0 is MS® Sans Serif 8 point. For applications that will run on Windows 2000, it is recommended you use Tahoma 8 point. For compatibility reasons, this font is not set by default in Windows 2000; you must explicitly select it. The Tahoma 8 point font offers improved readability and globalization support; in Windows 2000, it is the default font used by most of the interface elements in the operating system.

Cross ReferenceMore Information

The GetSystemMetrics (for standard window elements), SystemParametersInfo (for primary window fonts), and GetStockObject (for secondary window fonts) functions provide current system settings. The WM_SETTINGCHANGE message notifies applications when these settings change. For more information about these APIs, see the Microsoft Platform SDK on the MSDN Online Web site at http://msdn.microsoft.com/ui/guide/sdk.asp.

The menu bar titles, menu items, control labels, and other interface text in each operating system use one of these two fonts. The title bar text also uses the bold setting for these fonts, as shown in Figure 14.23. However, because the user can change the system font, make sure you check this setting and adjust the presentation of your interface appropriately rather than assume a fixed size for fonts and other visual elements. Also adjust the presentation when the system notifies your application that these settings have changed.

Default font usage in windows

Figure 14.23 Default font usage in windows (click to enlarge image)

The system provides settings for the font and size of many system components including title bar height, menu bar height, border width, title bar button height, icon title text, and scroll bar height and width. When you design your window layouts, take these settings into account so that your interface will scale appropriately. In addition, use the standard system settings to determine the size of your custom interface elements.

Except for title bars, avoid using bold or italic for interface text. In menus, bold text implies that the command is a default action.

The Basics of Writing Interface Text

The wording you use in your interface is a primary form of communication with the user. This section provides basic guidelines for writing effective user interface text.

Cross referenceMore Information

For more information about text conventions for particular interface elements, see Chapter 7, "Windows," Chapter 8, "Menus, Controls, and Toolbars," and Chapter 9, "Secondary Windows." The Microsoft Manual of Style for Technical Publications is also a useful resource for terminology guidelines.

Abbreviations

Avoid using abbreviations unless the abbreviated form is as familiar to your users as the full word or phrase. If you use an abbreviation, follow these guidelines:

Access Keys

Always define an access key for the label of any control or menu item. The only exceptions are the OK and Cancel buttons because the ENTER and ESC keys typically serve as the access keys to these buttons. Also, avoid having the same access key used by more than one control in a single context or more than one item on the same menu.

Acronyms

You can use an acronym for a term that is not trademarked or for a well-known industry standard. At its first mention, if a term is an industry standard acronym — for example, HTTP — there is no need to spell it out. But for the first mention of most other acronyms, spell out the full term with the acronym in parentheses directly following — for example, Internet Control Message Protocol (ICMP). You can then use just the acronym in subsequent references on the same screen, on subsequent pages of a wizard, or in nested dialog boxes that the user can get to only after seeing the screen, page, or dialog box where the term is spelled out.

If you use an acronym in a heading, do not spell out its meaning. Instead, use and spell out the full term in the first sentence after the heading, if it hasn't been spelled out previously. You may be able to link to a separate glossary entry or spell out the term in the status bar instead of using the spelled-out term in the text.

Check with your marketing and legal representatives before you create acronyms specific to your product. Also, search your intranet and the Internet for the acronym to make sure it isn't already used for another purpose in your customers' industry.

Capitalization

Correct capitalization helps readers identify important words and breaks in text, as shown in Figure 14.24. Two styles of capitalization are used for interface text: book title capitalization (also referred to as title caps) and sentence-style capitalization (also known as sentence caps).

Capitalization and punctuation

Figure 14.24 Capitalization and punctuation of user interface text (click to enlarge image)

For book title capitalization, capitalize the first letter of the first and last words. Also capitalize all words in between, with the exception of articles (such as a, an, and the); coordinate conjunctions (such as and, but, for, not, or, so, and yet); and prepositions of four letters or fewer (such as at, for, with, and into). For example:

Insert Object
Paste Link
Save As
Go To
Always on Top
By Name

Use book title capitalization for the following elements:

For sentence-style capitalization, capitalize only the first letter of the initial word and other words normally capitalized in sentences, such as proper nouns. For example:

Working folder
Print to
Use Postscript driver

Use sentence-style capitalization for the following elements:

If the user supplies a name for an object, always display the name as the user specifies it, regardless of case, wherever the name appears, including in the title bar for a window.

Contractions

Contractions lend an often-desirable informal tone to the user interface and also save space. However, never form a contraction from a subject and its verb:

Correct Incorrect
Windows 2000 Professional is the latest version of the operating system. Windows 2000 Professional's the latest version of the operating system.
The company will develop a new product line. The company'll develop a new product line.

Ellipses

If a command requires additional information to complete its intended action, and you use a dialog box to supply that information, follow the command with an ellipsis (…). The ellipsis provides a visual cue that the command requires additional information.

Here are examples of when to use an ellipsis as part of a command's text:

However, not every command that results in the display of a window should include an ellipsis. Do not include an ellipsis for commands that simply display a window or view or change the existing view within a window. Similarly, do not use ellipses for commands that display a collection of objects or options, unless the intended action requires that the user select or confirm the selection of one or more elements of the collection. Also, do not include an ellipsis for commands that may result in a confirming message box.

Here are examples of when not to use an ellipsis as part of the command's text:

Keep in mind that the decision about whether or not to use an ellipsis can depend on the context of the command. You must take into consideration the command's intended action, the wording of the command, or, for menu items, the wording of the command's parent menu item. For example, a Print command that prints a document without displaying the Print dialog box should not include an ellipsis. A Font command on a Format menu should include an ellipsis because its intended action is to format the current selection with specific font settings, and the user must use the dialog box to define those settings.

If the object of the intended action is already defined, the Open command typically does not take an ellipsis. Contrast the command for a selected file icon in a standard folder window with the same command for the File menu in Notepad. In the first case, the user's selection before choosing the command supplies the necessary parameter of what to open, so no ellipsis is used. However, in the second case, the user must type or select the file to open, so an ellipsis should appear with the command. As a general rule, include an ellipsis if a command requires the user to supply "what," "where," or "how" information for the command to complete its intended action.

You can also use ellipses in other forms of interface text. For example, you can use ellipses to abbreviate path names or other information that may extend beyond the size of the field. Do not use an ellipsis in the title bar text of a window when the command that opened it included an ellipsis. Use an ellipsis in the title bar text only when you need to truncate the text. Whenever you use an ellipsis to abbreviate interface text, try to display as much information as possible to still enable the user to identify the item. Also, use other techniques such as ToolTips to display the full text.

Introductory or Instructional Text

Introductory or instructional text helps reduce or eliminate the text for online Help. Use introductory or instructional text in dialog boxes, Web views, and wizard pages to provide additional information about the task that the user wants to accomplish. Follow these guidelines for writing useful introductory or instructional text:

Cross referenceMore Information

For more information about instructional text for specific controls, see Chapter 8, "Menus, Controls, and Toolbars." For information about designing wizard pages, see Chapter 13, "User Assistance."

Numbers

Align numbers at the decimal point (or imaginary decimal point). Right-align a block or column of whole numbers or of whole numbers and text, as shown in Figure 14.25.

Right-alignment for block or columns of numbers

Figure 14.25 Right-alignment for block or columns of numbers

Punctuation

Follow normal rules of punctuation for your interface text. End a question with a question mark, but avoid phrasing control labels as questions. Separate sentences with one blank space, not two.

Cross referenceMore Information

For more information about punctuating text for specific types of controls, see Chapter 8, "Menus, Controls, and Toolbars."

In a bulleted or numbered list, introduce the list with a sentence or sentence fragment that ends with a colon. Begin each entry in the list with a capital letter. End each entry with ending punctuation if all entries are complete sentences or complete the introductory phrase, as shown in Figure 14.26. Entries in a list should be parallel (have the same grammatical structure).

Punctuation for bulleted lists

Figure 14.26 Punctuation for bulleted lists (click to enlarge image)

Writing Style

Before you begin writing, research your audience to determine the most useful writing style. For example, text in a program intended for novice users should be different from text in a program designed for network administrators. Style, which includes brevity, language, parallel construction, sentence structure, and voice, affects the readability and comprehensibility of text.

Brevity

Keep text in the user interface as brief as possible. Usability studies indicate that users are more likely to read short blocks of text than long ones. Review your work to eliminate wordiness, and keep user interface text short without sacrificing clarity and ease of localization:

Language

Clear and consistent use of language can improve usability and ease localization. Use good, standard grammar. Grammar provides important clues to the meaning of terms in a sentence. Keep the following guidelines in mind:

Correct Incorrect
File names File name(s)

Parallel Construction

Use the same grammatical structure for elements of sentences or phrases that provide the same kind of information. For example, use parallel construction for items in lists and groups of check box labels or option button labels. In the following example, all the items in the Correct list begin with verbs in the active voice and are phrased in the imperative mood. Items in the Incorrect list are in a mix of voice and mood.

Correct Incorrect
Get up-to-date information about upgrades and new products. Up-to-date information about upgrades and new products will be sent to you.
Use Windows Update to download product updates. Using Windows Update you can download product updates.
Receive the best possible customer support. The best possible customer support is available.
Gain access to the latest files and drivers. You can gain access to the latest files and drivers.

Sentence Construction

Use sentences in the interface to explain concepts, introduce features, and discuss controls. Follow these guidelines when writing sentences:

For more information about localization, see Chapter 15, "Special Design Considerations."

Voice

Use the active voice to clarify who or what is performing the action in a sentence.

Correct Incorrect
Windows cannot find the configuration file. The configuration file cannot be found.

Terminology

You can help users learn your product more quickly by using terminology that is familiar to them and by using the same terminology for a particular concept throughout the interface. If your product will be localized, create a list of defined terms to localize.

Use familiar wording on menus, commands, control labels, and toolbars. Avoid technical jargon. Write so that the least skilled user of the application will understand.

Correct Incorrect
Send and receive sound at the same time. Use full-duplex audio.

Define terms that are unfamiliar or are used more narrowly or broadly in your product than in common use. For example, you can sometimes use descriptors to identify a term's meaning or purpose. This can help users understand the context of the term.

Correct Incorrect
You have to specify the parameter InfID when the option Detect is set to "No." You have to specify InfID when detect is set to No.
The value CiDialect specification for webhits is not valid. The CiDialect specified for webhits is not valid.

In general, use "click" to describe selecting command buttons, option buttons, hyperlinks, tabs, menus, and menu items. Use "select" to describe selecting items in a list box or gallery.

Correct Incorrect
Click OK. Press OK.
On the Edit menu, click Copy. On the Edit menu, select Copy.
To remove any temporary files, click Remove. To remove any temporary files, choose Remove.

Use "press" to describe pressing a key on the keyboard. Use "type" when referring to typing words.

Correct Incorrect
To continue, press ENTER. To continue, hit ENTER
Type your name in the space provided. Key your name into the space provided.

Use "select" and "clear" in instructions for a check box.

Correct Incorrect
To add a component, select its check box. To add a component, click its checkbox.
To remove the component, clear the check box. To remove the component, uncheck it.
Select the appropriate check boxes. Enable the appropriate options.
Clear the Bookmarks check box. Click to uncheck the Bookmarks option.

However, use "click to remove the check mark" rather than "clear" to describe removing a check mark from a menu item.

Cross ReferenceMore Information

For the correct usage of Microsoft trademarks, copyrights, and product names, see the Microsoft Copyright Permission Web site at http://www.microsoft.com/permission.

Take care to avoid using words or phrases that may offend some users. The following guidelines can help writers and editors recognize terms that may inadvertently cause offense or convey an inappropriate message.

Title Bars

Include a title for all primary and secondary windows. The only exceptions are as follows:

Use book title capitalization unless you are displaying a user-defined name. In that case, use the capitalization that the user provides.

Cross referenceMore Information

For more information about title bars, see Chapter 7, "Windows" and Chapter 9, "Secondary Windows."

The following table summarizes title bar text usage guidelines.

Guidelines for Title Bar Text
For the title bar in a Use this style Example
Dialog box Name of the related command (or slight modification) Browse for Folder
Document window Document title Letter to Bill
Message box Name of document Letter to Bill _WordPad or program
Palette window Name of objects displayed on palette Color
Program window Product or program name* Calculator
Property sheet Feature or object name Properties Recycle Bin Properties
Toolbar Toolbar name Formatting
Web page Page title _ browser name Web Directory _ Microsoft Internet Explorer
Wizard Full wizard name Maintenance Wizard

* If the application does not explicitly store user data (such as Calculator), then use just the application's product name. If the application is not the primary viewer of user data (such as QuickView) or the object more logically presents itself as a tool rather than as a representation of the user data (such as Find File), then display the program's name, followed by the data file.