Bagaimana Warna Mempengaruhi UX Dan Perilaku Pengguna
Diterbitkan: 2016-12-24Warna: ketika sebuah desain melakukannya dengan benar, Anda mungkin tidak akan pernah menyadarinya — tetapi ketika itu salah? Tidak masalah apakah itu latar belakang yang terlalu terang, mencolok mata, atau teks hitam pada latar belakang abu-abu gelap, pilihan warna di bawah standar dapat merusak aplikasi yang paling fungsional sekalipun. Sama seperti aspek desain lainnya, warna tidak hanya ada untuk membumbui aplikasi. Warna dapat menjadi alat sama seperti fitur lain dari pengalaman pengguna.
Filosofi desain grafis yang digunakan untuk mendesain aplikasi — mulai dari ukuran setiap elemen, cara meluncur di seluruh UI, hingga ya, warnanya — memengaruhi perilaku pengguna. Ada alasan bagus mengapa desainer sering menghabiskan bulan-bulan pertama sebuah proyek untuk memikirkan palet warna dan bukan gambar rangka.
Memilih palet yang sempurna dapat menjadi perbedaan antara merancang aplikasi meditasi yang benar-benar membantu pengguna bersantai dan aplikasi yang menyebabkan mereka ingin melemparkan ponsel mereka ke dinding. Ini adalah perbedaan antara aplikasi perbankan yang membuat Anda gugup untuk memeriksa saldo Anda dan aplikasi yang dapat menenangkan kecemasan Anda tentang kapan gaji berikutnya akan masuk.
Jadi bagaimana Anda melakukannya dengan benar — dan apa yang dapat Anda lakukan untuk menguasai warna dalam desain Anda?
Filosofi Desain Grafis: Teori Warna
Sebelum masuk ke filosofi desain grafis (dan psikologi!), penting untuk memahami beberapa prinsip dasar warna dan desain. Meskipun warna mungkin tidak tampak seperti subjek yang terlalu rumit, ada alasan bagus mengapa setiap kelas seni dimulai tidak hanya dengan pelajaran tentang cara menggunakan warna tetapi juga cara membuat warna.
Dasar-dasarnya — seperti yang dijelaskan oleh roda warna — sederhana: warna primer (merah, kuning, dan biru) dapat digabungkan untuk membuat warna sekunder (hijau, ungu, dan oranye). Demikian juga, berbagai fraksi putih dapat ditambahkan ke warna untuk menciptakan rona, dan hitam dapat ditambahkan untuk menciptakan nuansa.
Warna yang berlawanan satu sama lain (seperti merah dan hijau, atau biru dan oranye) dianggap saling melengkapi. Warna-warna ini sangat kontras, membuatnya menonjol saat bersebelahan (atau di atas) satu sama lain.
Warna yang bersebelahan dianggap analog. Warna-warna ini memiliki kontras yang jauh lebih rendah, yang berarti bahwa mereka cenderung tidak terlalu menonjol saat berdekatan.
Tidak ada yang secara inheren "benar" atau "salah" tentang warna dengan kontras tinggi atau rendah. Terkadang aplikasi akan meminta warna-warna cerah yang sangat kontras satu sama lain. Di lain waktu, Anda akan menginginkan sesuatu yang sedikit lebih lembut. Umumnya, semakin Anda menginginkan sesuatu untuk menonjol, semakin Anda harus mengandalkan warna yang kontras.
Cara terbaik untuk merasakan bagaimana warna berjalan (dan tidak cocok) bersama adalah dengan bermain-main dengannya. Bahkan jika Anda tidak sedang mengerjakan proyek sekarang, putaran cepat roda warna Adobe mungkin membuat pikiran Anda berpikir tentang warna dengan cara baru.
Contoh Emosi: Warna Dan Psikologi
Saat Anda memperkuat filosofi desain grafis di balik aplikasi Anda, Anda tidak bisa hanya memikirkan tampilannya — Anda harus memikirkan bagaimana rasanya. Kami juga tidak berbicara tentang umpan balik haptic. Sejak Johann Wolfgang Goethe mempelajari efek fisiologis warna, kami terobsesi menggunakan warna untuk menghasilkan efek fisik dan emosional.
Bahkan saat ini, warna menjadi pusat perhatian dalam filosofi desain banyak merek. Perawatan kesehatan, bisnis, dan pemerintah semuanya cenderung menggunakan warna biru, karena memberikan rasa kepercayaan dan profesionalisme. Hijau dipandang sebagai warna muda yang penuh energi — dan, tentu saja, mencerminkan rasa peduli lingkungan dan kedekatan dengan alam. Merah energik dan impulsif, memberikan kesan kecepatan, efisiensi, dan kekuatan. Setiap warna yang kita lihat (dan tentunya setiap warna yang secara intrinsik kita kaitkan dengan merek tertentu) menyiratkan sesuatu, baik secara langsung maupun tidak langsung, yang membantu mendorong persepsi kita tentang merek individu.
Pikirkan tentang merek dan simbol yang Anda kenal sebagai sangat sentris warna. Apple, Wikipedia, dan The New York Times semuanya menampilkan warna abu-abu, melambangkan kepercayaan yang tenang. Merek-merek ini dipandang seimbang dan dapat diandalkan. Whole Foods, John Deere, dan Starbucks semuanya menampilkan nuansa hijau di logo mereka, menghubungkan alam dan kebaikan dengan merek dan produk mereka.
Beberapa warna bahkan melampaui merek mereka, mendefinisikan seluruh industri. Pikirkan tentang berapa banyak rantai makanan cepat saji atau restoran yang menggunakan skema warna merah atau kuning, misalnya. Warna-warna ini membantu memicu kita secara mental, menempatkan kita di tempat psikologis tertentu yang mendorong kita untuk membeli beberapa jenis produk.
Meskipun ini adalah sesuatu yang telah dipikirkan oleh pemasar sejak lama, sains membenarkan banyak perasaan bersama kita tentang warna. Merah, misalnya, telah ditemukan membuat beberapa orang bereaksi lebih cepat dan lebih kuat terhadap rangsangan tertentu. Ini juga dapat mengintimidasi: peneliti menemukan bahwa ketika peserta tes melihat warna merah, skor mereka lebih buruk.
Bahkan lebih asing? Warna pil memiliki efek ringan pada cara kerjanya. Pil biru bekerja paling baik sebagai obat penenang, kuning bekerja paling baik sebagai antidepresan, dan dalam semua kasus, warna-warna cerah bekerja paling baik. Meskipun ini mungkin hanya efek plasebo yang meningkatkan respons kita terhadap pengobatan aktif, efeknya cukup kuat bagi perusahaan untuk mempertimbangkannya saat memproduksi obat-obatan baru.
Sekarang, kami tidak mengatakan bahwa menggunakan skema warna berbasis kuning di aplikasi pelacak suasana hati Anda akan membuatnya efektif sebagai antidepresan, tetapi palet warna yang Anda pilih dapat secara wajar berdampak pada suasana hati pengguna — jadi pilihlah dengan bijak.
Direkomendasikan untukmu:
Bagaimana Metaverse Akan Mengubah Industri Otomotif India
Apa Arti Ketentuan Anti-Profiteering Bagi Startup India?
Bagaimana Startup Edtech Membantu Tenaga Kerja India Meningkatkan Keterampilan & Menjadi Siap Masa Depan...
Saham Teknologi Zaman Baru Minggu Ini: Masalah Zomato Berlanjut, EaseMyTrip Posting Stro...
Startup India Mengambil Jalan Pintas Dalam Mengejar Pendanaan
Platform Pemasaran Digital Logicserve Bags Pendanaan INR 80 Cr, Berganti Nama Sebagai LS Dig...
Warna Dan Kegunaan
Desain bukan hanya tentang terlihat cantik — ini tentang fungsionalitas dan kegunaan, dua prinsip yang bisa dibilang paling penting bagi setiap desainer UX. Jika UX tidak mulus, tidak masalah seberapa cantik palet warna yang Anda pilih, atau seberapa menakjubkan UI Anda. Jika pengguna tidak dapat menggeseknya secara efisien, itu tidak akan memiliki daya tahan.
Tapi apa hubungannya warna dengan semua itu?
Sederhana: warna adalah alat yang dapat membantu mengarahkan mata . Jika Anda dapat menggunakan warna secara efisien, Anda dapat memandu pengguna baru melalui aplikasi Anda tanpa tutorial yang panjang, serangkaian video yang rumit, atau bahkan satu kata. UI intuitif menggunakan warna untuk mengarahkan tidak hanya perhatian pengguna — tetapi juga interaksi mereka dengan seluruh pengalaman.
Bayangkan, untuk sesaat, Anda sedang mengembangkan aplikasi untuk perusahaan katering yang membantu organisasi besar menyesuaikan pesanan makanan dengan mudah. Calon pelanggan mengunduh aplikasi Anda untuk pertama kalinya dan membukanya. Apa yang mereka lihat?
Di aplikasi, sebagian besar item menu — termasuk latar belakang dan kotak informasi apa pun — diwarnai dengan palet warna abu-abu yang redup dan kusam. Satu-satunya pengecualian adalah kotak oranye-merah yang bertuliskan "pesan". Sebagai desainer, Anda tahu bahwa hal pertama yang ingin dilakukan pengguna saat mereka menggunakan aplikasi Anda adalah dengan mudah mengatur pesanan makanan mereka. Alih-alih menyembunyikan fitur ini jauh di dalam aplikasi, atau mengharuskan mereka untuk menggulir halaman demi halaman untuk mendapatkannya, Anda menempatkannya di depan dan di tengah. Tidak hanya itu, tetapi Anda langsung menarik perhatian mereka. Warna membantunya menonjol, dan menunjukkan kepada pengguna baru ke mana mereka harus pergi.
Demikian juga, kita berinteraksi dengan warna dalam berbagai cara setiap hari dan membangun asosiasi sosial tertentu dalam pikiran kita. Ambil lampu lalu lintas, misalnya: hijau berarti jalan, merah berarti berhenti, dan kuning berarti memperlambat (atau mengingatkan kita akan sesuatu di depan). Dengan menempatkan peringatan penting dalam warna kuning, atau dengan menggunakan warna merah untuk menyorot sesuatu, Anda dapat dengan kuat menyampaikan pesan yang mengarahkan pengguna untuk masukan mereka.
Namun, logika yang sama dapat digunakan untuk lebih dari sekadar layar peringatan. Mengubah warna tombol di aplikasi Anda yang mengarah ke pembelian dalam aplikasi dapat memengaruhi rasio konversi secara signifikan.
Meskipun tidak ada di dalam aplikasi, HubSpot menemukan bahwa mereka dapat meningkatkan rasio konversi sebesar 21% hanya dengan membuat tombol berwarna merah, bukan hijau. Sekarang, ini tidak berarti Anda harus mengubah setiap tombol pembelian dalam aplikasi menjadi merah terang, tetapi ada argumen yang dibuat di sini bahwa warna tidak bisa hanya menjadi bagian dari filosofi desain Anda: itu harus menjadi pusat seluruh filosofi pengembangan aplikasi Anda.
Menggunakan Warna dengan Bijaksana: Filosofi Desain Dan Aksesibilitas
Di Proto.io, aksesibilitas selalu menjadi yang terdepan dalam filosofi desain kami. Terus terang, aksesibilitas adalah sesuatu yang harus dimasukkan ke dalam desain yang baik. Jika tidak ada, maka desainnya tidak terlalu bagus.
Sekitar 8% pria dan 0,5% wanita memiliki beberapa bentuk buta warna. Berlawanan dengan pemikiran populer, tidak ada jenis buta warna tunggal, tetapi buta warna merah/hijau cenderung menjadi yang paling umum. Seseorang yang menderita buta warna bentuk ini umumnya akan kesulitan melihat variasi warna merah dan hijau. Sementara tingkat keparahan bentuk buta warna ini cukup bervariasi, bahkan buta warna merah/hijau ringan dapat membuat penggunaan banyak aplikasi menjadi tidak mungkin.
Di luar buta warna, pengguna rabun jauh sering kesulitan membaca teks dengan kontras rendah kecuali mereka mendekatkan layar ke wajah mereka — sesuatu yang berpotensi merusak kegunaan banyak aplikasi.
Solusi untuk kedua masalah ini cukup sederhana: hindari penggunaan warna yang tidak kontras saat Anda menampilkan teks di latar belakang . Meskipun Anda tidak dapat menjamin bahwa semua orang akan dapat melihat aplikasi Anda seperti yang Anda inginkan, jika Anda menggunakan warna yang kontras, Anda setidaknya akan memberi orang aplikasi yang dapat mereka gunakan. Demikian juga, menggunakan warna kontras tinggi akan membuat teks lebih mudah dibaca oleh semua orang — bahkan jika mereka tidak memiliki masalah penglihatan.
Opsi lain untuk meningkatkan aksesibilitas adalah menawarkan palet warna yang dapat ditukar di aplikasi Anda. Meskipun ini bukan pilihan untuk semua orang, ini dapat sangat meningkatkan aksesibilitas aplikasi Anda. Anda juga dapat mengizinkan pengguna untuk mengubah warna fitur tertentu. Misalnya, Anda dapat memiliki opsi yang mengubah warna aksen aplikasi, atau warna teks di seluruh aplikasi. Meskipun kedua opsi ini mungkin mengambil kendali dari Anda, keduanya akan memastikan aplikasi Anda dapat diakses oleh audiens yang lebih luas.
Jika Anda masih kesulitan mencari cara untuk mengintegrasikan warna ke dalam filosofi desain Anda dengan cara yang tidak membahayakan aksesibilitas aplikasi Anda, sebaiknya periksa pustaka desain material Google.
Memilih Palet Sempurna: Memantapkan Filosofi Desain Anda
Meskipun harus jelas bahwa ada beberapa aturan yang harus diikuti dalam hal warna, itu juga belum tentu sains. Warna seringkali tentang hal-hal yang lebih abstrak, seperti perasaan. Bahkan jika aplikasi Anda tidak mencoba untuk memanifestasikan semacam emosi pada pengguna, itu tidak berarti bahwa itu tidak akan terjadi. Meskipun menemukan palet yang sempurna bukanlah upaya hitam dan putih, kami menyarankan untuk memulai dengan sesuatu yang skala abu-abu .
Buat prototipe datar aplikasi Anda dalam gradien skala abu-abu dan gunakan itu sebagai dasar Anda. Perhatikan bagaimana tampilan dan rasanya: sampaikan ke tim QA Anda, dan lihat apa yang mereka katakan. Apakah proses orientasi Anda keruh tanpa warna? Apakah Anda menarik perhatian ke bagian yang salah dari aplikasi Anda? Dengan umpan balik ini, rancang beberapa prototipe lagi, kali ini berikan warna. Jangan mengandalkan palet tunggal. Sebagai gantinya, ambil petunjuk dari situs web desain material Google dan mainkan beberapa contoh mereka.
Kirimkan revisi ini ke QA juga. Jangan takut untuk menguji A/B satu sama lain (dan melawan versi skala abu-abu asli). Pastikan Anda mengajukan beberapa pertanyaan sulit tentang warna yang Anda bawa ke dalam keributan. Apakah Anda menggunakan warna untuk memandu mata pengguna dalam aplikasi? Apakah Anda hanya melempar warna pada layar demi menambahkan percikan? Apakah warna mengganggu pengguna untuk mencapai tujuan yang mereka inginkan?
Jangan lupa tentang psikologi pengguna atau aksesibilitas. Jika Anda membuat aplikasi perjalanan, apakah Anda benar-benar ingin semuanya berwarna merah cerah? Jika Anda membuat aplikasi perawatan kesehatan, haruskah latar belakang Anda benar-benar hijau? Apakah warna Anda cukup kontras agar teks dapat terbaca?
Desain UX yang baik mempertimbangkan semua pertanyaan ini — bagaimanapun, warna memiliki dampak yang pasti pada perilaku dan kesenangan pengguna. Jika filosofi desain Anda tidak mempertimbangkan hal ini, Anda bisa membuat aplikasi yang tidak dapat diakses atau digunakan seperti yang Anda pikirkan. Pastikan Anda membuat prototipe desain Anda di setiap langkah, dan jangan terlalu terpaku pada satu atau dua warna.
Bereksperimen, pilih warna lain, dan terus revisi sampai Anda mendapatkan palet yang sempurna untuk Anda.