Dijital bir dünyada kullanıcıya çok fazla seçenek sunmak bazen onları felç edebilir. Ancak bu seçenekleri şık, organize ve kompakt bir yapıda sunduğunuzda, kullanıcı deneyimi (UX) bir karmaşadan sanata dönüşür. İşte tam bu noktada, modern arayüz tasarımının en karizmatik ve işlevsel bileşenlerinden biri olan Segmented Control (Parçalı Kontrol) devreye girer.

Segmented Control Nedir?

Segmented Control, kullanıcının farklı görünümler arasında geçiş yapmasını veya belirli seçenekler arasından birini seçmesini sağlayan doğrusal bir düğmeler grubudur. Temel amacı içeriği organize etmektir.

Bu bileşeni bir “ray” (track) üzerine dizilmiş “parçalar” (segments) olarak düşünebilirsiniz. Eğer sadece seçenek belirlemek için kullanılıyorsa “Segmented Buttons”, sayfalar arası gezinme (navigasyon) amacı taşıyorsa “Segmented Switch” olarak da adlandırılır.

Ne Zaman ve Nerede Kullanılır?

Segmented Control, her eylemin birbiriyle doğrudan ilişkili olduğu ve kullanıcının anlık kararlar vermesi gereken durumlarda mükemmel çalışır:

1. Navigasyon (Gezinme): Uygulama içindeki ana görünümler arasında geçiş yapmak için kullanılır. Örneğin, bir haber uygulamasının en üstünde “Gündem”, “Spor” ve “Magazin” kategorileri arasında hızla geçiş yapmanızı sağlar.
2. Ayarlar ve Tercihler: Bir fotoğraf düzenleme uygulamasında “Kalem”, “Fırça” veya “Silgi” gibi araçlar arasından seçim yaparken idealdir.
3. Filtreleme ve Sıralama: E-ticaret sitelerinde ürünleri “Fiyat”, “Popülerlik” veya “Yeni Gelenler”e göre anında yeniden dizmek için kullanılır.

Tasarımın Anatomisi ve Kritik Detaylar

Mobbin üzerindeki 2.600’den fazla gerçek dünya örneği, Segmented Control’ün şu parçalardan oluştuğunu gösteriyor:

• Segment (Parça): Seçilebilir her bir birim.
• İkon (Opsiyonel): Görsel netliği artırmak için metnin yanına veya yerine kullanılır.
• Track (Ray): Tüm parçaları bir arada tutan kapsayıcı zemin.
• Label (Etiket): Parçanın neyi temsil ettiğini belirten metin.

Tasarım Varyasyonları: Estetik ve İşlevsellik

• Köşe Kavisleri (Corner Radius): Tasarım sisteminize göre tamamen dikdörtgen veya dairesel (oval) köşeler seçilebilir.
• Hap Şekli (Pill-shaped): Daha modern ve yumuşak bir görünüm için uçları tamamen yuvarlatılmış yapılar tercih edilebilir.
• Alt Alta Metin Etiketleri (Stacked Labels): Eğer tek kelime yetmiyorsa ve daha fazla bağlam gerekiyorsa, parçaların içine alt alta metinler eklenebilir. Bu, dikey alanı biraz artırsa da netliği en üst düzeye çıkarır.
• Sadece İkon: Alanın çok dar olduğu yerlerde sadece net ikonlar kullanarak bilişsel yükü azaltabilirsiniz. Ancak ikonların evrensel olarak anlaşılır olması kritiktir.

Avantajlar ve Dezavantajlar

Neden Seçmelisiniz? (Avantajlar)

• Hızlı Geçiş: Seçim yapıldığı anda içerik veya görünüm anında değişir; kullanıcı beklemez.
• Eşit Önem: Tüm seçenekler aynı anda görünür ve hiçbirinin diğerine hiyerarşik bir üstünlüğü yoktur.
• Net Görsel Geri Bildirim: Hangi seçeneğin aktif olduğu, ray üzerindeki vurgulu alan sayesinde anında anlaşılır.

Ne Zaman Kaçınmalısınız? (Dezavantajlar ve Riskler)

• Çok Fazla Seçenek: Eğer 4-5’ten fazla seçeneğiniz varsa, ekranı boğmamak için Dropdown (Açılır Menü) kullanmalısınız.
• Hiyerarşik Karmaşa: Bazı seçenekler diğerlerinden daha önemliyse, bu bileşen uygun değildir; çünkü tüm parçalar eşit ağırlıktadır.
• İkili Olmayan Durumlar: Sadece “Aç/Kapat” gibi bir durum varsa basit bir Switch daha iyidir.

Kritik Farklar: Switch vs. Tab vs. Segmented Control

Tasarımda sıkça karıştırılan bu üçlü arasındaki farkları bilmek, profesyonel bir UI/UX için şarttır:

1. Segmented Control vs. Switch: Switch (Anahtar), sadece iki seçenekli (genelde açık/kapalı) durumlar içindir ve handle’ı kaydırılarak çalışır. Segmented control ise pasif olan parçaya dokunularak aktif edilir ve ikiden fazla seçenek barındırabilir.
2. Segmented Control vs. Tab: Her ikisi de görünüm değiştirebilir. Ancak fark yapıdadır: Segmented control’deki tüm öğeler aynı ray (track) üzerinde birbirine bağlıdır. Eğer öğeler birbirinden kopuksa ve bağımsız kutucuklar halindeyse, onlar Tab (Sekme) bileşenidir.