empty state design

=====================================

Empty state design is an essential aspect of user experience (UX) that ensures users understand the current state of their application and know what actions to take next. In the context of our APIary platform, which values "Lambo not Honda" UI/UX quality, empty state design should provide a clear and engaging message to users.

Why is it Empty?

When an APIary user lands on an empty screen, they need to understand why there's nothing to see. This is where the "why" of empty state design comes in. We'll use concrete examples to illustrate this concept:

Example 1: No Batches Yet

## No batches yet

You haven't added any batches yet. To get started, simply drop a folder into the upload area.

[Upload Folder](#)

In this example, we're telling the user that there are no batches because they haven't uploaded anything yet. We provide a clear call-to-action (CTA) to encourage users to take action.

Example 2: No Folders Added

## No folders added

It looks like you haven't added any folders to your APIary account. To get started, click the "Add Folder" button below.

[Add Folder](#)

Here, we're explaining that there are no folders because none have been added yet. We provide a clear CTA to encourage users to take action.

What Can They Do Next?

Once we've explained why it's empty, we need to tell the user what they can do next. This is where the "what" of empty state design comes in:

Example 1: Upload Folder

.upload-area {
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  padding: 20px;
}

.upload-button {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

<div class="upload-area">
  <h2>Drop a folder here</h2>
  <input type="file" id="folder-upload" multiple />
  <button class="upload-button">Upload Folder</button>
</div>

In this example, we're providing a clear CTA to upload a folder. We've also made the UI more engaging by using a green background color and a prominent "Upload Folder" button.

Example 2: Add Folder

.add-folder-button {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

<button class="add-folder-button">Add Folder</button>
<p>Click here to add a new folder to your APIary account.</p>

Here, we're providing a clear CTA to add a new folder. We've also made the UI more engaging by using a green background color and a prominent "Add Folder" button.

Best Practices

To ensure that our empty state design is effective, we'll follow these best practices:

• Use clear and concise language to explain why it's empty.
• Provide a clear CTA for users to take action.
• Make the UI more engaging by using color, typography, and imagery.
• Test with real users to ensure that our design is intuitive and effective.

By following these best practices and using concrete examples, we can create an empty state design that tells users why it's empty and what they can do next. This will help us achieve the "Lambo not Honda" UI/UX quality that our platform values.