Text

On the UI, text is used to label items, provide instructions, and convey simple concepts. As simple as that may seem, text is one of the most important aspects of an effective UI. Designers, writers, and developers should work together to create effective text. If the text doesn't seem quite right, this can signal a design problem.

Best practices

  • In general, all text on the UI should use friendly language and a conversational tone.
  • Avoid wordiness. Too much of an explanation discourages reading and is inconsistent with the UI of the BlackBerry® PlayBook™ tablet. If a complex concept must be explained, consider adding it to a Help screen.
  • Do not use the product name "PlayBook" when referring to the tablet. Use the more general term "tablet" instead.
  • Avoid using trademarks or other symbols on the UI. Add these to an About screen instead.
  • Place labels to the left of UI components. The only exceptions are check boxes and radio buttons, which should have the labels to the right.
  • Left-align all UI component labels. Labels are the text that is adjacent to (not within) the UI component.
  • Center-align all text within UI components, such as text in buttons, drop-down lists, toggle buttons, and so on.

Fonts

Myriad is the default and preferred font for the BlackBerry® PlayBook™ tablet, because it is designed for easy reading for most users. The font is available in standard width and semi-condensed width. It can also be bolded and italicized. Your application can use other fonts, but you should use coordinated typefaces and be consistent.

Best Practices

  • Use a font size of 21 pixels for normal text and 36 pixels for titles. You can use other font sizes, but avoid using any font smaller than 15 pixels.
  • Use the standard font width for general purposes. The semi-condensed font width should be reserved for places where there is limited space.
  • Use italic for emphasis. For example, you can use italic to emphasize a word, a short phrase, words in a foreign language that readers might not be familiar with, or titles of things or events.
  • Avoid underlining text, except when you are creating a hyperlink within a longer string of text.
  • Use a paragraph spacing of 2.5 times the font size. For example, with a font size of 18 pixels, use 45 pixels (18 x 2.5) paragraph spacing, or with a font size of 21 pixels, use 53 pixels (21 x 2.5) paragraph spacing.

Capitalization and punctuation

Consistency is the most important aspect of text capitalization and punctuation. You should pay close attention to the usage of particular terms, phrases, and abbreviations, and make sure they always appear identical.

Best Practices

  • Do not use colons to terminate labels. Colons don't add any value when a label is adjacent to its UI component. Instead, vertically align multiple labels to the left, leaving space between the labels and the related UI components.
  • Avoid unnecessary end punctuation. Whereas complete sentences must end with a period, short phrases and lists typically do not.
  • Avoid using all uppercase characters. Uppercase text makes users feel like you are shouting at them.
  • Use quotation marks (" ") when you refer to an alias or user-defined object name. For example, when a user deletes a bookmark, the name of the bookmark should appear in quotation marks, as in the message "Are you sure you want to delete "World News"?".
  • Avoid using ellipses (…) except to indicate truncated text.
  • Use title case capitalization for all UI component labels except check boxes, radio buttons, or labels that might read like a sentence. Capitalize the first word, the last word, and all other words except articles or prepositions with fewer than four letters.

Word list

Term

Comment

abort (v)

Use "end," "quit," or "stop" instead.

alert (n)

Use "notification" instead.

alert (v)

Use "notify" instead.

app (n)

Use "application" instead to avoid using jargon.

cancel (v)

Use to give users the option not to proceed with the associated action, or to stop an action in progress.

category (n)

Use "panel" to refer to a category of applications on the home screen.

close (v)

Use if there is no associated action other than to dismiss a dialog box.

continue (v)

Use "continue" so users know when the steps in a process or procedure are not complete.

e-mail (n)

Use "email" instead.

E-mail (n)

Use "email" instead.

email program (n)

Use "email application" instead.

ensure (v)

Use "verify," "make sure," "provide," or "check" instead.

erase (v)

Use "delete" instead.

hang (v)

Use "stop responding" instead.

image (n)

Use in the context of the browser and HTML messages. Use "picture" in the context of the camera and media applications.

keypad (n)

Use "keyboard" instead.

memory card (n)

Use "media card" instead.

navigator (n)

Use "multitasking view" to describe the section of the Home screen that displays open but minimized applications.

notification (n)

Use to refer to the popup that appears when users tap an icon on the status bar.

nuke (v)

Use "delete" instead (for example, "delete all tablet data").

picture (n)

Use in the context of the camera and media applications. Use "image" in the context of the browser and HTML messages.

please (adv)

Use "please" if you ask users to repeat an action or if users need to wait.

ribbon (n)

Use "home screen" instead.

reboot (v)

Use "restart" instead.

remove (v)

Use only to refer to removing software. Otherwise, use "delete" instead.

terminate (v)

Use "stop" instead.

uncheck (v)

Use "clear" instead.

user name (n)

Use "username" instead.

voicemail (n)

Use "voice mail" instead.

web site (n)

Use "website" instead.

Next topic: UI components

Was this information helpful? Send us your comments.