Materi
Selain keadaan komponen, antarmuka punya keadaan sistem: sedang memuat, sedang memproses, berhasil, gagal, atau kosong. Heuristik pertama Jakob Nielsen, visibility of system status, meminta desain selalu memberi tahu pengguna apa yang sedang terjadi lewat umpan balik yang tepat dalam waktu yang wajar. Sepuluh heuristik itu dan cara evaluasinya diajarkan di kelas Riset Pengguna; di sini heuristik tersebut dipakai untuk menamai masalah yang paling sering muncul: tombol ditekan, lalu tidak ada tanda apa pun.
HTML sudah menyediakan elemen untuk proses yang sedang berjalan. MDN menjelaskan elemen progress: dengan atribut value dan max, ia menunjukkan seberapa jauh proses berjalan (determinate), misalnya 40 dari 100. Tanpa atribut value, progress menjadi indeterminate: ada kegiatan yang sedang berlangsung tetapi tidak ada perkiraan berapa lama. Minimumnya selalu 0, dan atribut min tidak dikenal elemen ini. Seperti kontrol lain, progress diberi label yang terhubung lewat for dan id.
| Situasi | Bentuk | Contoh kode |
|---|---|---|
| Jumlah total diketahui (ukuran berkas, jumlah langkah) | Determinate | <progress value="3" max="5"> |
| Lama proses tidak diketahui | Indeterminate | <progress> tanpa value |
Keadaan sistem juga menyangkut klik ganda. GOV.UK Button menyediakan opsi untuk mencegah klik ganda tak sengaja pada tombol kirim, supaya formulir tidak terkirim berkali-kali selama sistem masih memproses. Teks untuk keadaan kosong, pesan berhasil, dan pesan galat dibahas di kelas UX Writing.
<label for="salin-data">Menyalin data anggota</label>
<progress id="salin-data" value="3" max="5">3 dari 5</progress>
