Skip to main content

Empty States

Empty states are screens or UI elements that are displayed when no content has been shown yet. In Overwolf apps, this can happen when a user has just installed the app, hasn’t used certain features yet, or when data is temporarily unavailable due to an issue. Well designed empty states provide guidance, don't leave the user confused, encourage action, and maintain good user experience.

Why are empty states important​

Empty states help users by:

  1. Guides their next steps—help users to understand what they need to do next, whether it's playing a game, enabling permissions, or setting up their app. This encourages engagement and sets clarity.
  2. Preventing confusion—a blank screen with no feedback can frustrate users. An empty state explains why content isn’t available and reassures them that the app is working as expected.
  3. Reducing friction and drop-off—if users don’t understand what to do, they may abandon the app. A clear empty state helps prevent frustration and increases retention.
  4. Maintaining a cohesive experience:—empty states contribute to the overall UX consistency, ensuring the app feels polished and well-designed.

Types of empty states in Overwolf apps​

There are a number of different empty states that can appear in your app.

  1. First-Time Use (Onboarding empty states)

    • Shown when a user first installs or opens the app.
    • Helps them get started by providing instructions, tips, or a call to action.
    • Example: “No highlights yet? Play a game, and we’ll capture your best moments automatically!”

  2. No data available (Content-Based Empty States)

    • Shown when there’s no data to display, often due to missing game sessions, lack of recorded clips, or no saved settings.
    • Example: “Looks like you haven’t played any matches yet. Start playing, and your stats will appear here!”

  3. Error or connection issues

    • Displayed when an app cannot load content due to an issue, such as API errors, internet connection problems, or game compatibility issues.
    • Example: “We’re having trouble retrieving your game data. Please check your connection and try again.”

  4. Completed or no more actions required

    • Shown when a user has completed all possible actions in a section.
    • Example: “You're all caught up! No new notifications for now.”

Best practices for empty states​

  • Keep it clear and concise—avoid overwhelming the user with too much text. Keep messages short and informative.
  • Use visuals—icons, illustrations, or small animations can make empty states feel more engaging and friendly.
  • Provide an actionable next step—include buttons or links that guide the user toward the next action.
  • Maintain a consistent tone—match the app’s branding and communication style, whether playful, professional, or informative.
  • Show empathy—acknowledge the user’s situation, especially in error-related empty states.