Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
Style is made up of the rules that dictate how our content appear to customers.
Even the best writing has little value if users don’t read it, so style should promote engagement and readability.
Today's apps don't write, they speak.
This doesn't mean dumbing down the language or using slang or bad grammar. It does mean speaking simply, keeping it to the point, and using words we all use on a daily basis.
Conversational writing is a lot of things including write as you talk and use short sentences and simple words users can understand. It also means using "you" to always "talk" to users and using "we" in some cases.
The idea of “person”—first person, second person, and third person—greatly affects tone and how the audience reacts to it. When aiming for a friendly, conversational style, use second person (you) to address users, so it feels like the product is speaking directly to them.
In some rare cases, first person "we" may offer a more natural tone, such as:
Check this NN/G group article about the impact of tone of voice on the brand's perception https://www.nngroup.com/articles/tone-voice-users/
Something went wrong during the migration. Get in touch with our support team for help.
Sorry, we can't send your requests to the engine. You may want to try again. Contact the support team if the problem persists.
Follow spelling rules for American English. Check this site to get some help about your word choice: https://www.oxfordinternationalenglish.com/differences-in-british-and-american-spelling/
Avoid using punctuation marks or special characters in menu names and items.
When strings are complete sentences, use proper punctuation and capitalization.
Don’t use quotes to emphasize or highlight a term. Use quotation marks only for quoted speech.
The host field is required. (the UX team are putting in place a rule to use semi-bold for terms like this)
Use them sparingly and when appropriate to enhance engament and conversational style, in an onboarding message or when doing some exciting announcement for example. Otherwise they could come across as shouting.
Use commas before and after e.g. and i.e.
Make present tense your first choice. It's more direct and uses fewer words. Avoid past, progressive, and future tenses whenever you can. At times, you may need to refer to the past. In those cases, use simple past tense and avoid other tenses that include variations of have or had.
Use active voice rather than passive voice. Sentences using active voice sound stronger and are usually shorter, more direct, and flow more naturally.
Even though we stated that active voice is the ideal, passive voice has its place. Use passive voice when the action is more important than what caused (subject) the action. Using it carefully will allow you to control the focus of your readers’ attention.
Use short forms for questions in UI. They are easier to read and less formal. When you shorten questions, auxiliary verbs and subjects are omitted.
Contractions convey a friendly tone because they sound more personal and less formal. Use contractions when they are natural fit for the text. They help keep sentences shorter and easier to read. So for example use "you'll" instead of "you will".
If you need to use a parenthetical '(s)' in the subject of a sentence as a shorthand, a plural verb should follow even if a term ending in ‘(s)’ can be both plural and singular.
Don't use spaces before and after slashes when used between individual words. Add one space before and after only when using them with longer groups which have internal spacing.
Having the "Users - Manage" permission, you are able to view and manage all the access tokens created by the users of this account.
Limit please to situations in which you ask the user to do something inconvenient—such as repeating the action they already did or waiting—or when the app is to blame for the situation.
Apologize only for serious problems or system limitations and if you find it necessary. It is more important to tell users what went wrong, why if possible, and how to fix the problem.
Say sorry when it’s the system fault. But if it’s not, be careful not to overcompensate. Apologizing where it’s not due can sound insincere. It can also imply the user isn’t at fault, which might be confusing.
Sorry, an unexpected error occurred. We could not complete your last operation, but you can keep using Data Preparation.
An unexpected error occurred. We could not complete your last operation, but you can keep using Data Preparation.
Well-written, helpful messages are crucial to a quality user experience.
There are two general types of error messages:
Good error messages must always do 2 things: say what happened + say how to fix it or what to do next. Be brief but also super literal. Say exactly what the user needs to do to fix the error.
[What happened and why] + [What to do to fix it or move forward]
For edge cases where you can't propose a fix, it’s perfectly OK to list a generic error that might look something like:
“Sorry, we can't complete your request. Please try again. Contact the support team if the problem persists.”
Can't activate the user because of the lack of seats. Check the roles of existing users to see if you can free up any seats.
Not enough seats are available to activate the user. Try checking the roles of existing users to see if you can free up any seats.
Don't use titles for error messages by default (just to use a title). Titles can be helpful when the text in the error body is long or complex and you want to give the user a hint of what happens at a glance.
When you need to use a title, make it short and try not to repeat the same words in the message body.
Expression undefined (title)
At least one required expression is undefined. Check the rule definition and try again. (body)
The rule name ToTo already exists (title)
Rename your rule. (body)
At least one required expression is not defined (title)
Verify the rule definition and try again. (body)
Error messages can be complete sentences or sentence fragments. Both are accepted as long as the sentence or the fragment is clear enough. Examples of sentence fragments: Unreadable Swagger structure, unsupported field type
Both are accepted forms in error messages.
The average user may not be able to draw great conclusions merely from the tense of the message, but since the language provides us with a grammar we should use it correctly.
Configuration couldn't be saved. Check the Single Sign-On configuration and your SSO provider settings.
Sorry, an unexpected error occurred and we can't complete your last operation. You can continue to use Data Preparation.
The word or words on buttons should be accurate, specific, and explicit—not vague.
Try to avoid Yes and No for buttons. Say what action really happens when the user clicks. Use OK sparingly—replace it with the specific action whenever possible. Users usually click OK to confirm the action they want to do. Name that action instead.
A few best practices for writing button text or CTA text:
Labels outside the form fields make the essential information visible at all times while placeholder text inside form fields is reserved for
supplementary information.
However, user testing according to NN/G (Nielsen Norman Group) continually shows that placeholders in form fields often hurt usability more than help it.
According to NN/G when some of the fields require an extra description that is essential to completing the form correctly, it’s best to place that text outside the field so that it is always visible.
Use clear labels. Have persistent hints and instructions by placing them outside of the field
Interesting links:
Use Find a <name>...
as hint text inside the search field in the top right corner of an app page.
Currently, this text isn't in sync—mixture of Find a <name>
and Search <name>
. We'll need to use Find a <name>
everywhere.
Finding is locating something in a limited list; it is confident and positive.
Avoid using them unless they are widely known, i.e. stick to familiar acronyms and keep them to a minimum.
Below is the list of the acronyms allowed in Talend content. The list isn't exhaustive, ask when in doubt: