Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI text / wording guideline #2

Open
thisismydesign opened this issue Nov 20, 2018 · 3 comments
Open

UI text / wording guideline #2

thisismydesign opened this issue Nov 20, 2018 · 3 comments

Comments

@thisismydesign
Copy link
Member

thisismydesign commented Nov 20, 2018

A guide on UI text / wording would be nice. I'd prefer that we find and re-use some exiting reputable guide. Would only start deciding on our own as a last resort because it's a fairly contentious topic.

E.g. whether to use sorry and please is usually a topic of discussion.

Sorry, something went wrong. Please try again later.

vs

Something went wrong. Try again later.

Other topics:

  • capitalization of text
  • tone
  • pronouns
  • etc
@thisismydesign thisismydesign changed the title User interaction wording User interaction wording / UI text guideline Nov 22, 2018
@thisismydesign thisismydesign changed the title User interaction wording / UI text guideline UI wording / text guideline Nov 22, 2018
@thisismydesign thisismydesign changed the title UI wording / text guideline UI text / wording guideline Nov 22, 2018
@thisismydesign
Copy link
Member Author

Clarifying the scope and goal of this guide:

This guide is made for developers. It is not to address concerns of branding or copy writing.

Why do we need this?

  • it is important to have unified and clear wording even during early stages of development or prototyping
  • when building a brand around a prototype it is easier for copywriters to work with already existing, unified text
  • in some cases it is ok for developers to write the final copy if they have a baseline (mainly for smaller projects or restricted audience such as an administration tool or log messages)

@TelegraphEve
Copy link

RULES AND TIPS

The ideal UI text is:
• Consistent with existing Qt Creator UI terms
• Short, concise, useful and easy to understand
• Neutral, descriptive, and factually correct
• Unambigious
• Translatable into different languages

1.) Begin with the objective
Don’t: Tap on item to see it’s properties
Do: To see item’s properties, tap on it

2.) Use specific verbs whenever possible
Specific verbs (such as 'connect' or 'save') are more meaningful to users than generic ones (such as 'configure' or 'manage').

3.) Make the copy consistent
a) If you decide to call the process of arranging something 'Scheduling' in one part of UI do not call it a 'Booking' in other parts of your UI.
b) Don’t refer to the user in both the second person and the first person within the same phrase.
Don’t: Change your preferences in My Account
Do: Change your preferences in Your Account

4.) Write in the active voice
Don’t: The Search button should be clicked when you are ready to search for an item.
Do: Click the Search button to search for an article

5.) Identify interactive elements appropriately
When labeling buttons and other interactive elements, use action verbs, such as ‘Connect,’ ‘Send,’ ‘Subscribe’ instead of vague ‘Okay’ or ‘Submit.’

6.) Use language that’s consistent with the user’s platform
The terms we use when describing interaction with a desktop app do not necessarily apply to mobile platforms. For example, if you design an iPhone app, we can’t say ‘click’ when referring to the action. We need to say ‘tap’ instead.

7.) Grammar and Style
All UI text must be grammatically correct English and use the standard form of written language. Do not use dialect or slang words. Use idiomatic language.

8.) Punctuation

  • Use full stops in messages.
  • Place three full stops (...) at the end of menu item names that open a dialog requiring user action.
  • Use exclamation marks (!) only in text that demands extra attention from the user or carries special weight.
  • Use quotation marks ("") around variable values. For example, Close Project "qtcreator". For consistency, use double quotes to emphasize or set apart file names, directory names, URLs, and so on, in user visible strings.
  • Do not use leading, trailing, or multiple spaces to align text in messages, as translation tools might not handle them correctly.

WHAT TO AVOID

1.) Jargon Words and Specific Terms (‘geek speak’)
Write for all levels of readers: pick common words that are clearly and easily understandable to both beginning and advanced users. It’s especially important to avoid jargon in error messages.
Don’t: System error (code #2234): An authentication error has occurred
Do: Sign-in error: You entered an incorrect password

2.) Long Content Sections With a Lot of Details
Keep sentences under 30 words when possible. In most cases, it’s not necessary to describe every detail in the first interaction. Write in small, scannable segments to facilitate discovery.

3.) Using the Future Tense to Describe the Action
Use the present tense to describe product behavior. When you need to write in the past or future, use simple verb forms.
Don’t: “Message has been sent”
Do: “Message sent”
Don’t: Video has been downloaded
Do: Video downloaded

4.) Mixing “Me”/”My” With “You”/”Your”
It can cause confusion to see both forms of addressing the user in the same context.
Don’t: “Change your preferences in My Account.”
Do: “Change personal preferences in My Account.”

5.) Using Words For Numbers
Save screen space !
Don’t: “You have three messages”
Do: “You have 3 messages"

6.) Pronouncing “We”
a) Focus on the user and what they can do with your app, rather than what you or your app is doing for the user.
Don’t: “To get you started, we’re showing you popular posts on Facebook.”
Do: “Get started with these popular posts on Facebook.”

b) Exception: when a human actually does take action for a user, such as reviewing an appeal or responding to a suggestion.
Don’t: “Your appeal will be reviewed, and you will receive a response within a few days.”
Do: “We’ll review your appeal and respond within a few days.”

7.) Capitalizing All Letters
Thus, use sentence-style caps for all titles, headings, labels, menu items.
Don’t: “SEARCH SETTINGS”
Do: “Search settings”

8.) Absolutes and Over-promising
Never say “never” is a great rule to follow.
Don’t: “We’ll never send you promo emails”
Do: “You’ll receive only important information”

Don’t brag — reveal what a feature does, but don’t say how great it is.
Don’t: “Amazing deals at places you’ll love”
Do: “All your savings in one place”

9.) Exclamation Points
Exclamation points should be avoided as they could come across as shouting.
Don’t: “Learn about the new features of the app!”
Do: “Welcome”

10.) Gender Ambiguity
Be specific about gender whenever possible — use his or her.

11.) Common Introductory Phrases
Use simple, direct language that is easy for users to understand. All extra or common introductory phrases such as ‘you must,’ ‘due to the fact that’, ‘in order to’ should be omitted.
Don’t: “Would you like to save your changes?”
Do: “Save changes?”

12.) Double negatives
It’s confusing and unnececary.
Don’t: I do not want to unsubscribe

13.) Addressing the user in the second person
Use a neutral tone or passive voice but use a formal address when necessary.

14.) Using the word 'Please' when addressing the user
Exceptions to this are some copyright text and short imperative sentences that might otherwise sound abrupt. For example, 'Please wait.'

15.) Abbreviations in the menu names and items
If there is no room for the full spelling or hyphenation of a word, abbreviate the text according to the English abbreviation rules.

16.) Using punctuation marks or special characters in menu names and items

17.) Unnecessary content words and phrases
UI text should be concise and economically formulated.

IF YOU WANT LEARN MORE...
https://doc-snapshots.qt.io/qtcreator-extending/qtcreator-ui-text.html
https://uxplanet.org/effective-writing-for-your-ui-things-to-avoid-f6084e94e009
https://uxplanet.org/16-rules-of-effective-ux-writing-2a20cf85fdbf
https://material.io/design/communication/writing.html#writing-for-components
https://docs.openstack.org/doc-contrib-guide/ux-ui-guidelines/ui-text-guidelines.html
https://medium.com/google-design/creating-ui-text-that-translates-5f113ffb7c43

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants