Desain UI keadaan kosong: pandu langkah berikutnya saat konten tidak ada
Kerangka praktis untuk merancang keadaan penggunaan pertama, tanpa hasil, data yang dikosongkan, dan kesalahan dengan teks yang berguna, tindakan jelas, serta tampilan visual yang sesuai konteks.
Panel kosong menimbulkan ambiguitas. Seseorang mungkin bertanya-tanya apakah aplikasi sedang memuat, pencariannya gagal, atau ia perlu menambahkan sesuatu. Keadaan kosong yang berguna menyebutkan apa yang sedang terjadi dan membantu menentukan tindakan berikutnya.
Mulailah dengan mengenali penyebab konten tidak ada. Penggunaan pertama, pencarian tanpa hasil, data yang sengaja dikosongkan, dan kesalahan sistem memerlukan pesan serta tindakan yang berbeda. Contoh di sini adalah latihan desain hipotetis, bukan studi kasus produk atau klaim kinerja.
Poin utama
- Klasifikasikan alasan konten tidak ada sebelum memilih teks, ilustrasi, atau tindakan.
- Bedakan umpan balik pemuatan dan kegagalan dari hasil kosong yang telah terkonfirmasi.
- Tulis judul yang spesifik, penjelasan singkat bila perlu, dan langkah berikutnya yang relevan.
- Tinjau keadaan tersebut dalam konteksnya, termasuk aksesibilitas, tata letak sempit, dan jalur pemulihan.
1. Diagnosis mengapa ruang tersebut kosong
Perlakukan keadaan kosong sebagai laporan tentang produk, bukan kesempatan untuk menghias. Tanyakan apa yang terjadi tepat sebelum layar muncul, apa yang diketahui sistem, dan apakah pengguna dapat mengubah situasinya. NN/g menjelaskan keadaan kosong sebagai peluang untuk mengomunikasikan status, mendukung pembelajaran, dan membuka jalur menuju tugas utama. Peluang itu bergantung pada identifikasi keadaan yang benar terlebih dahulu.
Secara khusus, jangan tampilkan “Tidak ada item” ketika permintaan masih berjalan. Pertahankan indikator pemuatan atau kerangka tampilan sampai hasilnya diketahui. Jika permintaan gagal, jelaskan kegagalan dan opsi pemulihan. Jika berhasil dengan nol item, katakan bahwa tidak ada konten yang cocok. Perbedaan ini mencegah orang salah mengira penundaan sementara atau masalah sistem sebagai hasil nyata.
| Keadaan | Artinya | Respons yang berguna |
|---|---|---|
| Penggunaan pertama | Fitur siap digunakan, tetapi pengguna belum menambahkan atau membuat apa pun. | Jelaskan apa yang seharusnya ada di sini dan tawarkan cara langsung untuk membuat, menambahkan, atau menjelajah. |
| Tanpa hasil | Pencarian, filter, atau rentang tanggal berhasil diselesaikan tanpa kecocokan. | Konfirmasikan bahwa kriterianya tidak menghasilkan kecocokan; sarankan penyesuaian yang relevan atau penghapusan filter. |
| Data dikosongkan | Pengguna telah menyelesaikan atau menghapus item yang biasanya muncul di sini. | Akui penyelesaian atau hasil kosong tanpa menyiratkan adanya masalah; tawarkan tugas lain bila berguna. |
| Kesalahan | Sistem tidak dapat mengambil atau menampilkan konten yang diharapkan. | Jelaskan apa yang gagal dengan bahasa sederhana dan tawarkan tindakan pemulihan seperti mencoba lagi. |
| Memuat | Sistem belum menentukan apakah konten tersedia. | Tampilkan kemajuan atau tampilan pemuatan; jangan mengumumkan hasil kosong terlalu dini. |
2. Tulis teks yang sesuai dengan penyebabnya
Gunakan judul untuk menamai keadaan dan teks pendukung untuk menjelaskan artinya atau cara melanjutkan. Buat judul mudah dipindai. Tambahkan kalimat hanya jika menjawab pertanyaan nyata. Panduan penulisan Apple menyarankan langkah berikutnya yang jelas pada layar kosong, label berorientasi tindakan, dan pesan kesalahan langsung yang menjelaskan cara memperbaiki masalah. Hindari kelucuan yang mengaburkan makna, judul samar seperti “Tidak ada apa-apa di sini,” atau teks yang menyalahkan pengguna.
Misalnya, layar item tersimpan hipotetis pada penggunaan pertama dapat bertuliskan “Panduan yang Anda simpan muncul di sini,” diikuti “Simpan panduan agar Anda dapat membukanya lagi nanti,” dengan tombol “Jelajahi panduan.” Daftar periksa yang telah selesai dapat bertuliskan “Semua sudah beres” dan menawarkan “Lihat tugas yang selesai.” Contoh-contoh ini menggambarkan kenyataan berbeda: yang satu mengajarkan cara mengisi fitur, sedangkan yang lain mengonfirmasi hasil yang berhasil.
Untuk pencarian berhasil tanpa kecocokan, pesan hipotetis dapat berbunyi “Tidak ada proyek yang cocok dengan ‘orchid’” dan menyarankan “Coba istilah yang lebih umum atau hapus filter.” Pertahankan kueri dan buat perubahan filter dapat dibatalkan bila memungkinkan. Untuk kegagalan jaringan, tulis “Proyek tidak dapat dimuat” dengan “Coba lagi.” Jangan mengklaim tidak ada proyek ketika sistem belum berhasil memeriksanya.
- Sebutkan objek atau kriteria yang relevan agar pesan dapat dipahami tanpa konteks tambahan.
- Gunakan kata kerja pada tombol, seperti “Buat proyek,” “Hapus filter,” atau “Coba lagi.”
- Tempatkan instruksi dekat konten yang terdampak dan gunakan teks selain warna atau gambar.
- Hindari “Ups,” bahasa yang menyalahkan, dan kode teknis kecuali pengguna memerlukannya untuk menyelesaikan masalah.
3. Buat langkah berikutnya berguna, bukan otomatis ada
Berikan tindakan ketika seseorang dapat mengubah situasi atau melanjutkan tugasnya secara masuk akal. Penggunaan pertama sering terbantu oleh tindakan membuat atau menambahkan; tanpa hasil mungkin terbantu oleh penghapusan batasan; kesalahan dapat menawarkan coba lagi. Kotak masuk yang sudah bersih atau olahraga yang selesai mungkin sama sekali tidak memerlukan tindakan. Jangan paksakan tombol di setiap keadaan hanya agar panel tampak interaktif.
Buat pemulihan sepadan dengan masalahnya. Kegagalan penyegaran biasanya cukup ditangani dengan penjelasan dalam konteks dan opsi coba lagi, bukan peringatan yang menghalangi. Apple menyarankan menyesuaikan umpan balik dengan pentingnya informasi dan menyimpan peringatan untuk situasi kritis yang dapat ditindaklanjuti. Untuk pencarian, pertahankan pekerjaan pengguna dan tawarkan penyesuaian masuk akal alih-alih diam-diam mengubah kueri. Material Design juga menyarankan konten awal, konten edukasi singkat, atau kecocokan terbaik berlabel jelas sebagai alternatif ketika memang membantu.
Gunakan ilustrasi hanya jika menambah konteks, kehangatan, atau kemudahan mengenali keadaan. Ilustrasi tidak boleh bersaing dengan pesan atau membuat orang mengira gambar hias dapat diketuk. Ikon sederhana mungkin cukup untuk hasil filter yang ringkas; ruang kerja pada penggunaan pertama bisa terbantu oleh contoh kecil jenis konten yang kelak ada di sana. Jika konten awal disertakan, buat mudah dikenali dan dihapus.
- Pilih satu tindakan utama yang langsung menangani penyebabnya.
- Tambahkan jalur bantuan sekunder hanya jika menjawab pertanyaan lanjutan yang mungkin muncul.
- Gunakan pesan penyelesaian yang tenang ketika hasil kosong merupakan kabar baik.
- Pastikan tindakan tetap dapat dipahami pengguna papan ketik dan pembaca layar.
4. Tinjau seluruh keadaan, bukan hanya ilustrasinya
Periksa keadaan dalam wadah sebenarnya: tampilan penggunaan pertama layar penuh, bilah samping kecil, dan tabel tersaring memiliki kebutuhan ruang serta hierarki berbeda. Tempatkan pesan dekat area yang dijelaskannya. Pastikan tetap terbaca saat teks diperbesar atau membungkus baris, dan buat tindakan utama mudah ditemukan tanpa harus mengenali warna. Uji pula transisinya: dari memuat ke kosong, dari memuat ke kesalahan, dari mencoba lagi ke berhasil, dan dari perubahan filter kembali ke hasil.
Tinjauan pustaka yang praktis dimulai dari pemicu dan pemulihan yang diharapkan. Untuk setiap pola, catat keadaan, judul, penjelasan opsional, tindakan utama, jalur sekunder, dan apa yang terjadi setelah dipilih. Bandingkan tangkapan layar untuk struktur dan hierarki visual yang berguna, lalu periksa perilaku produk dalam konteks; gambar statis tidak dapat memberi tahu apakah suatu kesalahan bisa dipulihkan atau hasil benar-benar kosong. Jelajahi pustaka UI ScreenKits untuk referensi visual dan semua kategori untuk menemukan pola terkait.
- Dapatkah seseorang mengetahui apakah konten memang tidak ada, masih dimuat, atau tidak tersedia karena kesalahan?
- Apakah pesan mencerminkan kueri, filter, akun, atau tugas yang telah selesai saat ini?
- Apakah tindakan mempertahankan input yang berguna dan menghasilkan dampak yang terlihat?
- Apakah keadaan bekerja pada ukuran kecil, dengan teks terjemahan yang lebih panjang, dan dengan teknologi bantu?
- Dapatkah seseorang pulih dari kesalahan atau menemukan cara menyesuaikan pencarian tanpa hasil?
Pertanyaan umum
Haruskah keadaan kosong selalu memiliki ajakan bertindak?
Tidak. Sertakan tindakan ketika tindakan itu membantu seseorang menambah konten, menyesuaikan pencarian, atau pulih dari masalah. Tugas yang selesai atau tampilan yang memang kosong mungkin hanya memerlukan konfirmasi singkat.
Apakah layar tanpa hasil merupakan keadaan kesalahan?
Biasanya tidak. Jika pencarian atau penyaringan berhasil diselesaikan, laporkan bahwa tidak ada kecocokan dan tawarkan penyesuaian yang berguna. Gunakan bahasa kesalahan untuk kegagalan sistem yang mencegah hasil ditentukan atau ditampilkan.
Apa yang seharusnya ditampilkan saat hasil sedang dimuat?
Gunakan tampilan pemuatan atau umpan balik kemajuan hingga permintaan selesai. Tampilkan hasil kosong hanya setelah sistem mengonfirmasi bahwa respons yang berhasil tidak berisi item yang cocok.
