Dark UI Memang Terlihat Elegan, namun Apa Baik Buruknya?

UI gelap dramatis, penuh gaya, dan elegan. Meskipun 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 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 di mana elemen desain akan ditempatkan — “kanvas”. Pilihan yang biasa, hampir secara default, adalah latar belakang putih.

Ada alasan bagus untuk memilih latar belakang yang cerah. Beberapa kontras, teks, dan keterbacaan dan kemampuan untuk bekerja dengan berbagai warna halus. Menurut banyak penelitian ilmiah, keterbacaan optimal membutuhkan teks hitam dengan latar belakang putih. Branding juga dapat memengaruhi keputusan karena logo dan warna perusahaan tidak akan berfungsi 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 diberikan dengan tinta gelap pada latar belakang putih yang disajikan bersama dengan gambar. Pikirkan koran dan majalah — yang sudah ada selama lebih dari 350 tahun. Kembali lebih jauh lagi — tiga puluh lima ribu tahun ke era Paleolitik (zaman manusia gua), kita menemukan gambar-gambar gua singa dan mammoth yang umumnya diletakkan pada latar belakang cahaya dengan arang atau tulang yang terbakar yang digunakan untuk menggambar penggambaran.

Lukisan prasejarah di Gua Chauvet, Prancis
Lukisan prasejarah berusia 30.000 tahun di Gua Chauvet, Prancis .

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

Pilihan UI gelap Apple untuk Apple TV
Untuk Apple TV, situs Apple beralih ke UI gelap untuk efek dramatis dan karena penggunaannya biasanya dikaitkan dengan hiburan malam.

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

Breitling memutuskan latar belakang hitam untuk membuat desain arloji mereka menonjol
Breitling memutuskan latar belakang hitam untuk membuat desain arloji mereka menonjol.

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

Bahkan ada hal-hal seperti Computer Vision Syndrome (CVS) dan “ketidaknyamanan okular.” 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. Banyak yang telah dirancang dalam UI bertema gelap untuk mengurangi ketegangan mata namun mendukung kejernihan visual. Namun, pendekatan semacam itu membutuhkan evaluasi arah desain yang hati-hati di muka.

Bloomberg Anywhere aplikasi iOS desain UI gelap
Bloomberg Anywhere iOS Apps (oleh Jeremy Fuerst ).

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

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

Editor kode toptal, Amin Shah Gilani, editor Atom
Editor kode kode Pengembang Amtal Shah Gilani oleh Atom .

UI Aplikasi Game juga cenderung ke tema yang lebih gelap. Konteks game dan lingkungan di mana 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.

Halo App Windows desain latar belakang hitam

Saat UI Gelap Bekerja Dengan Baik

Mayoritas UI terkait hiburan (Smart TV, Game Consoles, dan Aplikasi TV dan Film) cenderung memiliki desain UI bertema gelap — untuk alasan yang baik. 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, layar cocok dengan lingkungan. Selain itu, konten berwarna-warni (misalnya, sampul seni dan promo), menonjol secara dramatis pada UI bertema gelap.

Tujuannya adalah untuk mencocokkan konteks kegiatan: “Sudah mulai gelap, saya santai, dan saya ingin menonton TV.” Mirip dengan ribuan bola lampu kecil, layar digital memadamkan cahaya di mana pun piksel terang ada; karenanya, UI yang terang akan menerangi ruangan — efek yang tidak diinginkan mengingat aktivitas. Dalam skenario ini, desain UI berusaha mencocokkan konteks: perangkat, konten, aktivitas, dan lingkungan.

Desain UI gelap Hulu
Hulu.
Desain UI gelap Netflix
Netflix.
Desain UI gelap Apple iTunes
Aplikasi Apple iTunes.

Dalam konteks yang tepat, lingkungan, aplikasi, dan penggunaan, UI latar belakang hitam masuk akal. Selalu pertimbangkan konteks di mana antarmuka kemungkinan akan digunakan. Tetapi lebih jauh dari itu — pilihan untuk pergi dengannya 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
  • Memproyeksikan perasaan gaya dan keanggunan, kemewahan, dan prestise
  • Untuk menciptakan rasa intrik dan misteri
  • Untuk membantu fokus dan memandu perhatian pengguna dengan gangguan minimal
  • Untuk mendukung hirarki visual dan arsitektur informasi
Remote control mobil dan konsep diagnostik
Remote control mobil dan konsep diagnostik oleh Ramotion .

UI gelap seharusnya hanya digunakan dengan informasi yang jarang, teks minimal, dan “potong” dengan penekanan kuat pada visual — cahaya pada teks. Jika teks digunakan, teks itu harus sangat kontras dengan latar belakang gelap — lebih disukai putih murni atau warna kuat lain (bukan abu-abu gelap) pada latar belakang hitam.

Palet warna gelap dengan teks dan gambar kontras yang kuat di situs web
CINEMATEK, arsip film di Brussels, menggunakan latar belakang hitam untuk efek dramatis.

Saat UI Gelap Tidak Bekerja Dengan Baik

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

Tantangannya adalah berusaha mempertahankan kontras yang cukup, yang berdampak pada tantangan menyeluruh: keterbacaan, yang terhubung dengan kegunaan, yang berdampak pada UX. Secara umum, semua warna bekerja pada latar belakang putih, sedangkan pada latar belakang gelap kisaran warna yang berguna berkurang secara dramatis.

Desain latar belakang hitam untuk analitik perlu didekati dengan hati-hati
Ada cukup kontras pada beberapa elemen UI dalam contoh ini, yang mempengaruhi UX. (oleh GUOHAO.W )

Berikut ini adalah contoh dunia nyata ketika tidak menggunakan UI bertema gelap: Saya terlibat dengan proyek SaaS B2B di mana CEO bersikeras bahwa, agar “berbeda,” ia ingin pergi dengan bertema gelap UI — yang cocok dengan branding perusahaan… untuk seluruh platform. Untuk semuanya. Setelah beberapa pertemuan, dan dengan menggalang tim desain dan manajer produk di belakang penyebabnya, kami dapat berbicara dengannya dari keputusan yang berpotensi menimbulkan bencana.

Platform menggunakan seperangkat standar komponen aplikasi SaaS UI dan akibatnya penuh dengan bentuk, 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 kesesuaian aplikasi, mungkin pilihan yang tepat adalah menyarankan perpaduan antara UI terang dan gelap. Misalnya, halaman pengaturan dengan widget dan formulir serta tabel data bisa dirancang dengan latar belakang yang terang, dan halaman analitik dengan bagan bisa dirancang dengan skema warna yang lebih gelap.

UI dashboard Analytics
UI dasbor, analitik, dan infografis berfungsi dengan baik pada UI yang gelap tetapi masih harus “ditangani dengan hati-hati” untuk memastikan kontras yang memadai. (oleh Alex Gilev )

Hal Yang Boleh Dilakukan dan Larangan Menggunakan UI Gelap

Sebagai penutup, keputusan untuk pergi dengan UI yang gelap perlu didekati dengan hati-hati. Desainer tidak boleh melakukannya karena alasan yang salah — menjadi pinggul, berbeda, atau menyalin desain orang lain. Sangat penting bahwa perancang mempertimbangkan konteks, konten (kontras dan keterbacaan), perangkat, dan use case, dan memiliki alasan yang baik untuk pilihan mereka. Ini adalah tindakan penyeimbangan yang rumit karena berpotensi banyak manfaat tetapi juga banyak perangkap.

Saat terbaik menggunakan UI gelap:

  • Ketika skema warna branding menjaminnya
  • Ketika desain jarang dan minimalis dengan hanya beberapa jenis konten
  • Ketika itu 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 memperoleh emosi — misalnya, perasaan intrik dan misteri
  • Untuk menciptakan tampilan dramatis yang mencolok
  • Untuk menciptakan rasa mewah dan prestise
  • Untuk mendukung hierarki visual

Saat terbaik untuk menjauh dari UI gelap:

  • Ketika ada banyak teks (sulit membaca di latar belakang yang gelap)
  • Ketika ada banyak konten campuran di layar
  • Dalam hal aplikasi B2B dengan banyak formulir, komponen, dan widget
  • Ketika desain panggilan untuk berbagai warna
Desain latar belakang hitam untuk gim tidak selalu berfungsi
Meskipun ini adalah permainan, banyak tipe konten campuran tidak bekerja dengan baik dengan palet warna gelap.

Menyeberang ke “sisi gelap” harus didekati dengan hati-hati. Dianjurkan untuk melakukan penelitian dan analisis yang lebih mendalam dan menyeluruh sebelum membuat keputusan yang berpotensi genting yang penuh dengan jebakan. Begitu seorang desainer melewati jalan itu, sangat sulit untuk kembali. Desainer disarankan untuk mempertimbangkan semua aspek — yang baik dan yang buruk, dos dan larangan, sebelum melompat dengan kedua kaki.

sumber: toptal.com

Latest articles

41.6k Followers
Follow

Related articles

1 Comment

  1. […] UI bertema gelap dapat membantu mengurangi ketegangan mata dan mendukung kejernihan visual dalam antarmuka. Namun, mengambil pendekatan ini membutuhkan evaluasi yang cermat terhadap arah desain — kelebihan, kekurangan, dan potensi jebakan seperti yang diuraikan dalam artikel blog desain sebelumnya: Dark UI Memang Terlihat Elegan, namun Apa Baik Buruknya? . […]