7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 1/20User Interface TextUser interface text appears on UI surfaces. This text includes control labels and static text:Control labels identify controls and are placed directly on or next to the controls.Static text, which is so called because it is not part of an interactive control, provides users with detailedinstructions or explanations so they can make informed decisions.Note: Guidelines related to style and tone, fonts, and comon control labels are presented in separate articles.Usage patternsUI text has several usage patterns:Title bar textUse title bar text to identify a windowor the source of a dialog box.In this example, the title bar text identifies a window.Main instructionsUse the prominent main instruction toexplain concisely what to do in thewindow or page.The instruction should be a specific statement, imperative direction, orquestion. Good main instructions communicate the user's objective ratherthan focusing just on manipulating the UI.In this example, the main instruction text directly engages the user with aquestion in terms of the user's own benefit or interest.Supplemental instructionsWhen necessary, use a supplementalinstruction to present additionalinformation helpful to understandingor using the window or page.You can provide more detailed information, provide context, and defineterminology. Supplemental instructions elaborate on the main instructionwithout simply rewording it.7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 2/20In this example, the supplemental instructions provide two possiblecourses of action to take in response to the information presented in themain instruction.Control labelsLabels directly on or next to controls.In this example, control labels identify desktop clock settings that userscan select or modify.Supplemental explanationsAn elaboration of the control labelstypically for command links, radiobuttons, and check boxes.In this example, the supplemental explanations clarify the choices.Design conceptsSoftware developers often think of text as relegated to product documentation and technical support. "First we'll writethe code, and then we'll hire someone to help us explain what we have developed." Yet in reality, important text iswritten earlier in the process, as the UI is conceived and coded. This text is, after all, seen more frequently and by morepeople than perhaps any other type of technical writing.Comprehensible text is crucial to effective UI. Professional writers and editors should work with software developerson UI text as an integral part of the design process. Have them work on text early because text problems often revealdesign problems. If your team has trouble explaining a design, quite often it is the design, not the explanation, thatneeds improving.A design model for UI textAs you think about UI text and its placement on your UI surfaces, consider these facts:During focused, immersive reading, people read in a lefttoright, toptobottom order in Western cultures.When using software, users aren't immersed in the UI itself but in their work. Consequently, users don't read UItextthey scan it.7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 3/20When scanning a window, users may appear to be reading text when in reality they are filtering it. They oftendon't truly comprehend the UI text unless they perceive the need to.Within a window, different UI elements receive different levels of attention. Users tend to read control labels first,especially those that appear relevant to completing the task at hand. By contrast, users tend to read static textonly when they think they need to.For a general design model, don't assume that users carefully read the text in a lefttoright, toptobottom order.Rather, assume that users start by quickly scanning the whole window, then read UI text in roughly the following order:Interactive controls in the centerThe commit buttonsInteractive controls found elsewhereMain instructionSupplemental explanationsWindow titleOther static text in main bodyFootnotesYou should also assume that once users have decided what to do, they will immediately stop reading and do it.Eliminate redundancyRedundant text not only takes valuable screen space, but weakens the effectiveness of the important ideas or actionsthat you are trying to convey. It is also a waste of the reader's time, and all the more so in a context where scanning isthe norm. Windows strives to explain what users need to do oncewell and concisely.Review each window and eliminate duplicate words and statements, both within and across controls. Don't avoidimportant textbe explicit wherever necessarybut don't be redundant and don't explain the obvious.Avoid over-communicationEven if text isn't redundant, it can simply be too wordy in an effort to explain every detail. Too much text discouragesreadingthe eye tends to skip right over itironically resulting in less communication rather than more. In UItext, concisely communicate the essential information. If more information is necessary for some users or somescenarios, provide a link to more detailed Help content, or perhaps to a glossary entry for clarification of a term.Incorrect:7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 4/20In this example, there is too much text to scan easily. Although not intended by the designer, there is so much text thatusers will most likely click Next without reading anything.To avoid text that discourages reading, craft your text to make every word count. What doesn't add subtracts, so usesimple, concise text.Use the inverted pyramidAcademic writing typically uses a "pyramid" structural style that lays down a foundation of facts, works with those facts,and builds up to a conclusionforming a pyramidlike structure. By contrast, journalists use an "inverted pyramid" stylethat starts with the conclusionthe fundamental "takeaway" that readers must have. It then fills in progressively moredetail that readers may be interested inperhaps just to scan. The advantage of this style is that it gets right to thepoint, and allows readers to stop reading at any point they choose and still understand the essential information.You should apply the inverted pyramid structure to UI text. Get right to the point with the essential information, let usersstop reading at any time they choose, and use a Help link to present the remainder of the pyramid.7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 5/20In this example, the essential information is in the query of the main instruction text, additional helpful information is inthe supplemental instructions, and details are available by clicking a Help link.If you do only five things...1.Work on text early because text problems often reveal design problems.2.Design your text for scanning.3.Eliminate redundant text.4.Use easytounderstand text; don't overcommunicate.5.When necessary, provide links to Help content for more detailed information.GuidelinesGeneralRemove redundant text. Look for redundant text in window titles, main instructions, supplemental instructions,content areas, command links, and commit buttons. Generally, leave full text in main instructions and interactivecontrols, and remove any redundancy from the other places.Avoid large blocks of UI text. Ways of doing this include:Chunking text into shorter sentences and paragraphs.When necessary, providing Help links to useful, but not essential, information.Choose object names and labels that clearly communicate and differentiate what the object does. Usersshouldn't have to figure out what the object really means or how it differs from other objects.Incorrect:Better:7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 6/20In the incorrect example, the object names are not differentiated at all; the better example shows strongdifferentiation by product name.If you want to make sure that users read specific text related to an action, place it on an interactivecontrol.Acceptable:In this example, there's a chance that users won't read the text that explains what they're confirming.Better:In this example, you can be sure that at least users understand that they are about to format a disk.Use one space between sentences. Not two.Text fonts, sizes, and colorsUse blue text only for links and main instructions.Use green text only for URLs in search results.The following fonts and colors are defaults for Windows.Pattern Theme symbol Font, ColorCaptionFont 9 pt. black #000000 Segoe UIMainInstruction 12 pt. blue #003399 Segoe UIInstruction 9 pt. black #000000 Segoe UIBodyText 9 pt. black #000000 Segoe UIBodyText 9 pt. black #000000 Segoe UI, bold or italic7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 7/20BodyText 9 pt. black #000000 Segoe UI, in a boxDisabled 9 pt. dark gray #323232 Segoe UIHyperLinkText 9 pt. blue #0066CC Segoe UIHot 9 pt. light blue #3399FF Segoe UI 11 pt. blue #003399 Segoe UI 11 pt. black #000000 Segoe UInone 9 pt. black #000000 Calibrinone 17 pt. black #000000 CalibriFor more information and examples, see Fonts and Color.Other text characteristicsBoldUse bold sparingly to draw attention to text users must read. For example, users scanning down a list of radiobutton options may appreciate seeing the labels in bold, to stand out from text that adds supplementalinformation about each option. Be aware that using too much bold lessens its impact.With labeled data, use bold to emphasize whichever is more important for the data as a whole.For mostly generic data where the data has little meaning without its labels, as with numerals or dates,use bold labels and plain data so that users can more easily scan and understand the types of data.For mostly selfexplanatory data, use plain labels and bold data so that users can focus on the data itself.Alternatively, you can use dark gray text to deemphasize less important information instead of using boldto emphasize the more important information.7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 8/20In this example, instead of emphasizing the data using bold, the labels are deemphasized by using darkgray.Not all fonts support bold, so it should never be crucial to understanding the text.ItalicUse to refer to text literally. Don't use quotation marks for this purpose.Correct:The terms document and file are often used interchangeably.Use for prompts in text boxes and editable dropdown lists.In this example, the prompt in the Search box is formatted as italic text.Use sparingly to emphasize specific words to aid in comprehension.Not all fonts support italic, so it should never be crucial to understanding the text.Bold italicDon't use in UI text.UnderlineDon't use, except for links.7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 9/20Don't use for emphasis. Use italic instead.PunctuationPeriodsDon't place at the end of control labels, main instructions, or Help links.Place at the end of supplemental instructions, supplemental explanations, or any other static text that forms acomplete sentence.Question marksPlace at the end of all questions. Unlike periods, question marks are used for all types of text.Exclamation pointsIn business applications, avoid.Exceptions: Exclamation points are sometimes used in the context of download completion "Done!" andto call attention to Web content "New!".CommasIn a list of three or more items, always put a comma after the nexttolast item in the list.ColonsUse colons at the end of external control labels. This is particularly important for accessibility because someassistive technologies look for colons to identify control labels.Use a colon to introduce a list of items.EllipsesEllipses mean incompleteness. Use ellipses in UI text as follows:Commands: Indicate that a command needs additional information. Don't use an ellipsis whenever anaction displays another windowonly when additional information is required. For more information, seeCommand Buttons.Data: Indicate that text is truncated.Labels: Indicate that a task is in progress for example, "Searching...".Tip: Truncated text in a window or page with unused space indicates poor layout or a default window sizethat is too small. Strive for layouts and default window sizes that eliminate or reduce the amount oftruncated text. For more information, see Layout.Don't make ellipses interactive. To show truncated text, let users resize the control to see more text or use aprogressive disclosure control instead.Quotation marks and apostrophesTo refer to text literally, use italic formatting rather than quotation marks.Put window titles and control labels in quotation marks only if required to prevent confusion and you can'tformat using bold instead.For quotation marks, prefer doublequotation marks " "; avoid singlequotation marks.Correct:Are you sure you want to delete "Sparky's cat folder"?7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 10/20Incorrect:Are you sure you want to delete 'Sparky's cat folder'?CapitalizationUse titlestyle capitalization for titles, sentencestyle capitalization for all other UI elements. Doing so ismore appropriate for the Windows tone.Exception: For legacy applications, you may use titlestyle capitalization for command buttons, menus,and column headings if necessary to avoid mixing capitalization styles.This generic example shows correct capitalization and punctuation for property sheets.7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 11/20This generic example shows correct capitalization and punctuation for dialogs.For feature and technology names, be conservative in capitalizing. Typically, only major components shouldbe capitalized using titlestyle capitalization.Correct:Analysis Services, cubes, dimensionsAnalysis Services is a major component of SQL Server, so titlestyle capitalization is appropriate; cubes anddimensions are common elements of database analysis software, so it is unnecessary to capitalize them.For feature and technology names, be consistent in capitalizing. If the name appears more than once on a UIscreen, it should always appear the same way. Likewise, across all UI screens in the program, the name should beconsistently presented.Don't capitalize the names of generic user interface elements, such as toolbar, menu, scroll bar, button, and icon.Exceptions: Address bar, Links bar.Don't use all capital letters for keyboard keys. Instead, follow the capitalization used by standard keyboards, orlowercase if the key is not labeled on the keyboard.Correct:spacebar, Tab, Enter, Page Up, Ctrl+Alt+DelIncorrect:SPACEBAR, TAB, ENTER, PG UP, CTRL+ALT+DELDon't use all capital letters for emphasis. Studies have shown that this is hard to read, and users tend to regardit as "screaming." For warnings, use a warning icon and a clearlyworded explanation of the situation. There is noneed to add, for example, the term WARNING in all capital letters.For more information, see the "Text" or "Labels" section in the specific UI component guidelines.7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 12/20Dates and timesDon't hardcode the format of dates and times. Respect the user's choice of locale and customization optionsfor the date and time formats. The user selects these in the Region and Language control panel item.In these examples from Microsoft Outlook, both formats for the long date are correct. They reflect differentchoices users have made in the Region and Language control panel item.Use the long date format for scenarios that benefit from having additional information. Use the short dateformat for contexts that don't have sufficient space for the long format. While users choose what informationthey would like to include in the long and short formats, designers choose which format to display in theirprograms based on the scenario and the context.In this example, the long date format helps users organize tasks and deadlines.Globalization and localizationGlobalization means to create documents or products that are usable in any country, region, or culture. Localizationmeans to adapt documents or products for use in a locale other than the country/region of origin. Considerglobalization and localization when writing UI text. Your program may be translated into other languages and used incultures very different from your own.For controls with variable contents such as list views and tree views, choose a width appropriate for thelongest valid data.Include space enough in the UI surface for an additional 30 percent up to 200 percent for shorter text forany text but not numbers that will be localized. Translation from one language to another often changes linelength of text.Don't compose strings from substrings at run time. Instead, use complete sentences so that there is no ambiguityfor the translator.Don't use a subordinate control, the values it contains, or its units label to create a sentence or phrase.Such a design is not localizable because sentence structure varies with language.Incorrect:Correct:7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 13/20In the incorrect example, the text box is placed inside the check box label.Don't make only part of a sentence a link, because when translated, that text might not remain together. Link textshould therefore form a complete sentence by itself.Exception: Glossary links can be inserted inline, as part of a sentence.For more information, see the Go Global Developer Center.Title bar textChoose the title bar text based on the type of window:Toplevel, documentcentric program windows: Use a "document name program name" format.Document names are displayed first to give a documentcentric feel.Toplevel program windows that are not documentcentric: Display the program name only.Dialog boxes: Display the command, feature, or program from which the dialog box came. Don't use thetitle to explain the dialog box's purposethat's the purpose of the main instructions. For more guidelines,see Dialog Boxes.Wizards: Display the wizard name. Note that the word "wizard" should not be included in wizard names.For more guidelines, see Wizards.For toplevel program windows, if the title bar caption and icon are displayed prominently near the top ofthe window, you can hide the title bar caption and icon to avoid redundancy. However, you still have to seta suitable title internally for use by Windows.For dialog boxes, don't include the words "dialog" or "progress" in the titles. These concepts are impliedand leaving these words off makes the titles easier for users to scan.Main instructionsUse the main instruction to explain concisely what users should do in a given window or page. Good maininstructions communicate the user's objective rather than focusing just on manipulating the UI.Express the main instruction in the form of an imperative direction or specific question.Incorrect:In this example, the main instruction simply states the name of the program; it doesn't explicitly invite a course ofaction for the user to take.Exceptions: Error messages, warning messages, and confirmations may use different sentence structures in theirmain instructions.Use specific verbs whenever possible. Specific verbs examples: connect, save, install are more meaningful tousers than generic ones examples: configure, manage, set.For control panel pages and wizard pages, if you can't use a specific verb, you may prefer to omit the verbcompletely.Acceptable:7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 14/20Enter your locale, region, and languageBetter:Locale, region, and languageFor dialogs, such as error messages and warnings, don't omit the verb.Don't feel obliged to use main instruction text if adding it would only be redundant or obvious from the contextof the UI.In this example, the context of the UI is already very clear; there is no need to add main instruction text.Be conciseuse only a single, complete sentence. Pare the main instruction down to the essential information.If you must explain anything more, consider using a supplemental instruction.Use sentencestyle capitalization.Don't include final periods if the instruction is a statement. If the instruction is a question, include a finalquestion mark.For progress dialogs, use a gerund phrase briefly explaining the operation in progress, ending with anellipsis. Example: "Printing your pictures..."Tip: You can evaluate a main instruction by imagining what you would say to a friend when explaining what to dowith the window or page. If responding with the main instruction would be unnatural, unhelpful, or awkward,rework the instruction.For more information, see the "Main instruction" section in the specific UI component guidelines.Supplemental instructionsWhen necessary, use a supplemental instruction to present additional information helpful tounderstanding or using the window or page, such as:Providing context to explain why the window is being displayed if it is program or system initiated.Qualifying information that helps users decide how to act on the main instruction.Defining important terminology.Don't use a supplemental instruction if one isn't necessary. Prefer to communicate everything with the maininstruction if you can do so concisely.Don't repeat the main instruction with slightly different wording. Instead, omit the supplemental instructionif there is nothing more to add.Use complete sentences and sentencestyle capitalization.Control labelsLabel every control or group of controls. Exceptions:Text boxes and dropdown lists can be labeled using prompts.Progressive disclosure controls are generally unlabeled.Subordinate controls use the label of their associated control. Spin controls are always subordinate7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 15/20controls.Omit control labels that restate the main instruction. In this case, the main instruction takes the accesskey.Acceptable:In this example, the text box label is just a restatement of the main instruction.Better:In this example, the redundant label is removed, so the main instruction takes the access key.Label placement:Balloons, check boxes, command buttons, group boxes, links, tabs, and tips are labeled directly by thecontrol itself.Dropdown lists, list boxes, list views, progress bars, sliders, text boxes, and tree views are labeled above,flush left, or to the left.Progressive disclosure controls are usually unlabeled. Chevron buttons are labeled to the right.Assign a unique access key for each interactive control except for links. For more information, see Keyboard.Keep labels brief. Note, however, that adding a word or two to a label can help clarity, and sometimes eliminatesthe need for supplemental explanations.Prefer specific labels over generic ones. Ideally users shouldn't have to read anything else to understand thelabel.Incorrect:Correct:In the correct example, a specific label is used for the commit button.For lists of labels, such as radio buttons, use parallel phrasing, and try to keep the length about the same forall labels.For lists of labels, focus the label text on the differences among the options. If all the options have the sameintroductory text, move that text to the group label.Incorrect:7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 16/20Correct:The correct example moves the identical introductory phrasing to the label, so the two options are more cleanlydifferentiated.In general, prefer positive phrasing. For example, use do instead of do not, and notify instead of do not notify.Exception: The check box label, "Don't show this message again," is widely used.Omit instructional verbs that apply to all controls of the given type. Rather, focus labels on what is uniqueabout the controls. For example, it goes without saying that users need to type into a text box control or thatusers need to click a link.Incorrect:Correct:In the incorrect examples, the control labels have instructional verbs that apply to all controls of their type.In some cases, the following parenthetical annotations to control labels may be helpful:If an option is optional, consider adding "optional" to the label.If an option is strongly recommended, add "recommended" to the label. Doing so means thesetting is optional, but should be set anyway.If an option is intended only for advanced users, consider adding "advanced" to the label.You may specify units seconds, connections, and so on in parenthesis after the label.7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 17/20This example shows that the unit of measurement is megabytes MB.For more information, see the "Text" or "Labels" section in the specific UI component guidelines.Supplemental explanationsUse supplemental explanations when controls require more information than can be conveyed by theirlabel. But don't use a supplemental explanation if one isn't necessaryprefer to communicate everything withthe control label if you can do so concisely. Typically, supplemental explanations are used with command links,radio buttons, and check boxes.When necessary, use bold in the control labels to make the text easier to scan when there are supplementalexplanations.In this example, the radio button labels are bold to make them easier to scan.Adding a supplemental explanation to one control in a group doesn't mean that you have to provideexplanations for all the other controls in the group. Provide the relevant information in the label if you canand use explanations only when necessary. Don't have supplemental explanations that merely restate the labelfor consistency.In this example, two controls in the group include supplemental explanations, but the third does not.If a supplemental explanation follows a command link, write the supplemental text in second person.Example: Command link: Create wireless network settings and save to USB flash driveSupplemental explanation: This will create settings that you can transfer to the router with a USB flash drive. Dothis only if you have a wireless router that supports USB flash drive configuration.7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 18/20Use complete sentences and ending punctuation.Commit button labelsThe following table shows the most common commit button labels and their usage.ButtonlabelMeaning When to use AccesskeyOKIn dialog boxes: apply thechanges or commit to thetask and close the window.In owner property windows:apply the pending changesmade since the window wasopened or the last Applyand close the window.In owned property windows:keep the changes, close thewindow, and apply thechanges when the ownerwindow's changes areapplied.Use with windows that aren't task specific,such as property sheets.For windows used to perform one specific task,use a specific label instead that starts with averb example: Print.For windows in which users can't makechanges, use Close.EnterYes/No Yes is the affirmative response to ayes or no question, whereas No isthe negative response.Use Yes and No buttons only to respond toyes or no questions. Never use OK and Cancelfor yes or no questions.Prefer specific responses over Yes and Nobuttons. While there's nothing wrong withusing Yes and No, specific responses can beunderstood more quickly, resulting in efficientdecision making.However, consider using Yes and Noresponses if the phrasing of specific responsesturns out to be long or awkward.Don't use Yes and No buttons if the meaningof the No response is unclear. If so, usespecific responses instead.Yes and No must always be used as a pair.Y and NCancelIn dialog boxes: discard allchanges or work in progress,revert to the previous stateleaving no noticeable sideeffect, and close thewindow.In property sheets: discardall pending changes madesince the window wasopened or the last Applyand close the window.Use when all pending changes or actions canbe discarded and any side effects can beundone.For changes that can't be discarded, use Close.For actions in progress that can be stopped,use Stop. If initially changes or actions can bediscarded, you can use Cancel initially thenchange to Close or Stop once it can't beundone.Esc7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 19/20In control panel items:discard all changes or workin progress, revert to theprevious state, and return tothe hub page from whichthe task was launched. Ifthere is no such hub page,close the control panel itemwindow instead.Close Close the window. Any changes orside effects are not discarded.Use when changes or side effects can't bediscarded. Use Close instead of Cancel forprimary windows.Use for windows in which users can't makechanges.Alt+F4,Ctrl+F4Stop Stop a currently running task andclose the window. Any work inprogress or side effects are notdiscarded.Use when work in progress and any sideeffects can't or won't be discarded, typicallywith progress bars or animations.EscApply In owner property sheets: apply thepending changes made since thewindow was opened or the lastApply, but leave the window open.Doing so allows users to evaluatethe changes before closing theproperty sheet. In owned propertysheets: don't use.Use only in property sheets.Provide an Apply button only if the propertysheet has settings at least one with effectsthat users can evaluate in a meaningful way.Typically, Apply buttons are used whensettings make visible changes. Users should beable to apply a change, evaluate the change,and make further changes based on thatevaluation. If not, remove the Apply buttoninstead of disabling it.ANext In wizards and multistep tasks:advance to the next step withoutcommitting to the task.Use only in wizards and multistep tasks toadvance to the next step without commitment.The effect of a Next button can always beundone by clicking Back.NFinish In wizards and multistep tasks:close the window. If the task hasn'tbeen performed yet, perform thetask. If that task has already beenperformed, any changes or sideeffects are not discarded.Use only in wizards and multistep tasks.However, the use of Finish is discouragedbecause there is usually a better, more specificcommit button:If clicking the button commits to thetask so the task hasn't already beenperformed, use a specific label thatstarts with a verb examples: Print,Connect, Start that is a response to themain instruction.If the task has already been performedEnter7/16/2015 UserInterfaceText(Windows)https://msdn.microsoft.com/enus/library/dn742478.aspx 20/20Community Additionswithin the wizard, use Close instead.However, you can use Finish when:The specific label is still generic, such asSave, Select, Choose, or Get.The task involves changing a setting orcollection of settings.Done Not applicable.Don't use. Done as a command isgrammatically incorrect.Notapplicable. 2015 Microsoft