Web UI Tasarım Örnekleri: Neyi Kopyalamalı, Neyi Kopyalamamalı
Arayüz örneklerine bakmanın en yaygın hatası, beğenilen tasarımın görünüşünü alıp onu ayakta tutan kararı geride bırakmak. Notion'un sadeliği bir renk paleti değil, sayfanın kurulma biçimi. Aşağıda birkaç bilinen arayüzün hangi yanı başka projeye taşınır, hangi yanı taşınmaz, ona bakıyoruz.
Örneklere bakarken ne aranır
Notion'un arayüzü sade görünür, ama sadelik oradaki asıl karar değil. Asıl karar, sayfanın tek bir yapı türünden kurulmuş olması: paragraf da blok, tablo da blok, gömülü video da blok. Tek yapı türü olunca menü kısalıyor, boşluk sistemi kendiliğinden tutarlı çıkıyor, yeni bir içerik tipi eklemek de yeni bir ekran tasarlamayı gerektirmiyor. Renk paletini kopyalarsanız elinizde soluk bir sayfa kalır. Yapıyı kopyalarsanız Notion'un çözdüğü problemi çözersiniz.
Medium'da öne çıkan şey tipografi: dar satır uzunluğu, iri gövde metni, bol satır aralığı. Peki bu her siteye taşınır mı? Uzun okuma için evet. Kullanıcının tarayıp geçtiği bir yönetim panelinde aynı ölçüler ekranı boşa harcar, çünkü orada aranan şey okuma konforu değil, tek bakışta görülen bilgi miktarı.
Jitter gibi araçların kendi sitesi hareketle dolu, çünkü sattıkları şey hareketin kendisi. Aynı yoğunluktaki animasyonu bir muhasebe yazılımının açılış sayfasına taşıdığınızda ortaya çıkan şey modern bir arayüz değil, yavaş bir arayüz olur. Örnek galerilerinde bu bağlam hiç yazmaz; sadece ekran görüntüsü vardır.
Kontrast oranı erişilebilirliğin tamamını ölçmez
WCAG'ın AA seviyesi normal metin için 4.5:1, büyük metin için 3:1 kontrast oranı ister (büyük metin: 24 piksel, kalınsa 18,66 piksel ve üzeri). Bu oran hesaplanırken yalnızca rengin bağıl parlaklığı kullanılır. Ton hesaba hiç girmez.
Sonuç şu: bir grafikteki kırmızı ile yeşil, ikisi de beyaz zemine karşı testten geçebilir ve yine de kırmızı-yeşil ayrımı olmayan bir okuyucu için üst üste binmiş iki gri gibi görünür. Otomatik denetçi de bunu yakalamaz, çünkü denetçi her rengi zemine karşı ölçer, renkleri birbirine karşı değil. Kaynak metinlerin çoğu "yüksek kontrast kullanın" ile "doygun kırmızı-yeşil ikilisinden kaçının" maddelerini alt alta yazar, aralarındaki bağı kurmadan. Oysa ikinci madde, birinci maddenin ölçemediği boşluğu kapatmak için orada.
Pratik karşılığı tek cümleye sığıyor: bilgiyi yalnızca renge yükleme. Durum göstergesine ikon ekle, çizgi grafikte çizgilerin desenini ayır, form hatasında kırmızı çerçevenin yanına bir de metin koy. Bunların hiçbiri tasarımı çirkinleştirmez, sadece bilgiyi ikinci bir kanaldan tekrarlar.
Hiyerarşi boyutla değil boşlukla kurulur
Bir bölümün öne çıkmadığını fark ettiğinizde ilk refleks başlığı büyütmek olur. Genelde işe yarayan şey başkadır: ilgili öğeleri birbirine yaklaştırmak, ilgisizleri uzaklaştırmak. Aynı sayfada üç farklı boşluk değeri gözle seçilebilir bir düzen verir, on yedi farklı değer vermez. 4 ya da 8 pikselin katlarından oluşan bir merdivene bağlı kalmak bu yüzden işe yarıyor.
Yazı tipinde de aynı cimrilik geçerli. İki aile, en fazla üç ağırlık. Bunun görsel gerekçesi kadar teknik gerekçesi de var: her ek ağırlık ayrı bir font dosyası demek ve ilk boyanan ekranın önüne giren her dosya sayfanın açılışını geciktiriyor.
Karanlık mod renkleri ters çevirmek değil
Saf siyah zemin üzerine saf beyaz metin, uzun okumada harflerin kenarlarının taştığı hissini yaratır. Material Design'ın karanlık yüzey için önerdiği renk bu yüzden #000000 değil, #121212. Gölgeler de aynı sebeple çalışmaz: karanlık zeminde gölge görünmediği için yükseklik farkını gölgeyle değil, yüzeyi bir tık açarak anlatmak gerekir.
Cam efekti ve üç boyutlu öğeler de bedava değil. backdrop-filter ile kurulan bulanıklık, kaydırma sırasında arkadaki alanın her karede yeniden hesaplanması anlamına geliyor ve bu, orta seviye telefonlarda gözle görülür bir takılma olarak geri dönüyor (efektin çoğu yerde bu bedeli hak etmediğini düşünüyorum). Ekran görüntüsünde her ikisi de aynı görünür; fark, parmak ekrana değdiğinde ortaya çıkıyor.
Geri bildirim, animasyonun asıl işi
Arayüzü canlı hissettiren şey süslü geçişler değil, sistemin ne yaptığını söylemesi. Basılan buton basılı görünmeli, gönderilen form beklerken bir şey göstermeli, başarısız istek sessizce kaybolmamalı. Peki bu geçişler ne kadar sürmeli? Kısa durum değişimleri için 150 ile 250 milisaniye arası çoğu arayüzde yeterli; daha uzunu, kullanıcının kararını verip beklemeye başladığı yerdir.
Süreç
Örnek toplamak tasarımın kendisi değil, başlangıcı. Kaba bir tel çerçeve, birkaç kişiyle yapılan bir deneme, sonra düzeltme. Bu döngü iki turdan sonra ilk taslakta kimsenin göremediği şeyleri gösterir; galeri gezmek göstermez. Kopyalanacak olan da zaten görüntü değil, o görüntüyü üreten karar.
Kaynaklar