Rakamlar Doğruyken Arayüz Neden Hâlâ Yanlış Görünür?

Bir arayüz geometri sınavı değil

Tasarım araçları bizi temiz sayılarla düşünmeye alıştırıyor. 8 piksel grid, eşit padding, ortalanmış katmanlar ve tutarlı stroke değerleri çok faydalı çünkü tasarıma bir sistem kazandırıyor. Bunlar olmadan bir ürün kısa sürede dağılabilir. Sorun, bu sayıları başlangıç noktası yerine son cevap gibi görmeye başladığımızda çıkıyor. Kullanıcı ekranda bounding box görmüyor. Şekilleri, kontrastı, boşluğu, metni, yönü ve görsel ağırlığı aynı anda görüyor. Büyük ve koyu bir daire, ikisi de 24 x 24 piksel alan içinde olsa bile ince çizgili bir kareden daha ağır hissedebilir. Bir üçgen koordinatlara göre tam merkezde olabilir ama kütlesi kare gibi dağılmadığı için gözümüze hafifçe kaymış görünebilir.

Geometrik merkez ile optik merkez aynı şey değil

Bunu en kolay play ikonunda görebiliriz. Üçgeni dairesel bir butonun tam matematiksel merkezine koyduğunda çoğu zaman biraz sola kaçmış gibi görünür. Birkaç piksel sağa aldığında ise artık koordinatlar eşit değildir ama ikon daha ortalanmış hissedilir. Optik düzeltme dediğimiz şey tam olarak bu: ölçüyü biraz değiştirip algıyı dengelemek. Apple’ın SF Symbols rehberi bunun gerçek ürünlerde kullanılan güzel bir örneği. Apple, özel sembollerin sistemle aynı optik ağırlığa, hizaya ve konuma sahip olmasını istiyor. Hatta bazı sembolleri yatayda daha iyi hizalamak için negatif yan boşluklar tanımlamaya izin veriyor. Yani tutarlı bir ikon sistemi kurmak, her şekli aynı görünür alana zorlamak anlamına gelmiyor; bazen tutarlılık küçük ve kontrollü istisnalar gerektiriyor.

Eşit boşluk her zaman eşit görünmez

Spacing tarafında da aynı sorun var. Bir kareyi, daireyi ve üçgeni yan yana koyup bounding box'ları arasında tam 16 piksel bıraktığımızı düşün. Ölçüler kusursuz ama boşluklar aynı görünmeyebilir. Üçgen yanındaki nesneye yaklaşırken daraldığı için arada daha fazla boşluk varmış hissi verir. Daire de köşeleri olmadığı için kareye göre çevresinde daha fazla hava bırakır. Bu yüzden Figma’daki kırmızı ölçü etiketlerine tek başına güvenmemeye çalışıyorum. Önce spacing sistemini kullanarak düzeni kuruyorum. Sonra ölçüleri gizleyip sıranın ritmine bir bütün olarak bakıyorum. Bir boşluk sürekli gözüme takılıyorsa, sırf sistem 16 dedi diye onu korumak yerine küçük bir optik düzeltme yapmak bazen daha doğru sonuç veriyor.

Metin ve ikon aynı şekilde ortalanmak istemez

Butonlarda ve navigasyon elemanlarında bu fark daha da belirginleşiyor. Bir ikon 20 piksel yüksekliğinde olabilir, yanındaki yazı da benzer bir kutuya sığabilir; fakat bu iki kutuyu ortalamak ikon ile metnin doğal biçimde yan yana duracağını garanti etmez. Harflerin baseline'ı, yukarı uzanan bölümleri, aşağı sarkan karakterleri ve kendi iç boşlukları var. İkonun silüeti ise tamamen farklı çalışıyor. Apple, SF Symbols ile metni yan yana kullanırken sembolü basitçe kutuya göre ortalamak yerine baseline üzerinden hizalamayı öneriyor. Aynı fikir SF Symbols kullanmadığımız durumlarda da işe yarıyor. İkon metnin yanında fazla yukarıda, aşağıda veya kopuk görünüyorsa önce görsel ilişkiye bakmak lazım. Koordinatlar aynı diye hizalamanın otomatik olarak doğru olduğunu varsaymak kolay ama göz çoğu zaman başka bir şey söylüyor.

Aynı stroke kalınlığı yine de aynı ağırlıkta görünmeyebilir

Stroke değeri de olduğundan daha objektif görünen sayılardan biri. Bir ikon setindeki her ikonda 2 piksel stroke kullanabilirsin ama set yine de tutarsız hissedebilir. Uzun bir çapraz çizgi kısa bir dikey çizgiden daha fazla dikkat çekebilir. İçinde çok sayıda çizgi olan yoğun bir ikon, basit bir daireden daha koyu görünür; dolu bir şekil de aynı kutudaki outline ikonun yanında çok daha ağır kalabilir. İyi ikon kütüphanelerinin ölçülerine bakmadan bile tutarlı hissettirmesinin nedenlerinden biri bu. Örneğin Tabler Icons, outline ikonlarını 24 x 24 grid ve 2 piksel stroke üzerine kuruyor. Bu güçlü bir başlangıç sistemi sağlıyor fakat grid ve stroke kuralı, ikonlara set olarak bakma ihtiyacını ortadan kaldırmıyor. Son test her zaman ikonların gerçekten kullanılacağı boyutta birbirine ait görünüp görünmediği.

Görünen boyut ile dokunma alanı aynı şey değil

Görsel denge ile kullanılabilirlik arasında da önemli bir ayrım var. Küçük bir ikon butonu 28 veya 32 piksel olduğunda daha temiz görünebilir ama etrafındaki tıklanabilir alan daha büyük tutulabilir. Apple’ın arayüz rehberinde dokunmatik kontroller için en az 44 x 44 point hedef alanı öneriliyor. Bu, ekranda gördüğümüz her ikonun dev bir kareye dönüşmesi gerektiği anlamına gelmiyor. Bu iki katmanı ayırmak birçok tasarım problemini çözüyor. Görünen şekil hafif kalabilir ve çevresindeki arayüzle güzel hizalanabilir; görünmeyen hit area ise parmağa yeterli alan sağlar. Aynı yaklaşım metin linklerinde, kapatma ikonlarında ve kompakt kontrollerde de kullanılabilir. Gözün ihtiyaç duyduğu boşluk ile elin ihtiyaç duyduğu boşluk bağlantılı ama her zaman aynı ölçü değildir.

Peki grid ne zaman bozulmalı?

Bütün bunlar grid, token veya spacing sistemlerinin gereksiz olduğu anlamına gelmiyor. Tam tersine, tasarım sistemi ortak bir dil oluşturuyor ve yüzlerce rastgele karar vermemizi engelliyor. Her tasarımcı bir şey gözüne daha iyi göründüğü için elemanları üçer piksel oynatmaya başlarsa ürün çok hızlı biçimde tutarsızlaşır. Optik düzeltme, güçlü bir sistemin üzerine eklenen küçük ve bilinçli bir istisna olduğunda işe yarıyor. Benim uyguladığım basit kural şu: önce ölç, sonra bak. İlk olarak grid, component kuralları ve tanımlanmış spacing değerleriyle başlıyorum. Sonra kılavuzları kapatıp tasarımı biraz uzaktan inceliyorum ve hiyerarşi hâlâ dengeli mi diye bakıyorum. Gerçek kullanım boyutunda kontrol etmek de önemli çünkü yüzde 400 zoom'da çok mantıklı görünen iki piksellik bir düzeltme, gerçek ekranda tamamen gereksiz olabilir.

Göz de ölçümün bir parçası

UI tasarımının güzel tarafı, hassasiyet ile algının birbirinin düşmanı olmaması. İkisine de ihtiyacımız var. Matematik tekrar edilebilirlik sağlıyor, mühendislik sınırları belirliyor, görsel karar ise şekillerin kutular gibi davranmadığı yerleri çözmemize yardım ediyor. Bu yüzden doğru yaklaşım “sayılara güvenme” değil, “sayıların göremediği şeyi de fark et” olabilir. Bütün ölçüleri kusursuz olan bir arayüz yine de hafifçe yanlış görünebilir. Görsel olarak dengeli bir arayüzde ise bazı değerler tam olarak eşit olmayabilir. Bu sistemin bozulduğu anlamına gelmez. Çoğu zaman birinin bounding box'ların ötesine bakıp insanın gerçekten ne göreceğini düşünmüş olduğu anlamına gelir.