Hareketli arka planlarda metin nasıl okunaklı tutulur?
Başlık açılış karesinde harika görünür. Beyaz harfler videonun koyu bölümünde durur, kompozisyon dengeli hissettirir ve renk markayla uyumludur. İki saniye sonra sözcüklerin arkasından parlak bir nesne geçer ve cümlenin yarısı kaybolur.
Hareketli arka plandaki metnin okuma yüzeyi değişkendir: videoya bindirilmiş metin aynı konumda kalırken tek tek harflerin altındaki kontrast değişebilir. Tek bir çekici kare, cümlenin bütün sahne boyunca okunabilir kaldığını kanıtlayamaz.
Yanıt nadiren yalnızca “gölge ekle” olur. Bazen metnin daha güvenilir yüzeye ihtiyacı vardır. Bazen arka plan daha az hareket veya farklı kırpma gerektirir. Bazen cümlenin kendisi kompozisyonun başka bölümüne aittir. En yararlı çözüm, görselin rolünü korurken bilgiyi güvenceye alır.
Metinle hemen arkasındaki yüzey okuma alanını oluşturur. Arka plan hareketi bu alanı sürekli değiştirdiği için inceleme de onu zaman boyunca takip etmelidir.
İlgili yüzey olarak harflerin arkasındaki alanı ele alın
Video karesi çoğunlukla koyu olduğu halde beyaz metne kötü arka plan sunabilir. Önemli alan, görüntünün tamamının ortalama parlaklığı değil, harflerin arkası ve hemen çevresidir.
Masa çekimi üzerinde kısa bir başlık düşünün. Karenin geri kalanı koyu kalırken açık renkli defter ortadaki sözcüğün arkasından geçer. Karenin genel rengini örneklemek sorunu kaçırır. İzleyici tam sözcüğün tanınması gereken yerde yerel bir ayrışma kaybı yaşar.
W3C’nin minimum kontrast kılavuzu, normal ve büyük metinde farklı eşikler kullanır ve açık-koyu kontrastının rolünü açıklar. İlgili teknik, arka plan değişirken metnin arkasındaki alanı seçmeyi veya gölgelendirmeyi ele alır. Aktarılabilir ilke, marka renginin her yerde okunabildiğini varsaymak yerine yerel değerlendirme yapmaktır. W3C’nin kontrast açıklaması referansı sunar.
Referans olarak WCAG minimumu, ölçütün tanımları ve istisnaları çerçevesinde normal metinde 4.5:1, büyük metinde 3:1’dir. Yazarın yukarıdaki gri ton çalışmasında ortadaki korumasız örneğin beyaza karşı hesaplanan oranı yaklaşık 3.35:1’dir. Aynı örnek, belirtilen siyah yüzey altında yaklaşık 11.71:1’e ulaşır. Sonraki adım bu ilişkiyi hareketli sahne boyunca izlemektir.
Boyanmış arka planda bu, başlığın altındaki gerçek fırça izlerini incelemek demektir. Ürün kaydında açıklamanın arkasından geçebilecek panelleri, ipuçlarını ve bildirimleri inceleyin. Canlı çekimde ışık, nesne ve kamera konumu değişimlerini inceleyin. Tasarım problemi, metni sahne boyunca takip eder.
Arka planın kanıt mı atmosfer mi olduğuna karar verin
Ürün ekran görüntüsüyle soyut resim farklı işler yapar. Ekran görüntüsü, izleyicinin incelemesi gereken bilgi içerebilir. Resim ise tonu ve marka tanınırlığını kurabilir. İkisine aynı davranmak makaleye veya videoya zarar verebilir.
Arka plan kanıtsa kritik bölgeyi iddia doğrulanamaz hale gelene kadar karartmayın veya bulanıklaştırmayın. İzin paneli, fiyat, grafik etiketi veya başarılı sonuç okunabilir kalmalıdır. Açıklayıcı metni o bölgenin yanına koyun, ayrı yüzeye taşıyın veya açıklamayı kanıt kurulduktan sonra gösterin.
Arka plan atmosferse sadeleştirmek için daha fazla özgürlüğünüz vardır. Daha koyu kırpma, resmin sakin bölümü veya kontrollü bir üst katman, önemli bilgiyi feda etmeden güvenilir metin alanı yaratabilir. Görselin görevi mesajı desteklemektir; bu yüzden yerel karmaşıklığını azaltmak tüm kompozisyonu iyileştirebilir.
Bu ayrım, yaygın hatayı önler: ürün kanıtını okunmaz yaparak başlık okunabilirliğini çözmek. Büyük başlık temiz görünürken gerçek arayüz dekoratif bir bulanıklığa dönüşebilir. Sonuçtaki sahne iddiayı yüksek sesle, kanıtı zayıf biçimde aktarır.
İzleyicinin her katmandan neye ihtiyaç duyduğunu sorun. Hem metin hem görsel temel bilgi taşıyorsa onlara birbirini tamamlayan alan veya zaman verin. Biri dekoratifse geri çekilmesine izin verin. Çözüm, metni her zaman doğrudan görsellerin üstüne koyma tercihine değil, içerik hiyerarşisine uymalıdır.
Aynı sözcükleri değişen arka planda izleyin
Bu makalenin altı saniyelik gösteriminde, fiyat ve faturalandırma koşulu sabit kalırken altlarından gri tonlu bant geçer. İki panel de aynı arka plan karelerini kullanır. Sağ panel, ifadenin tamamının arkasına belirtilen siyah yüzeyi ekler.
Karşılaştırma, iyi görünen karenin neden aldatıcı olabildiğini ayrıştırır. Tasarımcı korumasız uygulamayı ikinci andan onaylayıp ilk andaki zorluğu kaçırabilir. Korumalı sürüm bu örneklerde daha kararlıdır; çünkü yerel yüzeyi daha az şiddetli değişir.
Efekt eklemeden önce daha güvenilir uygulama seçin
Metni korumanın birkaç yolu vardır. Görseli ne kadar korudukları ve gelecekteki değişimleri ne kadar güvenilir karşıladıkları bakımından ayrılırlar.
Opak veya neredeyse opak panel sabit yüzey oluşturur. Yoğun yönerge veya kritik koşul için en iyi seçim olabilir. Degrade karartma, sözcüklerin çevresinde daha sakin alan oluştururken görselin daha büyük kısmını koruyabilir. Dikkatle seçilen kırpma, hiç yeni katman eklemeden de sorunu çözebilir.
Gölge veya kontur, gerçek izleme boyutunda açık ayrışma yarattığında yardımcı olabilir. Arka planda benzer keskin kenarlar varsa, metin inceyse veya sıkıştırma sınırı yumuşatıyorsa daha az güvenilirdir. Sonucu kontrol etmenin yerine popüler bir gölge ayarı kullanmayın.
Yağlı boya marka arka planında önce sakin bölge deneyin. Başlığı en yüksek kontrastlı fırça izlerinden uzak tutun. Görsel hareket etmek zorundaysa hareketi, korunaklı bölge çekim boyunca metnin altında kalacak kadar küçük yapın. Yavaş hareketli resim üzerindeki sabit başlık bile sona gelindiğinde tamamen farklı yerel arka planla karşılaşabilir.
Ürün açıklamasında küçük, kâğıt benzeri etiket, dramatik tam genişlikli degradeden yararlı olabilir. Etiket açıkça editoryal açıklamaya ait görünmelidir ki izleyici onu ürün arayüzünün parçası sanmasın. Üslubu tutarlı tutun, ama koruma miktarını içerik belirlesin.
Videodaki metni en zor arka plan karesinde kontrol edin
Tasarımcı doğal olarak en iyi kareye yönelir: dengeli kompozisyon, güzel arka plan ve eksiksiz başlık olan kareye. Okunabilirlik incelemesi bilinçli olarak en kötü anı aramalıdır.
Sahnede ilerleyip parlak alanların, keskin kenarların veya yoğun desenlerin sözcükleri nerede geçtiğini izleyin. Giriş ve çıkış evrelerine, kamera hareketlerine, sahne kesmelerine ve geçici arayüz durumlarına dikkat edin. Açıklama arkasında beliren ipucu, kısa ama önemli çatışma yaratabilir.
Bulabildiğiniz en zor kare dahil, inceleme için birkaç temsilî kare kaydedin. Sorunun yerini belirlemek için bu kareleri kullanın, sonra tüm aralığı normal hızda izleyin.
Ardından kesintisiz oynatmayı inceleyin. Bazı sorunlar yalnızca statik değil, zamansaldır. Arka plan teknik olarak harflerden ayrışabilir ama okumayı yorucu kılacak kadar güçlü hareket edebilir. Titreşen kontrast, dikkati cümleden tekrar tekrar çekebilir. Hızlı kamera hareketi, sabit başlığı sahneden kopuk gösterebilir.
En kötü an rahatsız ediyorsa onaya daha güzel ekran görüntüsü seçmek yerine sistemi düzeltin. Biraz daha güçlü yerel yüzey veya farklı kırpma bütün sahneyi daha güvenilir yapabilir. Amaç, zor akışı saklayan çekici küçük resim değil, kararlı okuma deneyimidir.
Zamana bağlı kontrast eğrisi, zor aralıkları bulmayı kolaylaştırır. Altı saniyelik gösterimin her kaynak karesinde, metin alanındaki en parlak arka plan değerini alın ve beyaza karşı kontrastını hesaplayın. En parlak noktayı kullanmak, açık ve koyu alanları ortalamak yerine o bölgenin ihtiyatlı bir değerlendirmesini verir.
Bazı sözcükler koyu yamalarda rahat görünse bile korumasız eğri düşük kalır. Arka planın parlak bölümü metin bloğunun başka kısmından geçmeye devam eder. Korumalı eğri daha kararlıdır; çünkü yerel yüzey o alanın ne kadar parlak olabileceğini sınırlar. Eğriyi incelemeye değer aralıkları bulmak için kullanın, sonra o karelerdeki harflere bakın. Eğri kontrast sorununun yerini bulabilir; görüntü, ifadenin hangi bölümünün etkilendiğini gösterir.
Metin hareketini arka plan hareketinden ayırın
Hareketli arka planda hareketli metin, iki referans sistemi yaratır. İzleyici, arkasındaki yüzey değişirken sözcükleri takip etmelidir. Bu kısa ve dışavurumcu ifadede çalışabilir, ancak kesin bilgi için zorlayıcı olur.
Arka plan yana kayarken yukarı kayan ürün başlığı düşünün. Çapraz göreli hareket enerjik hissettirebilir, fakat iki hareket yerleşene kadar cümlenin sabit okuma konumu yoktur. Sahne hemen ardından kesilirse amaçlanan okuma aralığı neredeyse hiç oluşmaz.
Daha kontrollü düzende bir katman hareket ederken diğeri sabitlik sağlar. Arka plan, başlık gelmeden sahneyi kurabilir. Başlık yerleşirken arka plan hareketi hafifleyebilir. Kritik etiket belirmeden kamera hareketi bitebilir.
İki katman da hareket etmek zorundaysa ilişkilerini bilinçli kurun. Sahnedeki nesneye bağlı metin o nesneyi tutarlı izlemelidir. Editoryal metin, kameranın dünyasından açıkça ayrı kalmalıdır. Ürün paneliyle neredeyse, ama tam olarak değil, birlikte sürüklenen etiket takip hatası gibi görünebilir.
Fiyat, tarih ve birim gibi kesin iddialarda sabit son duruma öncelik verin. İzleyici koşulu incelemek için uzun gösterinin bitmesini beklememelidir. Hareket bilgiyi tanıtabilir; sonra izleyiciye onu okumak için güvenilir bir yer vermelidir.
Önemli koşulları yakın tutun
Büyük başlık, kalın çizgileri ve tanıdık sözcükleri sayesinde zor arka planda çoğu zaman görünürlüğünü korur. Altındaki küçük koşul daha savunmasızdır. Ne yazık ki iddiayı doğru kılan bilgi o koşulda olabilir.
“US$29” görünür kalırken “aylık, yıllık faturalandırılır” dokuda kaybolabilir. “Saniyeler içinde dışa aktarın” kareye hâkim olurken alt koşul okunmaz hale gelebilir. Görsel hiyerarşi böylece yalnızca görünüşü değil, mesajın özünü değiştirir.
Tam ifadeyi bir bütün olarak tasarlayın. Koşulu açıkladığı değere yakın tutun, ona güvenilir yüzey verin ve ortak okuma aralığı ayırın. Vazgeçilebilir sayılmadan da başlıktan küçük olabilir.
Düzen tam ifadeye yer veremiyorsa yeniden yazın veya düzenleyin. Koşulu minicik yazıya indirerek çözmeyin. Sakin yüzeydeki kısa iki satırlık ifade, neredeyse görünmez koşullu kocaman sayıdan daha etkili olabilir.
Aynı ilke grafik etiketleri ve arayüz açıklamaları için de geçerlidir. Vurgulanan sonuç, birimine ve bağlamına ihtiyaç duyar. Hareketli arka plan, iddianın olumlu kısmını kolay okutmanın ve sınırlayan kısmını zor buldurmanın bahanesi olmamalıdır.
Sıkıştırma kenarları değiştirdiği için çıktıyı kontrol edin
Kaynakta net görünen metin, yeniden boyutlandırma ve sıkıştırma sonrası daha zor okunabilir. İnce çizgiler, hafif gölgeler ve yarı saydam paneller, son görüntüdeki değişime özellikle duyarlıdır.
Gerçek dışa aktarılan videoyu amaçlanan oynatıcı boyutunda inceleyin. Büyük masaüstü önizlemesi, ince konturun telefonda görünen pikselin yalnızca kesrine indiğini gizleyebilir. Arka plan dokusu da harflerle rekabet eden hareketli sıkıştırma bozukluklarına dönüşebilir.
Uygulama çok ince kenara dayanıyorsa ayrışmayı güçlendirmeyi değerlendirin. Biraz daha opak yerel yüzey, daha güçlü yazı kalınlığı veya sakin kırpma, dağıtıma kırılgan gölgeden daha iyi dayanabilir. Tüm kareyi keskinleştirmenin yardım edeceğini varsaymayın; arka plan ayrıntısını da sertleştirebilir.
Makul normal izleme mesafesinden inceleyin, sonra zor karelere yakından bakın. Bu iki kontrol farklı soruları yanıtlar. Yakın inceleme kusurun nedenini bulabilir. Normal izleme, mesajın kullanımda rahat okunup okunmadığını söyler.
Birden çok sürüm dışa aktarılıyorsa her kompozisyonu kontrol edin. Dikey kırpma aynı başlığı görüntünün daha parlak bölümüne koyabilir. Kare sürüm koşulu başka satıra zorlayabilir. Okunabilirlik yalnızca özgün şablona değil, son düzene aittir.
Yerel yüzeyi bilinçli kullanın
Koruyucu panel, sonradan eklenip cümle dikkate alınmadan boyutlandırıldığında ağır görünebilir. Başlangıçtan itibaren kompozisyonun parçası sayıldığında daha zarif olur.
Sözcüklere nefes alacak alan verin, yüzeyi metin bloğuyla hizalayın ve şekli basit tutun. Boyutları içerik miktarı belirlesin. Kısa etiket dev kart gerektirmez. Çok satırlı yönerge, yalnızca kapsüller marka sözlüğünde var diye dar, yarı saydam kapsüle sıkıştırılmamalıdır.
W3C’nin değişken arka plan tekniği, harflerin arkasını gölgelendirmeyi ve ayrışmayı korumanın diğer yollarını tartışır. G18 tekniği, temel sorunu ve olası yaklaşımları açıklar.
Tutarlı seri için tek katı boyut yerine yüzeyin rolünü tanımlayın. Örneğin editoryal açıklamalar sakin açık panel kullanırken kısa marka başlığı resmin korunaklı bölgesini kullanabilir. Her sahneyi aynı karta zorlamadan üsluplar ilişkili hissedebilir.
İzleyici erişilebilirliği veya kontrastı düşünmeden önce sonuç kasıtlı görünmelidir. Metin kompozisyonda açık bir yer kaplar, görsel amacını korur ve hiçbir katman keyfî yamayla kurtarılmış görünmez.
Pratik bir boyut kontrolü, kaynak tuvali son gösterimle karşılaştırmaktır. Üçte bir ölçekte gösterilen kaynakta altmış piksel yüksekliğindeki başlık yaklaşık yirmi piksel görünür. İnce kontur aynı oranda küçülür. Bu, editörde sağlam görünen uygulamanın küçük oynatıcıda neden kırılganlaşabildiğini açıklar. Hesap görsel incelemenin yerini almaz, ama nereye bakılacağını söyler: en küçük koşula, en ince ayrışma kenarına ve arka planın en yoğun bölümüne.
Süslemeye değil, soruna ilişkin geri bildirim verin
“Metni daha çarpıcı yap” daha parlak renge, ağır gölgeye, büyük yazıya veya fazla harekete yol açabilir. Bu değişikliklerin bazıları sahneyi kötüleştirebilir.
Daha yararlı not anı ve sonucu belirtir: “İkinci ve üçüncü saniyeler arasında parlak bölge faturalandırma koşulunun arkasından geçiyor ve sözcükleri ayırt etmek zorlaşıyor. Mevcut başlık boyutunu koru; fiyat ifadesinin tamamının arkasında güvenilir yerel yüzey oluştur.”
Bu yönerge, ajana veya tasarımcıya neyin korunacağını ve neyin iyileşmesi gerektiğini söyler. İnceleyene de revizyonu somut değerlendirme yolu verir: aynı aralığı oynatıp tam ifadeyi incelemek.
Bitmiş sahne en iyi karesinin ötesinde de çalışmalıdır. Arka plan hareket ederken izleyici başlığı okuyabilir, koşulu hatırlayabilir ve görselle ilişkisini anlayabilir. Hareketli arka plan üzerindeki metnin gerçek standardı bu sürekliliktir.