From 416f25c4315a159e75b25d233eb95d4e4bd2cfc7 Mon Sep 17 00:00:00 2001 From: qdietrich <89219723+qdietrich@users.noreply.github.com> Date: Tue, 7 Jan 2025 12:56:56 -0600 Subject: [PATCH] Uplifted Content Design Pages (#13012) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Updated content design pages based on uplift work to bring our published standards in line with current standards. These are updates to documentation only for polaris.shopify.com. ### WHAT is this pull request doing? - New Fundamentals page to replace the Product content page - Remove pages no longer needed (Actionable language, Help content, Help documentation, Merchant-to-customer content, and Voice and tone) - Updated Grammar page - Updated Error messages page - Updated page order for side nav - Moved button content guidelines to button compontent page - Added redirects for removed pages Shopify Polaris Content Guidelines ### How to đŸŽ© đŸ–„ [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### đŸŽ© checklist - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --- .changeset/orange-spoons-fix.md | 2 + .../components/actions/button-group.mdx | 2 +- .../content/components/actions/button.mdx | 55 +- .../content/content/actionable-language.mdx | 992 ------------------ .../content/content/alternative-text.mdx | 7 +- .../content/content/error-messages.mdx | 743 ++----------- .../content/content/fundamentals.mdx | 85 ++ .../content/content/grammar-and-mechanics.mdx | 642 +++++------- .../content/content/help-content.mdx | 101 -- .../content/content/help-documentation.mdx | 644 ------------ .../content/content/inclusive-language.mdx | 9 +- polaris.shopify.com/content/content/index.mdx | 2 +- .../content/content/merchant-to-customer.mdx | 276 ----- .../content/content/naming.mdx | 23 +- .../content/content/product-content.mdx | 73 -- .../content/content/voice-and-tone.mdx | 386 ------- polaris.shopify.com/next.config.js | 20 + 17 files changed, 517 insertions(+), 3545 deletions(-) create mode 100644 .changeset/orange-spoons-fix.md delete mode 100644 polaris.shopify.com/content/content/actionable-language.mdx create mode 100644 polaris.shopify.com/content/content/fundamentals.mdx delete mode 100644 polaris.shopify.com/content/content/help-content.mdx delete mode 100644 polaris.shopify.com/content/content/help-documentation.mdx delete mode 100644 polaris.shopify.com/content/content/merchant-to-customer.mdx delete mode 100644 polaris.shopify.com/content/content/product-content.mdx delete mode 100644 polaris.shopify.com/content/content/voice-and-tone.mdx diff --git a/.changeset/orange-spoons-fix.md b/.changeset/orange-spoons-fix.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/orange-spoons-fix.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/polaris.shopify.com/content/components/actions/button-group.mdx b/polaris.shopify.com/content/components/actions/button-group.mdx index 75ae75ae8ea..e8cf7c7e3d0 100644 --- a/polaris.shopify.com/content/components/actions/button-group.mdx +++ b/polaris.shopify.com/content/components/actions/button-group.mdx @@ -58,7 +58,7 @@ Button groups should: ## Content guidelines -Button groups should follow the [content guidelines](https://polaris.shopify.com/content/actionable-language#buttons) for buttons. +Button groups should follow the [content guidelines](https://polaris.shopify.com/components/actions/button#content-guidelines) for buttons. --- diff --git a/polaris.shopify.com/content/components/actions/button.mdx b/polaris.shopify.com/content/components/actions/button.mdx index a0f83a69220..609ed8a6da7 100644 --- a/polaris.shopify.com/content/components/actions/button.mdx +++ b/polaris.shopify.com/content/components/actions/button.mdx @@ -117,7 +117,60 @@ The HTML that renders for the `Button` and `Link` components carries meaning. Us ## Content guidelines -Buttons should follow the content guidelines for [buttons](https://polaris.shopify.com/content/actionable-language#buttons). +{/* keywords: buttons, button copy, button text, button content, links, actions, calls to action, call to actions, action-led, action led, scannable, articles, choose , select, choose vs select, select vs choose, need, must, need vs must, must vs need --> --> */} + +Buttons need to be clear and predictable. Merchants should be able to anticipate what will happen when they select a button. Never mislead someone by mislabeling a button. + +- Use universally understood iconography instead of words wherever you can +- Buttons can include an icon or text, or both +- Verbs like “View” or “Go” or “Read” are often unnecessary since the button itself already conveys these actions +- Sentence case +- No articles (“a” “an” “the”) +- No punctuation + + + +#### Do + +- Save +- Edit +- Add tags + +#### Don’t + +- Save product +- Edit collection +- Add tag(s) + + + +Always write button text in sentence case, which means the first word is capitalized and the rest are lowercase (unless a term is a proper noun). + + + +#### Do + +- Buy new domain + +#### Don’t + +- Buy New Domain + + + +Avoid unnecessary words and articles such as “the,” “an,” or “a.” + + + +#### Do + +Add menu item + +#### Don’t + +Add a menu item + + --- diff --git a/polaris.shopify.com/content/content/actionable-language.mdx b/polaris.shopify.com/content/content/actionable-language.mdx deleted file mode 100644 index be4c3e5189e..00000000000 --- a/polaris.shopify.com/content/content/actionable-language.mdx +++ /dev/null @@ -1,992 +0,0 @@ ---- -title: Actionable language -description: Merchants use Shopify to get things done. Content should be written and structured to help them understand and take the most important actions. -icon: CircleRightIcon -keywords: - - button content - - button copy - - button terminology - - writing for buttons - - link content - - link copy - - link terminology - - writing for links - - action words - - calls to action - - calls-to-action - - CTA - - verbs - - copy instructions - - copy rules - - copy guidelines - - content instructions - - content rules - - save - - done - - ok - - okay - - o.k. - - accept - - close - - select - - choose - - edit - - manage - - change - - switch - - create - - add - - view - - see - - need - - must - - export - - download - - import - - upload - - confirmation modals - - disruptive - - delete - - deletions - - cancel - - leave page - - stay - - discard - - dangerous actions - - risky actions - - irreversible actions - - confirmation alerts - - warnings - - confirmation messaging - - headings - - subheadings - - titles - - directional language - - directionality - - above - - below - - right - - left - - up - - down ---- - -# {frontmatter.title} - -{frontmatter.description} - -## Headings and subheadings - -Headings and subheadings are titles and subtitles that refer to sections of the interface. - -### Basic structure - -Headings and subheadings should be: - -**Informative and descriptive:** - -- Highlight the most important concept or piece of information for merchants -- Help merchants understand what they’ll find in the section below - -**Concise and scannable:** - -- Use simple, clear language -- Keep headings to a single sentence -- Avoid using punctuation such as periods, commas, or semicolons -- Write in sentence case (capitalize the first word and proper nouns only) - - - -#### Do - -- Online store dashboard -- Custom reports -- Sell your products in person - -#### Don’t - -- This is your online store dashboard -- Custom Reports -- Sell your products in person! - - - -### Articles - -Whether or not to use articles (“the,” “a,” “an”) in headings and subheadings depends on the type of message. - -#### Conversational headings - -For more conversational areas of the product, like Home cards, sell pages, and empty states, use articles. It makes the language more approachable and helps people to understand new, complex concepts. - - - -#### Do - -- Secure your account with two-step authentication - -#### Don’t - -- Two-step authentication - - - -#### Microcopy headings - -For labels, titles, and microcopy, avoid articles to keep content short and actionable. This increases readability and encourages immediate action. - - - -#### Do - -- Create collection - -#### Don’t - -- Create a collection - - - ---- - -## Sentences - -Start sentences with imperative verbs when telling merchants what actions they can take (especially when introducing something new). - -When a merchant reads a sentence that starts with an imperative verb it should sound like they’re being instructed what to do. Don’t use permissive language like “you can.” - - - -#### Do - -Add your first product and see how it looks in your store. - -#### Don’t - -- Products appear in your store after you add them. -- Add your first product so you can see how it looks in your store. - - - ---- - -## Buttons - -{/* keywords: buttons, button copy, button text, button content, links, actions, calls to action, call to actions, action-led, action led, scannable, articles, choose , select, choose vs select, select vs choose, need, must, need vs must, must vs need --> --> */} - -Buttons need to be clear and predictable. Merchants should be able to anticipate what will happen when they select a button. Never mislead someone by mislabeling a button. - -Buttons should always lead with a strong verb that encourages action. To provide enough context to merchants, use the \{verb\} + \{noun\} content formula on buttons except in the case of common actions like “Done,” “Close,” “Cancel,” or “OK.” - - - -#### Do - -- Activate Apple Pay -- Explore free themes -- View shipping settings - -#### Don’t - -- Try Apple Pay -- Free themes -- Settings - - - -Always write button text in sentence case, which means the first word is capitalized and the rest are lowercase (unless a term is a proper noun). - - - -#### Do - -- Buy new domain - -#### Don’t - -- Buy New Domain - - - -Avoid unnecessary words and articles such as “the,” “an,” or “a.” - - - -#### Do - -Add menu item - -#### Don’t - -Add a menu item - - - ---- - -## Links - -Links need to be clear and predictable. Merchants should be able to anticipate what will happen when they select a link. Never mislead someone by mislabeling a link. - - - -#### Do - -- Get started with the - [Ultimate Guide to Dropshipping](https://www.shopify.com/guides/dropshipping). - -#### Don’t - -- Want to learn more about dropshipping? - [Click here](https://www.youtube.com/watch?v=dQw4w9WgXcQ). - - - -Links should never use “click here” or “here” as link text. - -### Links in a sentence - -Links in full sentences shouldn’t link the entire sentence, only the text that describes where merchants go when they select the link. - -It’s better for [internationalization](/foundations/internationalization) to have only single terms or small parts of phrases linked. Linking a full phrase is problematic because the word order might change, which would break the link into two parts. - - - -#### Do - -- Avoid chargeback costs with [Shopify Protect](https://www.shopify.com/fraud-protect). -- Manage the [channels](/) you use to sell products and services. - -#### Don’t - -- [Learn more about Shopify Protect](https://www.youtube.com/watch?v=dQw4w9WgXcQ). -- [Manage the channels](/) you use to sell products and services. - - - -### Links outside of a sentence - -Links that aren’t in full sentences should use the \{verb + noun\} pattern and not be punctuated, with the exception of question marks. - - - -#### Do - -- [Learn more](/) -- [Forgot password?](/) - -#### Don’t - -- [Learn more.](https://www.youtube.com/watch?v=dQw4w9WgXcQ) -- [Forgot password](/) - - - -### “Learn more” links - -When linking out to documentation from help text in the admin, link the relevant key words. In general, don’t add another sentence starting with “Learn more...”, because it’s repetitive and takes up unnecessary space. - - - -#### Do - -- This is a [read-only environment variable](https://shopify.dev/docs/custom-storefronts/oxygen/storefronts#environment-variables). It can’t be edited or deleted. - -#### Don’t - -- This is a read-only environment variable. It can’t be edited or deleted. Learn more about [read-only environment variables](https://shopify.dev/docs/custom-storefronts/oxygen/storefronts#environment-variables). - - - -Only add a “Learn more...” sentence if the help text addresses more than one concept, each of which could be linked to their own help doc. In that situation, pick the most appropriate link and contextualize it with “Learn more...”. - - - -#### Do - -- Storefront API tokens are unique per Hydrogen storefront but their permission scopes are shared by all Hydrogen storefronts. Learn more about [Storefront API tokens](https://shopify.dev/docs/api/usage/authentication#access-tokens-for-the-storefront-api). - -#### Don’t - -- [Storefront API tokens](https://shopify.dev/docs/api/usage/authentication#access-tokens-for-the-storefront-api) are unique per [Hydrogen storefront](https://shopify.dev/docs/custom-storefronts/oxygen/storefronts) but their [permission scopes](https://shopify.dev/docs/api/usage/access-scopes#unauthenticated-access-scopes) are shared across all Hydrogen storefronts. - - - ---- - -## Confirmations - -Confirmations are presented for actions that can’t be undone or are difficult to undo. - -Confirmation messages should: - -- Always give merchants the option to either confirm or cancel their action -- Be used for a single, primary task -- Keep body content to one line of text and not use more than two calls to action - -Confirmation titles should: - -- Ask if merchants want to continue, using a concise \{verb\}+\{noun\} question -- Be one sentence and avoid using punctuation, with the exception of question marks -- Avoid articles (the, a, an) to keep content short and actionable -- Be written in sentence case (the first word is capitalized, and the rest is lowercase) - - - -#### Do - -- Discard unsaved changes? -- Delete 2 collections? -- Delete Dark Blue Tee? -- Leave page with unsaved changes? - -#### Don’t - -- Discard? -- Are you sure you want to delete? -- Are you sure you want to delete Dark Blue Tee? -- This page has unsaved changes are you sure you want to leave? - - - -Confirmation body content should: - -- Clearly explain if the action is irreversible or difficult to undo, using [plain language](https://polaris.shopify.com/content/product-content#write-for-a-grade-7-reading-level). -- Be concise: use only one line of text. Don’t start the sentence with “Are you sure?” - - - -#### Do - -- This can’t be undone. -- This will delete all edits since you last saved. -- Leaving this page will delete all unsaved changes. - -#### Don’t - -- Are you sure you want to delete the variant Dark Blue Tee/Small/Silk? This action cannot be reversed. -- If you discard changes, you’ll delete any edits you made since you last saved. -- If you leave this page, all unsaved changes will be lost. Are you sure you want to leave this page? - - - -Confirmation primary and secondary actions should: - -- Be clear and predictable: merchants should be able to anticipate what will happen when they click a button -- Scannable: avoid unnecessary words and articles such as “the,” “an,” or “a” - -Since confirmation messages are placed in modals, the call to action in the title is in close context to the buttons. Because of this, the call to action text on the buttons doesn’t have to follow the \{verb\}+\{noun\} pattern. Instead, one word calls to action can be used, for example, [Cancel] \[Delete]. - -**Deletions** - -Before merchants can delete objects like collections, transfers, products, and variants, we present them with a confirmation message that has two calls to action, one to [Cancel] and one to [Delete]. We keep it short and don’t use \{verb\}+\{noun\} button copy. - -Primary action: - - - -#### Do - -- Delete - -#### Don’t - -- Remove -- Erase -- Discard - - - -Secondary action: - - - -#### Do - -- Cancel - -#### Don’t - -- Discard - - - -**Discarding changes while on a page** - -Primary action: - - - -#### Do - -- Discard - -#### Don’t - -- Cancel - - - -Secondary action: - - - -#### Do - -- Keep editing - -#### Don’t - -- Go back -- Cancel - - - -**Leaving a page with unsaved changes** - -Primary action: - - - -#### Do - -- Leave page - -#### Don’t - -- Exit -- Delete changes - - - -Secondary action: - - - -#### Do - -- Stay - -#### Don’t - -- Go back -- Cancel -- Discard -- Keep editing - - - ---- - -## Directional language - -In the same way that links should never say “click here,” avoid using directional language such as “above/below” or “right/left.” - -Directional language is confusing and unhelpful when spoken aloud by a screen reader. It creates challenges for internationalization (for example, right to left languages) and can conflict with mobile design patterns. - -Directional language often indicates a lack of visual or content hierarchy. Whenever possible, keep instructional copy and related actions close together so that directional language isn’t needed. - ---- - -## Save vs. done - -Use “Save” when a change is saved immediately to a database and “Done” for [deferred saves](#deferred-saves). - -### Saving immediately to a database - -Use “Save” as the default for any action that saves immediately to a database. - -#### Saving using the context bar component - -When merchants make changes on a page they’re sometimes presented with a context bar at the top. This context bar displays a status message on the left to indicate the state of the changes, like “Unsaved discount.” Since the status message provides context around the action being taken, the button doesn’t need to follow the common \{verb\} + \{noun\} content formula. For example, [Save] instead of [Save product]. In the context bar component, use the verb “Save”. - - - -#### Do - -Use the verb “Save” in the context bar - -![web context bar](/images/content/actionable-language/web-context-bar@2x.png) - -#### Don’t - -- Done -- Apply -- Save discount - - - -Status messages in the context bar should be descriptive and follow the \{adjective\} + \{noun\} content formula. - - - -#### Do - -- Unsaved discount -- Unsaved product -- Unsaved customer -- Unsaved shipping zone - -#### Don’t - -- Unsaved changes - - - -#### Saving in modals and sheets - -Use the verb “Save” in modals and sheets when saving directly to the database. - - - -#### Do - -Use the verb “Save” in modals and sheets - -![web save modal in edit state](/images/content/actionable-language/web-edit-save@2x.png) - -#### Don’t - -- Edit -- Done -- Apply - - - -#### Saving at the bottom of a page - -Use the \{Save\} + \{noun\} content formula when a save action doesn’t have the surrounding context of a modal or context bar. This applies to the save action at the bottom of pages. - -For example, the action at the bottom of the Create discount page uses [Save discount]: - - - -#### Do - -![web save page action](/images/content/actionable-language/web-page-actions@2x.png) - -#### Don’t - -- Create discount -- Save -- Done -- Apply - - - -### Deferred saves - -Sometimes, when merchants confirm a set of changes inside a modal or sheet, these changes are applied as unsaved changes to the current page. In other words, the changes made weren’t immediately saved to the database. When this happens, don’t use the verb “Save” as the call to action because it would be misleading. - -Use the adjective “Done” for deferred saves. When the modal or sheet closes, then merchants can save all of the changes they made. - -Most deferred saves happen when confirming changes in Add, Edit, Manage, and Select modals and sheets. - - - -#### Do - -![deferred save modal with done button](/images/content/actionable-language/add-done@2x.png) - -#### Don’t - -- Add -- Edit -- Manage -- Select -- Apply -- Save - - - -### Datepickers - -Use the adjective “Done” for datepickers. - - - -#### Do - -![datepicker with done button](/images/content/actionable-language/datepicker@2x.png) - -#### Don’t - -- Apply -- Select -- Save - - - ---- - -## Close vs. accept - -Use the verb “Close” when merchants need to confirm they’ve read something, but aren’t required to legally accept terms of service before continuing. For example, use “Close” when presenting a security notification in a modal or sheet. - -Don't use "OK". "OK" is an exclamation, not an action. When merchants click the "Close" button, they’re not saying “OK”, they’re doing a specific action. - - - -#### Do - -![modal with Close button](/images/content/actionable-language/modal-with-close@2x.png) - -#### Don’t - -- OK -- Ok -- O.k. -- Okay -- Done -- Accept -- Continue - - - -Use the verb “Accept” when terms of service require legal confirmation before merchants can continue. - - - -#### Do - -Accept - -#### Don’t - -- Ok -- Done -- Close -- Continue - - - ---- - -## Close vs. cancel - -Use the back arrow button as the call to action for modals and screens when: - -- the content is in a view-only state - -Don’t use “Close” as the call to action when there’s the option for merchants to: - -- make any changes to the modal or screen -- confirm they’ve read something or accept terms of service (see [OK vs. accept](#OK-accept)) - - - -#### Do - -![web modal with close button](/images/content/actionable-language/web-close@2x.png) - -#### Don’t - -- Cancel -- Exit -- OK - - - -Use “Cancel” as the option for merchants to back out of any changes made on a page, modal, or sheet. When the cancel button is pressed, changes automatically get discarded. “Cancel” is often paired with “Save” and “Done” actions (and is always placed to the left). - - - -#### Do - -Use the verb “Cancel” as the action for merchants to back out of changes - -![web save modal in edit state](/images/content/actionable-language/web-edit-save@2x.png) - -#### Don’t - -- Exit -- Close -- Done - - - ---- - -## Select vs. choose - -Use the verb “select”: - -- When telling merchants to pick something from a limited number of options of the same kind -- When merchants need to make an easy or obvious decision that doesn’t require deep reflection or analysis -- For defined lists and dropdown menus -- When merchants are given the option to pick from a list of already existing objects, like products - -Pair Select modals and screens with the “Done” call to action. - - - -#### Do - -- Select your country of residence -- Select image -- Select countries - -#### Don’t - -- Select a pricing plan. -- Choose countries - - - -Use the verb “choose” when: - -- Encouraging merchants to make a decision that is more subjective, strategic, emotional, or open-ended -- Merchants have to pick from a large inventory of items, like themes, or options that require strategic decision making, like pricing plans - - - -#### Do - -- Choose a theme -- Choose a pricing plan. - -#### Don’t - -- Select a theme -- Select a pricing plan -- Choose a province. -- Pick a province. -- Pick a pricing plan. - - - ---- - -## Edit vs. manage - -Use the verb “edit” when you can change the input of a field (letters, numbers, properties). Place as link text next to the field or area that is being edited. There’s no need for a noun unless it’s unclear what’s being edited. - - - -#### Do - -- In this example, “Edit” is the correct call to action because it opens a modal where merchants update customer contact information ![modal where merchants can edit contact information](/images/content/actionable-language/edit-do@2x.png) - Here are the editing actions that become available after the “Edit” button is selected ![modal where merchants can edit customer information](/images/content/actionable-language/edit-do2@2x.png) -- Edit an individual blog post - -#### Don’t - -- Use “Edit” if multiple actions can be taken after. “Manage” is more suitable. -- Modify - - - -Use the verb “manage” at a higher level to convey that multiple actions can be done, or sections and settings can be updated. Pair this verb with a noun if it’s in a button or if it’s unclear what is being managed. - - - -#### Do - -- In this example, “Manage” is the correct call to action because it opens a modal where merchants can select channels to display their products ![manage button on the product page in the product availability section](/images/content/actionable-language/manage-do@2x.png) - Here are the options that become available after the “Manage” button is selected ![modal where merchants can select sales channels](/images/content/actionable-language/manage-do2@2x.png) -- Manage multiple blog posts and comments - -#### Don’t - -- Edit -- Modify - - - ---- - -## Change vs. switch - -Use the verb “change” when merchants can replace an option, but not edit it. For example, they can change an image or theme, but the action doesn’t include editing its properties. Place as link text next to the field or area that is being changed. There’s no need for a noun unless it’s unclear what is being changed. - - - -#### Do - -- Change image ![change button at the bottom of the image display on the slideshow page of the theme editor](/images/content/actionable-language/change-do@2x.png) - Here are the options that become available after the “Change” button is selected ![images library with an upload drop zone](/images/content/actionable-language/change-do2@2x.png) - -#### Don’t - -- Use the verb “change” if a selection must be made between only two options - - - -Use the verb “switch” when it’s important for merchants to know what they’re switching between, like users, accounts, locations, or modes. When the switch happens, the previous option is turned off, logged out, or deactivated. Always pair with a noun to prevent confusion. - - - -#### Do - -- ![Title that says, switch from your third party provider to shopify payments, with a card below that says, payment processing rate of 2.4% plus 0.25 euros”](/images/content/actionable-language/switch-do@2x.png) -- ![Modal that says, switch locations to ‘new space’? You will only be able to sell inventory set to this location. Tax rates may also change. At the bottom there are two buttons. One says, cancel and one says, switch.](/images/content/actionable-language/switch-do2@2x.png) - -#### Don’t - -- Switch images - - - ---- - -## Create vs. add - -Use the verb “create” when you’re encouraging merchants to generate something from scratch, like a collection. - - - -#### Do - -- Create order -- Create collection -- Create discount - -#### Don’t - -- Add order -- Add collection -- Add discount - - - -Use the verb “add” when you’re encouraging merchants to bring something that already exists into Shopify, like a product. - - - -#### Do - -- Add product -- Add customer - -#### Don’t - -- Create product -- Create customer - - - ---- - -## View vs. see - -Use the verb “view” when you’re encouraging merchants to go to a specific page or section for more details, or to reveal more information. Use “view” in buttons, calls to action, and link text. - - - -#### Do - -- View invoices -- View all \{x\} -- View details -- View report -- Try clearing your filters to view all results. - -#### Don’t - -- See invoices -- See all \{x\} -- See details -- See report - - - -Use the verb “see” in more general, conversational descriptions without a specific call to action. - - - -#### Do - -- Add your first product and see how it looks on your store. -- Customers will see this name at checkout. - -#### Don’t - -- Add your first product and view how it looks on your store. -- Customers will view this name at checkout. - - - ---- - -## Need vs. must - -Use the verb “need” when you’re telling merchants something they’re required to do or should do. - - - -#### Do - -To buy a shipping label, you need to enter the total weight of your shipment, including packaging. - -#### Don’t - -To buy a shipping label, you must enter the total weight of your shipment, including packaging. - - - ---- - -## Export vs. download - -Use “export” as the call to action when merchants needs to transfer data from Shopify and convert it into a different format. - - - -#### Do - -- Export CSV file - -#### Don’t - -- Download CSV file - - - -Use “download” as the call to action when merchants need to copy data (of the same format) from Shopify to a computer system. - - - -#### Do - -- Download shipping label -- Download PDF - -#### Don’t - -- Export shipping label -- Export PDF - - - ---- - -## Import vs. upload - -Use “import” as the call to action when merchants need to transfer data and convert it into a different format so it can be used in Shopify. - - - -#### Do - -- Import CSV file - -#### Don’t - -- Download CSV file - - - -Use “upload” as the call to action when merchants need to copy data of the same format from a computer system into Shopify. - - - -#### Do - -- Upload image -- Upload file - -#### Don’t - -- Upload CSV file - - diff --git a/polaris.shopify.com/content/content/alternative-text.mdx b/polaris.shopify.com/content/content/alternative-text.mdx index 39a5208563a..97e7211f39d 100644 --- a/polaris.shopify.com/content/content/alternative-text.mdx +++ b/polaris.shopify.com/content/content/alternative-text.mdx @@ -1,7 +1,8 @@ --- title: Alternative text -description: Alternative text (alt text) helps provide an inclusive experience for merchants who use screen readers. +description: Alt text provides an inclusive experience for merchants who use screen readers. icon: ImageAltIcon +order: 5 keywords: - speech synthesis - alt HTML element attribute @@ -117,7 +118,7 @@ If you’re using the photo as an example of a certain type of sneaker mentioned But if you’re using this image in a product listing, ensure shoppers know the important details of what they are buying, such as "Converse Chuck Taylor All Star Classic Black." -### Situations that need alt text +#### Situations that need alt text #### Icons @@ -161,7 +162,7 @@ Images with more complexity need some consideration. For example, groups of imag For more guidance, visit the W3C page on [complex images](https://www.w3.org/WAI/tutorials/images/complex/). -### Situations that don’t need alt text +#### Situations that don’t need alt text Websites can sometimes be noisy for a screen reader user. While alt text is vital for an equal experience, the briefer you are, the happier your screen reader users will be. Avoid repetition and unnecessary announcements by setting `alt=""` in the scenarios that don’t need it. diff --git a/polaris.shopify.com/content/content/error-messages.mdx b/polaris.shopify.com/content/content/error-messages.mdx index ae717bc93f0..1856546f20e 100644 --- a/polaris.shopify.com/content/content/error-messages.mdx +++ b/polaris.shopify.com/content/content/error-messages.mdx @@ -1,7 +1,8 @@ --- title: Error messages -description: Error messages can be scary. Make errors visible to merchants, easy to understand, and helpful. +description: Make it clear what went wrong and how to fix it icon: AlertDiamondIcon +order: 3 keywords: - error states - invalid @@ -17,764 +18,138 @@ keywords: Error messages should: -- Tell merchants what happened. If there’s a solution, explain it. If possible, offer a one-click fix with a button. If there’s - [no solution](#errors-without-solutions), give troubleshooting instructions. -- Be placed close to the source of the problem. -- Communicate severity using the appropriate [color](#colors) and - [tone of voice](#voice-and-tone). -- Use - [plain language](/content/product-content#respond-to-merchant-needs). -- Be specific. For example, use precise - [numbers and dates](/content/grammar-and-mechanics#dates--numbers--and-measurements). -- Be brief. +- Explain what’s wrong and what the merchant needs to do +- Be specific (exact numbers and dates, or even the merchant’s own data) +- Don’t overapologize or bring “us”/”we” into the conversation unless Shopify caused the problem +- Avoid error jargon like “invalid” +- Use detailed instructions for the next step +- Help merchants avoid mistakes in the first place, using clear content to manage expectations and highlight potential risks +- Only explain what happened behind the scenes when it’s helpful to merchants or you can’t offer a solution -Good design can reduce the need for error messages by preventing them in the first place. +As always, follow all our content principles of keeping it short, using plain language, and getting rid of repetition. Also, good design can reduce the need for error messages by preventing them. ---- - -## Error message types - -Think about the scope of the error when selecting a message type. Is something wrong with the entire application, with the entire current screen, or with a specific element on the screen? - -If the cause of the error is visible and the error just happened, show the error message immediately and as close to the source of the problem as possible. - -### [Text field validation error](#form-validation) - -Use when: - -- An error applies to a text field and feedback can be provided while merchants are typing - -![Text field validation](/images/content/error-messages/text-field-validation-error@2x.png) - -### [Settings warning](#settings-warning) - -Use when: - -- The form input is valid, but you want to warn merchants of a consequence they might not expect - -![Settings warning error](/images/content/error-messages/settings-warning@2x.png) - -### [Page-level banner: critical or warning](#page-level-banners) - -Use when: - -- An error applies to the entire page -- The error is far down the page and it’s critical merchants see the message -- Multiple validation errors on the page need to be summarized -- The error was delayed and it’s okay to inform merchants of the problem when they return to the page - -![Yellow page level banner](/images/content/error-messages/page-level-warning-banner@2x.png) - -![Red page level banner](/images/content/error-messages/page-level-critical-banner@2x.png) - -### [Banner in a card or modal: critical or warning](#banners-in-cards-modals) - -Use when: - -- An error applies to a single card within the page, a single section within a card, or a modal -- You need to direct merchants to a page with multiple sections and you want to visually call out the section with the error - -![Yellow section level banner](/images/content/error-messages/section-level-warning@2x.png) -![Yellow field level banner](/images/content/error-messages/field-level-warning-02@2x.png) +## Design for clarity -### [Exception list: critical or warning](#exception-list-errors) +- Use iconography and color to communicate the severity of the problem and draw the merchant’s attention to what’s wrong +- Place the error close to what needs fixed +- Use red for critical messages that merchants need to deal with immediately to avoid harm to their business +form validation errors +- Use yellow for errors that are part of a daily workflow or warnings that could lead to critical errors if not addressed -Use when: +## Anatomy of an error message -- A message placed within or next to a component can help merchants make better decisions about routine tasks +#### Heading (optional) +- Clearly state the effect of the error on the merchant +- Command immediate attention -![Warning exception list error](/images/content/error-messages/exception-list-warning@2x.png) +#### Body +- If you don’t have a header, clearly state the effect of the error on the merchant +- Explain how to fix it +- Link to help documentation -![Critical exception list error](/images/content/error-messages/high-risk-fraud@2x.png) +#### CTA (optional) +- Provide a one-step solution +- Take merchants to another location expressly for fixing the issue -### [Home notification: critical or warning](#home-notifications) +## Examples -Note: Home notifications should rarely be used for errors. Always attempt to display an error close to the source of the problem. -Use when: - -- A high-priority task must be completed immediately to continue using Shopify or avoid losing money -- A feature doesn’t have a dedicated details page - -![Yellow home notification](/images/content/error-messages/home-notification-warning@2x.png) - -![Red home notification](/images/content/error-messages/home-notification-critical@2x.png) - -### [Admin unavailable](#admin-unavailable-errors) - -Use when: - -- A server error is preventing an entire page from being displayed, like with 400 or 500-series server errors -- Account permissions are preventing someone from accessing Shopify - -![Admin page not found error](/images/content/error-messages/page-not-found@2x.png) - -![Admin page load error](/images/content/error-messages/admin-error@2x.png) - ---- - -## Error colors - -Red is the scariest error color. Only use red for critical messages that merchants need to deal with immediately to avoid harm to their business. For example, if merchants don’t act on the message right away, they might lose money or their store might be suspended. - -Yellow error messages still demand attention, but are more appropriate for messages that are part of a daily workflow. - -### Red (critical) - -Use critical messages to: - -- Bring attention to urgent tasks. If not dealt with immediately, merchants' businesses will be noticeably impacted, like an account being suspended or money being lost. - -Examples of critical message types: - -- Update a payment method expiry date -- Unsuspend an account -- Review an order for fraud -- Fix a problem that’s preventing payment from being processed +#### Multiple errors #### Do -![Red banner with high fraud risk message](/images/content/error-messages/red-banner@2x.png) - -#### Don’t +To save this product, make 2 changes: -![Yellow banner with high fraud risk message](/images/content/error-messages/yellow-banner@2x.png) - - - -The one exception to using red is in form validation errors because this is a standard convention merchants are used to seeing outside of Shopify. - - - -#### Do - -![Form validation with red banner](/images/content/error-messages/validation-banner-red@2x.png) +- Enter title +- Add weight #### Don’t -![Form validation with yellow banner](/images/content/error-messages/validation-banner-yellow@2x.png) - - - -### Yellow (warning) - -Use warning messages to: - -- Help merchants fix issues so they can complete a common workflow or continue to the next step -- Notify merchants about upcoming expirations or pending requests that, if not dealt with soon, could lead to problems in the future - -Examples of warning message types: - -- Fix a problem before proceeding to the next step. -- Fix a problem at some point in a common workflow. -- There’s a pending request. -- There’s an upcoming expiration. -- Changing a setting might have unintended consequences. See - [settings warning](#settings-warning). - - - -#### Do - -![Yellow banner with warning message](/images/content/error-messages/yellow-do@2x.png) +There are 2 errors on this page. -#### Don’t - -![Red banner with warning message](/images/content/error-messages/yellow-dont@2x.png) +- Invalid title +- Weight must be a number value greater than 0.1 lb ---- - -## Anti-patterns - - - - ![Toast error message](/images/content/error-messages/dont-toast-error@2x.png) - -### Avoid using toast for error messages - -Although error toast is still available, we discourage its use. Toast messages are too short to adequately explain what went wrong and how to fix the problem. Because the toast component appears at the bottom of the screen and disappears after 3 seconds, it can easily be missed. Reserve toast for errors not caused by merchants, like a connection issue. Always try to use a banner to inform merchants about persistent errors. - - - - - ![Modal error message](/images/content/error-messages/dont-modals-for-errors@2x.png) - -### Don’t use modals for errors - -Modal dialogs are a good way to ask merchants to confirm a destructive action, but not to tell them an error has occurred. -Modals block merchants until a decision is made, which is likely to make merchants feel pressured. Most errors don’t need to block access to the rest of the feature. - - - - - ![Home notification error message](/images/content/error-messages/dont-home-notification@2x.png) - -### Avoid using [home notifications](#home-notifications) for errors - -Home notification errors are for high-priority tasks that merchants must complete immediately to continue using Shopify or prevent -a negative impact to their business, like losing money. -One exception is errors for features that don‘t have a dedicated details page. - - - - ---- - -## Form validation - -### Text field validation - -Use when: - -- A text field has formatting requirements. Use this pattern to enhance - [validation on form submission](#validate-on-submit). - -Don’t use when: - -- It takes - [more than a full second](https://developers.google.com/web/fundamentals/performance/rail#ux) to validate input and display a message. If there’s a lag before a validation message appears, merchants might shift their attention and miss the error. - Either find a way to improve the validation speed, or rely on the - [validation after form submission](#validate-on-submit). -- The field is empty. Merchants might tab through a form before filling it out, and errors on empty fields can cause confusion and frustration. - -### Component - -- [Text field](/components/selection-and-input/text-field) - -### Content - -- Use two or three words to explain what’s wrong or what’s needed to fix the problem. -- Avoid using the word "invalid" to define an error. When appropriate, use "not valid" instead. -- Since the message is directly below the text field, the copy only needs to explain why the error happened. Optionally, the message can clarify what to do next or offer a one-click fix. - -![Text field validation error](/images/content/error-messages/text-field-validation-error-no-cursor@2x.png) - -**Usage** - -Do an initial validation check as soon as merchants finish typing in the field. - -Merchants can be considered to be finished typing only when keyboard focus moves away from the field and there is at least one character in the field. This helps avoid marking the field as not valid before merchants are really done typing. - -![Initial validation check with purple border](/images/content/error-messages/text-field-validation-purple-incorrect-input@2x.png) - -If the validation check fails, show an error message below the field. - -![Text field turns red](/images/content/error-messages/text-field-validation-error-no-cursor@2x.png) - -Once a field has an error, complete validation checks after each keystroke. - -![Text field validation with cursor by incorrect semi colon](/images/content/error-messages/text-field-validation-cursor@2x.png) - -Remove the error message as soon as the input becomes valid so merchants can immediately tell they fixed the issue. - -![Text field validation with purple border](/images/content/error-messages/text-field-validation-purple-border-cursor@2x.png) - -If the validation process is less than a second but not instant, show a spinner on the field to indicate validation progress. - -![Text field validation in loading state with spinner](/images/content/error-messages/text-field-validation-loading@2x.png) - ---- - -## Validate on submit - -Validate on submit is triggered when merchants press the form’s submit button. The submit button is often \[Save\], but can be another call to action. - -Use when: - -- Not all fields can be validated while merchants are typing. When a form is used for saving data, always validate on submit and validate text fields while typing. For example, if merchants never interact with a required text field, there’s no change to mark it as not valid until they press the submit button. The same applies to form controls other than text fields, such as radio buttons, and selects. - -Don’t use when: - -- A form doesn’t have specific validation requirements, or the form doesn’t save data. For example, a search form that returns no results should display an empty state, rather than a validation error. - -### Component - -- [Banner](/components/feedback-indicators/banner#navigation) - -And one or more of the following: - -- [Text field] -- [Select] -- [Choice list] -- [Checkbox] -- [Radio button] - -### Content - -Banner heading - -- Use a colon to introduce the list. -- Make the heading instructional. Don’t just call out that there are \{x\} number of errors. - -Banner body text - -- Use the [list component](/components/lists/list#navigation) to itemize the errors -- Start each list item with the label of the field that isn't valid, and describe the action needed to fix it - -Individual field error messages: - -- See content guidelines for [validation while typing](#validate-while-typing) - -![Red form validation banner](/images/content/error-messages/validation-banner-red@2x.png) - -Rather than pointing out that there are \{x\} number of errors, be more descriptive. Explain that in order to save or continue, \{x\} number of fields need to be changed. For the bullet point instructions, see if you can word them to be more actionable, for example, “Add a discount code,“ instead of “Discount can’t be blank.“ +#### Settings warning #### Do -![Instructional validation banner](/images/content/error-messages/validation-banner-content-do@2x.png) +Changing store currency will affect reporting, pricing, and more #### Don’t -![Validation banner that only points out that there is an error](/images/content/error-messages/validation-banner-content-dont@2x.png) +**Are you sure you want to change your currency?** \ +Your new currency isn’t supported by PayPal Express. -**Usage** - -Always indicate submission progress. If the fields aren't valid, don’t clear or alter them on behalf of merchants during validation. - -![Spinner displaying on save](/images/content/error-messages/submission-progress@2x.png) - -If the form submission has a single error: - -- Move scroll position to the field that is not valid -- Focus the field -- Show an error message below the field - -![Validation error for a price entry field](/images/content/error-messages/input-validation@2x.png) - -If the form submission has multiple errors: - -- Move scroll position to the top of the screen -- Use a banner to display a summary of all the errors -- Show an error message below each field that is not valid so merchants can scroll through and make corrections - -![Red form validation banner](/images/content/error-messages/validation-banner-red@2x.png) - ---- - -## Settings warning - -Use: - -- To help merchants prevent potential mistakes -- When form input is valid, but you want to warn merchants of a consequence they might not be expecting - -Don’t use: - -- For actual error states - -Tip: Explore ways to prevent the warning message from showing at all. Look for opportunities to add help text or other contextual information to surface or highlight potential risks or consequences of taking, or not taking, the action. - -### Component - -- [Banner](/components/feedback-indicators/banner) without title - -### Content - -- Since the warning message is in close context to the action that triggered the warning, it should be short -- Explain the risks or consequences of an action that’s just been taken -- These messages don’t have to start with actionable language, like, “Change currency.” Here are some options - - Start with the word “This” and explain the consequence, for example, “This will affect inventory prices” - - Start by noting the action, then explain the consequence, “Changing \{x\} will affect \{y\}” -- If available, link to a resource where merchants can learn more - -![In line warning banner below a drop down](/images/content/error-messages/settings-warning@2x.png) - ---- - -## Banners - -### Page-level banners - -Use when: - -- An error applies to the entire screen -- The error is far down the page and it’s critical that they see the message -- [A form was submitted with fields that are not valid](#form-validation) -- If the error was delayed, for example, an action was taken and the error doesn’t immediately appear in context - -Don’t use when: - -- It’s possible to place the banner [in context] because the source of the error is in view and the event that triggered the action just happened - -For multiple error guidelines, see [validate on submit](#validate-on-submit) - -Page-level banner errors should explain: - -- Where the error happened -- What happened -- Why it happened -- What to do next +#### Admin unavailable #### Do -![Error message with arrows pointing at different parts of the message](/images/content/error-messages/banner-breakdown@2x.png) +Heading: The page you’re looking for isn’t available \ +Body: Check the web address or try again later \ +Button: Retry #### Don’t -- Unable to process payment for checkout with negative taxes. +Heading: That page doesn’t exist \ +Body: You must have the wrong address \ +Button: Shopify Home -### Component - -- [Banner](/components/feedback-indicators/banner) - -### Content - -Headings should: - -- Clearly state the problem -- Not use punctuation - -Body content should: - -- Explain how to solve the problem. -- Use actionable language like “do x.” Don‘t use permissive language, like “you can x.” Be concise: no longer than 2 sentences. -- Use periods. - -Calls to action should: - -- Be action-led (verb+noun format) -- Aim for a one-click fix. If the error can be fixed via a single button or menu, offer that action directly in the error message. -- Open a dedicated error-correction view for more complex problems such as reviewing a risky order or editing an unverified customer address. -- Provide a link to documentation for information that may be valuable but can’t fit in a brief error message. - -![Page level warning banner](/images/content/error-messages/page-level-warning-banner@2x.png) - -### Banners in cards and modals - -Use when: - -- Merchants are engaged in a task flow and you want to warn them about potential issues with the task at hand, or inform them something has gone wrong -- Directing merchants to a page with multiple sections and you want to visibly call out the section with the error - -Don’t use when: - -- An error applies to the entire screen. -- The error is far down the page and it’s critical that merchants see the message. -- If the error was delayed. For example, an action was taken and the error doesn’t immediately appear in context. In these cases, use the - [page-level banner](#page-level-banners) - -### Component - -- [Banner](/components/feedback-indicators/banner#navigation) - -### Variant - -- Without title - -### Content - -- The more contextual the message, the less you need to say, so go straight to explaining what happened and how to fix -- Keep to one sentence -- Contextual banners don’t have titles -- Try to add a next step, whether in a button or link -- Use when there is more than one call to action - -## ![Warning banner at the top of a card below the card title](/images/content/error-messages/section-level-warning@2x.png) - -## Exception lists - -Use when: - -- Items in a list are in a noteworthy state that you want to make merchants aware of, like a status, or piece of information (like a high risk order) that’s directly relevant to the information it’s connected to - -Example: - -- High risk order - -Don’t use when: - -- The source of the problem is an entire card or page - -### Component - -- [Exception list](/components/feedback-indicators/exception-list) - -Variant - -- Status: critical or warning - -### Content - -Content should: - -- Highlight an exceptional state that encourages clicking on the list item -- Pair content with a warning or error icon -- Always lead with what went wrong -- A description is required -- A title is optional -- Links are optional but not common because the list item is actionable -- Be concise - -![Exception list warning](/images/content/error-messages/exception-list-warning@2x.png) - -![Exception list error](/images/content/error-messages/high-risk-fraud@2x.png) - ---- - -## Home notifications - -Home notifications are primarily used to prevent merchants from losing money or help them continue using Shopify if they don’t act on the error message instructions immediately. - -Use for: - -- High-priority tasks that must be completed immediately to continue using - Shopify or avoid losing money. -- Important enough tasks that we wouldn’t want merchants to navigate to another place in Shopify to find it, or stumble upon while completing another task. -- Errors for features that don’t have a dedicated details page. For example, before - Shopify Capital had a details page, related status messages were temporarily surfaced in Home. - -Don’t use for: - -- Tips or advice -- Positive feedback -- Confirmation messages -- New feature announcements -- Status messages, other than those for Shopify Capital -- Messages that can be displayed in context -- Error messages that should be displayed in context -- Task-related errors like a problem with saving a page - -![Structure of home notification with a header, body content, and button](/images/content/error-messages/home-notification-anatomy@2x.png) - -### Warning home notifications - -Warning home notifications are pre-emptive. They let merchants know that their finances will be impacted if action isn’t taken in a couple days or more, or that an action can be taken to make money sooner. - -- Financing request is pending -- Warn about upcoming expiration -- Pending status, like with Shopify Capital application status - - - -#### Do - -![Warning home notification with credit card expiry message](/images/content/error-messages/home-notification-warning@2x.png) - -#### Don’t - -![Warning home notification with chargeback message](/images/content/error-messages/dont-home-notification@2x.png) - - - -### Critical home notifications - -Critical home notifications inform merchants of issues that: - -- Currently impact their finances -- Will have an impact on their finances if action isn’t taken immediately -- Prevent the normal operation of their business or account - -Critical home notifications can be used for these message types: - -- Trial expired -- Domain expired -- Credit card expired -- Account is suspended -- Shopify Payment payouts on hold -- Payment processing issues -- Payment authorizations expiring that day - - - -#### Do - -![Critical home notification with account on hold message](/images/content/error-messages/home-notification-critical@2x.png) - -#### Don’t - -![Critical home notification with out of stock message](/images/content/error-messages/dont-home-notification-02@2x.png) - - - ---- - -## Admin unavailable errors - -Sometimes the admin can’t be displayed due to a network issue, browser limitation, connection problem, or server issue. 400 and 500 series errors fall in this category. In these cases, always explain what went wrong and provide merchants with a troubleshooting step, like refreshing the page. - -Use when: - -- A page or the entire admin can’t be displayed - -Don’t use when: - -- The error can be placed in context, close to the source of the problem - - - -#### Do - -![Page not found error with internet connection message](/images/content/error-messages/page-not-found-02@2x.png) - -#### Don’t - -![Page not found error with oops, something went wrong message](/images/content/error-messages/dont-page-not-found@2x.png) - - - -Don’t use internal language in error messages and avoid using question formats. - - - -#### Do - -![Problem loading page error with troubleshooting tips](/images/content/error-messages/admin-error@2x.png) - -#### Don’t - -![Problem loading page error with content that talks about operational engineers](/images/content/error-messages/dont-admin-error@2x.png) - - - -### Component: - -- [Empty state](/components/layout-and-structure/empty-state) - -### Content - -Headings should: - -- Heading should explain what went wrong -- Body should help merchants troubleshoot the problem -- Call to action should provide the most probable fix, like reloading the page, or going to the previous page or Shopify Home - -![Page not found error](/images/content/error-messages/page-not-found@2x.png) - ---- - -## Errors without solutions - -When a service issue occurs in Shopify or is caused by a third party, we don’t always have a solution to offer to merchants. In these cases, always explain what went wrong so they can attempt to troubleshoot. If available, provide them with a troubleshooting step, like refreshing the page or returning at a later time. - -Use when: - -- Merchants are being denied access to a page or the entire admin - [See admin unavailable errors](#admin-unavailable-errors) -- A third party issue is causing a disruption to merchants’ workflows - -Don’t use when: - -- There’s literally any solution we can offer to merchants - - - -#### Do - -![Carrier may not be able to pick up package error message](/images/content/error-messages/warning-no-solution@2x.png) -![Carrier may not be able to pick up package error message](/images/content/error-messages/warning-no-solution-2@2x.png) - -#### Don’t - -- Don’t use the “Something went wrong. Please try again in a few minutes.” message when there’s any option to offer more context. - - - - - -#### Do - -- This error message is a last resort: "Something went wrong. Please try again in - a few minutes." - -#### Don’t - -- An error occurred -- 1 error -- Invalid - - - ---- - -## Voice and tone - -These content guidelines are based on common copy mistakes. Avoid sounding overly apologetic, too technical, or hyperbolic. Keep Shopify out of the conversation unless Shopify was the cause of the error. Don’t downplay the error by telling merchants not to worry or by adding humor to a negative situation. - -Avoid the word “please” so it’s not overused throughout the admin. Don’t downplay serious problems. - - - -#### Do - -- Some of today’s sales data isn’t updated yet. This will be fixed soon. Your data is safe, and your actual sales are not affected. - -#### Don’t - -- Today’s sales data **might** not be accurate, but **please don’t worry—it’s just temporary**. - - - -Don’t use scary, technical words in error messages. - - - -#### Do - -- Product weight can’t be negative. Change the product weight to be 0 or higher and try again. - -#### Don’t - -- **Error** **Line items grams** must be greater than or equal to 0. - - - -Error messages are not the place for hyperbole or injecting personality. +#### Banner #### Do -- High risk of fraud detected - -Before fulfilling this order or capturing payment, review the Risk Analysis and determine if this order is fraudulent. +Heading: Couldn’t deposit payout \ +Body: The bank account we have on file was closed. Update your details, and we’ll retry automatically. +Button: Update bank account #### Don’t -- **Uh oh! High risk of fraud detected** +Heading: Invalid bank account +Body: Your payout was not deposited because your bank account was closed. Go to your bank account details and update them to match a valid checking account. Then save so that we can retry. +Button: Next -Looks like there’s a high fraud risk with this order. Better review the Risk -Analysis to make sure the order is safe! -Don’t use internal Shopify terms. Only include the information merchants need. +#### Toast #### Do -- There’s a problem loading this page - -There’s a technical problem with Shopify that has prevented this page from loading. Try reloading this page or going to another page in Shopify. If that doesn’t work, visit our status page for updates and try again later. +Connection timed out #### Don’t -- There’s a technical problem with Shopify that has prevented this page from loading. **Our operation engineers are aware of this problem and are working hard to get it solved**. +Sorry, the connection time out. Try again later. -Keep Shopify out of the conversation. Focus on the information merchants need to complete their task efficiently. +#### Errors without solutions #### Do -- Before you can view earnings from your store, you need to complete your account setup. [Complete account setup] +Something went wrong. Refresh your browser to try again. #### Don’t -- Before **we** can provide you with earnings from your store, **we** need some additional information. [Complete account setup] +Sorry, something went wrong. Learn more. diff --git a/polaris.shopify.com/content/content/fundamentals.mdx b/polaris.shopify.com/content/content/fundamentals.mdx new file mode 100644 index 00000000000..fd6b8d36f82 --- /dev/null +++ b/polaris.shopify.com/content/content/fundamentals.mdx @@ -0,0 +1,85 @@ +--- +title: Fundamentals +description: How to design content to create world-class software +icon: TextInColumnsIcon +order: 1 +keywords: + - content standards + - content guidelines + - content strategy practices + - interface content + - strategic language + - edit content + - editing content + - reading level + - writes + - writing + - writing tips + - language tips + - content tips + - designing + - strategic designing + - action + - consistency + - consistent + - writing public-facing text + - public-facing text + - writing public-facing copy + - public-facing copy + - writing public-facing content + - public-facing content +--- + +# {frontmatter.title} + +{frontmatter.description} + +These fundamentals apply to every piece of content you create. For specific questions, dig into our detailed content guidelines for everything from [grammar](/content/grammar-and-mechanics) to [components](/components). + +Think of tools you use every day, such as your phone, car, blender. They all have a learning curve. But the very best of them feel easy from the very first use. Buttons are where you expect them. Labeling is intuitive. Everything unnecessary has been removed, and what’s left is the perfect balance of words and visuals. That’s what we’re building here at Shopify. + + +## Content đŸ€ design + +Words are an essential part of the design. Very few interfaces make sense without content. But each word and every period adds noise to the experience. So weigh every word. + +- Only add content that’s necessary for clarity +- Let visuals and icons do the talking wherever you can (“+” not “+ Add”) +- Remember design doesn’t always dictate content (not every situation calls for subcopy, even if the component has been designed to include it) + + +**Tip:** Ask yourself, could this word be an icon? Could this header, subcopy, and button just be a button? + +## Keep it lean + +Too much content makes a tool feel cheap and that it’s hard to use. Not enough leads to confusion and frustration. Great design means finding that sweet spot. + +- Find the shortest, clearest way to give merchants only the info they need to take action +- Skip the punctuation (exceptions: questions or text with 2+ sentences) +- Get rid of any repetition + +**Tip:** Approach content like Jenga. What’s the most you can take away before things fall apart? + + +## Write like merchants talk + +Don’t worry too much about voice and tone, just focus on sounding human + +- Use plain language +- Use contractions (“don’t” not “do not”) +- Some jargon is okay, as long as it’s what actual merchants say +- Aim for a 7th grade reading level—it’s easiest for merchants to digest + +**Tip:** Read it out loud. Does it sound like something a human would say? Ship it. + +## Inspire action + +Don’t overwhelm people with too many choices or too much info upfront + +- Focus on the one thing merchants need to know or do next +- Start sentences with verbs so they feel like actionable instructions +- Be direct (“add apps” not “you can add apps”) +- Use design (font size, location on the screen) to communicate importance +- Break multi-part tasks down into digestible steps (aka “progressive disclosure”) + +**Tip:** What’s the most important thing for merchants to do here? If it’s not clear, start over. diff --git a/polaris.shopify.com/content/content/grammar-and-mechanics.mdx b/polaris.shopify.com/content/content/grammar-and-mechanics.mdx index f879dde360a..f314922ab93 100644 --- a/polaris.shopify.com/content/content/grammar-and-mechanics.mdx +++ b/polaris.shopify.com/content/content/grammar-and-mechanics.mdx @@ -1,7 +1,8 @@ --- -title: Grammar and mechanics -description: This guide is to help designers, developers, recruiters, UX-ers, product managers, support advisors, or anyone who writes public-facing text for Shopify. +title: Grammar +description: For anyone who writes for the admin icon: TextGrammarIcon +order: 2 keywords: - writing instructions - writing rules @@ -24,207 +25,268 @@ keywords: {frontmatter.description} -## Basics +## Addresses -### Active voice +#### Address -You should (almost) always write in the active voice: +Lay out address forms in the following format: -- Subject (person/thing acting) verb (the action) object (receives the action) +``` +First name Last name +Address +Apartment, suite, etc. (optional) +City +Country Province Postal code +``` -Use the active voice if merchants need to do something. It should be clear that the subject is the one doing the action. +Please note, “optional” in `Apartment, suite, etc. (optional)` means that the field is optional for customers to complete, but we should always include it in the form. #### Do -Add details to the product +- Use locale-specific alternatives for province and postal code, for example, the US uses State and ZIP code #### Don’t -Details were added to the product +- Add extra fields +- Change the placeholder text -### Passive voice +#### Country, province, and state names + +Use a nation’s proper name when referring to it as a noun. + + + +#### Do -To tell if you’re using the passive voice, look out for the following signs: +Your store must be located in the United States. + +#### Don’t -- When the object comes before the subject (“the item was purchased by the customer”) -- Past tense verbs (“was added”, “was created") -- Forms of the verb “to be” (“was”, “is”, “were”) +Your store must be located in the US. -You should almost always write in the active voice, but here’s when to use the passive voice: + -- To avoid referring to yourself or Shopify -- To make it clear that you didn’t personally take an action or make a decision -- If the object (thing having action done to it) is more important than the subject (person doing the thing) +When using a country as an adjective (such as when referring to currency), use the abbreviated form without punctuation. #### Do -Invoices are created monthly and emailed to -[marki.yeung@nomail.com](mailto:Marki.Yeung@nomail.com). +Pinterest requires your store to use US currency. #### Don’t -Shopify creates and emails your invoices monthly to -[simran.robichaud@nomail.com](mailto:Simran.Robichaud@nomail.com). +U.S. currency -### Contractions +Things to watch for: -Contractions are abbreviated words, such as "can't", "aren't", and "you're", and help set a light and casual tone. While you should use contractions in most cases, avoid contracting verbs that sound awkward when you say them out loud, or have been phased out of modern day speech. +- Don’t use colloquial forms of a nation or state name, for example, America instead of the United States +- Search online to see whether nations commonly use “the” before their name, for example, the Philippines or the Falkland Islands + +## Capitalization + +**Use sentence case (capitalize the first word only) for:** + +- Headings +- Subheadings +- Buttons +- Card titles +- Email subject lines #### Do -- You can’t have products with negative weights -- Your products don’t have weights -- You’re all set up -- This product doesn’t require shipping -- The customer name shouldn’t contain numbers -- It’s a good time to plan your Black Friday sale -- An error occurred and your changes couldn’t be saved -- I’m Kit, your digital marketing assistant -- This transfer hasn’t been received -- You haven’t connected your account -- You’ve exceeded 10 password attempts +Create purchase order #### Don’t -- That’ll make sure you are all set up -- It would’ve been possible if you’d installed the latest updates -- The set up was not complete, but this’ll do -- There’re 10 products in this collection -- Your product mustn’t be more than 20kgs -- This product needn’t be shipped -- There are 3 visitors who’ve viewed this product -- You gotta set up Shopify Payments to use Shopify Capital -- It’d be a good idea to place an ad this weekend +Create Purchase Order -### Plain language +**Capitalize:** -Use words and language that our merchants use. Avoid jargon or technical terminology. Make sure each sentence has a single focus and keep them short. Aim for a Grade 7 reading level. +- Proper or trademarked nouns (names of products/brands, countries, people) +- Product names unique to Shopify +- Job titles when they come before or after a person’s name #### Do -- We’ve made some changes to improve your store’s security. -- These products aren’t getting a lot of views, but visitors are adding them to their carts. +- Shopify Payments +- Jane Smith, Content Strategist #### Don’t -- Your SSL certificates were activated. -- These are your less popular products with the highest add-to-cart conversion. - +- shopify balance +- Jane Smith, content strategist ---- +**Use lowercase for:** -## Capitalization +- Features or product terms not unique to Shopify +- Job titles without a name associated with them +- First letter following a / -### Headings + + +#### Do -Use sentence case for all headings: +- blogs, navigation, admin, page +- The content strategist designed this +- ZIP/postal code -- Capitalize the first word of a heading -- Capitalize proper or trademarked nouns (names of products, countries, or people) -- Lowercase for everything else +#### Don’t + +- Blogs, Navigation, Admin, Page +- The Content Strategist designed this +- ZIP/Postal code + + +## Contractions + +Use contractions—they’re short and conversational #### Do -Create purchase order +Can't, it’s, you’re, doesn’t #### Don’t -Create Purchase Order +Can not, it is, you are, does not -### Product and feature names +--- -In general, if a feature or product isn’t unique to Shopify, such as blogs, navigation, or pages, then don’t capitalize it. If it’s unique to Shopify and marketable as its own product, such as Shopify Payments or Frenzy, then capitalize it. +## Formatting + +#### Bold + +When in doubt, don’t bold. + +Use bold sparingly and only where strong emphasis is required. Don’t use bold to create a heading or emphasize: + +- Proper nouns +- Merchant input +- Checkbox titles #### Do -- blogs -- navigation -- Shopify Payments +After your first sale, PayPal will email you at **merchant@email.com** with instructions. #### Don’t -- Pages -- shopify app store -- shopify balance +Are you sure you want to delete **Sunset T-shirt**? -### Trademarks +--- + +## Headings -Respect the usage guidelines of any third-party intellectual property. For example, in US communications, Apple Pay requires you to include the trademark symbol (ℱ) the first time Apple Pay appears in body copy. +Headings and subheadings are titles and subtitles that refer to sections of the interface. -Review the third party’s brand usage guidelines to make sure you're using the company’s name and logo correctly. +#### Basic structure -### Job titles +Headings and subheadings should be: -Job titles should be capitalized when they come before or after a person’s name. When referring to a job title without referencing a name, don’t capitalize the job title. +**Informative and descriptive:** + +- Highlight the most important concept or piece of information for merchants +- Help merchants understand what they’ll find in the section below + +**Concise and scannable:** + +- Use simple, clear language +- Keep headings to a single sentence +- Avoid using punctuation such as periods, commas, or semicolons +- Write in sentence case (capitalize the first word and proper nouns only) +- Whether or not to use articles (“the,” “a,” “an”) in headings and subheadings depends on the type of message. #### Do -- Content Strategist Jane Smith -- Jane Smith, Content Strategist -- Jane Smith is a content strategist. -- The content strategist designed the information architecture. +- Online store dashboard +- Custom reports +- Sell your products in person #### Don’t -- content strategist Jane Smith -- Jane Smith, content strategist -- Jane Smith is a Content Strategist. -- The Content Strategist redesigned the information architecture. - +- This is your online store dashboard +- Custom Reports +- Sell your products in person! -### Letters following slashes +#### Conversational headings -The first letter following a slash shouldn’t be capitalized. +For more conversational areas of the product, like Home cards, sell pages, and empty states, use articles. It makes the language more approachable and helps people to understand new, complex concepts. #### Do -ZIP/postal code required +- Secure your account with two-step authentication #### Don’t -ZIP/Postal code required +- Two-step authentication --- -## Headings and subheadings +## Links + +Avoid links if possible: + +- Links add clutter and make things feel less like software, more like an old-fashioned webpage +- Merchants are already in the habit of visiting the help center or using sidekick if they have Qs, so building links into the interface is rarely necessary + +If you have to point merchants to added info: + +- Never use “click here” or “here” for link text +- For added info that it’s essential for most merchants to know, use the info icon (for short, stand-alone info), an embedded link (within the flow of an existing sentence), or a “learn more” link (for longer, multi-faceted info) +- If you have to include “learn more” links, avoid having more than one per screen +- Keep punctuation outside the link unless the link is a stand-alone sentence (exception: question marks) + + +#### Do + +- Set up your store with a [step-by-step guide](/content/grammar-and-mechanics#links) +- Show up where shoppers scroll, search, and shop with [multichannel integration](/content/grammar-and-mechanics#links). +- Track customer behavior on your online store to improve your marketing. [Learn more](/content/grammar-and-mechanics#links) +- [Log in](/content/grammar-and-mechanics#links) +- [Forgot password?](/content/grammar-and-mechanics#links) + +#### Don’t + +- Want to learn more about how to set up your online store? [Click here.](/content/grammar-and-mechanics#links) +- Show up where shoppers scroll, search, and shop with multichannel integration. [Learn more.](/content/grammar-and-mechanics#links) +- Facebook Pixel tracks customer behavior on your online store. This data improves your marketing abilities, including retargeting ads. [Learn more about Facebook Pixel](/content/grammar-and-mechanics#links) +- [Log in.](/content/grammar-and-mechanics#links) +- [Forgot password](/content/grammar-and-mechanics#links)? -Review the content guidelines for [headings and subheadings](/content/actionable-language#headings-and-subheadings) in the actionable language section. + --- ## Lists -### Bulleted +#### Bulleted Use a bulleted list when items are related but sequence or priority doesn’t matter. Introduce the list with a full sentence and a colon. @@ -273,7 +335,7 @@ You can add a custom domain to your store in the following ways: -### Numbered +#### Numbered Use a numbered list when item sequence or priority does matter. Introduce the list with a full sentence and a colon. @@ -305,8 +367,6 @@ When checking out from your online store, the customer: -### Dropdown menus - #### Actions in a menu Menu lists give users a horizontal set of actions when space is limited. The order of actions is often based on logic, such as most popular actions. @@ -357,7 +417,7 @@ Select filter -### Capitalization +#### Capitalization - List items always start with a capital letter. - Capitalization and punctuation rules apply to both bulleted and numbered lists. @@ -382,7 +442,8 @@ Company name -### Punctuation + +#### Punctuation in lists - Introduce bulleted lists with a colon or a heading. - Don’t use commas at the end of list items (for bulleted or numbered lists). @@ -393,253 +454,213 @@ Company name --- -## Dates, numbers, and measurements - -Dates, numbers, and measurements are often formatted automatically according users’ local preferences, and they may be formatted differently in other languages. You can use [helpers](https://github.com/Shopify/quilt) to ensure they are localized automatically. These guidelines are for manually formatting in American English, which we use as a base before translating to other languages. +## Numbers, dates, and currency -### Date +#### Numbers -When possible, use the month’s full name. If there are space constraints, use 3-letter abbreviations. Don’t write dates with numerals only. +Use numerals #### Do -- Thursday, October 15, 2015 -- October 15, 2015 -- Oct 15, 2015 +- 9 +- 100 +- You have 5 orders to fulfill. #### Don’t -- Thur, October 15 -- October 15, ’15 -- 10/15/15 +- nine +- one hundred +- You have five orders to fulfill. -Don’t use ordinal indicators, which are words representing position or rank in a sequential order (1st, 2nd, 3rd, and so on). +Use commas for numbers with four or more digits. Avoid shortening numbers. #### Do -January 23–April 1 +- 12,000 #### Don’t -January 23rd–April 1st +- 12 k -### Time - -For all translations, the time format is automatically localized by the `Intl.DateTimeFormat` JavaScript object. When time must be formatted manually, follow these guidelines: - -- Use the 12-hour clock, followed by am or pm. -- Include a space after the last number. For example, “Your package will arrive at 12:35 pm.” Adding the space helps with formatting for English-speaking markets outside of North America, so we use it for North American usage as well. -- Use the browser time of the logged in user. -- To show a time range, use an en dash and include the am/pm after both times, for example, 3:00 pm–4:00 pm. -- If indicating both the date and time, separate them with the word “at” instead of a comma. - -#### Time zones - -- Include a time zone only if it’s necessary, such as for an event listing. -- Use the time zone’s abbreviation following the am or pm, for example, 4:00 pm NZT. -- If your audience is in a single time zone, then don’t include an S (for Standard) or D (for Daylight). For example, 3:00 pm PT. -- If your audience is in a combination of time zones, then include the S (for Standard) or D (for Daylight) to avoid confusion. For example, 3:00 pm PDT. +Use hyphens when writing phone numbers. Don’t use brackets, spaces, periods, or plus signs: #### Do -Thursday, October 15, 2015 at 2:00 pm EDT +- 1-514-555-1234 #### Don’t -2015-10-15, CDT 2:00P.M. +- 613.555.1234 +- 1-(514)-555-1234 -Use consistent timestamp formats by following these examples: +For number ranges, use an en dash without a space on either side #### Do -- Less than 1 min: `Just now` -- 1 min to 60 min: `13 minutes ago` -- Today: `10:30 am` -- Yesterday: `Yesterday at 10:30 am` -- In the last 7 days: `Friday at 10:30 am` -- 7 days to 1 year: `Aug 14 at 10:30 am` -- More than 1 year: `Aug 14, 2016` +- 5–10 products +- October 15–31 #### Don’t -- Less than 1 min: `10:30am` -- 1 min to 60 min: `10:30am` -- Today: `Today, 10:30am` -- Yesterday: `Friday, 10:30am` -- In the last 7 days: `Friday, 10:30am` -- 7 days to 1 year: `10:30am, Oct 15, 2015` -- More than 1 year: `Last year` +- 5 – 10 products +- October 15 – 31 -### Currency - -When including currency with a price, the currency comes after the dollar amount. Learn more about [formatting localized currency](/foundations/formatting-localized-currency). +For undefined upward ranges, use “and up” or “or more” #### Do -- \$10,000 USD +- \$50.00 and up +- 100 or more #### Don’t -- USD\$10,000 -- \$10KUSD -- \$10,000USD +- \$50.00+ +- \>100 -### Numbers - -In general, use numerals. If the number is below 10 and not integral to the sentence, spell it out in full. +For downward ranges, be specific. #### Do -- 9 -- 100 -- 1 -- Here are 2 marketing campaigns you can use. -- You have 3 orders to fulfill. -- You no longer need to track shipments in two places. +$0.00–$49.99 #### Don’t -- nine -- one hundred -- one -- Here are two marketing campaigns you can use. -- You have three orders to fulfill. +\$50.00 or less -Use commas for numbers with four or more digits. Whenever possible, don’t truncate numbers: +#### Date + +Use the month’s full name. If there isn’t enough space, use 3-letter abbreviations. Don’t write dates with numerals only. #### Do -- 12,000 -- 9,344 -- 1,800,887 +- December 11, 2024 +- Dec 11, 2024 +- Oct 15, 2015 #### Don’t -- 12 k -- 9344 -- 1.8 m +- December 11, ’24 +- 12/11/24 -Use hyphens when writing phone numbers. Don’t use brackets, spaces, periods, or plus signs: +Don’t use ordinal indicators, which are words representing position or rank in a sequential order (1st, 2nd, 3rd, and so on). #### Do -- 613-555-1234 -- 1-514-555-1234 -- 33-55-416-123 +January 23–April 1 #### Don’t -- 613.555.1234 -- 1-(514)-555-1234 -- +33 55 416 123 +January 23rd–April 1st -Use an en dash without a space on either side for number ranges: +**Note**: Dates, numbers, and measurements are often formatted automatically according to users’ local preferences, and they may be formatted differently in other languages. These guidelines are for manually formatting in American English, which we use as a base before translating to other languages. - - -#### Do - -- 5–10 products -- October 15–31 -- 2005–2015 -- 25–100 lb -- \$0.00–\$49.99 -- 2:00 pm–3:00 pm +#### Time -#### Don’t +For all translations, the time format is automatically localized by the `Intl.DateTimeFormat` JavaScript object. When time must be formatted manually, follow these guidelines: -- 5 – 10 products -- October 15 – 31 -- 2005 – 2015 -- 25 – 100 lb -- \$0.00 – \$49.99 -- 2:00 pm – 3:00 pm +- Use the 12-hour clock, followed by am or pm +- Include a space after the last number. For example, “Your package will arrive at 12:35 pm.” +- Use the browser time of the logged in user +- To show a time range, use an en dash and include the am/pm after both times, for example, 3:00 pm–4:00 pm +- If indicating both the date and time, separate them with the word “at” instead of a comma - +#### Time zones -Use “to” instead of an en dash if a number range is preceded by “from” in a phrase. Use “and” if a range is preceded by “between.” +- Include a time zone only if it’s necessary, such as for an event listing. +- Use the time zone’s abbreviation following the am or pm, for example, 4:00 pm NZT. +- If your audience is in a single time zone, then don’t include an S (for Standard) or D (for Daylight). For example, 3:00 pm PT. +- If your audience is in a combination of time zones, then include the S (for Standard) or D (for Daylight) to avoid confusion. For example, 3:00 pm PDT. #### Do -- You have a delivery scheduled from 10:00 am to 2:00 pm on Monday, July 18. -- Active from August 15 to August 30 -- Free shipping for products between \$10.00 and \$40.00 +Thursday, October 15, 2015 at 2:00 pm EDT #### Don’t -- You have a delivery scheduled from 10:00 am–2:00 pm on Monday, July 18. -- Active from August 15–August 30 -- Free shipping for products between \$10.00–\$40.00 +2015-10-15, CDT 2:00P.M. -For undefined upward ranges, use “and up” or “or more.” +Use consistent timestamp formats by following these examples: #### Do -- \$50.00 and up -- 100 or more +- Less than 1 min: `Just now` +- 1 min to 60 min: `13 minutes ago` +- Today: `10:30 am` +- Yesterday: `Yesterday at 10:30 am` +- In the last 7 days: `Friday at 10:30 am` +- 7 days to 1 year: `Aug 14 at 10:30 am` +- More than 1 year: `Aug 14, 2016` #### Don’t -- \$50.00+ -- \>100 +- Less than 1 min: `10:30am` +- 1 min to 60 min: `10:30am` +- Today: `Today, 10:30am` +- Yesterday: `Friday, 10:30am` +- In the last 7 days: `Friday, 10:30am` +- 7 days to 1 year: `10:30am, Oct 15, 2015` +- More than 1 year: `Last year` -For downward ranges, be specific. +#### Currency + +When including currency with a price, the currency comes after the dollar amount. Learn more about [formatting localized currency](/foundations/formatting-localized-currency). #### Do -$0.00–$49.99 +- \$10,000 USD #### Don’t -\$50.00 or less +- USD\$10,000 -### Units of measurement -In all cases, include a space between the number and the unit. +#### Units of measurement + +Include a space between the number and the unit. @@ -658,7 +679,7 @@ In all cases, include a space between the number and the unit. -Never pluralize unit of measurement abbreviations. +Don't pluralize unit of measurement. @@ -674,7 +695,7 @@ Never pluralize unit of measurement abbreviations. -When listing out multiple measurements in a row, put the unit of measurement at the end instead of after each number (and include a space). +For multiple measurements in a row, put the unit of measurement at the end. @@ -704,7 +725,7 @@ For pricing by measurement, don’t add a space before or after a slash. -For units of measurement, use decimals instead of fractions: +Use decimals instead of fractions. @@ -755,75 +776,66 @@ Use the imperial system for the United States, Liberia, and Myanmar, and use the --- -## Addresses and places +## Pronouns (you, us) -### Address - -Lay out address forms in the following format: +#### Addressing merchants -``` -First name Last name -Address -Apartment, suite, etc. (optional) -City -Country Province Postal code -``` - -Please note, “optional” in `Apartment, suite, etc. (optional)` means that the field is optional for customers to complete, but we should always include it in the form. +Always refer to merchants as “you.” Don’t speak for merchants with phrases that use “I” or “my.” #### Do -- Use locale-specific alternatives for province and postal code, for example, the US uses State and ZIP code +Change your email address in your Profile. #### Don’t -- Add extra fields -- Change the placeholder text +Change your email address in My Profile. -### Country, province, and state names - -Use a nation’s proper name when referring to it as a noun. +In some cases (such as getting merchant consent or granting permissions) you should refer to merchants as “I.” #### Do -Your store must be located in the United States. +

+ +

#### Don’t -Your store must be located in the US. +

+ + +

-When using a country as an adjective (such as when referring to currency), use the abbreviated form without punctuation. +#### Referring to Shopify + +Always refer to Shopify as “we,” but avoid inserting Shopify into the content as much as possible (except when a human is taking action, such as reviewing a request). #### Do -Pinterest requires your store to use US currency. +Pinterest Buyable Pins will be available in the coming weeks. #### Don’t -U.S. currency +We’re making Pinterest Buyable Pins available in the coming weeks. -Things to watch out for: - -- Don’t use colloquial forms of a nation or state name, for example, America instead of the United States -- Search online to see whether nations commonly use “the” before their name, for example, the Philippines or the Falkland Islands - --- ## Punctuation -### Ampersands +#### Ampersands Don’t use ampersands (&). They attract attention to the least important part of the sentence. Spell out the word “and.” @@ -839,7 +851,7 @@ Zones & rates
-### Apostrophes +#### Apostrophes Use apostrophes to represent omitted letters or numbers: @@ -904,7 +916,7 @@ Always use apostrophes, not vertical (straight) quotes. -### Colons +#### Colons Avoid using colons in sentences. If you need to use one, don’t capitalize the first word after the colon unless it’s a proper noun. @@ -956,7 +968,7 @@ Correct the following payment information to continue. -### Commas +#### Commas Use the oxford comma (also known as the serial comma) in sentences. There should be a comma after every list of 3 or more items (unless you’re using a bulleted or numbered list). @@ -990,7 +1002,7 @@ Don’t use commas to separate bulleted or numbered list items. -### Ellipses +#### Ellipses The ellipses (
) can be used in place of a missing piece of text (most commonly to show the deletion of words from a direct quotation). Avoid using ellipses in text. @@ -1052,7 +1064,7 @@ Consider constraints of the space in the interface when deciding to use truncati A button with an ellipsis icon (not the same as text) is used to expand more actions. It’s typically used in cards, or for horizontal sets of actions when space is limited. -### En-dashes and em-dashes +#### En-dashes and em-dashes Use an en dash with no spaces in between (–) for a fixed range of numbers @@ -1086,7 +1098,7 @@ Depending on the font or appearance, you may want to include a hair space on eit Tip: On Mac the keyboard shortcuts are option - for en dash and shift option - for em dash. -### Exclamation marks +#### Exclamation marks Avoid exclamation marks—only use them for really really exciting things. If you absolutely have to, limit yourself to one exclamation mark per page. @@ -1102,7 +1114,7 @@ You’ve updated your product title! -### Hyphens +#### Hyphens Use hyphens to: @@ -1144,51 +1156,21 @@ Use hyphens to: -### Periods - -Periods often end up in places they shouldn’t, and are omitted at strange times. In general, don’t use periods in interface copy unless it’s a full sentence description. +#### Periods -When to use periods: +- Don't use periods in interface copy +- If text includes 2 or more sentences, it's okay to use periods - - -#### Do - -- Complete sentences -- Body text, descriptions, and subtitles -- Help text under text boxes (form fields) -- Timeline events - -#### Don’t - -- Sentence fragments -- Top-level headings and titles -- Buttons -- Notifications -- Toast messages -- Placeholder copy -- Navigation menu items -- Hover/tooltip text -- Footer help box text -- Radio button and checkbox text - - #### Do -- Description example: Add this product to a collection so it’s easy to find in your store. -- Placeholder example: Search products -- Timeline example: \$50.41 USD was authorized. -- Footer help box example: Learn more about [products](https://help.shopify.com/manual/products) +Add products to collections so they're easy to find #### Don’t -- Button example: Add product. -- Placeholder example: Search
 -- Heading example: I’m Kit, your virtual employee. -- Notification example: 6 orders have payments that need to be captured. +Add products to collections so they're easy to find. @@ -1208,7 +1190,7 @@ When to use periods: -### Question marks +#### Question marks Avoid question marks wherever possible. Reword into affirmative statements wherever you can, but there are exceptions: @@ -1234,7 +1216,7 @@ Don’t use question marks if: -### Quotation marks +#### Quotation marks Use quotation marks to: @@ -1351,7 +1333,7 @@ Always use smart (curly) quotes, not vertical (straight) quotes. -### Semicolons +#### Semicolons Avoid semicolons if possible. If you really need them, use semicolons to: @@ -1372,9 +1354,9 @@ The unicorn was hungry; the grass was brown. --- -## Spelling and formatting +## Spelling -### American spelling +#### American spelling Use American spelling for all external-facing Shopify content. When in doubt, check the [Merriam-Webster dictionary](https://www.merriam-webster.com/) for the preferred spelling of specific terms. @@ -1396,81 +1378,5 @@ Use American spelling for all external-facing Shopify content. When in doubt, ch Tip: it’s easy to miss Canadian spelling. Switch your laptop language settings to American English and turn spell check on. It will highlight any Canadianisms you might have missed. -### Bold - -When in doubt, don’t bold. - -Use bold sparingly and only where strong emphasis is required. Don’t use bold to create a heading or emphasize: - -- Proper nouns -- Merchant input -- Checkbox titles - - - -#### Do - -After your first sale, PayPal will email you at **merchant@email.com** with instructions. - -#### Don’t - -Are you sure you want to delete **Sunset T-shirt**? - - - --- -## You, we, and other personal pronouns - -### Addressing merchants - -Always refer to merchants as “you.” Don’t speak for merchants with phrases that use “I” or “my.” - - - -#### Do - -Change your email address in your Profile. - -#### Don’t - -Change your email address in My Profile. - - - -In some cases (such as getting merchant consent or granting permissions) you should refer to merchants as “I.” - - - -#### Do - -

- -

- -#### Don’t - -

- - -

- -
- -### Referring to Shopify - -Always refer to Shopify as “we,” but avoid inserting Shopify into the content as much as possible (except when a human is taking action, such as reviewing a request). - - - -#### Do - -Pinterest Buyable Pins will be available in the coming weeks. - -#### Don’t - -We’re making Pinterest Buyable Pins available in the coming weeks. - - diff --git a/polaris.shopify.com/content/content/help-content.mdx b/polaris.shopify.com/content/content/help-content.mdx deleted file mode 100644 index baee28039fd..00000000000 --- a/polaris.shopify.com/content/content/help-content.mdx +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Help content -description: Help content is educational text that describes interactive elements or offers information about concepts in the UI. -icon: QuestionCircleIcon -keywords: - - help text - - learn more - - help center - - help ---- - -# {frontmatter.title} - -{frontmatter.description} - -The goal of help content is to teach merchants: - -- How to complete a task or make a good decision for their business -- Important information related to the current workflow -- How to optimize the way they use Shopify - ---- - -## When to use less, when to use more - -​ -The choice of whether or not to use help content depends on the kind of experience you’re designing. - -### Productivity areas - -​ -Productivity areas include tasks that merchants do regularly, like adding products and fulfilling orders. These pages are used often and become familiar quickly. - -When designing productivity experiences, prioritize experienced merchants. This is their space to get work done and we can keep out of their way by offering a clean, streamlined UI. This means minimal help content. -​ - -### Educational areas - -​ -Educational areas include tasks that merchants do infrequently, like adjusting tax or payments settings. Most of these settings aren’t changed very often, so merchants doing these tasks are often seeing them for the first time. - -When designing for educational experiences, prioritize merchants who are unfamiliar with the task or workflow. Offer context and guidance to help them make the right decisions for their business. This means making use of help content. - ---- - -## Place help where it’s needed - -​ -Help content belongs as close as possible to the part of the UI it references. If it’s teaching merchants about the purpose of a card, put it at the top of the card as a description. If it’s teaching merchants about a particular field, put it beneath the field as help text. - -The following is an example of help content that was originally a card description, but felt easier to parse after moving closer to the upload actions it helps with. - -#### Before - -![Before: help text as a card description](/images/content/help-content/before.png) - -#### After - -![After: help text close to the upload action](/images/content/help-content/after.png) - ---- - -## Avoid a marketing tone - -​ -Using help content to promote new features can erode trust with merchants. Not every feature is the best choice for every merchant at every point in time, and we shouldn’t assume that they want or need it. - -There are times when our motivations and our merchants’ are highly aligned, and encouraging a certain action through help content might be appropriate. An example of this is discounted annual billing. It’s good for Shopify because of the long-term merchant commitment and up-front payment. It’s good for merchants who are long-term committed to Shopify and can pay up front. - -This example also illustrates that there’s still only a subset of merchants that are at the right place to adopt it. Keep this in mind when suggesting how a feature might help someone’s business. - ---- - -## “Learn more” links - -​ -“Learn more” links take merchants to the Shopify Help Center or Shopify.dev for more detailed information than we can offer in the UI. - -Make sure “Learn more” links go to a page or heading that’s specific to the topic. - -The Help Center is a rich resource, but for a merchant it’s not always a convenient time to read documentation. Landing on a dense page of information without knowing where to start is frustrating and disorienting. If there isn’t a page or heading specific to the topic you’re providing help for, work with the documentation team to create the right content. - -See the content guidelines for links for more about [formatting “Learn more” links](/content/actionable-language#-learn-more--links). - -### “Learn more” badges for settings - -​ -“Learn more” badges show an information icon that takes you to the Help Center. These are different from tooltips. On large screens, they expand on hover to reveal a “Learn more” link. - -![“Learn more” badge interaction pattern](/images/content/help-content/learn-more-badges.png) - -Use “Learn more” badges: -​ - -- Only in settings experiences, and only in card headers -- When the linked Help Center topic is relevant to the entire card - -Best practices: - -- Use regular “Learn more” links for help topics specific to only a part of a card -- Some cards benefit from a “Learn more” badge in the heading in combination with “Learn more” links or other help content in the card body diff --git a/polaris.shopify.com/content/content/help-documentation.mdx b/polaris.shopify.com/content/content/help-documentation.mdx deleted file mode 100644 index b35fc43e0e2..00000000000 --- a/polaris.shopify.com/content/content/help-documentation.mdx +++ /dev/null @@ -1,644 +0,0 @@ ---- -title: Help documentation -description: After you build an app or other integration, writing help documentation will show merchants how to use it. -icon: QuestionCircleIcon -keywords: - - writing instructions - - writing guides - - writing tutorials - - writing how-to's - - writing how to's - - writing how to - - writing step-by-steps - - writing step by steps - - writing technical documentation - - technical documentation - - linking to help documentation - - linking to technical documentation - - educating - - teaching - - explain apps - - describe apps - - educate about apps - - merchant education - - educational opportunity - - educational opportunities - - explain features - - describe feature - - educate about features - - merchant education - - educational opportunity - - educational opportunities ---- - -# {frontmatter.title} - -{frontmatter.description} - -These are the core guidelines used to produce the [Shopify Help Center](https://help.shopify.com/), as well as Shopify's internal documentation. They’re all intended to serve the same goal: to educate and empower Shopify's merchants and employees. - -To include a link to help documentation in your app or channel, use the -[Footer help](/components/navigation/footer-help) component. - ---- - -## Plan for your audience - -The way that you write your help documentation should change depending on your intended audience and their expectations. Take some time to understand your audience and determine the documentation that would suit them best. For example, if your audience is mainly in the United States, then you should use American English. For a more worldwide audience, British English is more common and expected. - -Reviewing your intended audience and understanding the language that they expect can improve the effectivenss of your help content, improve adoption of your product and features, and reduce support debt costs. - -### Audience types - -Using Shopify as an example, there can be a wide spectrum of Shopify users as an audience. Often, individual pages are written with a certain audience in mind, as opposed to the whole help center being written with one central audience being considered. - -#### Prospective users - -- Not signed up yet, possibly on a free trial -- Could be new to business, or could be looking to migrate an existing business - -#### Novice users - -- Signed up but might not have sold online before -- Possibly not very computer literate -- New to Shopify concepts and workflows - -#### Experienced, confident users - -- Have been using Shopify for some time -- Familiar with the basic concepts and workflows -- Confident with computers -- Can try some customizations with guidance - -#### Highly technical users - -- Experienced and confident -- Extensive computing experience -- Happy to experiment and take risks -- Experienced problem solvers -- Self-serve through forums and help documentation - -### Audience expectations - -Each of these different users likely has different expectations for the same document. Let’s take a look at how that might play out: - -#### Prospective users - -- A quick-start guide -- Conceptual overviews - -#### Novice users - -- Detailed explanations -- Clear step-by-step instructions -- Conceptual overviews -- Definitions of terms -- Tutorials -- Context-sensitive help - -#### Experienced, confident users - -- Clear step-by-step instructions -- Conceptual overviews -- Definitions of terms -- More challenging tutorials -- Context-sensitive help - -#### Highly technical users - -- Procedural instructions (can be brief and direct) -- Code fragments -- Links to information sources - -This is just one way to imagine the variety of users that fit into Shopify's audience. - -Regardless of their skill level, the aim of the documentation remains the same: to accommodate a wide range of users and their objectives. This can be achieved by presenting information in a way that’s inclusive of different skill levels, learning styles, and workflows. - ---- - -## Core help content principles - -Before you begin organizing information on a page, review the following principles: - -- **Let readers fail fast**: If a reader is going to fail at the task at hand, then let them know quickly, instead of letting them get halfway through only for them to realize that they don't meet the requirements. If a reader can't complete a set of steps due to an unmet requirement, isn't eligible to use a feature, or is in a scenario where continuing to pursue an action is a waste of time, then you need to inform the reader of this fact as quickly as possible within the content. This respects a reader's time, and lets them find an appropriate solution faster. - -- **Provide all readers with a solution or next step**: Any given set of steps should include a solution or next step for a reader. For example, suppose that a set of steps has the successful result of adding a feature to their product, but there is a requirement to be on the latest version of the product. Before the steps are listed, a user should be told of the restriction, and provided a link for the steps on how to upgrade. - -- **Keep it factual**: To maintain a level of trust with your readers, you should remove marketing and promotional content from your help content. Help content can be used to explain the benefits of a product or feature, but should stick to the direct benefits and hedge all claims of making things "faster", "better" or "easier". - -- **Explain how a reader can use a feature, not what a feature can do for them**: Framing your content as how a reader can use a product or feature helps them better understand your content and imagine how it would fit into their own context. - -## Use headings to organize your document - -Readers come to help documentation with different expectations and in different usage settings: - -- One might be working through a long, multi-stage setup process to connect a third-party app into their admin -- Another might be using her tablet to check out the details of Shopify POS and see if it could be used at their cafe -- Another might be trying to make a quick edit to his storefront in the half hour they have left before going to pick up their kids from school - -In all these different cases, the reader needs documentation that’s findable, usable, and relevant. In other words, content that is organized. - -Headings help readers pinpoint the most relevant content on a page for them, and reduce the need to scan and browse content. - -### Effective headings - -Effective headings make it clear to readers which sections of a document are most relevant to their current tasks. The heading should directly reflect the result of any actions, or should summarize the content found within the section. - -Headings also provide readers with a good sense of progress while they move from one task to the next. - -### Low-level headings - -As a general rule, the lower a heading is in the doc’s hierarchy, the more flexible you can be with its tone. For example, low-level headings can be longer and more specific, or less formal. - -### Heading hierarchy - -Maintain the heading hierarchy throughout the doc, and don’t skip heading levels. For example, go directly from H1 to H2, then to H3, and so on. This helps the readers know where they are in the document, whether they’re going through a specific workflow or just scanning. - -### Tips - -For page or topic-level headings, use short, gerund-based (verb ending in "ing") statements. - - - -#### Do - -- Creating products - -#### Don’t - -- Create products - - - -For task-based headings within the document, use imperatives. - - - -#### Do - -- Add a customer - -#### Don’t - -- Adding a customer - - - -Avoid pronouns in headings. - - - -#### Do - -- Connecting Facebook accounts -- Connect a Facebook account - -#### Don’t - -- Connecting your Facebook account - - - -Avoid long strings of nouns in a heading. - - - -#### Do - -- Posting products -- Creating posts - -#### Don’t - -- Creating Point of Sale product collections -- Creating product post pages - - - -Keep the key descriptors close to the front of a heading so it’s easier to scan quickly. For example, avoid starting the heading with “How to” or “To.” - - - -#### Do - -- Add a product - -#### Don’t - -- How to add a product - - - -Try to keep parallel grammatical structure between headings of the same level. - - - -#### Do - -- Boost a post, Choose an audience, Fulfill an order - -#### Don’t - -- Boost a post, Choosing your audience, How to fulfill your orders - - - -In most cases, headings should be statements rather than questions. Save question-style headings for FAQs or low-level headings that address specific functions. - - - -#### Do - -- Add a product - -#### Don’t - -- How do I add a product? - - - -Use sentence case for all headings, but no periods at the end. Format and capitalize interface elements or buttons in the way they appear in the Shopify admin. - - - -#### Do - -- Adding products to your store - -#### Don’t - -- Adding Products To Your Store. - - - -Use parallel structure in your content, such as in lists and headings, to encourage comprehension and recall. - - - -#### Do - -- Adding products to your store, Deleting products from your store, Editing products in your store - -#### Don’t - -- Add products to your store, How to delete products from your store, Edit a product in your store - - - ---- - -## Document tasks - -### Be task-oriented - -Most help documentation is task-oriented: it’s designed to guide readers through the steps they need to follow to complete a task. The best documentation will save readers time by helping them complete their tasks quickly. The way that you present information has a big impact on how useful it will be to your readers. - -### Use introductions - -In most cases, a document shouldn’t start with a set of instructions. Instead, offer context with an introductory comment or define a key concept about the topic. Decide what information readers need before they scan the instructions. -This is also true for the document’s subsections. - -### Use numbered steps - -Divide up the instructions in a way that reflects how the reader might think of the task. Use numbered steps for each part of the task. This helps to hold your reader’s attention, and makes it easier for them to switch between a help document and Shopify to complete the task. - -### Start at the beginning of a workflow - -Make sure that the instructions for major tasks in a longer document can stand alone. If the instructions for a task pick up abruptly where an earlier task left off, then the readers who begin at that point might struggle to figure out the workflow. Start documenting each task at the beginning of the workflow required to complete it. - -### Use short lists - -In general, use short lists (either numbered steps or bullets), which are easier to read than long lists. If you have a task or a list that needs more than ten items, then break it up into two or more lists, each with their own subheading. - -### Make tasks actionable - -Tell the user what they can do with your product, not what it can do. This means structuring documentation around user actions rather than product features. - - - -#### Do - -- Use this feature to keep track of key updates and promotions. - -#### Don’t - -- This feature notifies you about key updates and promotions. - - - -In general, avoid grouping multiple actions together in a single numbered step. -Each step should include only one or two user actions. - - - -#### Do - -1. From your Shopify admin, click **Products**. -2. Click **Add a product**. - -#### Don’t - -1. From your Shopify admin, click **Products**, click **Add a product**, and - then enter your product information. - - - -Avoid telling the user to “find” or “locate” something in a task. - - - -#### Do - -- In the Pinterest section, click **Remove channel**. - -#### Don’t - -- Find the Pinterest section, then click **Remove channel**. - - - -Use the action word “select” when you’re telling the reader to pick something from a set number of choices (like from a list or dropdown menu), and use “choose” when you’re telling the reader to make a choice that’s more open-ended (such as, “Choose what kind of store you want to open”). - - - -#### Do - -- From the **Products** drop-down menu, select the one you want to discount. - -#### Don’t - -- From the **Products** drop-down menu, choose the one you want to discount. - - - -Use consistent phrasing when referring to the reader’s choice. Use the most direct “If you want to” instead of more formal options such as “If you would like to” or “If you wish to.” - - - -#### Do - -- If you want to add a product, then click **Add product**. - -#### Don’t - -- If you’d like to add a product, then click **Add product**. - - - -Avoid using “desired” in place of the more direct “want.” - - - -#### Do - -- Select the item that you want to add to the order. - -#### Don’t - -- Select the desired item to add to the order. - - - ---- - -## Structure conditional statements - -For conditional cases, start the step with “if” so the reader doesn’t have to read the whole sentence only to find out that the condition doesn't apply to them. Always add a “then” after the condition to help the reader identify the condition and the outcome. - - - -#### Do - -- If you need Z, then click A, B, and C. - -#### Don’t - -- Click A, B, and C if you need Z. - - - ---- - -## Clarify results of actions - -Show results of actions in the same step as the task and be clear about where in the flow the reader is. In general, omit results statements unless the result is surprising or unexpected. - -### Put actions and results in the same step - -If you need to mention the results of a user action, then do it in the same numbered step that describes that action (don’t use a separate numbered step). - -### Mention earlier steps to reinforce order of tasks - -You can refer to an earlier step to reinforce the order of the steps. - -For progress within a series of steps, use the phrase “When you’ve” or “After you’ve.” Avoid using “Once you’ve.” - -For progress between tasks, begin a section with “Now that you’ve” or “After you’ve” (referring back to the previous action or step). - -### Use “make sure” and “confirm” for important tasks - -When asking the reader to confirm something, use one of the following terms: - -- “Make sure” in cases where there’s still a related important task (instead of “check that” or “verify that”). -- “Confirm” in cases where the reader has already been told to do something, and you’re now reminding them. - -### Tips - -For instructions, use the command form of the verb. - - - -#### Do - -- Click **Refresh** to show your new orders. - -#### Don’t - -- Clicking **Refresh** will show your new orders. - - - -Limit the future tense to cases that actually refer to the future. - - - -#### Do - -- Choose an end date. After this date, the boosted post will revert to a regular post. - -#### Don’t - -- Click **Save**. The price will change when the discount is applied. - - - ---- - -## Use screenshots for clarity - -Screenshots help visual learners understand complex tasks and add context to the tasks you’re documenting. However, they often go out of date quickly and can be expensive to translate. Use them wisely. - -### Use screenshots for complex tasks - -In general, don’t use a screenshot to illustrate every step in a task. Instead, save screenshots for places where the interface is complicated. - -### Focus on the specific area of the action - -Include only the most relevant section of the screen or admin in the screenshot. Avoid taking a screenshot of an entire page, because this increases the likelihood of the image going out of date quickly. - -### Make screenshots with equal margins - -When highlighting an area of a screenshot, try to show an equal amount of space around the area that you want the reader to focus on. - -### Use consistent images in a workflow - -Tell a story by being consistent with details in screenshots within a document. -For example, you could follow a single order and keep the details the same from one screenshot to the next. - ---- - -## Teach through documentation - -Documentation is an opportunity for education. Building context, making instructions clear, and encouraging learning are key. - -### Link to next steps - -Offer links to the next steps. Choose the next steps based on reader profiles and feedback. - -### Encourage learning - -Encourage the reader to learn more. Explain the benefits of the feature in the introduction of your document. - -### Make the first tasks easier - -Where you can, give the readers “early wins.” Make the first step or two of the task short and easy. - -### Build context - -Connect the current task to readers’ wider knowledge: other parts of Shopify, the store-building process, and even the business-building process. - -### Try not to repeat information on the same page - -In most cases, avoid repeating information on a page. You might need to repeat important points to make sure the reader notices them. For example, you might repeat a warning from the document’s introduction within a set of instructions. - ---- - -## Use the right tone - -Think of the context that the reader is in and what they might be feeling and thinking while they’re reading your documentation. This perspective will help you pick what type of tone to apply. - -### Instructional tone - -Most people don’t want to spend time reading documentation. They want to learn what they need to know, and then move on. The language in documentation needs to be short, to the point, and task oriented. That doesn’t mean your writing needs to be terse or dry. - -### Lighter tone - -In general, you can begin a document using a lighter tone. - -### Informal tone - -When you introduce a task, an informal tone can help draw the reader in, offer context, and encourage the reader to keep going. You can also use a more informal tone when introducing sub-tasks, to give the reader a break from the instructions. - -### Direct tone - -For actions and tasks, aim for a much more direct tone. Keep your tone approachable by using contractions (for example _can’t_, _it’s_) to link directions and results. - -### Tips - -Use contractions. - - - -#### Do - -- After you’ve set up your product, click **Save**. - -#### Don’t - -- After you have set up your product, click **Save**. - - - -Address the reader or user as “you.” - - - -#### Do - -- You can add products from the **Products** page in your Shopify admin. - -#### Don’t - -- Products can be added from the Products page in your Shopify admin. - - - -Keep tone in check by avoiding the following: - -- Sounding patronizing, chummy, cheery, childish, or otherwise inappropriate in an attempt to seem informal and relatable. -- Colloquialisms, jokes, sarcasm, jargon, and slang. Avoid anything that’s too culturally specific. -- Anything that causes the user to pause or hesitate, unless you explicitly want them to. - ---- - -## Use the active voice - -Use the active voice as much as possible, which generally sounds less formal than the passive voice. This means writing what merchants do, instead of what is being done by merchants. But in cases where the passive voice sounds more natural than the active voice, use passive voice (like with verbs such as “publish” or “assign” and with nouns like “discount”). - - - -#### Do - -- After you’ve added a product, click **Save**. - -#### Don’t - -- After the product has been added, **Save** must be clicked. - - - ---- - -## Improve readability - -It’s important that your sentences flow nicely. Changing things up by combining or separating phrases and ideas will improve prose. Reading sentences that flow helps with reader comprehension. - -### Avoid choppy writing - -Use linking adverbs, conjunctions, and prepositions liberally to avoid choppy writing. - - - -#### Do - -- Click the button to open the window. - -#### Don’t - -- Click the button. The window opens. - - - -### Place old or expected information first, and new information last - -Putting the context, expected information, or old information first helps reduce a reader's mental load while they read. When new information is first, it requires the reader to hold on to the information while trying to determine why it is relevant. - - - -#### Do - -- This feature is available for stores in the United States, Canada, and Mexico. - -#### Don’t - -- Stores in the United States, Canada, and Mexico can use this feature. - - - -### Change up sentence structures - -Vary your sentence structure, especially in longer paragraphs. Try not to use more than two phrases with a “To x, do y” structure in a row—this gets repetitive and can cause the reader to lose interest. To break it up, add a short declarative sentence, if possible. - -### Break up complicated chunks - -Use conjunctions (a word that joins words or groups of words) to break up complicated passages. diff --git a/polaris.shopify.com/content/content/inclusive-language.mdx b/polaris.shopify.com/content/content/inclusive-language.mdx index a817c2d00bc..0e79949f55b 100644 --- a/polaris.shopify.com/content/content/inclusive-language.mdx +++ b/polaris.shopify.com/content/content/inclusive-language.mdx @@ -2,6 +2,7 @@ title: Inclusive language description: Make commerce better for everyone by writing inclusively. icon: EyeCheckMarkIcon +order: 6 keywords: - copy instructions - copy rules @@ -64,7 +65,7 @@ To write accessible content: - Don’t imply that those with disabilities are abnormal, less than, or “suffering” - Avoid words associated with disabilities to describe objects, features, or experiences -### Recommended language +#### Recommended language #### Disable, disabled @@ -170,7 +171,7 @@ We want all merchants to feel comfortable participating in commerce. Even if uni - Don’t use phrases or terms that denote “black” or “dark” as bad or negative, versus “white” or “light” as good or positive - Avoid metaphors and idioms since they can have racist origins or interpretations -### Recommended language +#### Recommended language #### Black hat, white hat (hacking) @@ -277,11 +278,11 @@ Avoid using this term, as many associate it with the institution of slavery. Gender is an important part of many people’s identity. Stereotypes and assumptions about gender can make their way into product experiences and leave people feeling excluded or misrepresented. When you do talk about gender, be intentional. Only use gendered language if it makes your content more inclusive and accurate. -### Internationalization +#### Internationalization Many languages lack ungendered options, like the English “they.” When possible, write in a way that avoids gendered language. For example, write “you” instead of a third person pronoun. You may need to work with a translator to avoid unintentionally gendering concepts. Always choose the clearest option. -### Recommended language +#### Recommended language Always use someone’s preferred gender and pronouns. If you’re not sure, use the pronouns “they/them.” This keeps the content inclusive, simple, and readable. diff --git a/polaris.shopify.com/content/content/index.mdx b/polaris.shopify.com/content/content/index.mdx index 18e51b2add0..916d616b914 100644 --- a/polaris.shopify.com/content/content/index.mdx +++ b/polaris.shopify.com/content/content/index.mdx @@ -1,7 +1,7 @@ --- title: Content order: 4 -description: Thoughtful, consistent interface content is a core element of a well-designed user experience. +description: Thoughtful, crafted content is a core element of a well-designed user experience icon: TextAlignmentLeftIcon --- diff --git a/polaris.shopify.com/content/content/merchant-to-customer.mdx b/polaris.shopify.com/content/content/merchant-to-customer.mdx deleted file mode 100644 index 7f544c612f6..00000000000 --- a/polaris.shopify.com/content/content/merchant-to-customer.mdx +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: Merchant-to-customer content -description: Shopify creates content for different audiences. One of those audiences is merchants’ customers. A customer is a person or organization who interacts with a Shopify merchant or a merchant’s sales channel. -icon: EmailNewsletterIcon -keywords: - - merchant to buyer - - buyer - - shopper - - buyer voice and tone - - customer voice and tone - - writing for checkout - - checkout - - check out ---- - -# {frontmatter.title} - -{frontmatter.description} - -Merchant-to-customer content represents the merchant, not Shopify, and should optimize the customers’ online or retail store experience. - -Every UX discipline is encouraged to create content at Shopify. Use this guide when you’re writing content that a customer will see on a Shopify store or receive from a merchant. - -You’ll find merchant-to-customer content in places such as: - -- Online store checkout pages -- Shipping update emails -- Return labels and emails -- Point of Sale (POS) screens, such as digital receipts and payment errors - ---- - -## What it isn’t - -If you write for multiple audiences, it’s important to note that merchant-to-customer content isn’t: - -- Shopify-to-buyer content, such as Shopify Pay or Arrive -- Shopify-to-merchant content, such as the Shopify admin -- Shopify-to-world content, such as shopify.com or blog posts - ---- - -## Experience values for customers - -Shopify has a set of [experience values](https://polaris.shopify.com/foundations/experience-values). The ones to focus on when creating merchant-to-customer content are: - -### Considerate - -Wherever and however a customer uses a Shopify experience (even if they don’t know it’s Shopify), we want it to work for them. The best Shopify experiences work on every screen, on every platform, in every language, and in every country. - -### Efficient - -Shopify experiences help customers achieve goals faster, more accurately, and with less effort. We break complex tasks down into simple steps, use friction to highlight important decisions, and always set expectations about what will happen next. - -### Trustworthy - -Shopify experiences are genuine, always honest, and transparent. We show customers that merchants act in the customer’s best interest. We create communication that strengthens the trust customers have in merchants. - ---- - -## Merchant voice and tone - -Merchant voice and tone is customer-focused. - -Shopify merchants sell everything from physical products, such as eco-sneakers, to digital products, like music downloads. The language they use is very different from store to store. This means that when writing from a merchant perspective, we use a voice that’s appropriate on any store, and for any type of customer. Merchant-to-customer content shouldn’t sound out of place coming from any merchant. - -### Human, but not individual - -Too much personality is inappropriate for some stores. Customers aren’t going through the purchase experience to admire the witty content. Research shows that the majority of people want content that’s easy to understand and communicates concepts efficiently. Not robotic. Not full of personality. Just clear and straightforward to help them complete their task. - -Keep in mind that some content, such as emails, can be personalized by merchants. You’re providing a default for them to work from. - - - -#### Do - -- Your payment details couldn’t be verified. Check your card details and try again. -- All transactions are secure and encrypted. -- Select the address that matches your card or payment method. -- Thanks! - - This example is when the customer finishes checkout in person (all other examples are from online checkout). - -#### Don’t - -- A fatal error occurred. - -Whoops! Houston, we have a problem! - -- Don’t worry, your details are safe with us! -- Address must correspond with that held by your payment provider. -- Thanks for stopping by! or See you again soon! - - - -### Shopping, not ecommerce: use shopper terms - -Avoid technical or ecommerce terms. Customers are interested in their order and their delivery, not in inventory and fulfillment. They might want to sign up for news and exclusive offers, but not marketing emails. - - - -#### Do - -- Enter your name exactly as it’s written on your card. -- You’ll get shipping and delivery updates by email. - -#### Don’t - -- There was a server verification error with your payment provider. -- We’ll inform you when we’ve fulfilled your order. - - - -### Concise, but not short - -It’s important that any purchase flow is efficient. Use short, easy-to-understand words and phrases. For example: - - - -#### Do - -- Use “to” -- Use “go to” -- There was a problem with our payments - -#### Don’t - -- Don’t use “in order to” -- Don’t use “proceed to” -- No payment gateway is currently configured - - - -But remember that clear beats short. Don’t use content that can be interpreted in different ways. For example, does “bi-weekly” mean twice a week or every two weeks? It’s clearer to say “Every 2 weeks.” Using more words is okay if it provides clarity. - - - -#### Do - -- Every two weeks -- Getting available shipping rates - -#### Don’t - -- Bi-weekly -- Loading - - - -No matter who the audience is, all Shopify content follows the same [grammar and mechanics](https://polaris.shopify.com/content/grammar-and-mechanics) and [product content guidelines](https://polaris.shopify.com/content/product-content). - -Read our general [voice and tone guidelines](https://polaris.shopify.com/content/voice-and-tone) to compare how Shopify talks to merchants. - ---- - -## Vocabulary considerations - -“Buyer” and “customer” are similar so it’s easy to confuse the use of these terms. - -A “buyer” interacts with multiple Shopify stores or has a direct relationship with Shopify, such as through Shopify Pay. - -In contrast, a “customer” is a person or organization who interacts with a Shopify merchant or a merchant’s sales channel. - -In the Shopify admin and Point-of-Sale (POS), a customer appears on the Customers page when they engage with a merchant in an identifiable way. This could be because they: - -- were added or imported by the merchant -- started a purchase but abandoned it at checkout -- made a purchase -- create a customer account -- subscribed to the merchant's mailing list - -Word usage to use/avoid: - - - -#### Do - -- Use the store name in place of “merchant” -- Be direct and use “you” -- Focus on the merchant-to-customer relationship -- Use “text message” or “message” when writing for North American audiences -- Use noun + verb phrases for success messages, for example, ”payment sent” -- There was a problem with our payments - -#### Don’t - -- Merchant (in place of store name) -- Customer or customer (in place of “you”) -- Shopify (keep Shopify out of the conversation) -- SMS -- Oh happy day! (don’t be over-congratulatory) -- Wrong, fail, failure, error (avoid sounding robotic or negative) - - - -### Common terms - -Use the following terms to refer to common concepts and actions within the merchant-to-customer experience. - -Note: all of these terms should be lowercase, unless they're a proper noun or the first word in a sentence. - -#### cart - -The page that displays an order summary. Customers see this page before they proceed to checkout. - -#### checkout - -The customer experience for paying for items and completing an order. - -#### delivery - -How an order reaches the customer. Delivery covers more than just shipping. For example, customers can choose whether the order is shipped to their delivery address or picked up in-store. - -#### discount code - -A dollar amount, percentage, or code that dictates how much a product will be reduced in price. - -#### duties - -Additional costs that may be incurred on orders that are delivered internationally. Duties may be incorporated into the shipping cost. - -#### gift card - -A type of product with monetary value that merchants can either sell to customers or issue to them as a gift, reward, or incentive. - -#### item - -One unit of a product on an order. - -#### login - -The credentials that a customer uses to access their account. - -#### order - -The term for a purchase. Don’t say package, or add unnecessary words like sales order. - -#### payment - -Describes a specific way a customer can pay such as Visa, MasterCard, or Apple Pay. - -#### pay now - -This text is displayed on Call To Action (CTA) buttons that trigger a payment. On free orders, this is replaced with “Complete order”. - -#### pickup - -A delivery option where customers physically collect an order. - -#### return - -A transaction where a customer sends a product back to the store for an exchange or refund. A refund is part of a return. - -#### refund - -The funds that a customer receives from a merchant, for example, when returning an item. - -#### shipping - -How a merchant sends an order to a customer. Also known as the shipping method. - -#### subtotal - -The cost of the items on an order before additional charges, such as tax and shipping. - -#### total - -The cost of the items on an order after additional charges such as tax and shipping. - -#### you - -A way of referring to the customer that's checking out. Use you, or use the name that the customer has provided. - -#### we - -A way of referring to the store name. Most of the time, refer to the store by name. However, you can use “we” when using the store name would sound overly wordy or insincere. diff --git a/polaris.shopify.com/content/content/naming.mdx b/polaris.shopify.com/content/content/naming.mdx index 0cb0bc5e4ad..777af8fd82e 100644 --- a/polaris.shopify.com/content/content/naming.mdx +++ b/polaris.shopify.com/content/content/naming.mdx @@ -1,7 +1,8 @@ --- title: Naming -description: The names we give our products and features teach merchants how to use Shopify and how to find the things they need to run their business. +description: What to consider as you name products and features icon: ProductIcon +order: 4 keywords: - names - caps @@ -76,7 +77,7 @@ If there‘s room, describe the feature instead of defaulting to only using the -### Using “Shopify” +#### Using “Shopify” Only Shopify can use the word “Shopify” in a name. The word “Shopify” can’t be used to name third-party products. @@ -151,7 +152,7 @@ There are two types of approaches to naming, the descriptive approach, or the ev If you’re a Shopify employee and are looking to trademark an evocative name, ask the legal department for help. -### Descriptive names +#### Descriptive names Features and products connected to Shopify’s main product offering should have names that reveal something about their purpose. Avoid jargon and make sure the name you pick won’t get confused with similar names or terms. @@ -202,7 +203,7 @@ Avoid jargon and give merchants a hint about the actions they’ll be able to ta -### Evocative names +#### Evocative names Standalone products use evocative names to position us in the industry. These unique and bold naming conventions can help with branding or recall, but don’t always help people understand the experience. They’re better for standalone products, and not for experiences that are part of Shopify’s main product offering. @@ -284,7 +285,7 @@ A good product or feature name should: There are two types of approaches to naming, the [descriptive approach, or the evocative approach](/content/naming#descriptive-vs-evocative-names). -### Referring to Shopify and areas in the admin +#### Referring to Shopify and areas in the admin Use consistent and easy to understand descriptions when referring to locations in product, especially in [help documentation](/content/help-documentation#navigation). Descriptive feature names aren’t [capitalized](/content/naming#general-guidelines), but when providing steps in a workflow, it’s okay to capitalize the page name, for example, “Go to the Products page”. Note that the page name is capitalized, but “page” isn’t. @@ -351,7 +352,7 @@ Top-level marketing content is created for audiences who have little context abo -### Using “app” and “channel” +#### Using “app” and “channel” For app names in areas with surrounding context, like in the app store or on the Apps page in the Shopify admin, don’t add the word “app” to the end of the name. @@ -449,7 +450,7 @@ If there’s room for a description, explain the channel type. In general, capitalize evocative names and don’t capitalize feature names. Avoid acronyms, and think about how your audience will interpret a name. -### Capitalization +#### Capitalization Don’t capitalize default features. Default features are built into Shopify and merchants don’t have to sign up, add, or opt in to use them. Analytics and discounts are examples of default features. @@ -504,7 +505,7 @@ Names shouldn’t be capitalized if they: -### Acronyms and abbreviations +#### Acronyms and abbreviations An acronym is a word formed from parts of an existing compound term. For example, “rich text editor” could be written as “RTE”. An abbreviation is a shortened form of a written word or phrase used in place of the whole word or phrase. “Amt” is an abbreviation for “amount”. @@ -604,7 +605,7 @@ When using a country as an adjective (such as when referring to currency), you m -### Similar names +#### Similar names Being an ecommerce platform has its naming challenges. For example, a lot of feature names could include the word “shipping” or “pay”. Think merchant-first and be descriptive to differentiate the name. Imagine what it’s like to have conversations with merchants about similar names like Shopify Payments or around our pricing plans to identify names that might be confusing. Before naming a new product or feature: @@ -612,7 +613,7 @@ Being an ecommerce platform has its naming challenges. For example, a lot of fea - Ask the support team to see if they think it’ll conflict with another name - Draft a test conversation around similar sounding names -### Localization and translation +#### Localization and translation Names may not translate directly to other languages. Identify if you need to create a separate name, or if a direct translation will do. @@ -651,7 +652,7 @@ Use SMS when writing for Indian and Nordic audiences. -### Initials +#### Initials In languages that use logographic characters, like Japanese, name initials can have different meanings. For example, in Japanese a name like Chikako (摹歐) Ishikawa (çŸłć·) means “neighborhood stone” (摹石) in initials. Check with the localization and translation team before writing something in short form in another language. diff --git a/polaris.shopify.com/content/content/product-content.mdx b/polaris.shopify.com/content/content/product-content.mdx deleted file mode 100644 index b1d5df77233..00000000000 --- a/polaris.shopify.com/content/content/product-content.mdx +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Product content -description: Thoughtful, consistent interface content is a core element of a well-designed user experience. -icon: TextInColumnsIcon -keywords: - - content standards - - content guidelines - - content strategy practices - - interface content - - strategic language - - edit content - - editing content - - reading level - - writes - - writing - - writing tips - - language tips - - content tips - - designing - - strategic designing - - action - - consistency - - consistent - - writing public-facing text - - public-facing text - - writing public-facing copy - - public-facing copy - - writing public-facing content - - public-facing content ---- - -# {frontmatter.title} - -{frontmatter.description} - -Our content standards will help you understand how to think strategically about the language in your products and apps. They’ll also give you clear, tactical suggestions designed to help you use language to craft better experiences. - -[Each component](/components) also includes content guidelines about how to write for specific interface elements. - -## Respond to merchant needs - -Not everyone is a confident writer, but everyone can improve their content by making sure it responds to the needs of their audience. Keep in mind that real people rely on Shopify every day to run their businesses. The product, feature, or app you’re building can make a big difference to the people using it. Take some time to learn about who they are, what they need, and the language they use. - -- Only use industry-standard terminology when you have reason to believe it will improve understanding. Spend time researching what words people use, rather than defaulting to what corporations call things. -- Edit unnecessary or repeated words. -- Write for small screens first. Constraints can help you focus on the most important message. -- Read your content out loud. If you get tripped up or it doesn’t sound like something a human would say, your content needs to be edited. - ---- - -## Encourage action - -People use Shopify to get things done, whether they’re managing a store, or making a purchase. Content should be written and structured to help the reader understand and take the most important actions. - -### Tips - -- Calls to action on buttons and links should start with a strong verb that describes the action a person will take when they click. -- Always prioritize the most important information and task — don’t make people dig to find what they care about. toBreak down complicated tasks into steps that help people focus on one thing at a time. -- Use the [active voice](/content/grammar-and-mechanics#basics) to clarify the subject and the action. - ---- - -## Be consistent - -To help your audience understand key concepts and actions they can take, use consistent nouns (words used to identify people, places, or things) and verbs -(action words) wherever possible. - -### Tips - -- Get in the habit of making a list of all the most important verbs and nouns in the experience you’re building. -- Look at your word list. Does each word clearly describe the object or action it represents in the simplest way possible? -- Does your language reflect how people think and the words they use? -- Identify synonyms (a word or phrase that means exactly or nearly the same as another word or phrase in the same language), and eliminate them. Each important object and action should have a single word to represent it. diff --git a/polaris.shopify.com/content/content/voice-and-tone.mdx b/polaris.shopify.com/content/content/voice-and-tone.mdx deleted file mode 100644 index 09cc1f78446..00000000000 --- a/polaris.shopify.com/content/content/voice-and-tone.mdx +++ /dev/null @@ -1,386 +0,0 @@ ---- -title: Voice and tone -description: Learn how to apply Shopify’s voice and choose the right tone, no matter what product, feature, or app you’re building. -icon: ChatIcon -keywords: - - sound like Shopify - - personality of Shopify - - brand personality - - empathy - - merchant feelings - - merchant emotions - - merchant context - - content voice - - content tone ---- - -# {frontmatter.title} - -{frontmatter.description} - -## What are voice and tone? - -Shopify’s voice is a reflection of who we are. We should always sound like -Shopify. - -At the same time, some aspects of our personality might be more or less apparent, depending on the audience and their context. That’s tone. - ---- - -## Shopify’s voice - -Our voice is a reflection of who we are. So who are we? - -**Simply put, we’re a company, built by real people who understand this business and care about helping others succeed.** - -**That should be clear every time someone uses our products or services.** - -Most often, we show this through well-crafted tools that help people get their jobs done efficiently. But there are times when our personalities and perspectives should be more apparent. In those times, we should adapt our tone to respond to people in an appropriate and meaningful way. - -You'll find more specific guidelines on how to adapt your tone to different situations in this guide. - ---- - -## Voice guidelines - -As Shopify’s voice, we should always: - -### Be real, but not too tough or overly familiar - -- Use business casual language—be plain-spoken, not pretentious or overly playful -- Be upfront and honest with merchants, even if we make a mistake -- Communicate with clarity and empathy—be direct, not insensitive - -### Be proactive, but not needy or pushy - -- Offer merchants sincere encouragement and practical advice -- Clearly explain how merchants are impacted when something goes wrong, but don’t overexplain with redundant content - -### Be dynamic, but not scattered or impulsive - -- Communicate in a way that respects merchant emotion and context -- Avoid words that generalize success like “every,” “all,” and “most” -- Use language that supports action, movement, and progress - -### Guide, but don’t handhold or prescribe - -- Use expertise to help merchants succeed; don’t talk down to them -- Be specific when explaining benefits without making things sound better than they are -- Teach people the “why” and “how” behind actions—don’t just tell them to do something - ---- - -## Adapting tone by situation - -Our tone adapts to the context. We’ll use certain voice attributes more or less based on the situation. - -Often people frame tone guidance around adapting to the emotional state of the audience. The reality is we never know a person’s emotional state. Even when things seem the most positive, we can’t be sure. - -While it’s helpful to consider how your audience is likely to feel, don’t assume or tell them how to feel. Instead, focus on the specifics of the situation and less on the emotions. Here are some of the most common situations to consider. - -### Everyday tasks and activities - -When everything is working as it should, our goal is to give people what they need to get work done, without getting in the way or drawing attention to ourselves. We want the audience to know what something is or that something has happened as expected. - - - -#### Do - -Look for the simplest way to communicate information—words aren’t always necessary. - -![Images showing icons of an eye representing a “view” action, a picture frame representing the concept of "images" and a spyglass representing the action of "search".](/images/content/voice-and-tone/view-icon@2x.png) - -#### Don’t - -Use overly complicated or intimidating language. - -![Image showing a toggle switch on a card labeled “Use Biometrics for Authentication”](/images/content/voice-and-tone/biometrics-toggle-card@2x.png) - - - - - -#### Do - -Be consistent for identical actions or destinations when possible. - -- _Delete product_ -- _Delete collection_ - -#### Don’t - -Add extra text just to fill space. - -![Image showing a text field for notes labeled “Add a note” followed by an ellipsis](/images/content/voice-and-tone/add-note-field@2x.png) - - - -### Learning and education - -Sometimes it helps to give more explanation or education. In these situations, we want to make sure people feel confident in their actions and in our capabilities. - -Some people will want to be guided step-by-step through the process, while others may just want to try it out and learn on their own. Look for ways to give them both options. - -Remember, they may have sought this out specifically or we may have recommended it to them, so don’t assume that they want or need to use it. - - - -#### Do - -Help people understand why they should do something, not just how. - -![A home card suggesting to add a shipping policy to your store to build trust with customers](/images/content/voice-and-tone/shipping-policy-card@2x.png) - -#### Don’t - -Oversell or overpromise. - -_Create a new campaign and you could double your sales this holiday season._ - - - - - -#### Do - -Break down complicated tasks into steps that help people focus on one thing at a time. - -![A home card with separate tabs for adding a product, customizing a theme, and adding a domain](/images/content/voice-and-tone/onboarding-tasks@2x.png) - -#### Don’t - -Be overly prescriptive about how someone should use a feature. - -_You need to add at least 10 products before opening your store._ - - - -### Simple errors - -While we do our best to be proactive and protect against unexpected events, they still happen. These are often simple mistakes or roadblocks to action that can easily be fixed. Although they aren’t necessarily errors or problems, they can feel that way at first. - -In this case, our job is to help people understand what happened so that they can get back to work as quickly as possible - -Read the [error message guidelines](https://polaris.shopify.com/patterns/error-messages) for more detailed guidance. - - - -#### Do - -Clearly explain the situation and how it can be resolved. - -_Product weight needs to be positive. Change the product weight to be greater than or equal to 0 and try again._ - -#### Don’t - -Use overly dramatic or scary words for simple errors. - -_Bad request, forbidden, fatal, expectation failed, unresolved, invalid_ - - - - - -#### Do - -Look for ways to help people resolve problems automatically. - -![An email input form element with a typo in the inputted email address and a hint text underneath it guiding the user to fix the typo.](/images/content/voice-and-tone/email-error-message@2x.png) - -#### Don’t - -Use error numbers or code unless they’re easily recognizable by people and help them solve the problem. - -![Error modal with a confusing error code stating “200 OK”](/images/content/voice-and-tone/channel-not-found-error@2x.png) - - - -### Acknowledging effort, progress, or completion - -There are situations where we want to acknowledge that someone completed a complex activity or difficult task. - -While we don’t need to celebrate the accomplishment, we should recognize that they put in the time and effort. Depending on the level of effort, these may be simple confirmations or more active recognition that they completed something difficult. - - - -#### Do - -If this is a task people do regularly, make it clear that the step is complete in a simple and non-intrusive way, like a [App Bridge Toast](https://shopify.dev/docs/api/app-bridge-library/reference/toast). Consider ways to confirm completion without words or messaging. - -_Product saved_ - -#### Don’t - -Assume people are excited or celebrating. They may be annoyed if it was a particularly long process or if the immediate benefits aren’t clear. - -_Congrats! You set up your single login for Shopify._ - - - - - -#### Do - -If the task was something we initiated or required, thank them for their time. - -_Thanks for taking the time to share your feedback._ - -#### Don’t - -Refer to simple actions or completed steps as “successes.” - -_You successfully added a product._ - - - -### Motivate or encourage action - -These are situations when we want to keep people moving along a desired path. In most cases, we do that with direct information and clear steps to encourage action. - -We don’t want to be too overzealous or action-driven here—it’s more about helping people understand the next step and giving them the context they need to take it. - - - -#### Do - -Help people understand what the next steps are and why they should take them. - -_Your email address is connected to 8 accounts. Set up a single login to switch between stores faster and log in less often._ - -#### Don’t - -Assume the next step or outcome is guaranteed. - -_You’re just a few steps away from receiving your first order._ - - - - - -#### Do - -Provide guidance to help people understand if the decision is right for them. - -_Based on your type of business, this is the POS hardware we recommend:._ - - - -### Serious problems or errors - -There are times when we need to share bad news. This might be an outage or an error, or it may be a product that we’re no longer supporting. These are hopefully rare situations, but they will happen. - -In this case, there’s a serious risk of damaging trust and hurting our relationship with the audience, so we should be very careful about how we communicate. - -Read the [error message guidelines](https://polaris.shopify.com/patterns/error-messages) for more detailed guidance. - - - -#### Do - -Explain the impact on their business clearly, without using confusing or scary language. - -_Some of today’s sales data hasn’t been updated yet. This will be fixed shortly. Your data is safe, and your sales are not affected._ - -#### Don’t - -Ask merchants to trust us without providing data or context. - -_Today’s sales data might not be accurate, but don’t worry—it’s just temporary._ - - - - - -#### Do - -Apologize and empathize when we’re at fault, but within reason. - -_All systems are now fully operational. We recognize and apologize for the stress, concern, and impact this outage had on your business. In the coming days we will be working to fully understand how this widespread internet infrastructure failure affected our platform._ - - - - - -#### Do - -Provide clear steps to resolve issues. If there’s no solution, be direct about what that means for the merchant and what we’re doing about it. - -_Your Shopify Payments account is on hold. Please attach your State Tax Exemption Certificate for review._ - - - -### Announcing new features and updates - -It’s exciting to launch a new feature or update, but always consider the audience’s perspective first. While we may be excited about the benefits and capabilities, change can be intimidating or annoying for users. - -When you’re announcing something new, focus on educating and explaining what it is, what it’s used for, and what the user can expect. - - - -#### Do - -Pitch our product by explaining the specific merchant benefits. - -_**Introducing the new Buy Button**_ - -_Make it your own with custom fonts, colors, and styles. It also loads 50% faster so your visitors won’t miss it._ - -#### Don’t - -Just talk about ourselves and assume the experience for merchants will be easy. - -_**Get Shopify’s new Buy Button**_ - -_It’s never been easier to customize the fonts, colors, and styles of Buy Buttons. It’s also twice as fast._ - - - - - -#### Do - -If possible, let users dismiss announcements or postpone changes until they’re ready. - -![A modal with a secondary button option to “remind me later” for a “single login” feature.](/images/content/voice-and-tone/remind-later-button@2x.png) - - - -### Celebrations and congratulations - -There are occasionally times when we want to celebrate an event or milestone, or to congratulate someone for an important accomplishment. In reality, this should be one of the least common situations we encounter. - -Let audiences know that we understand that it’s an important moment and we’re excited for them, but be careful not to take credit for it. Even if we played a role in their success, this isn’t about us. - -Remember, this is about celebrating their accomplishments, not ours. Launching something new? You probably don’t need to celebrate with them. Read our guidance around [announcing new features and updates](#announcing-features). - - - -#### Do - -Only celebrate truly important or monumental situations when the audience likely feels proud, excited, or satisfied. - -_Your store is 1 year old today! Here’s to many more._ - -#### Don’t - -Celebrate completing tasks or processes that people don’t actually want to celebrate. Did they finish something difficult or do something for us? You may want to acknowledge their effort instead. - -_You set up your payment providers, congrats!_ - - - - - -#### Do - -Express genuine happiness for merchants. Recognize their accomplishment and congratulate them on a job well done. - -_You launched your store! Nice work._ - -#### Don’t - -Take credit for merchants’ successes or presume to know what they need. - -_We did it! Congrats on your first sale._ - - diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js index 86505045646..35956a3b522 100644 --- a/polaris.shopify.com/next.config.js +++ b/polaris.shopify.com/next.config.js @@ -149,6 +149,26 @@ const nextConfig = { destination: '/coming-soon/view-transitions', permanent: false, }, + { + source: '/content/product-content', + destination: '/content/fundamentals', + permanent: true, + }, + { + source: '/content/actionable-language', + destination: '/content/fundamentals', + permanent: true, + }, + { + source: '/content/help-content', + destination: '/content/fundamentals', + permanent: true, + }, + { + source: '/content/help-documentation', + destination: '/content/fundamentals', + permanent: true, + }, ...whatsNew, ...actions, ...deprecated,