Flat Design ve Tıklanabilirlik: Sadelik Nerede Zarar Verir
Flat design'ı savunan yazılar genelde iki gerekçe sıralar: sayfa hızlanır, görünüm modernleşir. İkincisi zevk meselesi, ilki 2013'ten kalma bir yanlış. Asıl mesele başka yerde duruyor: süslemeyi attığınızda beraberinde neyin tıklanabilir olduğunu söyleyen işaretçileri de atmış olursunuz.
Hız gerekçesi nereden geldi, neden artık tutmuyor
2010 civarında bir butona gölge ya da gradyan koymanın pratik yolu Photoshop'tan dilimlenmiş PNG'lerdi. Normal, hover ve active halleri ayrı görsellerdi; bir sprite dosyası, fazladan istekler, kilobaytlar. O dönemde düz renkli butona geçmek ölçülebilir bir tasarruftu.
Bugün aynı gölgeyi box-shadow, aynı gradyanı linear-gradient veriyor. İkisi de stil dosyasında birkaç yüz bayt yer tutuyor, ayrı bir görsel isteği doğurmuyor, CSS ile birlikte önbelleğe giriyor. Dolayısıyla "flat olduğu için hafif" cümlesinin teknik dayanağı kalmadı. Sayfayı yavaşlatan şey büyük olasılıkla optimize edilmemiş kapak görseli, üç ayrı font ailesi ve sayfaya sonradan eklenen altıncı üçüncü parti script. Butonun gölgesi değil.
Bunu söylemek flat design'a karşı olmak değil. Sadece gerekçeyi doğru yere koymak: estetik bir tercih yapıyorsunuz, performans optimizasyonu yapmıyorsunuz. Karar bu haliyle tartışılırsa tasarım toplantısı da daha dürüst geçer.
Asıl bedel: eksilen işaretçiler
Sadeleşmenin kendisi sorun değil. Sorun, sadeleştirme listesinde en başta gidenlerin tam da etkileşimi haber veren detaylar olması: çerçeve, altı çizgi, kabartma, kenar ikonu. Geriye kalan ekranda bir bölüm başlığıyla bir butonu ayıran tek özellik rengi oluyor.
Rengi tek sinyal olarak kullanmak iki yerden kırılıyor. Renk algısı herkeste aynı değil, ve kalibre edilmemiş bir ekranda ya da güneş altında bir telefonda açık gri ile orta gri birbirine karışıyor. Altı çizili bağlantıyı, yalnızca renkle ayrılan bağlantıdan belirgin şekilde daha güvenilir bulurum: altı çizgi bir şekil, kontrasttan ve renk algısından bağımsız olarak görünür. Renk ikinci sinyal olarak kalsın, birincil sinyal olmasın.
Aynı sebeple cursor: pointer bir işaretçi sayılmaz. Dokunmatik ekranda imleç de hover da yok; tıklanabilirliği yalnızca fareyle üzerine gelindiğinde ortaya çıkan bir efekte bağlarsanız trafiğinizin büyük kısmı o ipucunu hiç görmüyor demektir. Hover, var olan bir sinyali güçlendirir; sinyalin kendisi olamaz.
Tasarımı test etmenin kısa yolu
Mockup'ı geliştirici konsolundan filter: grayscale(1) ile gri tonlamaya çevirin, sonra ekrandan bir metre geri çekilip bakın. Hangi öğenin tıklanabilir olduğunu hâlâ söyleyebiliyorsanız arayüz ayakta. Söyleyemiyorsanız tasarımın tüm yükünü renge yıkmışsınız.
Gerçek kullanıcıyla yapılan kısa bir denemenin yerini hiçbir şey tutmuyor ama bu test beş saniye sürüyor ve sorunların çoğunu daha tasarım aşamasında yakalıyor. Şunu da ekleyin: sayfadaki her etkileşimli öğeyi klavyeyle sekmeyle gezin. Odak çerçevesini "çirkin duruyor" diye silen tema sayısı sandığınızdan fazla.
Tamamen flat nerede çalışır
Küçük tanıtım siteleri, tek sayfalık işler, içeriğin çoğunun okunmak için orada olduğu bloglar: buralarda tıklanabilir öğe sayısı az, kullanıcı da neyin ne olduğunu bir bakışta çözüyor. Flat burada gerçekten temiz duruyor.
Form, tablo, filtre, çok adımlı akış içeren arayüzlerde ise durum tersine dönüyor. Kullanıcı ekranda onlarca karar noktası arasında geziniyor ve her birinde "bu tıklanır mı" sorusuna harcanan yarım saniye toplanıyor. Bu tür ekranlarda gölgeyi, çerçeveyi, dolgu rengini geri koymak flat design'dan vazgeçmek değil; zaten vazgeçilmiş olduğunu kabul etmek.
Sektörün bu geri dönüşe flat 2.0 ya da semi-flat demesi büyük ölçüde isimlendirme meselesi. Yapılan iş, 2013'te silinen derinlik ipuçlarının bir kısmını daha ölçülü biçimde geri getirmek. Terimi kullanmak zorunda değilsiniz; hangi öğenin hangi sinyalle tıklanabilir olduğunu yazılı bir kuralla sabitlemek ve tüm sayfalarda ona uymak yeterli.