Skip to main content

Empty States

Anticipate the type of data that falls into the empty state, and/or provoke an emotional response.

Tone and Voice#

Empty states mean opportunities for growth or improvements. This is where our commercial and ecommerce specialty can be explored. Keep the voice positive, focusing on scaling the client's business. Keep in mind that less is more, unless it's for cordiality.

👍 Dos#

Positive states#

  • If the state is positive, show it! Make our users aware they've achieved a goal.
  • We usually avoid exclamation marks, but this is where an exception can be made. If it's exciting news, provoke an emotional response with punctuation.
  • Remember that empty states should be informative, not only emotional. Teach users what data should be present in the empty state.

💡Examples:
"You've cleared your notifications for the day!"
"Congratulations, there are no more pending offers to review!"
"Start reviewing your received offers"

Negative states#

  • If the state is potentially negative, or if it was not the user's expectation, don't alarm them.
  • Explain why this state is happening and how they can solve it, with direct actions.
  • Guide them to the solution by adding adjacent buttons, or linking related documentation.

💡Examples:
"There are no new orders - for now. Check out our blog for insightful sales content."
"Start adding products to your store to find SKUs here."

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 direct sentences, without passive voice.
  • Use sentence case.
  • Add punctuation at the end of sentences. Use exclamation marks carefully.
  • Maximum of 2 sentences.

👎 Don'ts#

  • Avoid emojis as the single source of communication in empty states. They lack the seriousness we must convey. Prefer illustrations paired with text.
  • Don't trigger anxiety with empty states. Be mindful of the balance between emphasis and stress.