Flat Design'ın Kullanılabilirlik Sorunu ve Flat 2.0
Flat design skeuomorfizme karşı bir düzeltme olarak geldi ve kendi sorununu üretti: kullanıcı neye tıklayabileceğini anlamakta zorlandı. Flat 2.0 bu açığı gölge, katman ve geçişle kapattı, sadeliği de tümüyle bırakmadı. Sadeliğin sayfa hızıyla ilişkisi ise çoğu yazıda abartılıyor; asıl kazanç düzlükten değil, doku görsellerinin CSS'e devredilmesinden geldi.
Metro'dan sonra her şey düzleşti
Akımın miladı 2012'de Windows 8 ve Microsoft'un Metro dili sayılır. Gölge, doku, parlaklık, eğim: hepsi atıldı, geriye tipografi, renk ve boşluk kaldı. Apple 2013'te iOS 7 ile aynı yöne dönünce mesele bir tercih olmaktan çıktı, sektör varsayılanı oldu.
Gerekçe makuldü. Ekrandaki deri dokusu, çevrilen sayfa efekti ve metal düğme fiziksel dünyanın taklidiydi, kimse artık o taklide ihtiyaç duymuyordu.
Kaybedilen şey süs değil, işaretti
Skeuomorfizmin attığı yükün bir kısmı gereksizdi. Bir kısmı değildi. Kabarık düğme yalnızca güzel durmuyordu, "buraya basılır" diyordu; altı çizili mavi metin de bağlantıyı gösteren en eski, en öğrenilmiş işaretti. Flat tasarım bunları kaldırınca yerine çoğu zaman sadece bir renk farkı kondu.
Renk tek başına yetmez ve bu bir zevk meselesi değil. WCAG 2.1'in 1.4.1 (Use of Color) ölçütü bilgiyi yalnızca renkle aktarmayı doğrudan dışarıda bırakır. Paragrafın içindeki bağlantıyı sadece griden maviye kaydırarak belirtiyorsan, renk ayrımı zayıf bir okuyucu için o bağlantı ortada yok demektir. Aynı standardın 1.4.11 ölçütü de düğme ve form alanı sınırları için 3:1 kontrast ister; "açık gri zemin üstünde biraz daha açık gri kart" bu eşiği geçmez.
Gövde metnindeki bağlantıların altını çizili bırakmayı tercih ederim. Menüde ya da kart başlığında gerek yok, orada konumun kendisi işaret zaten. Ama akan paragrafın içinde altçizgiden daha ucuz bir çözüm bulamadım.
Flat 2.0 dengeyi nereye kurdu
Flat 2.0 gölgeyi bezeme olarak değil, bilgi olarak geri getirdi. Kartın altındaki iki piksellik gölge o bloğun arka plandan ayrı bir yüzey olduğunu söyler; düğmenin basılınca gölgesini kaybetmesi, tıklamanın kaydedildiğini söyler. Google'ın Material Design'ı bunu kural setine bağladı ve yükseklik (elevation) değerini hiyerarşinin taşıyıcısı yaptı.
Fark incedir ama gerçektir: skeuomorfizm bir nesneyi taklit ediyordu, Flat 2.0 yalnızca "bu yüzey şunun üstünde" bilgisini taşır.
"Düz tasarım daha hızlı yüklenir" iddiası
Bu cümle her flat design yazısında geçer ve tarihsel bir kazayı genel kural sanmaktan kaynaklanır. 2010'da bir düğmeye gradyan ve gölge vermek çoğunlukla PNG sprite yüklemek demekti: onlarca küçük görsel, onlarca istek. Flat tasarıma geçilince o görseller gitti ve sayfalar hızlandı. Hızlanmanın sebebi düzlük değildi, görsellerin CSS'e devredilmesiydi.
Bugün border-radius, box-shadow ve linear-gradient tarayıcının içinde. Sıkıştırılmış bir stil dosyasında gölge tanımı birkaç on bayt tutar, ek istek doğurmaz. Yani Flat 2.0'ın görsel ipuçlarını performans gerekçesiyle kesmenin karşılığı yok. Performansı bozan şey başkadır: sürekli yeniden boyama üreten animasyonlar ve alt kümelenmemiş font aileleri.
Sadeleştirme nerede durmalı
Ölçüt basit. Bir öğeyi düzleştirdikten sonra kullanıcı hâlâ ona tıklanabilir diyebiliyor mu? Diyemiyorsa sadeleştirme orada bitmiştir. Kenarlığı geri koy, gölgeyi geri koy, altçizgiyi geri koy.
Kontrolü şöyle yaparsın: arayüzün ekran görüntüsünü al, gri tonlamaya çevir. Renk gittikten sonra nerenin tıklanabilir olduğu hâlâ anlaşılıyorsa işaretler yerinde. Anlaşılmıyorsa elindeki sadelik değil, eksiklik.