UI/UX - lesson 5 | HackIndia Skills

Key point

The core idea

A state is part of the interface, not an afterthought. Empty and error states should help the user continue without guessing.

For your hackathon app, this matters in flows like login, search, payments, form submission, dashboards, bookings, and uploaded files.

Empty is useful

An empty state appears when there is no data yet. A new user has no notes. A search has no results. A hostel complaint app has no complaints filed yet.

Do not leave a blank box. Tell the user what is missing, why it is normal, and what they can do next.

Your to-do

Build an empty state

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Name what is empty, like “No events found” or “No expenses added yet”.
Add one helpful line that explains the state in plain words.
Offer one next action, usually a button or link.
Keep it visually lighter than main content, but still readable.
Check it on mobile width, not only on your laptop screen.

0 of 5 done

Errors need recovery

An error state appears when something fails or blocks progress. It could be a wrong OTP, missing field, failed API request, invalid UPI ID, or no internet.

A useful error says what happened and how to fix it. Avoid messages like “Error occurred” or “Invalid input” when you can be more specific.

Common mistake

Many builders show errors only in red text. Red tells the user something is wrong, but it does not explain what to do.

Also do not blame the user. Write “Enter a 10-digit mobile number” instead of “You entered an invalid number”.

Example

React example

This example handles three states for a simple events list: loading, empty, and error. You can adapt the same pattern for jobs, notes, complaints, expenses, or team members.

Keep the button copy specific. “Try again” is better than “Submit” after a failed load.

function EventsList({ loading, error, events, onRetry, onCreate }) {
  if (loading) {
    return <p className="status">Loading events...</p>;
  }

  if (error) {
    return (
      <section className="state state-error" role="alert">
        <h2>Could not load events</h2>
        <p>Check your connection and try again.</p>
        <button onClick={onRetry}>Try again</button>
      </section>
    );
  }

  if (events.length === 0) {
    return (
      <section className="state">
        <h2>No events added yet</h2>
        <p>Create your first event so students can register.</p>
        <button onClick={onCreate}>Add event</button>
      </section>
    );
  }

  return (
    <ul>
      {events.map((event) => (
        <li key={event.id}>{event.name}</li>
      ))}
    </ul>
  );
}

Tip

Use AI carefully

Ask ChatGPT, Gemini, or Claude for empty and error copy for each screen. Give it your app idea, user type, and action.

Then check three things yourself: is it specific, does it tell the user what to do next, and is it short enough for a phone screen?

Prompt:
I am building a hackathon app for college students to split canteen expenses.
Write empty states and error messages for these screens:
1. No groups yet
2. No expenses in a group
3. Failed to add expense
4. Invalid UPI ID
Keep each message short and include a clear next action.