Sebagian besar antarmuka chatbot berbagi bagian yang sama: area masukan, rangkaian pesan, dan kontrol pada setiap pesan. Perbedaan antara chatbot yang baik dan yang membuat frustrasi sebagian besar terletak pada detail bagian-bagian tersebut dan statusnya.
Mulailah dengan keadaan kosong. Layar kosong dengan kotak teks tidak memberikan gambaran apa pun yang dapat dilakukan bot. Tambahkan deskripsi singkat dan tiga atau empat contoh perintah yang dapat diketuk orang.
Buatlah thread mudah dibaca. Jaga agar lebar pesan tetap nyaman untuk dibaca, pisahkan pesan pengguna dan AI dengan jelas, render pemformatan seperti daftar dan kode dengan benar, dan tetap tampilkan pesan terbaru saat teks baru mengalir, tanpa melompat jika orang tersebut telah menggulir ke atas.
Rancang setiap negara bagian. Mengirim, berpikir, streaming, selesai, berhenti, dan gagal masing-masing akan terlihat berbeda. Indikator berpikir, sering kali berupa pola titik atau bola animasi, memberi tahu orang-orang bahwa permintaan telah diterima. Tombol berhenti saat streaming memberikan kontrol kembali. Kesalahan harus menjelaskan apa yang terjadi dan menawarkan percobaan ulang.
Tambahkan kontrol ke jawaban: salin, buat ulang, edit perintah sebelumnya, dan berikan umpan balik. Untuk asisten suara, gunakan visual yang jelas untuk mendengarkan, berpikir, dan berbicara sehingga orang tahu kapan harus berbicara. ExodeUI, yang kami buat, memiliki bola animasi gratis untuk status ini yang dijalankan di React, Vue, SwiftUI, Flutter dan kerangka kerja lainnya.