Skip to main content

Titles

Titles immediately indicate context and possible actions in a given section.

Tone and Voice#

We are ecommerce specialists. We are specific, and avoid ambiguity. Our titles must match the industry's jargons, and the users' mental model. Choose titles that seem intuitive, given what we master about ecommerce. Users should instantly recognize the section's purpose, through the title.
Titles are vital aspects of information architecture. Before naming a section, understand its purpose and how it contributes to the bigger picture. Be mindful of how we transmit seriousness and reliability when naming screens.

👍Do's#

  • Always name sections with titles. They clarify the context, facilitate documentation, and allow users to point out where their troubles are, in support tickets. Titles should be present in the following components:
    • Page headers (keep in mind that a page's title should mirror the labels used on the left navigation bar.)
    • Cards
    • Modals
    • Error messages
    • Forms
    • Grouping similar checkboxes, toggles or radio buttons
  • Always use title case.
  • Titles may be used in the following contexts:
    • Referring to branded names
    • Grouping ambiguous tasks
    • Indicating single tasks

Grammar#

  • We encourage the use of possessive adjectives or pronouns in sentences, as long as they don't exceed the limited space for text, in the UI. They reinforce the idea that users should feel connected with their VTEX environment, and feel they belong. It shows the respect we have towards their store.
  • Prefer key words, rather than sentences.
  • Use title case.
  • No punctuation.
  • Maximum of 4 words.

Brand name#

Branded terms should be capitalized accordingly.

  • VTEX should always be on All Caps.
  • Be mindful how other VTEX branded terms are written. They should be consistent throughout our platform and communication strategies.

💡Example: SmartCheckout, inStore, VTEX Payment.

img

Ambiguous task#

Screens that allow multiple actions still require titles to contextualize the user.

  • Prefer broader terms like Management, Dashboard and Overview, followed by another term that specifies the module at hand.

💡Example: Subscriptions Management, Account Overview.

Single task#

Sections that are straight to the point, where there's a single action the user must take.

  • Prefer imperative verb phrases that serve as instructions, and reinforce the action at hand.

💡Example: Create a New Affiliation, Edit Payment Methods, Map Categories and Brands.