UI Tasarım Trendleri: Hangisi Kalır, Hangisi Kontrastı Bozar

Trend listeleri arayüz seçimlerini görsel bir zevk meselesi gibi gösteriyor. Oysa her efektin kontrast, performans ve bakım tarafında bir faturası var, o fatura da tasarım dosyasında değil cihazda ödeniyor. Son yılların popüler yaklaşımlarına popülerlik sırasına göre değil, uygulandığında neyin bozulduğuna göre baktım.

Gerçekçilik üç kez geri döndü

Skeuomorfizm dijital nesneyi fiziksel karşılığına benzetir: çöp kutusu simgesi, deri dokulu takvim, çevrilen sayfa. iOS 7 ile gözden düştü, ama tamamen ölmedi. Bir ses masası arayüzü ya da ilk kez kullanılan bir kiosk ekranı hâlâ bu dilden fayda görüyor, çünkü kullanıcının referansı yoksa metafor kısayol işlevi görür.

Neumorfizm aynı hissi düşük kontrastla üretmeye çalışır. Buton arka planla aynı renktedir, sınırını yalnızca iki yumuşak gölge belirler. Sorun tam burada başlıyor: WCAG'in arayüz bileşenleri için istediği 3:1 kontrast oranını, tanımı gereği aynı renk ailesinde kalan bir gölgeyle yakalamak neredeyse imkânsız. Butonun buton olduğunu göremeyen biri için o ekran boş bir yüzeydir.

Glassmorphism saydam panelle derinlik kurar. Peki panelin arkasındaki görsel değişirse ne olur? Metnin kontrastı da onunla birlikte değişir, çünkü sabit bir zemin yoktur. Bunun bir çaresi var: panelin altına yarı opak koyu bir katman koyup blur'u yalnızca dekorasyon olarak bırakmak. Glassmorphism'i neumorfizmden daha savunulabilir buluyorum, burada kontrastı kurtaracak bir hamle kalıyor; neumorfizmde ise efektin kendisi düşük kontrasta bağlı.

Blur'un bir de işlem tarafı var. backdrop-filter arkasındaki katmanı kaydırma boyunca yeniden birleştirir, orta seviye telefonlarda uzun listelerde kare düşmesi buradan gelir. Efekti sabit bir başlık çubuğunda kullanmak başka, kaydırılan yüzlerce kartın her birinde kullanmak başka.

Sadeleşme hattı: flat, minimal, Bauhaus

Flat design gölgeyi ve dokuyu attığında dosya boyutu ve çizim maliyeti gerçekten düştü. Bedeli de ilk sürümlerde ödendi: tıklanabilir olanla olmayanın ayrımı kayboldu. Hafif gölgenin ve ince kenarlığın "flat 2.0" adıyla geri gelmesi estetik bir fikir değişikliği değil, kullanılabilirlik yaması.

Minimalizm sık yanlış anlaşılıyor. Mesele az öğe göstermek değil, aynı anda az karar sordurmak. Bir ekranda üç buton olabilir; üçü de aynı görsel ağırlıktaysa o tasarım minimal değil kararsızdır.

Bauhaus geometrisi marka katmanında, açılış ekranlarında, boş durum illüstrasyonlarında iyi çalışır. Yoğun tablo ve uzun form ekranlarında ise dekoratif şekiller okuma sırasını bozar.

Tipografi ve illüstrasyon

Kalın tipografi bir mesajı taşıyabilir, ama taşıdığı metin sizin kontrolünüzde değilse riske girer. Tasarımdaki üç kelimelik başlık, veritabanındaki en uzun ürün adıyla mobilde dört satıra çıkar. Basit bir sınama işi çözüyor: mockup'a en uzun kaydı koyup bakmak.

İllüstrasyonda ise ayırt edicilik sorunu var. Aynı ücretsiz kütüphaneden gelen düz renkli figürler on binlerce sitede duruyor, dolayısıyla marka kimliği kurmak bir yana, tanıdık bir şablon hissi bırakıyor. İllüstrasyon ya özel çizilir ya da yerine sade bir ikon konur.

Hareket: geri bildirim mi, gösteri mi

Mikro animasyonun işi durum değişimini anlatmak: ne kayboldu, ne eklendi, nereden geldi. Ölçüt de bu, animasyon bir soruyu cevaplıyor mu, yoksa yalnızca bekleme mi ekliyor?

Bir de sağlık tarafı var. Büyük paralaks ve zoom geçişleri vestibüler duyarlılığı olan kullanıcılarda baş dönmesi yapabiliyor. prefers-reduced-motion medya sorgusunu desteklemek birkaç satır CSS, bunu üçüncü parti bir kütüphaneye havale etmeye gerek yok.

Karanlık mod ve pil meselesi

Karanlık modun pil tasarrufu sağladığı iddiası yalnızca OLED ekranlar için geçerli. LCD'de arka aydınlatma her koşulda yanar, siyah piksel ölçülebilir bir kazanç getirmez. Yani tasarruf argümanı cihaz sınıfına bağlı bir iddia, genel bir kural değil.

Uygulama tarafında iki ayrıntı yeterince konuşulmuyor. Koyu zeminde saf beyaz metin halelenme yapar, bir tık kırık bir gri daha rahat okunur. İkincisi, karanlık temada gölge yükseklik anlatmaz; katmanı öne çıkarmak için yüzeyi koyulaştırmak değil açmak gerekir.

Trendi seçmeden önce sorulacak soru

Elinizdeki efekti kaldırın ve arayüze tekrar bakın. Hâlâ hangi öğenin tıklanabilir olduğu, neyin seçili olduğu, sıradaki adımın ne olduğu anlaşılıyorsa efekt bir katman ekliyor demektir. Anlaşılmıyorsa o efekt dekorasyon değil, anlamın tek taşıyıcısıdır. Kırılgan yer de tam orasıdır: düşük kontrastlı ekranda, güneş altında, azaltılmış hareket ayarında ya da eski bir tarayıcıda ilk kaybedilen o olur.