Github mappings
First Use Empty State
Use a first-use illustration when the user opens a feature for the first time and there is no data yet because no action has been taken.Usage Guidance
When to Use: These illustrations are ideal for screens or workflows where the user is encountering a feature or tool for the first time, and no data is yet available because no actions have been taken. Example scenarios- A newly onboarded user views their job scheduling screen for the first time.
- A user opens a reporting dashboard that hasn’t been configured or populated.
- Header: “Ready to hit the road?”
- Body: “Your shop is ready for action! Start by scheduling a job or adding your first task to see things come alive.”
User Cleared Empty State
Display a user-cleared illustration when the user has completed a task or cleared every item from a workflow, so there is nothing left to show.Usage Guidance
When to Use: These illustrations are ideal for screens or workflows where the user has completed a task or cleared every item from a workflow, so there is nothing left to show. Example scenarios- An inbox for customer inquiries has been cleared
- A technician’s checklist for the day is complete
- Header: “Nothing left on your plate!”
- Body: “You’re all caught up. Time to enjoy a well-deserved coffee break.”
Success State
Display a success illustration when the user completes a workflow or hits a significant milestone, especially after a complex or time-intensive task.Usage Guidance
When to Use: Display this illustration when a user successfully completes a workflow or achieves a significant milestone, especially if the task was complex or time-intensive. Example scenarios- Successfully generating a large customer report
- Completing setup for a new product feature
- Header: “Toolbox triumph!”
- Body: “You nailed it! Your task is complete, and your toolbox is ready for the next project.”
Error State
Usage Guidance
When to Use: This illustration should appear when the user encounters an error that disrupts their workflow, such as a failed action or system issue. Example scenarios- An error occurs when submitting a customer invoice
- A scheduling conflict prevents a job from being assigned
- Header: “The truck hit a snag!”
- Body: “Something’s not working quite right. Let’s get this fixed so you can get back on the road.”
No Search Results State
Usage Guidance
When to Use: This illustration is appropriate when a user performs a search query that yields no results, signaling that they may need to refine their criteria. Example scenarios- Searching for a job or customer that does not exist
- Filtering for inventory items that are not available
- Header: “No bones found!”
- Body: “Your search didn’t fetch any results. Try adjusting your filters or broadening your search terms.”
General Recommendations for All Empty States
- Tone: Maintain a friendly, supportive tone in all copy. Playful language aligned with the illustration enhances user engagement and reduces frustration.
- Actionable Steps: Always include a call-to-action or recovery path, especially for first-use and error states, to guide the user forward.