Desain Inklusif: Untuk Pengguna Buta Warna

Overview

Pegadaian memiliki visi sebagai agen inklusi keuangan pilihan utama masyarakat. Untuk mencapai visi tersebut, Pegadaian berusaha mengimplementasikan desain yang inklusif.

Desain inklusif merupakan sebuah pendekatan desain untuk menghasilkan fasilitas maupun produk bagi semua orang (sebagai pengguna) secara umum, tanpa batasan fisik, rentang usia, dan juga jenis kelamin, salah satu batasannya adalah kondisi buta warna yang akan kita bahas 😁.

Buta warna merupakan kondisi seseorang kehilangan kemampuan untuk membedakan sebagian warna atau keseluruhan warna. Berdasarkan colourblindawarness.org, populasi orang yang buta warna adalah 1 dari 12 pria dan 1 dari 200 wanita. Jenis buta warna yang paling umum adalah Deuteranopia, Protanopia dan Tritanopia yaitu sulit untuk melihat warna merah atau hijau dengan sempurna.

Perbandingan skema warna pada penderita buta warna (coblis)

Gambar berikut merupakan visualisasi orang dengan buta warna ketika melihat lampu lalu lintas.

Mengapa UI Designer perlu memperhatikan aspek buta warna? ​​🤔

UI designer memegang peranan penting untuk membuat tampilan antarmuka yang menarik dan juga dapat mudah digunakan oleh penggunanya. Karena pengguna buta warna tidak dapat membedakan warna tertentu, designer harus mencari cara untuk memastikan aspek keterbacaan atau “dampak” emosional dari suatu desain tetap terpenuhi.

Bagaimana cara mendesain untuk pengguna buta warna? 🤔

Ada beberapa cara yang bisa kita gunakan untuk dapat dilihat dengan baik oleh pengguna buta warna:

Gunakan variasi icon atau keterangan 👓

Pemilihan warna yang tepat memang dapat mempengaruhi seseorang dalam menentukan suatu keputusan pada sebuah web atau aplikasi. Namun akan sulit ketika penggunanya buta warna. Cara menyiasatinya adalah dengan menambahkan variasi icon atau keterangan, sehingga komponen UI tidak hanya terfokus pada warna, contoh penggunaannya adalah ketika error pada form.

Error pada form

Contoh lainnya yaitu penulisan angka yang menunjukkan peningkatan keuntungan. Penggunaan warna hijau untuk menunjukkan adanya suatu peningkatan dapat ditambahkan dengan icon seperti berikut ini.

Informasi naik/turunnya pendapatanInformasi naik/turunnya pendapatan

Gunakan pola atau tekstur ✋🏻

Cara lainnya adalah dengan menambahkan pola dan tekstur, hal tersebut dapat membantu membedakan informasi yang banyak jenisnya, seperti dalam grafik atau infografis. Menambahkan elemen pola atau tekstur akan membantu komponen informasi semakin terlihat.

Penggunaan pola/tekstur pada grafik

Perhatikan kontras dan kombinasi warna 🎨

Bagi pengguna buta warna, kontras dari satu warna dengan warna lain seringkali justru lebih penting dibanding warna itu sendiri, sehingga designer perlu meningkatkan rasio kontras dalam palet warna yang dibuat agar lebih ramah untuk pengguna buta warna, berikut merupakan cara menentukan kombinasi warna yang sesuai untuk pengguna buta warna:

1. Bandingkan color wheel beserta turunannya.
2. Bandingkan visualisasi normal dengan buta warna.
3. Pilih warna berdasarkan contrast dan keterbacaannya.

Untuk mengecek visualisasi buta warna, kita dapat menggunakan plugin stark pada aplikasi figma dan sketch. Pada aplikasi photoshop dapat diakses melalui View > Proof Setup > Color Blindness.

Pegadaian sendiri telah melakukan pembuatan palet untuk pengguna buta warna, menggunakan kombinasi icon dan keterangan dalam mendesain user interface aplikasinya. Sehingga desain yang telah dibuat dapat dinikmati oleh pengguna buta warna dan mendukung design yang inklusif 😎.

Kesimpulan

Designer yang baik mampu berempati pada penggunanya, salah satu bentuk empatinya adalah dengan memperhatikan aspek buta warna. Dengan desain yang inklusif, kita bisa membuat produk dan layanan yang mudah digunakan untuk semua kalangan, termasuk yang memiliki keterbatasan. Jika meninjau aspek bisnis, pertumbuhan juga bisa lebih besar karena produk yang dirancang memberikan pengalaman yang baik terhadap semua kalangan pengguna.

Sekian pembahasan mengenai design yang inklusif dengan memperhatikan pengguna buta warna, semoga bermanfaat 😀

What’s next? Stay tune ya! 👋

Let me know feel free to feedback, comment atau hubungi kami di research@pegadaian.co.id atau arif.ramadhan@pegadaian.co.id.

Source article:

Types of Colour Blindness

Color blindness: how to design an accessible user interface