- UI notifikasi toast tidak lagi direkomendasikan di GitHub karena masalah aksesibilitas
- Struktur notifikasi sementara yang hilang otomatis berisiko melanggar standar aksesibilitas visual dan fungsional (WCAG)
- GitHub mengajukan banner dan dialog sebagai alternatif umpan balik yang persisten dan dapat diakses
- Toast juga memiliki banyak masalah kegunaan, seperti pada layar besar, multitasking, dan kecenderungan mengabaikan banner
- Demi aksesibilitas dan pengalaman pengguna yang konsisten, penggunaan Toast dihentikan di seluruh sistem desain Primer
Gambaran umum Toasts
- Toast adalah jendela notifikasi persegi kecil yang muncul sebentar di sudut bawah layar, dipicu oleh tindakan pengguna atau sistem
- Karena dirancang untuk hilang otomatis setelah beberapa waktu, pola ini memiliki masalah aksesibilitas dan kegunaan bawaan
- Karena alasan tersebut, GitHub merekomendasikan cara komunikasi yang lebih stabil dan mudah diakses
Alternatif pengganti Toast
- Perlu memilih UI yang sesuai berdasarkan tujuan penggunaan
- Untuk notifikasi sukses sederhana, tidak perlu umpan balik tambahan karena hasilnya bisa dikonfirmasi langsung dari layar hasil
- Untuk pekerjaan yang lebih kompleks, status keberhasilan disampaikan melalui banner atau penampilan konten secara bertahap
- Untuk pekerjaan yang gagal, informasi kesalahan diberikan melalui banner atau dialog
- Untuk pengiriman formulir, formulir sederhana tidak memerlukan konfirmasi tambahan, sedangkan formulir kompleks menggunakan halaman konfirmasi perantara atau banner
- Untuk validasi input, gunakan komponen validasi formulir yang sudah ada di Primer
- Untuk pekerjaan berdurasi panjang, status selesai disampaikan melalui banner atau kanal lain seperti email dan notifikasi push
- Saat terjadi desinkronisasi sesi, gunakan dialog atau banner untuk memberi tahu bahwa penyegaran halaman diperlukan
Pertimbangan aksesibilitas (Accessibility Considerations)
- UI toast berpotensi melanggar beberapa kriteria keberhasilan WCAG
- 2.2.1 Timing Adjustable (A) : harus tetap tampil sampai pengguna menutupnya sendiri
- 1.3.2 Meaningful Sequence (A) : ketidaksesuaian antara urutan DOM dan urutan visual dapat membingungkan saat menggunakan teknologi bantu
- 2.1.1 Keyboard (A) : interaksi di dalam toast harus dapat dikendalikan dengan keyboard
- 4.1.3 Status Messages (AA) : keberadaannya harus diberitahukan ke teknologi bantu tanpa mengganggu
- Kriteria lain yang juga berpotensi dilanggar
- 1.4.4 Resize text (AA) : saat ukuran teks diubah, ada risiko menutupi layar atau terjadi overflow
- 1.4.10 Reflow (AA) : saat terjadi scroll horizontal, aksesibilitas keyboard harus tetap terjamin
- 2.4.3 Focus Order (A) : ada kemungkinan membingungkan urutan fokus
- 3.2.4 Consistent Identification (AA) : perlu menjaga konsistensi dalam kode
Pertimbangan kegunaan (Usability Considerations)
- Pada layar besar, toast bisa berada di luar bidang pandang sehingga tidak terlihat
- Saat hilang otomatis, ada risiko pengguna melewatkan pesan karena sedang mengerjakan hal lain
- Fenomena menutupi UI: toast dapat menutupi elemen penting seperti tombol di bagian bawah
- Pengguna yang memperbesar tampilan layar mungkin tidak dapat melihat toast yang berada di luar area pembesaran
- Masalah memori kerja: karena hilang otomatis, informasi tidak bisa diperiksa ulang
- Kecenderungan mengabaikan banner: penggunaan berlebihan membuat pengguna cenderung mengabaikannya
- Ketidaksesuaian posisi: jarak fisik antara UI pemicu dan toast dapat membingungkan keterkaitannya
- Perilaku tutup yang keliru: tombol Esc dapat menyebabkan UI lain ikut tertutup
Referensi tambahan
Belum ada komentar.