Neden Her Şeyi Aynı Anda Göstermemeliyiz?

Bir arayüz tasarlarken en sık yapılan hatalardan biri, kullanıcıya elimizdeki her şeyi aynı anda sunma isteğidir. Yeni bir özellik geldiğinde ekrana bir buton daha eklenir, sonuç olarak her şeyin “önemli” göründüğü ama hiçbir şeyin öncelikli olmadığı bir ekran çıkar ortaya.

Progressive Disclosure (“aşamalı açıklama”) tam bu noktada devreye giriyor: kullanıcıya ihtiyaç duyduğu bilgiyi ve aksiyonu, ihtiyaç duyduğu anda göstermek. Geri kalan her şey arka planda durur, istenince ortaya çıkar. Amaç bilgiyi saklamak değil, doğru zamanda sunmaktır — mesela bir ayarlar sayfasında gelişmiş seçenekleri “Gelişmiş Ayarlar” başlığı altına toplamak gibi.

Neden Her Şeyi Aynı Anda Göstermemeliyiz?

• Bilişsel yük: Her görünür öğe, kullanıcının işlemesi gereken bir seçimdir. 20 seçenekli bir form, 5 seçenekliden çok daha yorucudur.
• Karmaşık arayüzler: Her özelliği ana ekranda göstermeye çalışan ürünler, zamanla gürültülü hale gelir.
• Mobil kullanım: Ekran alanı sınırlıyken her şeyi göstermek pratik değildir.
• Bileşen yoğunluğu: Aynı anda görünür çok fazla öğe, hem kullanıcı hem tarayıcı için bir yüktür.

Frontend Açısından Progressive Disclosure

Günlük geliştirdiğimiz bileşenlerin çoğu bu prensibi zaten uyguluyor: dropdown menüler, accordion, modal, tooltip, “Show More”, hamburger menü, üç nokta aksiyon menüleri, gizlenen gelişmiş filtreler…

Teknik tarafta ise conditional rendering ve lazy loadingdevreye girer. Progressive Disclosure bir tasarım kararıdır (“ne zaman göstereceğiz”); conditional rendering ve lazy loading ise bu kararı hayata geçiren araçlardır (“nasıl göstereceğiz”).

Performans Tarafı

Progressive Disclosure bir performans optimizasyon tekniği değildir — öncelikle bir UX/UI prensibidir. Ama doğru uygulandığında dolaylı bir etkisi olur: bir bileşen conditional rendering ile DOM’a hiç eklenmiyorsa gereksiz render olmaz, aynı anda görünür node sayısı azaldıkça layout/paint maliyeti düşer, tıklanmayan bir accordion içindeki event listener’lar hiç tetiklenmez. Mobilde bu, daha kontrollü bir kaynak kullanımı anlamına gelir.

Yine de karıştırmamak gerek: lazy loading “ne zaman indirilecek”, code splitting “bundle nasıl bölünecek” sorusuna cevap verir. Progressive Disclosure bunların hangisini tetikleyeceğine karar veren üst katmandır, yerini almaz.

Bir Gözlem: Instagram’ın “Download” Seçeneği

Instagram’da gönderi indirme seçeneği, ana aksiyonlar arasında değil üç nokta menüsünün içinde. Bunu Progressive Disclosure mantığıyla okuyabiliriz: sık kullanılan aksiyonlar önde, az kullanılan aksiyon ikincil menüde. Bu sadece bir UX gözlemi — Instagram’ın bunu performans veya depolama sebebiyle yaptığına dair bir bilgim yok.

Ne Zaman Kullanılmamalı?

Her şeyi gizlemek de iyi UX değildir. Sık kullanılan bir aksiyonu üç nokta menüsüne gömmek her kullanımda ekstra tıklama maliyeti yaratır; kritik bir uyarıyı accordion içine saklamak kullanıcının onu hiç görmemesine sebep olabilir. Kural basit: sık kullanılan ve kritik olan görünür kalmalı, nadiren kullanılan aşamalı olarak açığa çıkarılmalı.

Pratik Öneriler

1. Gizlemeden önce sorun: “Kullanıcıların kaçı buna her seferinde ihtiyaç duyar?”
2. Conditional rendering’i gerçekten gereksiz DOM node’larını engellemek için kullanın.
3. Gizlenen özellikler arama kutusundan daha zor bulunur olmasın.
4. Performansı hedef değil, yan etki olarak görün.