Web Tasarımında Görsellik ve Kullanılabilirlik Nasıl Dengelenir?

Tasarım tartışmaları çoğu zaman yanlış bir ikilemle başlar: güzel mi olsun, kullanışlı mı? Bu soru kendi içinde bir varsayım taşır — sanki biri arttıkça diğeri azalıyormuş gibi.

Pratikte böyle çalışmaz. Bir arayüzün kullanılabilir olması, görsel kararların yokluğu değildir; görsel kararların kullanıcının işine hizmet edecek şekilde alınmasıdır. Zorluk, ikisi arasında seçim yapmakta değil, ikisini aynı sistemde tutmaktadır.

"Güzel ama kullanamıyorum" nereden çıkar?

Bir arayüz genellikle şu durumda güzel görünüp zor kullanılır hâle gelir: görsel kararlar, kullanıcının ne yapmaya çalıştığından bağımsız olarak alınmıştır.

Bunun tipik işaretleri tanıdıktır. Ana eylem, kompozisyonu bozmasın diye sayfanın görünmeyen bir köşesine taşınmıştır. Metin, daha "hafif" dursun diye okunamayacak kadar açık griye çekilmiştir. Bir form, simetrik görünsün diye mantıksal sırasından çıkarılmıştır.

Bu kararların her biri kendi içinde savunulabilir. Sorun, hiçbirinin "kullanıcı burada ne yapmaya çalışıyor?" sorusuna karşı test edilmemesidir. Estetik burada suçlu değildir; hedefsiz estetik suçludur.

Önce kullanıcının ne yapmaya çalıştığı

Bir ekranı değerlendirmeden önce cevaplanması gereken soru şudur: bu sayfaya gelen kişi ne yapmak istiyor ve biz ne olmasını istiyoruz?

Bu iki cevap her zaman aynı değildir; aynı olmadıklarında da bunu bilmek işe yarar. Bir fiyat sayfasına gelen kişi karşılaştırma yapmak ister, siz iletişime geçmesini istersiniz. İyi tasarım bu ikisini karşı karşıya getirmez — karşılaştırmayı kolaylaştırır, sonra iletişimi görünür kılar.

Hedefler yazıldığında görsel kararlar tartışılabilir hâle gelir. "Bu buton daha küçük olsun" bir zevk meselesidir. "Bu buton, kullanıcının bu sayfadaki birincil görevi değil, o yüzden ikincil biçimde duruyor" bir tasarım gerekçesidir.

Görsel hiyerarşi okunabilirliğin bir parçasıdır

Görsel hiyerarşi süslemenin değil, sıralamanın aracıdır. Bir ekranda her şey aynı anda öne çıkıyorsa, hiçbir şey öne çıkmıyor demektir.

Hiyerarşi yalnızca boyutla kurulmaz. Boşluk, konum, kontrast, ağırlık ve gruplama da aynı işi yapar — çoğu zaman daha sessizce. Bir başlığı büyütmek yerine etrafındaki boşluğu artırmak, aynı vurguyu daha az gürültüyle sağlayabilir.

Okunabilirlik ise hiyerarşinin tabanıdır. Satır uzunluğu, satır yüksekliği ve kontrast doğru değilse, hiyerarşi ne kadar iyi kurulursa kurulsun metin yorucu kalır. Düşük kontrastlı gri metin, "zarif" göründüğü için sıkça tercih edilir; ancak zarafet, okunamayan bir paragrafı telafi etmez.

Hareketin bir işi olmalı

Animasyonun kendisi ne iyidir ne kötüdür. Sorulması gereken, hareketin ne anlattığıdır.

İşe yarayan hareket genellikle bir ilişki kurar: bir panel açıldığında nereden geldiğini gösterir, bir öğe silindiğinde listenin nasıl kapandığını anlatır, bir geçiş sırasında kullanıcının dikkatini kaybetmesini engeller. Bu tür hareket, sayfayı süslemez; anlaşılır kılar.

İşe yaramayan hareket ise genellikle kendini gösterir: her bölümün aşağıdan yukarı süzülerek gelmesi, hiçbir şeyi açıklamaz. Kullanıcı içeriği okumak isterken beklemek zorunda kalır.

Bir de hareketin herkes için aynı olmadığını hatırlamak gerekir. prefers-reduced-motion tercihini açan kullanıcılar hareketi bir tercih olarak değil, bir ihtiyaç olarak kapatmış olabilir. Bu durumda içeriğin kaybolmaması, yalnızca hareketin durması gerekir.

Mobil ve klavye aynı tasarımın parçasıdır

Bir arayüz yalnızca masaüstünde, fareyle ve iyi bir bağlantıda denendiyse, henüz denenmemiş sayılır.

Mobilde dokunma hedefleri, tek elle erişim ve klavye açıldığında formun davranışı ayrı kararlar gerektirir. Klavyeyle gezinen bir kullanıcı içinse odak sırası ve görünür odak halkası, hover durumundan daha önemlidir — çünkü hover diye bir şey yoktur.

Bunlar "erişilebilirlik ekstraları" değildir. Aynı ürünün farklı kullanım koşullarıdır ve tasarım kararlarının bir kısmı yalnızca bu koşullarda görünür hâle gelir. Bu konuları ürün tasarımı çalışmalarımızda baştan ele alıyoruz, sonda düzeltilecek bir liste olarak değil.

Tasarım sistemi tartışmayı azaltır

Tutarlılık, her ekranda yeniden karar vermeyi bırakmakla gelir. Bir tasarım sistemi — token'lar, tipografi ölçeği, boşluk ritmi, bileşen davranışları — bu kararların bir kez alınıp tekrar kullanılmasını sağlar.

Sistemin faydası yalnızca görsel değildir. Bir ekip "bu butonun rengi ne olsun?" tartışmasını her seferinde yapmıyorsa, o enerjiyi "bu ekran doğru işi mi yapıyor?" sorusuna ayırabilir.

Sistem bir hapishane de değildir. İyi bir sistem, ne zaman dışına çıkıldığını görünür kılar; böylece istisna bilinçli bir karar olur, kaza değil.

Bir ekranı değerlendirirken

Aşağıdaki sorular, bir tasarımı gözden geçirirken kullanılabilecek sade bir çerçevedir. Amaç puan vermek değil, kararların gerekçelerini görünür kılmaktır.

Görsellik ve kullanılabilirlik arasında seçim yapmak zorunda kalıyorsanız, sorun genellikle ikisinin çatışmasında değil, hedefin yazılmamış olmasındadır.

Hedef netleştiğinde çoğu tasarım tartışması küçülür: geriye zevk meselesi olmayan, gerekçelendirilebilir kararlar kalır.