Pernah menghapus data dengan menekan tombol berwarna merah di suatu website atau aplikasi mobile? Warna merah cukup umum digunakan oleh banyak produk digital untuk elemen-elemen yang berhubungan dengan kondisi error atau aksi destruktif yang sifatnya tidak dapat dikembalikan sehingga membutuhkan perhatian pengguna, seperti hapus akun dan ubah data. Hal ini dikarenakan warna merah merupakan salah satu semantic colors, yaitu warna-warna yang dipahami oleh manusia secara umum merepresentasikan fungsi atau makna tertentu.
Namun, pernahkah terpikir bagaimana strategi pemilihan warna untuk elemen-elemen destruktif pada produk digital dengan color brand identity merah? TikTok versi desktop web adalah salah satu produk digital yang menggunakan warna merah sebagai brand identity. Oleh karena itu, warna merah pun digunakan pada primary button TikTok.
Di samping strategi pemilihan warna, eksplorasi desain untuk aksi destruktif dari sisi user experience juga penting. Salah satu strategi yang umum diterapkan adalah mempersulit alur kerja pengguna untuk menghapus data dengan menempatkan tombol delete di lokasi yang sulit ditemukan. Strategi ini bukan dimaksudkan untuk membuat pengalaman pengguna menjadi buruk, melainkan membantu pengguna mencegah melakukan pengambilan keputusan yang tidak dapat dikembalikan.
Artikel ini membahas dua studi kasus strategi desain produk digital yang berkaitan dengan aksi destruktif. Yang pertama adalah strategi pemilihan warna elemen desain untuk produk dengan merah sebagai warna identitas brand. Sementara yang kedua yaitu pendekatan desain yang bertujuan mempersulit alur pengguna dalam proses penghapusan data.
Aksi Destruktif Tidak Harus Berwarna Merah
Selain TikTok yang sebelumnya disebutkan, ada juga website redBus yang menggunakan merah sebagai color brand identity. Penggunaan warna merah sebagai warna brand utama ini cukup tricky. Bukan hanya soal estetika, tapi juga fungsionalitas. Tanpa pendekatan yang tepat, pengguna akan kesulitan membedakan antara aksi utama di suatu halaman dengan aksi yang sifatnya destruktif. Oleh karena itu, UI/UX designer perlu membuat strategi khusus dalam mendesain elemen produk digital yang berkaitan dengan aksi destruktif.
1. Gunakan Warna Alternatif
Kunci memilih warna yang cocok untuk tombol destruktif pada produk dengan identitas warna merah adalah pemilihan warna yang cukup berbeda, tapi tetap menyampaikan pesan “bahaya” tanpa membuat bingung.
- Merah Gelap: #C62828
Warna merah gelap masih mempertahankan esensi “bahaya” dengan tetap menciptakan kontras visual yang cukup. Hal ini membantu pengguna untuk membedakan destructive button dengan primary button yang biasa. Warna ini memberikan kesan tegas, namun tetap berisi peringatan “halus” yang tidak mengganggu estetika keseluruhan. Hal ini dapat menjaga konsistensi brand sambil tetap mengirimkan sinyal bahaya yang diperlukan. - Hitam: #000000
Warna hitam dipilih sebagai destruction color karena netral, kuat secara visual, dan memberikan kesan final tanpa tumpang tindih dengan elemen identitas. Hitam juga memberikan kontras yang tinggi terhadap warna lain di layar tanpa menarik perhatian secara berlebihan seperti warna merah. Strategi ini diprioritaskan karena memberikan keseimbangan antara branding dan clarity, serta tetap mempertahankan struktur visual yang rapi.
2. Gunakan Indikator Visual Tambahan
Menggunakan indikator visual tambahan merupakan strategi untuk mengurangi potensi ambiguitas dalam hal interpretasi antara semantik warna dengan fungsinya. Indikator visual ini bertindak sebagai “rambu-rambu” untuk memperingatkan pengguna.
Contoh indikator visual yang dapat digunakan adalah sebagai berikut.
- Ikon (misal: ikon warning atau trash)
- Teks label yang jelas (“Hapus”, “Error“, dsb.)
- Animasi atau feedback visual (shake, fade, dsb.)
Buat Elemen Destruktif Agar Sulit Ditemukan
Pernahkah Anda tanpa sengaja menghapus data penting karena tidak sengaja salah pencet atau kurang fokus? Momen-momen ini bisa terjadi karena tombol-tombol yang memicu aksi destruktif terlalu mudah diakses. Menurut ahli UX dari Nielsen Norman Group, human error bisa terjadi karena “slips” (aksi tidak sengaja akibat terburu-buru atau kurang fokus) atau “mistakes” (aksi disengaja namun didasari pemahaman yang salah).
Membuat tombol hapus agak tersembunyi atau memindahkannya ke lokasi yang tidak langsung terlihat diterapkan bukan dalam rangka mempersulit hidup pengguna, melainkan mengajak pengguna untuk berpikir dua kali sebelum melakukan tindakan yang tidak bisa diulang. Dengan pendekatan ini, secara tidak langsung pengguna dipaksa untuk berhenti sejenak, mencari, membaca, dan benar-benar memahami konsekuensi dari tindakannya sehingga dapat mengurangi risiko klik yang tak disengaja.
Jadi, meskipun dalam beberapa kondisi kita memang perlu menyediakan tombol untuk aksi-aksi destruktif, penting juga untuk membuatnya tidak semencolok tombol aksi utama. Caranya bisa dengan memilih warna yang tidak mencolok atau menggunakan style berupa link. Bisa juga dengan menempatkannya di posisi paling bawah agar jauh dari alur utama, seperti studi kasus di web GOV.UK berikut. Pengguna yang benar-benar ingin melakukan aksi destruktif pasti akan berusaha untuk mencari tombol tersebut. Sementara pengguna yang sedang fokus menyelesaikan tugasnya tidak akan “terjebak” dalam kesalahan fatal karena tombol berbahaya itu secara tiba-tiba menarik perhatian.
Ambil contoh bagaimana Github mendesain alur penghapusan akun permanen. Pengguna tidak akan menemukan tombol “Hapus Akun” di halaman profil utama, melainkan perlu masuk ke menu pengaturan yang dalam, melewati beberapa langkah konfirmasi yang memperingatkan konsekuensinya, bahkan diminta mengetikkan kalimat tertentu. Ini adalah contoh nyata bagaimana sebuah aksi destruktif dibuat “tersembunyi” untuk melindungi pengguna.
Mendesain aksi destruktif pada produk digital bukan hanya soal fungsionalitas, tapi juga tentang melindungi pengguna dari aksi berbahaya. Mempelajari berbagai studi kasus desain untuk aksi destruktif penting bagi UI/UX designer untuk menjadi pemantik ide-ide alternatif saat menghadapi situasi yang menantang, seperti ketika brand color adalah merah. Selain itu, mengidentifikasi tingkat bahaya suatu aksi juga diperlukan untuk menentukan seberapa besar hambatan yang perlu ditambahkan, apakah modal konfirmasi sederhana cukup atau diperlukan langkah-langkah berlapis yang memastikan pengguna benar-benar memahami konsekuensi tindakan mereka.
Kesalahan kecil bisa berdampak negatif bagi reputasi. Untuk Anda yang membutuhkan software yang tidak hanya fungsional, tetapi juga dirancang dengan mempertimbangkan mitigasi risiko kesalahan, BADR Interactive siap menjadi partner terpercaya Anda.
