Mobil bir uygulamayı açtığınızda başparmağınızın tam altında, ekranı ne kadar kaydırırsanız kaydırın sizi sadakatle takip eden, dairesel ve canlı renkli bir buton fark ettiniz mi? İşte o buton, mobil arayüz tasarımının en karizmatik, en odaklanmış ve tabiri caizse en “baskın” oyuncusudur: Floating Action Button (FAB) yani Yüzen Aksiyon Butonu.

FAB, sıradan bir düğme değildir. O, uygulamanızın kalbidir; kullanıcının o ekranda yapabileceği en hayati, en birincil eylemin görsel temsilcisidir. Gelin, küresel tasarım arşivi Mobbin üzerindeki 2.000’den fazla gerçek dünya ekran örneğinin süzgecinden geçen bu dahi bileşeni tüm detayları, anatomisi, avantajları ve derin tasarım sırlarıyla keşfedelim.

Floating Action Button (FAB) Nedir? Ekranın Zirvedeki Gücü

Floating Action Button (FAB), bir ekranın en birincil ve en önemli eylemini temsil eden yüzen bir arayüz bileşenidir. Uygulamanın en kritik işlevine anında ve zahmetsizce erişim sağlamak için tasarlanmıştır.

Onu “Yüzen” Yapan Nedir? Teknik bir tabirle FAB, arayüzdeki en yüksek katman hiyerarşisine (maksimum z-index) sahiptir. Bu sayede, siz sayfayı aşağı yukarı kaydırsanız bile o, arkadaki tüm içeriklerin, kartların ve listelerin üzerinde adeta bir hayalet gibi kalıcı olarak (persistently) yüzmeye devam eder. Her an tetiklenmeye hazırdır.

Bir FAB’ın Anatomisi: Minimalist Yapı

Bir FAB, bilişsel yükü minimumda tutmak için olabildiğince yalın tasarlanır:

1. Kapsayıcı (Container): Genellikle dairesel olan, arkasındaki gölge efektiyle (elevation) 3 boyutlu bir derinlik hissi kazanan ve markanın ana rengini taşıyan gövde.
2. İkon: Butonun işlevini (Örn: Kalem, artı işareti, büyüteç) saniyeler içinde anlatan net simge.
3. Etiket (Label – Opsiyonel): İkonun tek başına yetersiz kalabileceği durumlarda yana eklenen kısa açıklama metni (Genişletilmiş FAB).

Ne Zaman Sahneye Sürülmeli? (Kullanım Alanları)

FAB, “yapıcı ve üretken” eylemlerin ev sahibidir. En popüler kullanım senaryoları şunlardır:

• İçerik Oluşturma ve Ekleme (Create & Add): Kullanıcının sıfırdan bir şey üretmesini tetikleyen anlar. Örneğin; bir not uygulamasında (Google Keep gibi) anında “Yeni Not” açmak, bir e-posta uygulamasında (Gmail gibi) “E-posta Yaz” ekranını tetiklemek veya bir galeri uygulamasında yeni bir fotoğraf eklemek.
• Harekete Geçirici Mesajlar (Call-to-Action): Sosyal medya uygulamalarında yeni bir durum/tweet paylaşmak veya mesajlaşma uygulamalarında (WhatsApp gibi) anında “Yeni Sohbet” başlatmak.
• Yapıcı Eylemler: Paylaşma (Share), favorilere ekleme (Favorite) gibi kullanıcı deneyimini zenginleştiren adımlar.

🚫 Ne Zaman Kesinlikle Kaçınmalısınız?

• Önemsiz ve İkincil Aksiyonlar: Kullanıcının nadiren ihtiyaç duyacağı küçük işlemler için asla FAB kullanmayın; standart bir buton tercih edin.
• Yıkıcı ve Tehlikeli Eylemler (Destructive Actions): Çöp kutusu (Silme), Hata düzeltme, acil durum uyarıları gibi geri dönüşü olmayan veya negatif his uyandıran aksiyonları asla ekranın üzerinde yüzdürmeyin. FAB her zaman pozitif ve üretken olmalıdır.

Tasarım Varyasyonları ve Konumlandırma Stratejileri

Mobbin’deki binlerce örnek, tasarımcıların FAB bileşenini ekran üzerinde şu 4 akıllı varyasyonla konumlandırdığını gösteriyor:

1. Sağ Alt Köşeye Hizalanmış FAB (En Popüler)

Dünyadaki insanların büyük çoğunluğu sağ elini kullanır. Akıllı telefonu tek elle tuttuğumuzda başparmağımızın en rahat ulaştığı yer sağ alt köşedir.

• Sadece İkonlu: Alanı maksimum korur.
• Sadece Metinli: Eylemi netleştirir.
• İkon + Metin (Hibrit): Görsel netliği zirveye çıkarır (Genişletilmiş FAB).

2. Orta Alt Köşeye Hizalanmış FAB (Kapsayıcı Yaklaşım)

Solak kullanıcıları “ayrıştırmayan”, ekranın tam ortasında duran nötr bir yaklaşımdır. Ancak en büyük dezavantajı, özellikle küçük ekranlı cihazlarda arkadaki ana içeriğin tam ortasını kapatabilme (bloklama) riskidir.

3. Özel Durum: Üst Orta Konumlandırma (Utility FAB)

Özellikle dinamik olarak sürekli yenilenen sosyal medya akışlarında (Twitter/X veya Instagram gibi) karşımıza çıkar. Kullanıcı aşağı kaydırırken yukarıda anında beliren “Yeni Gönderileri Gör” veya “Yukarı Çık” butonu bu sınıfa girer ve dinamik bir navigasyon konforu sunar.

4. Çift Aksiyonlu / Bölünmüş FAB (Split FAB)

Son dönemde yükselen harika bir trenddir. Ekranda birbirine tamamen eşit öneme sahip iki ana aksiyon varsa, FAB ikiye bölünür.

• Örnek 1 (Zillow, Depop): Kullanıcı ilanlar arasında gezinirken ekranın altında yan yana duran “Filtrele” ve “Sırala” ikiz FAB’ları.
• Örnek 2 (Airbnb): Harita ve liste görünümü arasında tek dokunuşla geçiş yapmayı sağlayan “Harita / Liste” yüzen butonu.

Avantajlar ve Dezavantajlar

Avantajları:

• Zahmetsiz Erişilebilirlik: Ergonomik olarak başparmağa en yakın bileşendir, tek elle kullanımı olağanüstü kolaylaştırır.
• Net Odaklanma: Kullanıcıya “Bu ekrandaki en önemli görev budur” mesajını başka hiçbir bileşenin yapamayacağı kadar net verir.
• Akıcı Deneyim: Sayfa kaydırılsa bile kaybolmadığı için kullanıcının işlem yapmak adına tekrar sayfanın en üstüne çıkma zahmetini ortadan kaldırır.

Dezavantajları ve Riskler:

• İçerik Körlüğü (Bloklama): Altında kalan metinleri, görselleri veya butonları kapatabilir. Kullanıcı arkadaki veriyi okumak istediğinde FAB bir engelleyiciye dönüşebilir.
• Görsel İstila (Afiş Körlüğü): Eğer ekranda zaten çok fazla hareketli eleman varsa, sürekli tepede duran bir FAB görsel gürültü yaratarak kullanıcıyı irite edebilir.

Kritik Fark: FAB mi, Standart Buton mu?

• Standart Buton (Button): Sayfanın doğal mizanpajı (layout) içinde, kendi bölümünde yaşar. Sayfa kaydırıldığında içerikle birlikte yukarı kayar ve ekrandan çıkar. Form göndermek veya sayfa değiştirmek gibi geniş bir yelpazedeki aksiyonlar için kullanılır.
• Floating Action Button (FAB): Sayfadan tamamen bağımsızdır, ekranın üzerinde adeta havada asılı kalır. Uygulamanın en hayati tek bir ana işlevine (Hızlı erişim kapısı olarak) hizmet eder.