UI gelap. Yang baik dan yang buruk. Anjuran dan Larangan.

UI gelap dramatis, bergaya, dan elegan. Namun demikian, desainer harus melangkah dengan hati-hati jika mereka memilih untuk berjalan di "sisi gelap".

Menciptakan tampilan dan nuansa produk adalah salah satu tanggung jawab utama seorang desainer—keputusan desain awal harus sesuai dengan tujuan produk, situasi tertentu, dan audiensnya. Skema warna akan memiliki dampak jangka panjang dan harus dipilih dengan cermat—dan semuanya dimulai dengan pemilihan latar belakang tempat elemen desain akan ditempatkan—“kanvas”. Pilihan yang biasa, hampir secara default, adalah latar belakang putih.

Ada alasan bagus untuk memilih latar belakang yang cerah. Kontras, teks, dan keterbacaan serta kemampuan untuk bekerja dengan berbagai macam warna halus adalah beberapa di antaranya. Menurut banyak penelitian ilmiah, keterbacaan yang optimal membutuhkan teks hitam dengan latar belakang putih. Pencitraan merek juga dapat memengaruhi keputusan karena logo dan warna perusahaan tidak akan cocok dengan palet warna gelap.

Sebagian besar penelitian telah menunjukkan bahwa teks gelap pada latar belakang terang lebih unggul daripada teks terang pada latar belakang gelap, yaitu lebih mudah dibaca. Dalam satu studi terkenal, "kelelahan visual" secara signifikan lebih besar ketika subjek membaca karakter terang pada latar belakang gelap vs karakter gelap pada latar belakang terang (Bauer, D., Bonacker, M., dan Cavonius, CR 1983).

Ada juga harapan : orang terbiasa melihat berbagai konten yang dirender dengan tinta gelap di atas latar belakang putih yang disajikan bersama dengan gambar. Pikirkan surat kabar dan majalah—yang telah ada selama lebih dari 350 tahun. Lebih jauh lagi—tiga puluh lima ribu tahun ke era Paleolitik (zaman manusia gua), kita menemukan gambar gua singa dan mamut umumnya ditempatkan di latar belakang terang dengan arang atau tulang yang dibakar digunakan untuk menggambar penggambaran.

Namun demikian, ketika sebuah proyek menjaminnya, desainer produk digital saat ini dapat memilih untuk bekerja dengan skema warna gelap karena berbagai alasan. Seperti yang disarankan di atas, seringkali merupakan pilihan estetika yang dimaksudkan untuk menyampaikan drama dan membangkitkan emosi—sesuatu yang tidak terduga—atau mungkin seorang desainer ingin memadukan desain dengan branding atau memastikan bahwa konten visual menonjol.

Namun, jika seorang desainer memilih untuk menyeberang ke "sisi gelap", mereka akan dihadapkan pada sejumlah tantangan. Semua jenis masalah kegunaan ikut bermain — sebagian besar terkait dengan kemampuan pemindaian, keterbacaan, dan kontras. Aspek utama yang perlu dipertimbangkan adalah kontras yang cukup antara teks dan latar belakang. Konteks (kasus penggunaan) dan lingkungan juga harus dipertimbangkan, serta perangkat yang kemungkinan akan menampilkan UI.

Beberapa UI gelap dirancang untuk meminimalkan "ketegangan mata digital." Dengan peningkatan teknologi digital, kita menatap layar hampir sepanjang hari. Ketegangan mata digital adalah kondisi umum yang mempengaruhi jutaan orang setiap hari. Disebabkan oleh segala hal mulai dari penggunaan komputer yang berlebihan hingga paparan cahaya terang secara teratur, dapat menyebabkan sakit kepala, sakit leher, penglihatan kabur, dan mata perih/perih.

Bahkan ada hal-hal seperti Computer Vision Syndrome (CVS) dan "ketidaknyamanan mata." Menurut sebuah penelitian, lebih dari 83 persen orang Amerika menggunakan perangkat digital selama lebih dari dua jam per hari, dengan 60,5 persen melaporkan bahwa mereka mengalami gejala ketegangan mata digital. (Mata Overexposed: Dilema Perangkat Digital.)

Produk SaaS bisnis-ke-bisnis dan aplikasi pengeditan multimedia digunakan selama berjam-jam berturut-turut. Banyak yang telah dirancang dalam UI bertema gelap untuk mengurangi ketegangan mata namun mendukung kejernihan visual. Namun, pendekatan semacam itu memerlukan evaluasi arah desain yang cermat dan di muka.

Sebagian besar pengembang menggunakan layar hitam dengan sintaks kode warna untuk mengurangi ketegangan mata. Seperti yang dikatakan pengembang Toptal, Kevin Bloch: “Latar belakang hitam mengurangi ketegangan mata dan membuat kode warna otomatis lebih mudah dibaca, yang membuat kode lebih cepat dipahami dalam sekejap.”

Pengembang Toptal Amin Shah Gilani menambahkan: “Saya pribadi menggunakan tema gelap solarized untuk editor kode saya. Saya lebih suka tema gelap karena latar belakang yang lebih gelap terasa lebih nyaman di mata, terutama karena saya suka membiarkan lampu redup atau bekerja di malam hari.”

UI Aplikasi Game juga cenderung ke tema yang lebih gelap. Konteks permainan dan lingkungan tempat pemain bermain game lebih cocok dengan palet warna hitam. Desain latar belakang hitam memperkuat visual yang mencolok, memperkenalkan rasa misteri, memiliki kontras yang lebih baik, dan mendukung hierarki visual.

Saat UI Gelap Bekerja Dengan Baik

Mayoritas UI terkait hiburan (Smart TV, Konsol Game, dan Aplikasi TV dan Film) cenderung memiliki desain UI bertema gelap—untuk alasan yang bagus. Sebagian besar kegiatan yang berhubungan dengan hiburan terjadi di malam hari, dilihat dari jarak 6-10 kaki, dan ditonton di ruangan yang remang-remang—dengan kata lain, layarnya cocok dengan lingkungan. Selain itu, konten penuh warna (misalnya, sampul dan promo), menonjol secara dramatis di UI bertema gelap.

Tujuannya adalah untuk mencocokkan konteks kegiatan: “Hari mulai gelap, saya sedang bersantai, dan saya ingin menonton TV.” Mirip dengan ribuan bola lampu kecil, layar digital mengeluarkan cahaya di mana pun ada piksel terang; oleh karena itu, UI yang cerah akan menerangi ruangan—efek yang tidak diinginkan mengingat aktivitas tersebut. Dalam skenario ini, desain UI mencoba mencocokkan konteks: perangkat, konten, aktivitas, dan lingkungan.

Dalam konteks, lingkungan, aplikasi, dan penggunaan yang tepat, UI latar belakang hitam masuk akal. Selalu pertimbangkan konteks yang kemungkinan besar akan digunakan antarmuka. Namun lebih dari itu—pilihan untuk menggunakannya harus bergantung pada konten dan konteks : apa , kapan , di mana , dan pada perangkat apa .

• Untuk mencapai tampilan yang kuat dan dramatis untuk visual yang mencolok
• Untuk memproyeksikan perasaan gaya dan keanggunan, kemewahan, dan prestise
• Untuk menciptakan rasa intrik dan misteri
• Untuk membantu memfokuskan dan mengarahkan perhatian pengguna dengan gangguan minimal
• Untuk mendukung hierarki visual dan arsitektur informasi

UI Gelap hanya boleh digunakan dengan teks yang jarang, minimal, dan informasi "terpotong" dengan penekanan kuat pada visual—ringan pada teks. Jika teks digunakan, itu harus kontras tinggi dengan latar belakang gelap—sebaiknya putih murni atau warna kuat lainnya (bukan abu-abu gelap) pada latar belakang hitam.

Saat UI Gelap Tidak Berfungsi Dengan Baik

Seperti yang ditunjukkan sebelumnya dalam artikel, UI bertema gelap adalah pilihan yang buruk untuk konten berat teks dan data, atau saat menggunakan berbagai jenis konten (teks, gambar, video, tabel data, dropdown, bidang, dll. ). Konsensus umum dalam komunitas desain adalah bahwa UI gelap merupakan tantangan besar untuk mendesain kecuali Anda berurusan dengan konten sederhana dan hanya taburan teks di sana-sini.

Tantangannya adalah mencoba mempertahankan kontras yang memadai, yang berdampak pada tantangan menyeluruh: keterbacaan, yang terhubung dengan kegunaan, yang memengaruhi UX. Umumnya, semua warna bekerja pada latar belakang putih, sedangkan pada latar belakang gelap rentang warna yang berguna berkurang secara dramatis.

Berikut adalah contoh dunia nyata ketika tidak menggunakan UI bertema gelap: Saya terlibat dengan proyek SaaS B2B di mana CEO bersikeras bahwa, untuk "menjadi berbeda," dia ingin pergi dengan tema gelap UI—yang cocok dengan branding perusahaan… untuk seluruh platform. Untuk semuanya. Setelah beberapa kali pertemuan, dan dengan mengumpulkan tim desain dan manajer produk di belakang tujuan tersebut, kami dapat membujuknya dari keputusan yang berpotensi membawa bencana.

Platform menggunakan satu set standar komponen UI aplikasi SaaS dan akibatnya penuh dengan formulir, widget, dropdown, piktogram, dan ikon bersama dengan teks dan data numerik dalam tabel. Navigasi, tata letak, dan fungsionalitas akan menjadi sangat sulit untuk dikelola sambil mencapai kontras yang cukup dan skema warna yang konsisten. Singkatnya, hampir tidak mungkin untuk membuat semuanya bekerja dengan UI bertema gelap.

Bergantung pada kelayakan aplikasi, mungkin pilihan yang tepat adalah menyarankan campuran UI terang dan gelap. Misalnya, halaman pengaturan dengan widget dan formulir serta tabel data dapat dirancang dengan latar belakang terang, dan halaman analitik dengan bagan dapat dirancang dengan skema warna yang lebih gelap.

Anjuran dan Larangan Menggunakan UI Gelap

Sebagai penutup, keputusan untuk menggunakan UI gelap perlu didekati dengan hati-hati. Desainer tidak boleh melakukannya untuk alasan yang salah—untuk menjadi trendi, berbeda, atau meniru desain orang lain. Sangat penting bagi seorang desainer untuk mempertimbangkan konteks, konten (kontras dan keterbacaan), perangkat, dan kasus penggunaan, dan memiliki alasan yang baik untuk pilihan mereka. Ini adalah tindakan penyeimbangan yang rumit karena ada potensi banyak manfaat tetapi juga banyak jebakan.

Kapan boleh menggunakan UI gelap:

• Ketika skema warna branding menjaminnya
• Ketika desain jarang dan minimalis dengan hanya beberapa jenis konten
• Ketika sesuai untuk konteks dan penggunaan, seperti aplikasi hiburan malam hari
• Untuk mengurangi ketegangan mata, seperti halaman analitik yang digunakan untuk jangka waktu yang lama
• Untuk menimbulkan emosi—misalnya, perasaan intrik dan misteri
• Untuk menciptakan tampilan yang mencolok dan dramatis
• Untuk menciptakan rasa mewah dan prestise
• Untuk mendukung hierarki visual

Saat yang terbaik untuk menjauh dari UI gelap:

• Ketika ada banyak teks (membaca dengan latar belakang gelap itu sulit)
• Ketika ada banyak konten campuran di layar
• Dalam hal aplikasi B2B dengan banyak bentuk, komponen, dan widget
• Saat desain membutuhkan berbagai warna

Menyeberang ke "sisi gelap" harus didekati dengan hati-hati. Penelitian dan analisis yang lebih dalam dan menyeluruh direkomendasikan sebelum membuat keputusan yang berpotensi berbahaya yang penuh dengan jebakan. Begitu seorang desainer menempuh jalan itu, sangat sulit untuk kembali. Desainer akan disarankan untuk mempertimbangkan semua aspek—baik dan buruk, apa yang boleh dan tidak boleh dilakukan, sebelum terjun dengan kedua kaki.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib