I2P brand styleguides for the web
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

213 lines
13 KiB

<h1 id="language"></h1>
<div class="page-header mb-0 mt-5 pl-4 pt-2 pb-0">
<h2>Language &amp; grammar</h2>
</div>
<div class="row">
<div class="col-12 pl-4 pt-4 mt-0">
<p>Make sure your writing is clear, consistent, and localizable by using the following conventions:
</p>
<h4>Abbreviations</h4>
<p>Don't use internal abbreviations in customer-facing copy. </p>
<p>Don't use apostrophes for plural abbreviations.</p>
<p>Don't use i.e. or e.g.; they are not localization-friendly.</p>
<ul>
<li><strong>Yes:</strong> Jira Service Desk, <a href="http://jira.atlassian.com/">jira.atlassian.com</a>, <a href="http://developer.atlassian.com/">developer.atlassian.com</a></li>
<li><strong>No:</strong> JSD, JAC, DAC, CD's, 1980's, i.e., e.g.</li>
</ul>
<h4>Active voice</h4>
<ul>
<li><strong>Yes:</strong> Administrators control user access to Atlassian Cloud applications.</li>
<li><strong>No:</strong> User access to Atlassian Cloud applications is controlled by administrators.</li>
</ul>
<h4>Bold</h4>
<p>Use bold text to draw the reader's eye to key phrases and statements in your email and web content. For product copy or help articles, use bold for static UI elements like menu items, buttons, screen headings, and anything else you want to call attention to. </p>
<p>If you need to bold an element but the UI doesn't support it, for example, in a dialog header or a UI message, you can use italics instead.</p>
<p>Use italics for fields that might change, like a page name. See italics for more guidelines.</p>
<ul>
<li><strong>Yes: </strong>Go to <strong>General Configuration</strong> &gt; <strong>User Macros</strong>.</li>
<li><strong>No:</strong><strong>Go to the settings page and click Configuration.</strong></li>
</ul>
<h4>Capitalization</h4>
<p>Use sentence case in all titles, headings, menu items, labels, and buttons. </p>
<ul>
<li><strong>Yes:</strong> This is the new Jira experience!</li>
<li><strong>No:</strong> This Is The New JIRA Experience!</li>
<li><strong>Double no:</strong> tHiS iS tHe nEw JIRA eXpErIeNcE!</li>
</ul>
<h4>Colons</h4>
<p>Use colons to introduce a bulleted list or series of steps. Don't use colons at the end of headings.</p>
<h4>Contractions</h4>
<p>In keeping with our more conversational, friendly voice, use contractions.</p>
<ul>
<li><strong>Yes:</strong> Can't, don't, it's</li>
<li><strong>No:</strong> Cannot, can not, it is</li>
</ul>
<h4>Direct quotes</h4>
<p>Quote with quotes, not italics.</p>
<ul>
<li><strong>Yes </strong>: "Jira Software is the best software ever!" said Charlie.</li>
<li><strong>No</strong>: <em>Jira Software is just ok. </em> said Charlie.</li>
</ul>
<h4>Exclamation marks</h4>
<p>Avoid exclamation marks! They should only be used for exciting or new things! At the most, there should only be one exclamation mark per page!</p>
<h4>Gender</h4>
<p>When possible, avoid gendered pronouns. If you can't, then <em>they</em> or <em>their</em> is preferable to <em>his or her</em> or <em>he or she</em>.</p>
<ul>
<li><strong>Much yes:</strong> Ask your admin to add you to the instance.</li>
<li><strong>Yes:</strong> Ask your admin if they can add you to the instance.</li>
<li><strong>No:</strong> Ask your admin if he or she can add you to the instance.</li>
</ul>
<h4>Hyphens</h4>
<p>Not sure if it's coworker or co-worker? See the Word List (coming soon!)</p>
<h4>Instructions</h4>
<p>Use different verbs depending on what you're telling the user to do:</p>
<p><strong>Yes</strong>:<br></p>
<ul>
<li>Choose: the user is picking from one of several options, such as in a dropdown</li>
<li>Select or click: the user is clicking or tapping something</li>
<li>Tap, swipe: these are okay on mobile</li>
<li>Go to, head to: okay for the first item in a menu cascade</li>
</ul><strong>No:</strong>
<ul>
<li>Hit</li>
<li>Push</li>
<li>Poke</li>
</ul>
<h4>Italics</h4>
<p>Use italics for emphasis, citations, or defining a term. You can also use it for UI elements that might change, like a field name or user input.
</p>
<p>You can also use italics in places where you would normally use bold but the UI doesn't support it. For example, in a dialog header or UI message.
</p>
<p>Don't use italics if the item is also a hyperlink.
</p>
<p>See bold for more information about how to format UI elements.
</p>
<ul>
<li><strong>Yes: </strong>A JIRA workflow is the set of <em>statuses</em> and <em>transitions</em> that an issue goes through during its lifecycle.</li>
<li><strong>Yes:</strong> According to the 2008<em> IT Unplugged</em> report, IT is really unplugged!</li>
<li><strong>Yes</strong>: For example, if you create a metric called <em>Time to resolution</em>, other projects can create metrics with that name.</li>
</ul>
<ul>
<li><strong>No: </strong> To learn more, see the <em><u>2008 IT Unplugged report</u></em>.</li>
<li><strong>No</strong>: In your project, select <em>Settings</em> &gt; <em>Request types</em>.</li>
</ul>
<h4>Lists</h4>
<p>Use lists to draw the reader's eye and make items easier to scan and follow. Use proper punctuation in your items if they are complete sentences. Try to limit lists to six items or fewer. If you need more items, see if you can split the list into multiple lists.</p>
<h3>Bulleted</h3>
<p>Use bulleted lists for options, or a list where the order of the items doesn't matter. Phrase each item in a parallel way. If the bullets complete the introductory sentence, start the fragments with lowercase and skip the periods.</p>
<p><strong>Yes:</strong></p>
<p>Due to security concerns, all employees are now required to:</p>
<ul>
<li>wear an identification tag in the building</li>
<li>identify themselves when answering the phone</li>
<li>use their identification tag to enter or leave before 7 AM and after 6 PM</li>
<li>alert security if a suspicious package is found</li>
</ul>
<p><strong>No:</strong></p>
<p>Due to security concerns, all employees are now required to follow the regulations below:</p>
<ul>
<li>Wear an identification tag when in the company building</li>
<li>Employees who answer the phone must first identify themselves</li>
<li>Entering the building before 7 AM and after 6 PM requires that employees use their identification tag to enter or leave the building</li>
<li>When opening all packages, alert security if the package is suspicious.</li>
</ul>
<h3>Numbered</h3>
<p>Use numbered lists for tasks, or lists where the order of the items matters. Unlike with bulleted lists, always capitalize the first word in each item and end the item with a period.</p>
<p>You don't need to create a list for tasks that have 2 or fewer steps.</p>
<p>To add a new user macro:</p>
<ol>
<li>Go to <img alt="settings cog icon" src="https://confluence.atlassian.com/download/attachments/590259974/Cog.png?version=1&amp;modificationDate=1398739558493&amp;api=v2">&gt; <strong> General Configuration </strong> &gt; <strong> User Macros. </strong></li>
<li>Choose <strong>Create a User Macro.</strong></li>
<li>Enter the macro details.</li>
</ol>
<h4>Monospaced text</h4>
<p>Use monospaced font for names of a file or directory. It is mostly used in administrator and developer docs. For example:</p>
<p>The location of the Home directory is stored in a configuration file called <code>confluence-init.properties</code>, which is located in the <code>confluence/WEB-INF/classes</code> directory in your Confluence Installation directory.<br></p>
<h4>Numbers</h4>
<p>Write out numbers one through ten. After ten, you can use 11, 12, 108, and so on. </p>
<h4>One word or two?</h4>
<p>Can't remember if it's filesystem or file system? Check out the Word List (coming soon!)</p>
<h4>Oxford comma</h4>
<p>Use the Oxford or serial comma to offset the final item in a list. </p>
<ul>
<li><strong>Yes:</strong> We use sentence case in all titles, headings, menu items, and buttons.</li>
<li><strong>No:</strong> We use sentence case in all titles, headings, menu items and buttons.</li>
</ul>
<h4>Periods (full stops)</h4>
<p>Use only one space after a period. Avoid periods in headers, titles, tooltips, field descriptions, and menu names. Use to complete description text in the product, messages, and notifications. Don't use them in a bulleted list unless the list item is a complete sentence. </p>
<ul>
<li><strong>Yes:</strong> Public room</li>
<li><strong>No:</strong> Public room</li>
</ul>
<h4>Possessives</h4>
<p>Use ’s to show possession, even if the word ends in s. </p>
<ul>
<li><strong>Yes</strong>: James's book</li>
<li><strong>Yes</strong>: a week's time</li>
<li><strong>No</strong>: James' book</li>
</ul>
<h4>Pronouns</h4>
<p>In most cases, second person is best. It fits Atlassian's casual, conversational tone to refer to the reader directly. Exceptions can be made for specific types of writing, such as whitepapers and press releases.</p>
<p>Not sure whether it's <em>My projects</em> or <em>Your projects</em>? It can be fuzzy, so sometimes, we aren't either! For best results, avoid using <em>mine</em>, <em>my</em>, or <em>your</em> in UI copy.</p>
<p>If you need to use <em>mine</em>, <em>my</em>, or <em>your</em>, the rule of thumb is to think of the UI as a conversation between the system and the user.</p>
<p>If the system is presenting information to the user, such as in a dialog box, then <em>your</em> is more appropriate, because it's like saying "Here are your things", or "What would you like to do?"<br>If the user is performing an action, such as clicking a button or a link, then <em>mine/my</em> is more appropriate, because it's like saying "Show me my stuff!".</p>
<ul>
<li><strong>Yes</strong>: Bitbucket will change your life.</li>
<li><strong>Yes</strong>: Your team will love using pull requests in Bitbucket.</li>
<li><strong>No</strong> : Teams love using pull requests in Bitbucket.</li>
</ul>
<h4>Quotation marks</h4>
<p>Use double quotes (") for a direct quote. For UI elements, page titles, and other objects, use bold text or italics as appropriate. </p>
<p>Because we write in US English, punctuation goes inside the quotation marks.</p>
<ul>
<li><strong>Yes:</strong> "We have big things planned for the coming year," said Mike and Scott.</li>
<li><strong>Yes</strong>: He called quokkas "the cutest animal ever."</li>
<li><strong>No:</strong> Add a comment to the <u>"Team processes"</u> page.</li>
<li><strong>No</strong>: The shark said "Surfers are delicious".</li>
</ul>
<h4>Style</h4>
<p>Five great guidelines for clear, concise writing, courtesy of George Orwell:</p>
<ol>
<li>Don't use a metaphor, simile, or other figure of speech that you see <img alt="(alot)" src="https://dujrsrsgsd3nh.cloudfront.net/img/emoticons/10804/alot-1463726674.png">. </li>
<li>Don't use a long word if a shorter one will do.</li>
<li>If you can omit a word, do it.</li>
<li>Use active voice.</li>
<li>Don't use foreign phrases, scientific nomenclature, or jargon if there's an everyday word you can use instead.</li>
</ol>
<h4>Titles and headings</h4>
<p>Use sentence case for <img alt="(allthethings)" src="https://dujrsrsgsd3nh.cloudfront.net/img/emoticons/allthethings-1414024836.png">. Don't use bold, italics, or standard punctuation in headings. It's ok to use question marks and exclamation points if they fit the criteria for those two marvelous pieces of punctuation. </p>
<ul>
<li>Capitalize the first word of a title or heading (sentence case)</li>
<li>Capitalize proper nouns and any trademarked names (products, countries, people's names, etc...)</li>
<li>Don't use full stops</li>
</ul>
<h3>Articles</h3>
<p>The use of articles (the, a, an) in headings depends on whether the message is conversational or action-based microcopy. Avoid articles in buttons and labels.
</p>
<h3>Conversational headings and subheadings</h3>
<p>In more conversational sections of the interface, like Home cards, marketing copy, and empty states, use articles. It makes the language more approachable and helps understanding when introducing new, complex concepts.</p>
<h4>Documentation</h4>
<p>Phrase documentation H1s with an action verb. Don't use gerunds or questions.</p>
<ul>
<li><strong>Yes:</strong> Create a page</li>
<li><strong>No:</strong> Creating a page; How do I create a page?</li>
</ul>
<h4>UI elements</h4>
<ul>
<li>Use sentence case, even if the UI element does not</li>
<li>Use bold to call out the UI element in a step. Don't bold the &gt;.</li>
<li>If the UI element has an icon, use both the name and the icon. </li>
</ul>
<p>Go to<strong> More ••• </strong>&gt;<strong> Link issues</strong>.</p>
<h4>US English</h4>
<p>We write with US English spelling and punctuation, but our Australian roots are still part of our personality. Communications directly from native Aussies can use the Queen's English – e.g., <em>colour</em>, <em>optimise, theatre</em>.</p>
<p>For example, Aussie PMs writing JAC comments to customers can use Australian English. Developers should code in US English.</p>
<ul>
<li><strong>Yes:</strong> What kind of cookie would you like with your coffee, friend?</li>
<li><strong>No:</strong> Which biscuit do ya want with your cuppa, mate?</li>
</ul>
<h4>When all else fails</h4>
<p>We follow the AP Style Guide.</p>
</div>
</div>