UI yoğunluğu (Density) ne anlama gelir ve nasıl tasarlanır?
(matthewstrom.com)Arayüz yoğunluğu düşüyor
- Günümüz web siteleri ve uygulamaları 2000’lerle karşılaştırıldığında, yazılımların daha fazla yayılmış olma eğilimini görmezden gelmek zor.
- UI yoğunluğu nedir?
- UI yoğunluğu, arayüzün belirli bir andaki görünümü değildir.
- Arayüzün birden çok an boyunca sunduğu bilgi miktarıyla ilgilidir.
- Tasarım kararlarının bu anları nasıl birbirine bağladığıyla ve bunun yazılımın sunduğu değerle nasıl ilişkili olduğuyla ilgilidir.
Görsel yoğunluk (Visual density)
- Yoğunluk denince önce gözle görülene odaklanırız.
- Görsel yoğunluk, verilen bir alanda ne kadar çok şeyi görebildiğimiz anlamına gelir.
- Görsel olarak yoğun yazılım arayüzleri ekranda çok sayıda öğe gösterir.
- Görsel olarak düşük yoğunluklu arayüzler ekranda az sayıda öğe gösterir.
- Örnek: Bloomberg Terminal
- Bloomberg Terminal, görsel yoğunluğun temsilî bir örneğidir.
- Tek bir ekranda başlıca piyasa endekslerinin sparklineları, ayrıntılı işlem hacmi dağılımı, onlarca satır ve sütun içeren tablolar, son haber başlıkları, klavye kısayolları ve hızlı işlem UI işaretleri gösterilir.
- Örnek: Craigslist ve McMaster-Carr
- Craigslist, yüzlerce basit bağlantı ile arama ve filtre arayüzü nedeniyle görsel olarak yoğundur.
- McMaster-Carr web sitesi de benzer tasarım öğelerini paylaşır ve küçük bir alanda çok sayıda ürün varyasyonunun ayrıntılarını listeler.
- Yoğunluk algısının sezgisel yargısı
- Bu web sitelerinin yoğunluğuna dair fikirler yalnızca birkaç saniyede oluşur.
- Bu yargılar bilinçaltında hızlı ve sezgisel biçimde verilir.
- Ancak bu hızlı yargılar önyargılı ve güvenilmez olabilir.
- Görsel yoğunluk örnek görselleri
- İki dikdörtgen örneği:
- Sol: Rastgele dizilmiş çok sayıda nokta
- Sağ: Aynı sayıdaki noktaların satır ve sütunlara düzenli biçimde yerleştirilmiş hâli
- Çoğu insan sağdaki görseli daha yoğun hisseder.
- Başka bir örnek görsel:
- Sol: Satır ve sütunlara düzenli yerleştirilmiş çok sayıda nokta
- Sağ: İki gruba ayrılmış ve düzenli yerleştirilmiş aynı sayıdaki noktalar
- Nokta sayısı aynı olsa bile, gruplara ayırmak yoğunluk algımızı değiştirir.
- İki dikdörtgen örneği:
- Görsel yoğunluğun belirsizliği
- Tasarımda tamamen nesnel olmak mümkün değildir.
- Ancak yoğunluk hakkında konuşabilmek için tutarlı, anlamlı ve faydalı tanımları hedeflemeliyiz.
Bilgi yoğunluğu (Information density)
- Edward Tufte, The Visual Display of Quantitative Information kitabında grafik ve çizelge tasarımını ele alır.
Her grafikteki mürekkebin bir nedeni olmalıdır ve bu neden yeni bilgi sunmak olmalıdır.
- Data-ink
- Data-ink, belirli bir görselleştirmedeki faydalı kısmı ifade eder.
- Veriye ait olmayan görsel öğeler kaldırılmalıdır.
- Data-ink, grafiğin kapladığı alandan farklıdır. Bu, bilgi yoğunluğuyla ilgilidir.
- Bilgi yoğunluğunun hesaplanması
- Bilgi yoğunluğu, bir grafikteki data-ink miktarının grafiği basmak için gereken toplam mürekkep miktarına bölünmesiyle hesaplanabilir.
- Data-ink tanımı öznel olabilir, ancak önemli olan oranı olabildiğince 1’e yaklaştırmaktır.
- Oranı artırma yolları:
- Data-ink eklemek: Ek faydalı veriler sunmak.
- Veri dışı mürekkebi kaldırmak: Veriyi aktarmayan grafik parçalarını silmek.
- Örnek
- Fazla mürekkep içeren bir grafik örneği ile az mürekkeple çok bilgi ileten geliştirilmiş bir örnek.
- Bilgi yoğunluğunun bir üst sınırı vardır; çok fazla mürekkep kaldırabilir veya çok fazla bilgi ekleyebilirsiniz.
- Hedef kitle de önemlidir: İleri düzey kullanıcılar yüksek yoğunluğu, ilkokul öğrencileri ise düşük yoğunluğu tercih edebilir.
- Bilgi yoğunluğu ile görsel yoğunluk arasındaki ilişki
- Bilgi yoğunluğu arttıkça, görsel olarak daha yoğun görünme eğilimi vardır.
- Örnek: E.J. Marey’nin 1885 tarihli tren tarifesi görselleştirmesi. Varış ve kalkış saatleri küçük ve yoğun bir alanda gösterilir.
- Tufte, veri yoğunluğunu ve verinin makul ölçüde en üst düzeye çıkarılmasını savunur.
- Shrink Principle
- Grafikler büyük ölçüde küçültülebilir.
- Bilgi yoğunluğu grafik ve çizelgeler için faydalıdır.
- Peki arayüzlere de uygulanabilir mi?
- Arayüzlerde bilgi yoğunluğunun uygulanması
- Bilgi, ekranlara uygulanabilir.
- Arayüzün her parçası mümkün olduğunca çok bilgi göstermelidir.
- Mürekkebi piksel olarak düşünmek cazip gelse de, arayüzlerde öğeler arasındaki ilişkiyi anlamaya yardımcı olan ayırıcı çizgiler, yapısal öğeler ve işaretler gerekir.
- Shrink Principle’ı izleyerek tüm boşlukları kaldırma yönünde bir cazibe vardır.
- Ancak bazı boşluklar, görsel öğeler kadar önemli anlam taşır. Gölgelerin, gradyanların ve renk vurgularının rolü de hesaba katılmalıdır.
- Bilgi yoğunluğu faydalı bir kavramdır, ancak büyük resmin yalnızca bir parçasıdır.
- Arayüzdeki tüm tasarım kararlarını daha nesnel ve nicel olarak anlayabilmenin yollarını aramalıyız.
Tasarım yoğunluğu (Design Density)
- Tasarım kararları açısından yoğunluğu tanımlamadaki ilk zorluk, neyin karar sayıldığını belirlemektir.
- Tasarım kararlarını anlamak
- UI, UX ve ürün tasarımında bilgi aktarmak için bilinçli ya da bilinçsiz birçok karar veririz.
- Neden belirli bir seçimin anlam taşıdığını, hangi seçimin yalnızca estetik olduğunu ve hangisinin gerçekten önemli olduğunu sorgulamak gerekir.
- Gestalt ilkeleri
-
- yüzyıl Alman psikologlarının insanların biçim ve desenleri nasıl anladığını inceleyen çalışmalarıdır.
- Gestalt terimi “biçim” anlamına gelir.
- Bu araştırmalarda bazı temel tasarım yasaları keşfedilmiştir:
- Yakınlık (Proximity): Birbirine yakın olan şeyleri tek bir grup olarak algılarız.
- Benzerlik (Similarity): Şekil, boyut, renk vb. açısından benzer nesneler birbirleriyle ilişkili görünür.
- Kapalılık (Closure): Tasarımdaki boşlukları tamamlayarak bütün formu algılarız.
- Simetri (Symmetry): Simetrik biçimleri merkez noktası etrafında gruplarız.
- Ortak kader (Common Fate): Aynı şekilde hareket eden nesneleri birlikte gruplarız.
- Süreklilik (Continuity): Üst üste binen nesneleri ayrı varlıklar olarak algılarız.
- Geçmiş deneyim (Past Experience): Tanıdık biçim ve desenleri yabancı durumlarda da tanırız.
- Şekil-zemin ilişkisi (Figure-Ground Relationship): 2D bir görüntüde ön plan ve arka plan öğelerini ayırt ederiz.
-
- Gestalt ilkelerinin UI tasarımına etkisi
- Benzerlik ilkesi sayesinde aynı boyut, yazı tipi ve renkteki metinler aynı amacı gösterir.
- Yakınlık ilkesi, bir grafik başlığa yakın olduğunda başlığın grafiği açıkladığını gösterir.
- Geçmiş deneyim ve şekil-zemin ilkeleri sayesinde kullanıcı bir toggle switch’in nasıl çalıştığını anında anlayabilir.
- Tasarım yoğunluğu kavramı
- Piksele odaklanmak yerine, anlamı bilinçli olarak aktarmak için Gestalt ilkelerinden yararlanan tasarım kararlarını düşünürüz.
- Tufte’nin data-ink oranı grafikte gereken mürekkep ile toplam mürekkebi karşılaştırdığı gibi, tasarım yoğunluğu da gerekli tasarım kararları ile toplam kararların oranını karşılaştırır.
- Öznel olsa da, kullanıcı arayüzlerinde veri ya da mürekkep miktarını saymaktan çok tasarım kararlarını saymak daha faydalıdır.
- Tasarım yoğunluğunun sınırları
- Kullanıcı arayüzleri görevler, keyif, zaman geçirme, anlayış üretme ve kişisel bağ kurmayı kolaylaştırma gibi amaçlarla vardır.
- Kullanıcının yolculuğu boyunca yaptığı tüm eylemler hesaba katılmalıdır.
- Yoğunluk; bileşenlerin, düzenlerin ve ekranların ötesinde, kullanıcının zaman ve mekân içinde yaptığı tüm eylemleri dikkate almalıdır.
Zamansal yoğunluk
- Belirli bir sürede kullanıcının yapabildiği iş miktarı zamansal yoğunluğu belirler.
- Yükleme süresi, zamansal yoğunluğun en büyük etkenidir. Arayüz ne kadar hızlı tepki verir ve yeni sayfaları ya da ekranları ne kadar hızlı yüklerse, UI o kadar yoğun olur.
- Bloomberg Terminal verileri neredeyse anında yüklediği için zamansal yoğunluğu çok yüksektir.
- Zamansal yoğunluğu artırma yolları
- Yükleme sürelerini mümkün olduğunca azaltarak zamansal yoğunluğu artırabiliriz.
- Ancak tüm yükleme sürelerini azaltmak mümkün değildir. Örneğin, kullanıcının internet bağlantı hızını veya CPU hızını değiştiremeyiz.
- Bazı işler (dosya yükleme, müşteri desteği yanıtı bekleme, ödeme işleme vb.) karmaşık sistemler ve öngörülemeyen değişkenlerle ilgilidir.
- Zaman algısını değiştirme yolları
- 100 milisaniyenin altında: İki eylem arasındaki süre 100 milisaniyenin altındaysa, bunlar eşzamanlı olmuş gibi hissedilir. Bu durumda animasyonlar uygulamayı daha yavaş hissettirebilir.
- 100 milisaniye ile 1 saniye arası: İki eylem arasındaki bağ kopmaya başlar. Animasyonlar ve geçiş efektleri bu algısal boşluğu doldurabilir.
- 1 saniye ile 10 saniye arası: Yalnızca animasyon yeterli değildir. 10 saniye içinde kullanıcının sayfayı terk etme olasılığı yükselir. Bu durumda sistemin normal çalıştığını göstermek için belirsiz yükleme göstergeleri kullanılmalıdır.
- 10 saniye ile 1 dakika arası: Belirsiz yükleme göstergeleri 10 saniyeden uzun sürdüğünde durağan hissedilmeye başlar. Bu durumda kalan süreyi açıkça göstermek için net bir yükleme göstergesi (ör. ilerleme çubuğu) kullanılmalıdır.
- 1 dakikadan uzun: Kullanıcının sayfadan ayrılmasına veya başka işler yapmasına izin verilmelidir. 1 dakikadan uzun süre hiçbir şey yapmamak hayal kırıklığı yaratabilir. Uzun süreçlerde hata olasılığı da yüksektir.
- Zaman ve mekânın yoğunluğu
- UI yoğunluğu yalnızca bir araçtır. UI’ın değeri görünüşünde değil, ulaştırabildiği sonuçlardadır.
- Yoğunluk, mümkün olan en az zaman, alan, piksel ve mürekkeple mümkün olan en fazla değeri sunmaktır.
Değer yoğunluğu (Density in Value)
- Değer yoğunluğu, kullanıcının elde ettiği sonucun değeriyle ilgilidir.
- Örnek: Uzun bir formu küçük parçalara ayırıp bir sihirbaz tipi arayüz olarak düzenlemek daha iyidir. Çünkü kısmen doldurulmuş bir formun değeri yoktur.
- Tüm soruları tek bir sayfaya koymak görsel olarak yoğun görünebilir, ancak doldurması uzun sürerse birçok kullanıcı formu göndermeyecektir.
- Form örneği
- Birden fazla bölüme ayrılmış, hataları ve çözüm yollarını açıkça gösteren bir form.
- Hataları azaltmak ve kullanıcının formu sonuna kadar doldurmasını sağlamak, tasarımda daha fazla alan ve zaman gerektirebilir.
- Ancak görsel ve zamansal yoğunluktaki bu fedakârlık sonucu daha değerli hâle getiriyorsa, toplam değer yoğunluğu artar.
- Değer yoğunluğunu artırmak
- Formu daha küçük, daha hızlı yüklenen ve hataları azaltan bir yapıya getirerek görsel ve zamansal yoğunluğu artırabilirsiniz.
- Bu, kullanıcının değerini ya da işletmenin değerini azaltmıyorsa toplam yoğunluk artar.
- Tufte’nin yaklaşımını izleyerek değer yoğunluğunu mümkün olduğunca artırmaya çalışmalıyız.
- Optimizasyon problemi
- Bir optimizasyon problemini çözmek paradoksal sonuçlar doğurabilir.
- İnternetin ilk dönemlerinde Craigslist gibi şirketler bilgiyi derleyip sayfa bağlantıları olarak göstererek değer yoğunluğunu artırdı.
- Yahoo ve Altavista bilgiyi aranabilir hâle getirdi, ancak yine de derlemeye önem verdi.
- Google ise farklı bir yaklaşım benimsedi ve internetin bağlantı zincirlerinden elde edilen bilgiyi arama kutusuna taşıdı.
- Bilgi kendiliğinden derlenmişti; kullanıcının ihtiyaç duyduğu şey ise tek bir metin girişiyle tüm web’e erişmekti.
- Google ve Yahoo’nun yaklaşımı
- Google’ın ilk ekranı (2001) ile 2024 ekranı karşılaştırıldığında görsel yoğunluk düşük olsa da değer yoğunluğu çok yüksektir.
- Sonuç: Google’ın değeri 2004’te $23B iken bugün $2T’nin üzerine çıktı. Yahoo ise 2000’de $125B iken bugün $4.8B’ye geriledi.
- Birçok durumda değer yoğunluğu, görsel yoğunluktan daha önemlidir.
- Kullanıcının elde ettiği değeri en üst düzeye çıkarmak için tasarım ve işlevi optimize etmek önemlidir.
Sonuç
- UI yoğunluğunu dikkate alan tasarım, arayüzün görsel yönlerinin ötesine geçmelidir.
- Ekranda gösterdiğimiz her bilgiyle birlikte aldığımız tüm açık ve örtük tasarım kararlarını kapsar.
- Kullanıcının yazılımdan değer elde etmek için harcadığı tüm eylemleri ve zamanı da içermelidir.
- UI yoğunluğunun somut tanımı
- UI yoğunluğu = kullanıcının arayüzden elde ettiği değer / arayüzün kapladığı zaman ve alan
- Önemli unsurlar
- Hız
- Kullanılabilirlik
- Tutarlılık
- Öngörülebilirlik
- Bilginin zenginliği
- İşlevsellik
- Başarılı arayüzlerin nedeni: Tüm bu unsurlar dikkate alındığında, bazı arayüzlerin neden başarılı olurken bazılarının başarısız olduğunu anlayabiliriz.
- Tasarım hedefi
- Yoğunluğu dikkate alan tasarım sayesinde insanların yaptığımız yazılımdan daha fazla değer elde etmesini sağlamalıyız.
1 yorum
Hacker News görüşü
Hacker News yorumları derleme özeti
Restoran menülerinin fiziksel biçiminin mobil site menülerinden daha iyi olmasının nedeni
Biçimden çok işleve odaklanan verinin önemi
Zamansal yoğunluk kavramı
Mobil arayüzlerin seyrek olmasının nedenleri
Arayüzlerde artan seyreklik eleştirisi
Karmaşık arayüzler ve trend sorunu
Geleneksel arayüzlerin avantajları
Bilgi yoğunluğundaki dengesizlik
Mobil arayüzlerin sorunları
Yoğunluğu yetersiz arayüz örneği