Panduan Komprehensif untuk Desain Notifikasi

Pesan periferal dalam produk digital, yang secara kolektif dikenal sebagai notifikasi, tidak boleh membahayakan pengalaman pengguna. Sebaliknya, mereka harus berkontribusi pada pengalaman yang membantu orang mencapai tujuan. Mengatasi desain notifikasi di awal proses desain produk akan menghasilkan hasil yang lebih baik.

Bayangkan sekelompok arsitek merancang rumah tiga lantai, mengerjakan cetak biru selama berbulan-bulan. Ini mengesankan! Cantiknya! Tetapi ketika mereka hampir menyelesaikan diagram, salah satu dari mereka berseru, “ Tunggu! Bagaimana orang naik dari lantai pertama ke lantai tiga? Mereka lupa tentang tangga!

Demikian pula, desainer produk cenderung menganggap peningkatan UX kecil namun penting terakhir. Seperti halnya dengan status kosong, desainer cenderung meninggalkan desain notifikasi—peringatan, pesan kesalahan, konfirmasi, pengumuman, dan pengakuan—sampai akhir. Masalahnya mungkin tiba-tiba muncul ketika seorang pengembang bertanya, “ Bagaimana kami menangani kesalahan? Karena ini merupakan renungan, pendekatan tacking-on ini sering menghasilkan "frankendesigns" yang ceroboh, yang merugikan UX.

Untuk menghindari skenario seperti itu, sebaiknya gunakan pendekatan terintegrasi pada desain notifikasi untuk meningkatkan pengalaman pengguna . Meskipun desainer mungkin tidak memiliki semua informasi di ujung jari mereka, merancang kerangka pemberitahuan yang komprehensif selama siklus hidup desain produk akan membantu mempersiapkan produk untuk kasus penggunaan yang tidak terduga.

Saat memulai desain notifikasi, prinsip desain penting yang harus diingat adalah bahwa mereka harus membantu (tidak menghalangi) orang untuk melakukan tugas . Sangat penting untuk menguji prototipe produk lebih awal dan memetakan kasus penggunaan di mana pesan periferal akan bernilai dalam membantu interaksi . Namun, cara terbaik untuk berkomunikasi dengan pengguna akan bervariasi dan bergantung pada beberapa faktor utama:

• Jenis informasi yang dikomunikasikan
• Urgensi informasi—apakah perlu segera dilihat
• Apakah tindakan pengguna diperlukan sebagai akibat dari informasi

Selain gaya dan perilaku notifikasi, nadanya perlu dibuat dengan salinan UX. Semua salinan pada notifikasi harus jelas, ringkas, dan bermanfaat. Sistem notifikasi yang dirancang dengan baik juga dirancang dengan mempertimbangkan aksesibilitas dan memiliki fleksibilitas untuk mengakomodasi bahasa yang berbeda.

Terminologi yang digunakan untuk notifikasi cenderung serupa, namun akan sedikit berbeda dari tim ke tim dan proyek ke proyek. Adalah kewajiban desainer untuk menentukan terminologi kerangka notifikasi—apa yang disebut apa—serta menyinkronkan semua orang tentang alasan penggunaannya: apa, di mana, dan bagaimana .

Kegunaan Lebih Baik Melalui Desain Pemberitahuan yang Lebih Baik

Notifikasi memiliki fungsi penting dalam kegunaan produk. “ Visibilitas status sistem ” adalah nomor satu dalam daftar “10 Heuristik Kegunaan untuk Desain Antarmuka Pengguna” dari Nielsen Norman Group. Aturan tersebut menyatakan bahwa “ sistem harus selalu memberi informasi kepada pengguna tentang apa yang sedang terjadi, melalui umpan balik yang sesuai dalam waktu yang wajar. ”

Sistem notifikasi adalah bagian dari UX produk digital sehingga tanpanya, produk akan terasa seperti ada yang tertinggal. Jika tidak ada "visibilitas status sistem" dan umpan balik, itu seperti mengendarai mobil tanpa dashboard.

Dasbor mobil penuh dengan pengukur, ikon, dan lampu yang dirancang untuk memberikan visibilitas ke sistem operasi mobil dan memastikan pengoperasian yang aman dan andal. Saat kita mengemudi, sekelompok pembacaan dan pemberitahuan tentang suhu mesin, kesehatan baterai, tekanan oli, lampu, rem, airbag, dan sebagainya memberi kita informasi. Saat kita ingin berbelok, ada lampu kedip untuk lampu sein, bersama dengan bunyi klik, keduanya memberi kita umpan balik. Kami juga memiliki pengukur tangki bahan bakar yang menunjukkan kapan tangki bahan bakar hampir habis.

Ini bekerja dengan cara yang sama dengan produk digital. Visibilitas status sistem dan umpan balik merupakan hal mendasar dalam hal kegunaan, dan kegunaan adalah landasan dari pengalaman pengguna yang luar biasa.

Membangun Kerangka Notifikasi yang Bermanfaat

Untuk merancang kerangka kerja notifikasi dengan baik, mungkin berguna untuk memikirkan notifikasi dalam hal “kekuatan sinyal.” Pesan periferal mana yang membutuhkan lebih banyak atau lebih sedikit perhatian? Misalnya, interaksi yang berpotensi merusak membutuhkan notifikasi yang “lebih keras”, dan interaksi yang tidak merusak membutuhkan notifikasi yang “lebih tenang”.

Mengirimkan jumlah notifikasi yang tepat kepada orang-orang adalah tindakan penyeimbang , dan melakukannya secara berlebihan penuh dengan bahaya; produk mungkin mendapatkan banyak umpan balik negatif, atau paling buruk, mengasingkan orang sampai pada tingkat di mana mereka akan meninggalkannya. Oleh karena itu, desainer perlu mempertimbangkan UX dengan hati-hati dan hanya mengirim pesan dengan tujuan yang jelas. Ini juga merupakan ide yang baik untuk memberi pengguna fleksibilitas untuk mematikan semua, atau setidaknya beberapa notifikasi.

Pendekatan awal untuk desain notifikasi membutuhkan klasifikasi pada tiga tingkat: perhatian tinggi, sedang, dan rendah , yaitu, “tingkat keparahan.” Setelah itu, jenis notifikasi perlu didefinisikan lebih lanjut oleh atribut khusus pada ketiga level tersebut, apakah itu peringatan, peringatan, konfirmasi, kesalahan, pesan sukses, atau indikator status.

Setelah atribut notifikasi telah diidentifikasi, saatnya membuat taksonomi dari berbagai notifikasi yang akan membentuk kerangka kerja. Berikut ini bukanlah daftar yang lengkap—jenis notifikasi akan berbeda berdasarkan produk, kasus penggunaan, dan variabel lainnya. ( Harap diperhatikan : Seperti yang disebutkan, tim yang berbeda menggunakan berbagai istilah. Misalnya, kami menyebut "konfirmasi" sebagai pemberitahuan yang memerlukan persetujuan pengguna untuk melanjutkan interaksi yang merusak. Beberapa tim mungkin menggunakan "konfirmasi" sebagai istilah untuk pesan sukses.)

Perhatian tinggi

• Peringatan (perlu perhatian segera)
• Kesalahan (perlu tindakan segera)
• Pengecualian (anomali sistem, ada yang tidak berfungsi)
• Konfirmasi (tindakan yang berpotensi merusak yang memerlukan konfirmasi pengguna untuk melanjutkan)

Perhatian sedang

• Peringatan (tidak diperlukan tindakan segera)
• Ucapan Terima Kasih (umpan balik tentang tindakan pengguna)
• Pesan sukses

Perhatian rendah

• Pesan informasional (alias notifikasi pasif, ada sesuatu yang siap dilihat)
• Lencana (biasanya pada ikon, menandakan sesuatu yang baru sejak interaksi terakhir)
• Indikator status (umpan balik sistem)

Merancang UX Notifikasi Hebat

Untuk mendesain produk dengan UX yang hebat, desainer perlu membuat daftar semua kasus penggunaan di mana notifikasi mungkin berguna. Disarankan agar proses ini dilakukan dengan bekerja sama dengan pengembang karena dalam kebanyakan kasus mereka dapat tidak memihak dan dapat membantu memecahkan masalah tepi yang mungkin tidak dipertimbangkan oleh perancang.

Desainer juga harus mencatat semua interaksi selama pengujian pengguna di mana notifikasi dapat memberikan nilai untuk meningkatkan UX.

Setelah berbekal daftar tersebut, langkah selanjutnya adalah mengkategorikan notifikasi berdasarkan tingkat perhatian dan atribut yang diinginkan. Sekali lagi, karena notifikasi tidak boleh mengganggu , ini perlu dilakukan dengan hati-hati. Beberapa pertanyaan yang harus diajukan selama proses ini adalah:

• Apa yang akan memicu notifikasi?
• Apa jenis umpan balik yang dikomunikasikan?
• Di mana notifikasi akan muncul dan bagaimana caranya?
• Pemberitahuan mana yang memerlukan interaksi langsung?
• Apakah notifikasi tersebut persisten atau non-persistent?

Selanjutnya, kode warna dan ikon perlu ditentukan dan dimasukkan ke dalam sistem desain (atau panduan gaya). Saat melalui proses ini, desainer perlu mempertimbangkan setiap kejadian di mana notifikasi akan muncul dan memastikan mereka merender dengan benar di semua latar belakang.

Penempatan notifikasi juga penting. Dengan risiko menyatakan yang sudah jelas, untuk menghindari mengaburkan antarmuka, pemberitahuan akan muncul di bagian atas atau bawah, atau di dekat sudut UI. Terlebih lagi, jika desainnya responsif, desainer perlu menguji tampilan notifikasi dengan berbagai viewport. Ini sangat penting di mana pesan kesalahan dapat ditampilkan dengan formulir seluler yang responsif.

Merancang kerangka kerja notifikasi tidaklah mudah. Banyak detail kecil yang terjadi di bawah skenario yang berbeda perlu dipertimbangkan. Selain aksesibilitas dan keterbacaan, pelokalan di masa mendatang perlu diingat. Sistem notifikasi yang terlihat sempurna dalam bahasa Inggris dapat berantakan seluruhnya saat digunakan pada platform Jerman atau Jepang.

Pertanyaan lebih lanjut untuk ditanyakan saat mendefinisikan perilaku notifikasi :

• Jika peringatan atau peringatan dimaksudkan untuk terus-menerus, bagaimana desainer memastikan bahwa orang masih memiliki akses ke sana setelah mereka menavigasi keluar dari layar awal?
• Apakah ikon lansiran dengan lencana perlu dimasukkan jika arsip pemberitahuan dapat dilihat?
• Jika notifikasi tidak terus-menerus, berapa lama sebelum menghilang, dan haruskah ada opsi untuk mengabaikannya sebelum menghilang?

Untuk aplikasi seluler, tidak hanya notifikasi dalam aplikasi tetapi notifikasi push (tingkat sistem, di luar aplikasi) juga perlu dirancang dengan cermat. Sebagian besar merupakan interupsi, jadi penting untuk melihat salinan notifikasi dan bagaimana serta kapan harus meminta izin untuk mengirimnya. Digunakan terlalu banyak, mereka dapat mencegah orang menggunakan aplikasi. Terlalu banyak notifikasi yang tidak penting dapat membuat pengguna frustrasi yang kemudian dapat menonaktifkan notifikasi atau berhenti menggunakan aplikasi sama sekali.

Desainer juga harus mempertimbangkan notifikasi yang dapat ditindaklanjuti yang memungkinkan orang menjadi produktif tanpa membuka aplikasi. Memungkinkan pengguna untuk menyelesaikan tugas-tugas kecil tanpa masuk ke aplikasi dapat menjadi alat yang ampuh dalam meningkatkan UX.

Untuk pemberitahuan push seluler, praktik terbaik UX adalah menunda pemberitahuan dalam bentuk apa pun (meminta akses ke lokasi seseorang, mengirim pemberitahuan push, dan sebagainya) hingga orang memiliki kesempatan untuk menjelajahi aplikasi sedikit.

Praktik Terbaik Notifikasi untuk UX Hebat

Mengamati praktik terbaik berikut akan memastikan bahwa orang akan menganggap notifikasi sebagai memberikan nilai, bukan sebagai interupsi, sehingga meningkatkan pengalaman pengguna. Sebelum merancang sistem pemberitahuan dan memasukkannya ke dalam sistem desain, pertimbangkan praktik terbaik mendasar berikut:

• Klasifikasikan pemberitahuan menurut tiga tingkat perhatian yang dibahas sebelumnya. Kemudian, tentukan taksonomi dari berbagai bentuk notifikasi dalam ketiga level tersebut.
• Saat membuat panduan gaya untuk sistem notifikasi, tentukan panjang karakter maksimum untuk notifikasi dalam semua bahasa yang akan dirilis.
• Berikan perhatian khusus pada kemampuan beradaptasi dan fleksibilitas untuk mengakomodasi berbagai jenis konten dan panjang teks.
• Buat skema warna yang konsisten untuk tiga tingkat perhatian serta ikonografi yang konsisten.
• Buat notifikasi yang ringkas dan mudah dibaca yang memberikan informasi berguna.
• Pertimbangkan dengan cermat apa yang harus dikirim dan kapan harus dikirim. Di perangkat seluler, tunda pengiriman notifikasi pada aplikasi yang baru diunduh untuk menghindari mengasingkan orang. Periksa konteks dan kasus penggunaan dengan cermat.
• Err di sisi menampilkan lebih sedikit pemberitahuan, apakah itu peringatan atau peringatan, atau pembaruan status perhatian tinggi hingga menengah lainnya. Sebagai gantinya, masukkan mereka ke dalam daftar yang dapat diakses orang ketika mereka ingin melihatnya (ditandai dengan lencana ikon di UI).
• Pertimbangkan sistem dengan opsi untuk menandai notifikasi “jangan tampilkan lagi”.
• Pengakuan non-persisten seperti "snack bar" akan menghilang dari layar setelah minimal empat detik dan maksimal delapan detik, dengan opsi untuk mengabaikannya lebih cepat dan "membatalkan" jika perlu.
• Untuk notifikasi tingkat perhatian tinggi di seluler, pertimbangkan umpan balik suara dan sentuhan jika memungkinkan.
• Pastikan kontras yang tepat pada notifikasi untuk keterbacaan dan antara latar belakang tempat notifikasi muncul. Ketahuilah bahwa dengan desain yang lancar dan responsif, latar belakang dapat bergeser di bawah notifikasi.

Praktik Terbaik untuk Pesan Kesalahan

• Pesan kesalahan harus sederhana dan langsung, sebaiknya dapat ditindaklanjuti, ditulis dalam bahasa yang mudah dibaca dan cepat dipahami.
• Hindari kode dan singkatan yang tidak jelas seperti “ respon yang diterima sukses adalah salah. ”
• Berikan deskripsi masalah yang singkat dan jelas alih-alih “ telah terjadi kesalahan. ”
• Hindari menyalahkan orang atau memberi tahu mereka bahwa mereka melakukan sesuatu yang salah—misalnya, dengan mengatakan itu adalah “ perintah ilegal. ”
• Berikan pesan kesalahan konstruktif dalam konteks sehingga orang dapat memperbaiki masalah tersebut.
• Hindari menunjukkan kesalahan hanya dengan mengubah bidang menjadi merah. Itu tidak membuatnya dapat diakses oleh para penyandang cacat. Itu selalu yang terbaik untuk menyertakan isyarat visual lain yang dapat dilihat oleh buta warna.
• Gunakan validasi sebaris untuk bidang input pada formulir.
• Pesan kesalahan tidak boleh hilang sampai orang memperbaiki masalahnya.

Ringkasan

Notifikasi berkontribusi pada pengalaman yang membantu orang mencapai tujuan dan harus diperlakukan seperti komponen produk digital lainnya. Namun, notifikasi dapat memotong dua arah. Jika ditangani dengan baik, mereka dapat meningkatkan UX dan membantu keterlibatan, tetapi ketika dieksekusi dengan buruk, berisiko menjadi gangguan. Mencapai keseimbangan yang tepat adalah kuncinya.

Pemberitahuan tidak boleh dianggap sebagai renungan. Untuk melakukannya dengan benar, desainer harus menangani kasus penggunaan lebih awal, menentukan berbagai bentuk selama siklus hidup desain produk, dan mengujinya secara ekstensif.

Rekap cepat tentang cara yang tepat untuk mendesain notifikasi:

• Mulai desain notifikasi lebih awal, bukan sebagai renungan.
• Klasifikasikan pemberitahuan menurut tiga tingkat perhatian: tinggi, sedang, dan rendah.
• Kode warna, tetapkan ikon, dan tentukan penempatan.
• Kategorikan berdasarkan jenis: persisten atau non-persisten, pop-up, spanduk, dialog, dll.
• Menggabungkannya ke dalam sistem desain.

Memahami kapan dan bagaimana menggunakan notifikasi sangat penting untuk memberikan kegunaan yang hebat dan membangun konsistensi dalam pesan produk. Dengan hati-hati menilai pesan periferal yang perlu ditampilkan pada saat yang tepat, desainer dapat meningkatkan efisiensi produk dan meningkatkan UX-nya.

Beri tahu kami pendapat Anda! Silakan tinggalkan pemikiran, komentar, dan umpan balik Anda di bawah ini.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Cara Bekerja dari Jarak Jauh Saat Paling Penting
• Cara Membuat Transisi Kerja Jarak Jauh dengan Mudah
• Praktik Terbaik dan Kesalahan Desain Aplikasi Seluler
• Panduan Utama untuk Desain Situs Web eCommerce
• Gangguan Obrolan – Saat Chatbot Gagal