docs: update UX writing guidelines

Updated UX writing guidance on buttons

Author: uxemilylee

packages/styleguide/src/lib/UX Writing/Component guidelines/Buttons.mdx

@@ -17,36 +17,28 @@ export const parameters = {
 
 <AboutHeader {...parameters} />
 
-Buttons enable our learners to "speak" to us. They click to tell us what they want (i.e. to "Start my free trial" or to "Resume learning") and we respond with the anticipated next step.
+Buttons enable our learners to "speak" to us. They select buttons to tell us what they want (for example, to **Try pro for free** or to **Resume learning**), and we respond with the anticipated next step.
 
 ## Best practices
 
-When approaching writing buttons — whether they're text buttons, fill buttons, or call-to-action buttons — here are a few things to keep in mind:
-
-- **Be specific.** People should know exactly what they're getting when they click on a button. If a button leaves you questioning what will happen when you click on it, adjust the copy to make it more clear. Specificity also plays a big role in ensuring accessibility for learners navigating our content with screen readers.
-- **Use action-oriented language.** Start with an action-oriented verb rather than simply listing where the button will take you (i.e. Use "Take the quiz" instead of "Language quiz").
-- **Emphasize the value people get, rather than how they get it.** When relevant, focus on the benefit/what people are receiving instead of the way they are receiving it. For instance, instead of "Download for free" try "Get the free guide."
+When approaching writing buttons — whether they're text buttons, fill buttons, or call-to-action buttons — here are some things to keep in mind:
+
+- **Be specific.** People should know exactly what they're getting or what happens next when they select a button. If a button leaves you unsure, adjust the copy to make it more clear. Specificity also plays a big role in ensuring accessibility for learners navigating our content with screen readers.
+- **Use action-oriented language.** Start with an action-oriented verb rather than simply listing where the button will take you.\
+  Example: use **Take the quiz** instead of "Language quiz"
+- **Emphasize the value people get**, rather than how they get it.\
+  Example: **Try Pro for free** instead of "Opt in"
+- **Use the established system patterns** for navigational and purely functional buttons.\
+  Examples: **Next**, **Back**, **Close**
+- **Use the same word to refer to the same thing** to foster trust and prioritize clarity.\
+  Examples: **Go to payment**, **Complete payment**, **Cancel payment**
+- **Avoid using pronouns**, on the actual button because in the micro-interaction, the speaker can be either Codecademy or the learner.\
+  Example: **Go to dashboard,** not "Go to your dashboard" or "Go to my dashboard"
 - **When in doubt, A/B test!** Buttons — specifically call-to-action (CTA) button copy can have a major impact on conversion. If you're undecided about which CTA is best, test — especially for high-impact projects.
 
-### Fill buttons
-
-- **Length:** Keep to a maximum of 3 words (unless more words are necessary for clarity).
-- **Capitalization:** Use sentence case, capitalizing only proper nouns.
-
-### Text buttons
-
-- **Length:** Keep to a maximum of 3 words (unless more words are necessary for clarity).
-- **Capitalization:** Use sentence case, capitalizing only proper nouns.
-- **Arrow usage:** Include → after the text when clicking brings users to a new surface. There should always be a space between the text and the arrow.
-
-### CTA buttons
-
-- **Length:** Keep to a maximum of 3 words (unless more words are necessary for clarity).
-- **Capitalization:** Use sentence case, capitalizing only proper nouns.
-
-## Checklist
+## Checklist for writing button labels
 
-- For buttons, is your copy 3 words or less?
-- For buttons, have you used action-oriented language?
-- Have you used sentence case, only capitalizing proper nouns?
 - Does the copy make it clear where the button will take learners?
+- Does the button lead with an actionable verb?
+- Is the microcopy 3 words or less (especially for the primary button)?
+- Have you used sentence case, only capitalizing [proper nouns in the **Codecademy glossary**](https://skillsoftdev.atlassian.net/wiki/spaces/UXW/database/4447175693?savedViewId=9b4c57a9-0cfb-42b0-97c5-08a87e8a2c84)?