Human-Computer Interaction User Interface Design

Color

“All colours are the friends of their neighbours and the lovers of their opposites.”

Marc Chagall

Topik-topik bahasan:

  1. Pengantar
  2. Teori warna
  3. Harmonisasi warna
  4. Pedoman desain warna
  5. Tools desain

Penjelasan tentang Colors dalam bentuk video dapat diakses pada:


PENGANTAR

Ketika berbicara tentang Color (Warna), sering secara tidak sadar terjadi pengelompokan berdasarkan gender, laki-laki dengan perempuan. Mari melihat pada gambar di bawah ini. Barang atau produk untuk anak laki-laki identik dengan warna biru, sedangkan untuk anak perempuan berwarna pink. Tidak ada teori yang menentukan pengelompokan ini atau membenarkannya. Pandangan ini terbentuk menjadi persepsi publik.

Dari ilustrasi di bawah ini kita dapat melihat, bahwa bisa dikatakan terdapat perbedaan kompleksitas antara perempuan dengan laki-laki, termasuk soal definisi warna. Jadi, perempuan dan laki-laki memang memiliki perbedaan.

Hal ini mempengaruhi pilihan produk-produk yang beredar di pasaran, antara produk untuk laki-laki dengan produk untuk perempuan; termasuk di dalamnya warna-warna yang digunakan untuk masing-masing gender. Contohnya adalah produk shampo merek Clear di bawah ini. Shampo untuk perempuan memiliki varian yang lebih kompleks dibanding dengan laki-laki, dengan dominasi pada warna terang.

Clear Women 1: Variasi Produk untuk Wanita dengan Warnanya Masing-Masing
Clear Women 2: Variasi Produk untuk Wanita dengan Warnanya Masing-Masing

Pada produk shampo Clear untuk laki-laki, variannya lebih sedikit dan didominasi warna-warna gelap.

Clear Men: Variasi Produk untuk Pria

Pemahaman terhadap jenis user dan karakteristiknya, penting sekali untuk diasah oleh seorang desainer, termasuk dalam penentuan preferensi warna untuk produk yang dibangun. Oleh karena itu, penting bagi seorang desainer untuk mempelajari konsep warna dan penggunaannya dalam desain.


Mari memperhatikan desain dua Dialog Box untuk aplikasi “Adaptec Easy CD Creator” di bawah ini. Pada Gambar 1 untuk proses yang berhasil, yang dilambangkan dengan check (v) berwarna merah. Untuk proses yang gagal, ditunjukkan pada Gambar 2, dengan tanda silang (x) yang juga berwarna merah.

Gambar 1: Desain untuk proses yang berhasil
Gambar 2: Desain untuk proses yang gagal

Desain tanda check untuk berhasil dan tanda silang untuk gagal yang sama-sama berwarna merah, dapat menyulitkan user, Alasannya adalah warna merah identik dengan proses gagal atau error, tetapi tandanya adalah check (v) yang identik dengan berhasil. Sementara secara natural, ketika melihat sebuah desain, manusia memperhatikan warna terlebih dahulu, baru bentuknya. Terdapat penggabungan dua simbol yang bertentangan, yaitu check (v) lambang berhasil dengan warna merah lambang gagal atau error, dalam satu desain. Tidak ada yang menentukan bahwa gagal atau error harus berwarna merah, tetapi secara umum arti tersebut sudah melekat pada persepsi sebagian besar manusia.

Contoh Dialog Box di atas menjadi pembelajaran bahwa pemilihan warna harus memperhatikan persepsi umum di publik, dan disusun untuk dapat mempermudah user, bukan memperlambat waktunya dalam menyelesaikan satu pekerjaan.



TEORI WARNA

Teori warna adalah seperangkat prinsip panduan yang dapat digunakan untuk membuat kombinasi warna yang harmonis. Teori warna pada intinya adalah tentang mengembangkan hubungan warna yang menyenangkan secara estetika.

Ide-ide ini diwakili dalam berbagai diagram – color wheels, segitiga dan grafik yang membantu desainer memahami interaksi warna, memilih dan menggabungkan warna, dan membangun palet warna yang menyenangkan dan efektif. Semua teori warna memiliki satu tujuan: menjelaskan hubungan warna untuk menciptakan harmoni.



MODEL WARNA

Terdapat beberapa model warna dalam desain:

  • RGB / Additive
  • CMY / Subtractive

Model Warna RGB / Additive

RGB adalah kepanjangan dari Red-Green-Blue. Model RGB adalah unit kubus, dengan (0,0,0) sama dengan hitam; (1,1,1) sama dengan putih; dan tiga dimensi mengukur tingkat merah, hijau dan biru. Model RGB digunakan langsung oleh monitor CRT dan LCD untuk display, karena setiap piksel dalam monitor memiliki komponen merah, hijau dan biru yang terpisah.

Ilustrasi Kubus Warna RGB
Model Warna Red-Green-Blue (RGB)

Model Warna CMY / Subtractive

Warna subtraktif, dibuat dari cahaya yang dipantulkan, terbagi dalam 2 jenis:

  • CMY(K): warna primer untuk printer, yaitu cyan, magenta, yellow (CMY). K atau black: untuk membentuk CMYK dari proses litografi 4 warna. CMY adalah warna complementary dari RGB.
  • RYB: warna primer untuk artist, yaitu red, yellow, blue. Meskipun tidak ilmiah, digunakan sebagai dasar untuk sebagian besar teori warna.
Ilustrasi Kubus Warna CMY
Model Warna Cyan-Magenta-Yellow-Black
Model Warna Red-Yellow-Blue


COLOR WHEEL

Color wheel digunakan untuk mengilustrasikan variasi warna, yang akan digunakan untuk membuat harmonisasi warna.

Terdapat beberapa jenis color wheel seperti gambar di bawah ini.

Jenis Color Wheel

Hubungan antarwarna dapat ditunjukkan melalui penggunaan color wheel. Color wheel menunjukkan hubungan antara berbagai warna berdasarkan konten warna merah, kuning dan biru dari masing-masing warna. Color wheel pertama kali dikembangkan oleh Sri Isaac Newton pada tahun 1666.

Color Wheel

Varian color wheel yang paling berguna dan paling sering digunakan ditunjukkan pada gambar di bawah, meliputi kombinasi (Stone, 2008):

  • red, red-orange
  • orange, yellow-orange
  • yellow, yellow-green
  • green, blue-green
  • blue, blue-purple
  • purple, red-purple
Ilustrasi Color Wheel

Bleicher (2011) menyatakan bahwa color wheel dapat dikategorikan menjadi tiga jenis warna utama berdasarkan kombinasi warna dasar yang digunakan untuk membuat warna akhir, yaitu:

  1. Primary color (warna primer)
  2. Secondary color (warna sekunder)
  3. Intermediate atau tertiary color (warna tersier)

Gambar di bawah ini menunjukkan pengkategorian ketiga jenis warna.

Tiga Kategori Warna Pada Color Wheel

PRIMARY COLOR

Primary color terdiri dari: red, yellow, blue. Primary color adalah warna dasar yang tidak dapat dipecah menjadi warna yang lebih sederhana.

Tiga Primary Color

SECONDARY COLOR

Secondary color terdiri dari: green, orange, purple. Warna ini dibuat dengan mencampurkan 2 warna primer:

  • yellow + red = orange
  • blue + yellow = green
  • blue + red = purple
Warna-Warna Sekunder (Secondary Color)

TERTIARY COLOR

Tertiary color terdiri dari: yellow-orange, red-orange, red-purple, blue-purple, blue-green, yellow-green. Tertiary color dibuat dengan mencampurkan primary color dengan secondary color untuk membentuk warna hibrida, sehingga namanya terdiri dari dua kata, misalnya blue-green.

Warna-Warna Tersier (Tertiary Color)

Pemahaman yang menyeluruh tentang color wheel dan hubungan antarwarna memungkinkan desainer untuk:

  • mengerti warna lebih baik, dan
  • tahu bagaimana memilih warna untuk desain mereka.


HARMONISASI WARNA

Warna harus dipilih untuk memberikan daya tarik estetika dan User Experience (UX) yang lebih baik. Hal ini artinya merupakan ide yang baik jika pada awal proses desain Anda memikirkan skema warna apa yang akan Anda gunakan. Cara warna dipadukan dapat menambahkan atau justru mengurangi look & feel dari desain.

Menurut Bleicher (2011), ada 7 skema warna utama (dan beberapa kombinasi dan varian dari skema ini) yang memungkinkan desainer untuk mencapai harmonisasi dalam desain, yaitu:

  1. Monochromatic
  2. Analogous
  3. Complementary
  4. Split-Complementary (Compound Harmony)
  5. Triadic
  6. Tetradic
  7. Square

1. MONOCHROMATIC

Skema monochromatic didasarkan pada warna yang dibuat dari berbagai tints, tones dan shades dari hue (warna). Secara teori, skema ini adalah yang paling sederhana dari semua skema.

Ilustrasi Warna Monochromatic
Contoh 1 Desain dengan harmonisasi warna Monochromatic
Contoh 2 Desain dengan harmonisasi warna Monochromatic

2. ANALOGOUS

Skema analogous didasarkan pada tiga warna yang terletak bersebelahan, misalnya red, red-orange, red-purple. Skema ini dengan mudah ditemukan di alam – pikirkan saja pepohonan di musim gugur saat daunnya berubah warna.

Skema warna Analogous

3. COMPLEMENTARY

Skema warna complementary didasarkan pada menggunakan satu atau lebih pasangan warna yang berseberangan (membatalkan satu sama lain jika dipasangkan). Skema ini juga dikenal sebagai skema “warna berlawanan” (opposite color).

Skema warna Complementary
Contoh penggunaan warna Complementary pada website
Contoh penggunaan warna Complementary pada desain pakaian

4. SPLIT COMPLEMENTARY

Skema warna split complementary didasarkan pada kombinasi skema warna complementary dengan analogous. Dapat dikatakan, warna complementary dipilih dan kemudian warna di kedua sisi mereka pada color wheel juga digunakan dalam desain.

Skema warna Split Complementary

5. TRIADIC

Skema triadic didasarkan pada penggunaan tiga warna pada jarak yang sama satu dengan lainnya pada color wheel. Cara termudah untuk menemukan skema triadic adalah dengan meletakkan segitiga sama sisi pada color wheel sehingga setiap sudut menyentuh satu warna. Tiga warna akan persis 120° dari warna yang lain. Anda dapat menemukan skema triadic dalam banyak bidang seni karena lebih mudah untuk memberikan hasil visual yang menyenangkan.

Skeme warna Triadic

6. TETRADIC (DOUBLE COMPLEMENTARY)

Skema tetradic memanfaatkan dua set skema complementary: empat warna. Skema ini dapat menciptakan pengalaman visual yang sangat menarik, tetapi sulit untuk tetap seimbang. Alasannya adalah karena satu warna pada skema tetradic perlu mendominasi warna lain. Jumlah yang sama dari setiap warna sering mengarah ke tampilan yang janggal/ kaku/ aneh /awkward.

Skema warna Tetradic

7. SQUARE

Skema square adalah varian dari skema tetradic, dengan menempatkan bujur sangkar pada color wheel dan memilih warna yang terletak di sudut-sudutnya. Karenanya, Anda akan menemukan empat warna yang berjarak sama rata 90° satu dengan yang lain. Berbeda dengan skema warna tetradic, skema square bekerja paling baik ketika semua warna digunakan secara merata di seluruh desain.

Skema warna Square


TEMPERATUR WARNA

Warna dapat digunakan untuk menyampaikan konten emosi serta membantu tampilan dan nuansa pada desain Anda. Perlu dicatat pada titik ini bahwa budaya, jenis kelamin, pengalaman, dll juga akan mempengaruhi cara warna beresonansi dengan mereka dan bahwa user research adalah indikator respon emosinonal yang lebih baik terhadap warna daripada pedoman yang didasarkan pada color wheel. Misalnya, apakah Anda tahu bahwa di China, merah adalah hal yang mewakili kebahagiaan dan kemakmuran, tetapi putih dianggap warna untuk penguburan atau mewakili kemalangan? Di Yunani, kuning menyampaikan gagasan tentang kesedihan, dll. Warna adalah masalah besar dalam bagaimana orang-orang dari berbagai belahan dunia akan menafsirkan desain Anda.

Jika Anda ingin mengikuti pendekatan color wheel, ada 3 indikator temperatur warna:

  1. Warm
  2. Cool
  3. Neutral
Temperatur Warna pada Color Wheel

TEMPERATUR WARNA COOL

Warna yang terletak di separuh color wheel termasuk yellow, orange dan red. Warna-warna ini mencerminkan perasaan seperti gairah, kekuatan, kebahagiaan dan energi.

TEMPERATUR WARNA WARM

Warna yang terletak di sisi lain color wheel termasuk green, blue dan purple. Warna-warna dingin mencerminkan ketenangan, meditasi dan kesan yang menenangkan.

TEMPERATUR WARNA NEUTRAL

Warna ini tidak mencerminkan emosi tertentu. Warna-warna ini termasuk abu-abu, cokelat, putih dan hitam.

Jenis warna Neutral

Pilihan kategori warna Anda akan tergantung pada apa yang ingin Anda capai pada desain Anda. Anda harus selalu menguji palet warna dengan user untuk memastikan bahwa pilihan yang Anda buat mencerminkan realitas pada user. Hampir selalu lebih mudah untuk mengatur dan menguji palet warna di awal proses pengembangan daripada di akhir; termasuk juga dapat menghemat waktu Anda.



HUE, SATURATION, BRIGHTNESS

Hues, Tints, Tones, Shades

HUE

Dalam istilah praktis, hue mengacu pada tone warna tertentu. Hue bukan nama lain untuk warna karena warna dapat memiliki saturation dan brightness. Misalnya, warna dengan hue yang sama dibedakan dengan kata sifat yang merujuk pada lightness dan/atau saturation-nya, seperti hijau muda (light green) atau biru pastel (pastel blue).

Ilustrasi Hue
Contoh Hue

SATURATION

Saturation adalah intensitas hue dengan abu-abu. Pada saturasi maksimum, warna tidak mengandung abu-abu sama sekali. Pada saturasi minimum, sebagian besar warna akan berwarna abu-abu.

Contoh Saturation

BRIGHTNESS

Brightness mengacu pada seberapa banyak warna putih atau hitam yang terkandung dalam satu warna.

Contoh Brightness

Penggunaan hue, saturation dan brigtness dalam desain dapat dilihat pada gambar Color Picker di aplikasi Adobe Photoshop di bawah ini. Pada bagian bawah kiri menunjukkan saturation dan brightness dari hue cyan. Saturation ditingkatkan dengan menyeret pilihan secara horizontal ke kanan kotak dan menurun ke kiri. Brightness ditingkatkan dengan menyeret secara vertical ke arah atas kotak dan menuruh ke arah bawah.

Color Picker pada aplikasi Adobe Photoshop
Penggunaan Saturation dan Brightness


ARTI WARNA

Setiap warna memiliki makna masing-masing dan sangat erat berkaitan dengan wilayah, budaya dan kepercayaan.

RED

YELLOW

BLUE

GREEN

PURPLE

Anda dapat membaca penjelasan rinci terkait definisi warna ungu dan kaitannya dengan dukacita pada link Colours of Mourning Around the World.

ORANGE

BLACK

WHITE

GRAY



PEDOMAN DESAIN WARNA

Beberapa pedoman untuk dapat mendesain harmonisasi warna adalah:

  • Hindari warna saturated
  • Gunakan sedikit warna (beberapa, tidak banyak)
  • Konsisten dengan ekspektasi

HINDARI WARNA SATURATED

Secara umum, hindari warna saturated. Saturated color dapat menyebabkan kelelahan visual. Contoh warna saturated dapat dilihat pada contoh di bawah ini.

Contoh Saturated Color pada background halaman aplikasi

Saturasi yang sangat kontras antara warna merah dan kuning akan membuat mata lelah. Contoh lainnya dapat dilihat dibawah ini.

Contoh warna saturated pada teks dan background teks

Sebaliknya, gunakan warna “pastel” yang kurang jenuh, yang mencampur warna abu-abu atau putih ke dalam warna murni.

Contoh penggunaan warna pastel

GUNAKAN SEDIKIT WARNA

Secara umum, warna harus digunakan dengan hemat. Interface dengan banyak warna tampak lebih kompleks, lebih berantakan dan lebih mengganggu. Gunakan sejumlah kecil dengan hue yang berbeda.

Toolbar dengan warna terlalu banyak

Toolbar di atas menggunakan terlalu banyak warna (termasuk banyak di antaranya warna saturated), sehingga tidak ada tombol yang menonjol dan toolbar ini terasa sulit untuk di-scan.

Sebaliknya, toolbar di bagian bawah hanya menggunakan sedikit warna. Toolbar ini lebih tenang untuk dilihat dan tombol-tombol mengunakan warna (seperti tombol Open File) yang benar-benar dimunculkan.

Toolbar dengan sedikit warna

Kuning pucat dan abu-abu sangat terang merupakan warna background yang baik. Background gelap cenderung rumit; terlalu mudah mengacaukan kontras dan membuat teks kurang terbaca, seperti gambar di bawah.

Penggunaan background gelap dalam desain

KONSISTEN DENGAN EKSPEKTASI

Salah satu masalah dengan Adaptec di awal tulisan ini adalah penggunaan warna merah untuk OK. Merah umumnya berarti berhenti, peringatan, kesalahan atau panas. Hijau secara konvensional berarti GO atau OK. Yellow berarti berhati-hati atau lambat. Tetapi perhatikan bahwa makna konvensional untuk warna ini tergantung pada budaya dan apa yang berfungsi dalam budaya Barat misalnya tidak berfungsi untuk semua user.

Adaptec Easy CD Creator

MEMILIH WARNA YANG BAIK

Beberapa cara untuk dapat menentukan atau memilih warna yang baik adalah:

  • Copy warna dari Interface lain
  • Pilih warna dari foto dengan warna alami
  • Pilih salah satu warna dan beberapa nuansa abu-abu (pilihan aman)
  • Atau pilih dua warna yang tampaknya terkoordinasi (minta pendapat orang lain tentang ini).


TOOLS UNTUK DESAIN

Terdapat beberapa tools yang dapat Anda gunakan sebagai alat bantu dalam pemilihan warna untuk desain yang sedang Anda kerjakan.

BROWSER DEVELOPER TOOLS

Gunakan browser developer tools untuk melihat CSS style:

  • https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane
  • https://developer.mozilla.org/en-US/Learn/Common_questions/What_are_browser_developer_tools

DIGITAL COLOR METER / COLORPIC

DigitalColorMeter (Macintosh), ColorPic (Windows) adalah tool yang dapat digunakan untuk mengidentifikasi warna daripada screen.

Aplikasi Digital Color Meter

ADOBE COLOR

Adobe Color dapat digunakan untuk memilih jenis harmonisasi warna. Tool ini dapat diakses pada link https://color.adobe.com.

Adobe Color meter mengidentifikasi warna dari sebuah gambar
Pemilihan jenis harmonisasi warna pada Adobe Color

HTML COLOR

HTML Color dapat diakses pada link https://www.w3schools.com/colors/colors_hex.asp.


100 Color Combinations oleh Canva



REFERENSI