Setiap sistem pasti punya momen gagal. Tapi bagaimana sistem menyampaikan kegagalan itulah yang membedakan UX yang buruk dan UX yang penuh empati.
Error message UX bukan hanya soal memberi tahu bahwa “ada yang salah”—tapi bagaimana cara mengkomunikasikan kegagalan secara manusiawi dan solutif.
“A good error message never blames the user. A great one tells them what to do next.”
— NNGroup
Apa Itu Error Message UX?
Error message UX adalah pesan yang ditampilkan kepada pengguna saat terjadi masalah, baik saat input, koneksi, atau proses sistem.
Tujuannya bukan untuk memarahi, tapi:
- Menjelaskan apa yang salah
- Memberi solusi
- Menjaga kepercayaan pengguna
- Mendorong perbaikan atau retry
Internal Link: Multi-State UI & Visual Error State
Error adalah bagian penting dari multi-state UI dan harus didesain sedetail mungkin.
Baca juga: Multi-State UI – Mengelola Transisi Loading, Error, dan Sukses
Jenis-Jenis Error Message dalam UX
| Tipe Error | Contoh Kasus | Contoh Pesan Ramah |
|---|---|---|
| ❌ Form Input | Email kosong / format salah | “Email belum diisi” atau “Format email belum lengkap” |
| 🌐 Koneksi | Gagal memuat data | “Ups! Tidak bisa terhubung. Coba lagi ya.” |
| 🧾 Sistem / Server | Timeout, error 500, overload | “Ada gangguan sementara. Kami sedang memperbaikinya.” |
| 🔒 Akses / Izin | Halaman butuh login / tidak punya akses | “Oops! Kamu perlu login untuk lanjut.” |
Prinsip Menulis Error Message UX yang Efektif
✅ 1. Jelas dan Langsung
Gunakan bahasa sehari-hari, bukan kode sistem:
❌ “Error 400: Bad Request”
✅ “Permintaan tidak bisa diproses. Coba periksa kembali input kamu.”
✅ 2. Tunjukkan Solusi
Berikan langkah selanjutnya, seperti:
“Klik di sini untuk isi ulang data”
“Periksa koneksi internetmu dan coba lagi”
✅ 3. Gunakan Nada Ramah
“Ups! Ada yang salah. Yuk coba lagi.”
Daripada: “Kesalahan terjadi. Ulangi.”
✅ 4. Hindari Menyalahkan Pengguna
Ganti “Kamu salah isi” → jadi “Format nomor belum sesuai. Contoh: 08xxxxxxxxxx”
✅ 5. Sertakan Visual / Ikon
Gunakan icon ❌ atau ⚠️ agar mudah dikenali & mencolok secara visual.
Tips Visual Desain Error Message
- Gunakan warna merah/hangat untuk kontras tinggi
- Tambahkan ikon kontekstual (⚠️ untuk peringatan, ❌ untuk error)
- Gunakan animasi ringan untuk transisi error
- Untuk form: tampilkan error di dekat field (bukan di atas semua)
- Pastikan teks error tetap terlihat di dark mode
Contoh Error Message UX dari Produk Populer
| Aplikasi | Error Message UX | Kenapa Efektif |
|---|---|---|
| Gmail | “Gagal mengirim. Coba lagi nanti.” | Ringkas, ada tombol retry |
| Notion | “Kami kehilangan koneksi. Menyimpan offline…” | Memberi rasa aman walau gagal sinkron |
| “Ups! Komentar terlalu cepat. Coba beberapa saat lagi.” | Memberi konteks tanpa menyalahkan | |
| Slack | “Server kami sedang ngopi ☕. Kami akan kembali segera!” | Humor + empati + informasi teknis ringan |
Tools untuk UX Writing & Visual Error
- Figma / Framer – desain prototipe feedback error
- UX Writing Assistant (plugin) – bantu tone & phrasing
- Hotjar / FullStory – deteksi momen frustasi & rage click
- Ditto / Frontitude – kelola microcopy & error message sistem
Kesalahan Umum dalam Error Message
- ❌ Menggunakan kode sistem: 403, 500, 422 tanpa penjelasan
- ❌ Tidak memberi tahu pengguna apa yang harus dilakukan
- ❌ Nada kasar / menyalahkan user
- ❌ Tidak muncul di tempat yang relevan (terlalu jauh dari konteks)
- ❌ Tidak bisa ditutup atau dismiss (modal error wajib bisa keluar)
Kesimpulan: Error Harusnya Jadi Panduan, Bukan Penolakan
Error message UX adalah momen penting yang menguji kualitas pengalaman pengguna.
Ketika sistem gagal, yang diingat bukan hanya error-nya, tapi bagaimana sistem meresponsnya.
Desain dan kata-kata yang empatik akan:
- Menenangkan
- Membimbing
- Menjaga user tetap engage
Jangan cuma bilang “ada masalah”.
Tunjukkan apa yang bisa dilakukan selanjutnya.
