Karanlık UI'ler. İyi ve kötü. Yapılması ve yapılmaması gerekenler.

Karanlık UI'ler dramatik, şık ve zariftir. Yine de, tasarımcılar “karanlık tarafta” yürümeyi seçerlerse, adımlarını dikkatli atmalıdır.

Bir ürünün görünüşünü ve hissini yaratmak tasarımcının birincil sorumluluklarından biridir - ilk tasarım kararı ürünün amacına, belirli durumuna ve hedef kitlesine uygun olmalıdır. Renk şeması uzun süreli bir etkiye sahip olacak ve dikkatlice seçilmelidir - ve her şey tasarım öğelerinin yerleştirileceği bir arka planın - “tuval” seçimiyle başlar. Neredeyse varsayılan olarak olağan seçim beyaz bir arka plandır.

Parlak bir arka plan seçmek için iyi nedenler var. Kontrast, metin ve okunabilirlik ve çok çeşitli ince renklerle çalışma yeteneği bunlardan bazılarıdır. Birçok bilimsel araştırmaya göre, optimum okunabilirlik için beyaz zemin üzerine siyah metin gerekir. Markalama da kararı etkileyebilir çünkü şirket logoları ve renkleri koyu renk paleti ile çalışmayacaktır.

Çoğu çalışma, açık renkli bir arka plan üzerindeki koyu metnin, koyu bir arka plan üzerindeki açık renkli metne göre daha üstün olduğunu, yani okunmasının daha kolay olduğunu göstermiştir. Ünlü bir çalışmada, denekler koyu renkli bir arka plan üzerinde açık renkli karakterler okurken, açık renkli arka plan üzerinde koyu renkli karakterler okuduğunda “görsel yorgunluk” önemli ölçüde daha fazlaydı (Bauer, D., Bonacker, M. ve Cavonius, CR 1983).

Bir de beklenti var: İnsanlar beyaz zemin üzerine koyu renk mürekkeple işlenmiş çeşitli içerikleri görsellerle birlikte görmeye alıştı. 350 yılı aşkın süredir var olan gazeteleri ve dergileri düşünün. Daha da geriye gidersek, otuz beş bin yıl önce Paleolitik çağa (mağara adamı günleri) gidersek, aslanların ve mamutların mağara çizimlerini, genellikle tasvirleri çizmek için kullanılan kömür veya yanmış kemiklerle birlikte açık renkli bir arka plana yerleştirilmiş buluruz.

Bununla birlikte, bir proje bunu garanti ettiğinde, günümüzün dijital ürün tasarımcıları çeşitli nedenlerle koyu renk şemasıyla çalışmayı seçebilirler. Yukarıda önerildiği gibi, genellikle dramı iletmek ve bir duyguyu -beklenmedik bir şeyi- ortaya çıkarmak için yapılan estetik bir seçimdir veya belki bir tasarımcı tasarımı marka bilinci oluşturmayla birleştirmek veya görsel içeriğin öne çıkmasını sağlamak ister.

Bununla birlikte, bir tasarımcı "karanlık tarafa" geçmeyi seçerse, bir takım zorluklarla karşı karşıya kalacaktır. Çoğunlukla taranabilirlik, okunabilirlik ve kontrastla ilgili her türlü kullanılabilirlik sorunu devreye girer. Dikkate alınması gereken ana husus, metin ve arka plan arasındaki yeterli kontrasttır. Kullanıcı arayüzünün görüntülenebileceği cihazın yanı sıra bağlam (kullanım durumu) ve ortam da dikkate alınmalıdır.

Bazı karanlık kullanıcı arayüzleri, "dijital göz yorgunluğunu" en aza indirecek şekilde tasarlanmıştır. Dijital teknolojinin artmasıyla birlikte günün büyük bir bölümünde ekranlara bakıyoruz. Dijital göz yorgunluğu, her gün milyonlarca insanı etkileyen yaygın bir durumdur. Aşırı bilgisayar kullanımından düzenli olarak parlak ışığa maruz kalmaya kadar her şeyin neden olduğu baş ağrısı, boyun ağrısı, bulanık görme ve yanma/batma gözlerine neden olabilir.

Bilgisayarla Görme Sendromu (CVS) ve “oküler rahatsızlık” gibi şeyler bile var. Bir araştırmaya göre, Amerikalıların yüzde 83'ünden fazlası günde iki saatten fazla dijital cihaz kullanıyor ve yüzde 60,5'i dijital göz yorgunluğu semptomları yaşadıklarını bildiriyor. (Aşırı Pozlanmış Gözler: Dijital Cihaz İkilemi.)

İşletmeler arası SaaS ürünleri ve multimedya düzenleme uygulamaları saatlerce kesintisiz olarak kullanılır. Birçoğu, göz yorgunluğunu azaltmak, ancak görsel netliği desteklemek için karanlık temalı bir kullanıcı arayüzünde tasarlanmıştır. Bununla birlikte, böyle bir yaklaşım, tasarım yönünün dikkatli ve önceden değerlendirilmesini gerektirir.

Çoğu geliştirici, göz yorgunluğunu azaltmak için renk kodlu söz dizimine sahip siyah bir ekran kullanır. Toptal geliştiricisi Kevin Bloch'un dediği gibi: "Siyah bir arka plan göz yorgunluğunu azaltır ve otomatik renk kodlamasının okunmasını kolaylaştırır, bu da kodun bir bakışta anlaşılmasını çok daha hızlı hale getirir."

Toptal Geliştirici Amin Shah Gilani şunları ekliyor: “Kod editörüm için kişisel olarak solarize karanlık temayı kullanıyorum. Karanlık bir temayı tercih ediyorum çünkü daha koyu bir arka plan gözler için daha kolay geliyor, özellikle de ışıkları loş tutmayı veya geceleri çalışmayı sevdiğim için.”

Oyun Uygulaması Kullanıcı Arabirimleri de daha koyu temalara yönelir. Oyun bağlamı ve oyuncuların oyun oynadığı ortam, siyah renk paleti ile daha iyi uyum sağlar. Siyah bir arka plan tasarımı, çarpıcı görselleri güçlendirir, bir gizem duygusu verir, daha iyi kontrasta sahiptir ve görsel hiyerarşiyi destekler.

Karanlık Kullanıcı Arabirimleri İyi Çalıştığında

Eğlenceyle ilgili UI'lerin (Akıllı TV'ler, Oyun Konsolları ve TV ve Film Uygulamaları) çoğunluğu, iyi bir nedenle, koyu temalı UI tasarımlarına sahip olma eğilimindedir. Eğlenceyle ilgili etkinliklerin çoğu akşamları gerçekleşir, 6-10 feet mesafeden izlenir ve loş odalarda izlenir - başka bir deyişle, ekran ortamla eşleşir. Ek olarak, renkli içerik (ör. kapak resmi ve tanıtımlar), karanlık temalı kullanıcı arayüzlerinde çarpıcı biçimde öne çıkıyor.

Amaç, etkinliğin bağlamına uymaktır: "Hava kararıyor, rahatlıyorum ve biraz televizyon izlemek istiyorum." Binlerce minik ampule benzer şekilde, dijital ekranlar, parlak bir pikselin olduğu her yerde ışığı yayar; bu nedenle, parlak bir kullanıcı arayüzü odayı aydınlatacaktır - aktivite göz önüne alındığında istenmeyen bir etki. Bu senaryoda, kullanıcı arayüzü tasarımı bağlamla eşleşmeye çalışıyor: cihaz, içerik, etkinlik ve ortam.

Doğru bağlamda, ortamda, uygulamada ve kullanımda siyah arka planlı kullanıcı arayüzleri anlamlıdır. Her zaman arayüzün kullanılması muhtemel bağlamı göz önünde bulundurun. Ancak bundan daha ileri gider; onunla gitme seçimi içeriğe ve bağlama bağlı olmalıdır: ne , ne zaman , nerede ve hangi cihazda .

• Çarpıcı görseller için güçlü, dramatik bir görünüm elde etmek için
• Stil ve zarafet, lüks ve prestij duygusu yansıtmak
• Entrika ve gizem duygusu yaratmak için
• Minimum dikkat dağınıklığı ile kullanıcının dikkatini odaklamaya ve yönlendirmeye yardımcı olmak için
• Görsel hiyerarşi ve bilgi mimarisini desteklemek için

Karanlık UI'ler yalnızca seyrek, minimal metin ve görsellere güçlü bir vurguyla (metne ışık) "parçalara ayrılmış" bilgilerle kullanılmalıdır. Metin kullanılıyorsa, koyu arka planla yüksek kontrastta olmalıdır - tercihen saf beyaz veya siyah bir arka plan üzerinde başka bir güçlü renk (koyu gri değil).

Karanlık Kullanıcı Arabirimleri İyi Çalışmadığında

Makalede daha önce belirtildiği gibi, koyu temalı UI'ler, metin ağırlıklı ve veri ağırlıklı içerik için veya çeşitli içerik türleri (metin, resimler, video, veri tabloları, açılır menüler, alanlar vb.) kullanıldığında kötü bir seçimdir. ). Tasarım topluluğundaki genel fikir birliği, basit içerikle ve sadece burada ve orada bir miktar metinle uğraşmadığınız sürece, karanlık UI'lerin tasarlanması için büyük bir zorluk olduğudur.

Buradaki zorluk, kapsayıcı zorluğu etkileyen yeterli kontrastı korumaya çalışmaktır: kullanılabilirlikle bağlantılı olan ve UX'i etkileyen okunabilirlik. Genel olarak, tüm renkler beyaz bir arka plan üzerinde çalışır, oysa koyu bir arka plan üzerinde kullanışlı renk aralığı önemli ölçüde azalır.

İşte karanlık temalı bir kullanıcı arayüzünün ne zaman kullanılmayacağının gerçek dünyadan bir örneği: CEO'nun "farklı olmak" için karanlık temalı bir ile gitmek istediğinde kararlı olduğu bir B2B SaaS projesine dahil oldum. Tüm platform için şirketin markasıyla eşleşen UI. Herşey için. Birkaç toplantıdan sonra ve tasarım ekibini ve ürün yöneticilerini davanın arkasında toplayarak, onu böylesine felaket potansiyeli olan bir karardan vazgeçirmeyi başardık.

Platform, standart bir SaaS uygulaması UI bileşenleri seti kullandı ve sonuç olarak, tablolardaki metin ve sayısal verilerle birlikte formlar, widget'lar, açılır menüler, piktogramlar ve simgelerle doluydu. Yeterli kontrast ve tutarlı bir renk şeması elde edilirken gezinme, düzen ve işlevselliğin yönetilmesi inanılmaz derecede zor olurdu. Özetle, hepsini karanlık temalı bir kullanıcı arayüzü ile çalıştırmak neredeyse imkansız olurdu.

Uygulamanın uygunluğuna bağlı olarak, belki de doğru seçim, açık ve koyu UI'lerin bir karışımını önermek olurdu. Örneğin, widget'lar ve formlar ve veri tabloları içeren ayar sayfaları açık renkli bir arka plan üzerinde tasarlanabilir ve grafikler içeren analiz sayfaları daha koyu bir renk şemasıyla tasarlanabilirdi.

Dark UI Kullanmanın Yapılması ve Yapılmaması Gerekenler

Kapanışta, karanlık bir UI ile gitme kararına dikkatle yaklaşılması gerekiyor. Tasarımcılar bunu yanlış nedenlerle yapmamalıdır; havalı olmak, farklı olmak veya başka birinin tasarımını kopyalamak. Bir tasarımcının bağlamı, içeriği (kontrast ve okunabilirlik), cihazı ve kullanım durumunu göz önünde bulundurması ve seçimi için iyi bir nedeni olması çok önemlidir. Potansiyel olarak birçok faydası olduğu kadar birçok tuzak da olduğu için bu hassas bir dengeleme eylemidir.

Karanlık kullanıcı arayüzlerini kullanmak uygun olduğunda:

• Marka bilinci oluşturma renk şeması bunu garanti ettiğinde
• Tasarım, yalnızca birkaç içerik türüyle seyrek ve minimalist olduğunda
• Gece eğlence uygulamaları gibi bağlam ve kullanım için uygun olduğunda
• Uzun süre kullanılan analiz sayfaları gibi göz yorgunluğunu azaltmak için
• Bir duyguyu ortaya çıkarmak için - örneğin, bir entrika ve gizem duygusu
• Çarpıcı, dramatik bir görünüm yaratmak için
• Lüks ve prestij duygusu yaratmak
• Görsel hiyerarşiyi desteklemek için

Karanlık kullanıcı arayüzlerinden uzak durmak en iyisi olduğunda:

• Çok fazla metin olduğunda (koyu bir arka planda okumak zordur)
• Ekranda çok fazla karışık içerik olduğunda
• Çok sayıda form, bileşen ve widget içeren B2B uygulamaları durumunda
• Tasarım geniş bir renk yelpazesi gerektirdiğinde

“Karanlık tarafa” geçişe dikkatle yaklaşılmalıdır. Tuzaklarla dolu potansiyel olarak tehlikeli bir karar vermeden önce daha derin, daha kapsamlı araştırma ve analiz yapılması önerilir. Bir tasarımcı bu yola bir kez girdi mi, geri dönüşü çok zordur. Tasarımcılara, her iki ayağını birden atmadan önce tüm yönleri - iyi ve kötü, yapılması ve yapılmaması gerekenler - düşünmeleri tavsiye edilir.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• eCommerce UX – En İyi Uygulamalara Genel Bir Bakış (Infografik ile)
• Ürün Tasarımında İnsan Merkezli Tasarımın Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Mobil Arayüzler için Sezgisel İlkeler
• Öngörülü Tasarım: Büyülü Kullanıcı Deneyimleri Nasıl Yaratılır