UI States — Komunikasikan Status ke User
Setiap elemen UI memiliki berbagai state. User harus selalu tahu apa yang sedang terjadi.
5 State yang Harus Didesain
1. Empty State Saat tidak ada data — jangan tampilkan layar kosong:
<div class="empty-state">
<img src="empty.svg" alt="" />
<h3>Belum ada pesanan</h3>
<p>Pesanan kamu akan muncul di sini.</p>
<button>Mulai Belanja</button>
</div>
2. Loading State Saat menunggu data:
- Skeleton screen — placeholder yang beranimasi (lebih baik dari spinner)
- Spinner — untuk aksi singkat (submit button)
- Progress bar — untuk proses panjang (upload file)
3. Error State Saat sesuatu gagal:
- Pesan error yang jelas dan actionable — "Gagal memuat. Coba lagi." bukan "Error 500"
- Tombol retry jika memungkinkan
- Jangan hilangkan data yang sudah diisi user
4. Success State Saat aksi berhasil:
- Konfirmasi visual (checkmark hijau, toast notification)
- Ringkasan apa yang berhasil dilakukan
- Langkah selanjutnya
5. Partial/Degraded State Saat sebagian fitur tidak tersedia:
- Tampilkan apa yang bisa ditampilkan
- Inform user tentang bagian yang bermasalah
Accessibility States
/* Focus visible — untuk keyboard users */
button:focus-visible {
outline: 2px solid #2563EB;
outline-offset: 2px;
}
/* Error state dengan aria */
.input-error {
border-color: #EF4444;
}
<input aria-invalid="true" aria-describedby="error-msg" />
<span id="error-msg" role="alert">Email tidak valid.</span>
Tips
- Design semua states sebelum coding — jangan hanya happy path
- Loading skeleton > spinner — user merasa halaman lebih cepat
- Error messages harus helpful — sebutkan apa yang salah DAN bagaimana memperbaiki
- Toast notifications — untuk feedback non-blocking (auto-dismiss 3-5 detik)
Tokopedia menampilkan skeleton loading saat browse produk, success toast setelah add to cart, dan empty state yang mengundang saat wishlist kosong.
