Okuma Süresi: 5 dakika

Mobil uygulama tasarımında, bir işleme odaklanmış kullanıcıyı boğmadan ona seçenekler sunmak büyük bir ustalık gerektirir. Kullanıcının yaptığı bir eylemle ilgili hızlıca karar vermesini sağlayan, ekranın üzerinde nazikçe süzülen o menü yapısına tasarım dünyasında Action Sheet (Eylem Çizelgesi) diyoruz.

Aslen iOS işletim sistemine özgü bir bileşen olarak doğan Action Sheet, sunduğu pratiklik ve şıklık sayesinde bugün tüm dijital platformların vazgeçilmez bir tasarım kalıbı haline geldi.


Action Sheet Nedir?

Action Sheet, bir eylemle ilgili sunulan seçenekleri veya kararları içeren bir menü stilidir. Kullanıcının bir öğeye tıkladığında veya bir işlemi başlattığında, mevcut ekranın üzerinde beliren bir katman (overlay) olarak çalışır.

Kritik Fark: Action Sheet’i sıkça karıştırılan “Bottom Sheet”ten ayıran en belirgin özellik, ekranın kenarlarına (alt, sağ, sol) yapışık olmamasıdır. Action Sheet, ekranın üzerinde bağımsız bir kapsayıcı gibi yüzer.


Ne Zaman Kullanmalı? (Hızlı Aksiyonun Gücü)

Action Sheet kullanımı, kullanıcıyı karmaşadan kurtarıp sonuca odaklamak istediğinizde mükemmel sonuçlar verir:

  • Hızlı Eylemler: Paylaşma, silme veya kopyalama gibi anlık görevler için idealdir.
  • Az Sayıda Seçenek: Kullanıcının bilişsel yükünü azaltmak için 3 ile 5 arası seçenek sunulduğunda en verimli halindedir.
  • Bağlamsal Seçimler: Bir mesaja veya fotoğrafa dokunulduğunda “Yanıtla”, “İlet” veya “Düzenle” gibi o öğeye özel seçenekleri göstermek için kullanılır.

Ne Zaman Kaçınmalı?

  • Karmaşık Etkileşimler: Çok adımlı veya detaylı veri girişi gerektiren işlemler için Action Sheet uygun değildir.
  • Seçenek Kalabalığı: Eğer 5’ten fazla seçeneğiniz varsa, kullanıcı seçenekleri tararken yorulabilir. Bu durumda daha kapsamlı menüler düşünülmelidir.

Action Sheet’in Anatomisi: Bir Bileşeni Tanıyalım

Başarılı bir Action Sheet şu parçalardan oluşur:

  1. Başlık Etiketi (Label): Kullanıcıya ne yapması gerektiğini söyleyen isteğe bağlı başlık (Örn: “Fotoğrafı Seç”).
  2. Eylem Seçenekleri: Tıklanabilir butonlar dizisi.
  3. Kapsayıcı (Container): Tüm seçenekleri bir arada tutan gövde.
  4. İptal Butonu: İşlemden vazgeçmeyi sağlayan belirgin düğme.

Tasarım Varyasyonları ve Kritik Detaylar

Mobbin üzerindeki 200’den fazla gerçek dünya örneği, bu bileşenin sadece bir liste olmadığını kanıtlıyor:

1. Yıkıcı Eylemler İçin “Kırmızı” Uyarısı

Tasarım dünyasında yazılı olmayan bir kural vardır: Eğer bir işlem geri alınamazsa (Silme, Engelleme, Raporlama), o işlemin metni Kırmızı renkte olur. Bu, kullanıcının yanlışlıkla dokunmasını engelleyen görsel bir “Dur!” işaretidir.

2. Başlık Etiketleriyle Bağlam Sunma

Bazen sadece butonlar yetmez. “Bu indirme cihazınızdan kalıcı olarak silinecek” gibi bir başlık etiketi eklemek, kullanıcının yaptığı işlemin ciddiyetini anlamasına yardımcı olur.

3. İptal Butonunun Farklı Yüzleri

Action Sheet’lerin altında genellikle bir “İptal” butonu olur. Ancak uygulamalar markalarına göre bunu “Kapat”, “Bitti” veya “Vazgeç” şeklinde de adlandırabilir. Bazı tasarımlarda ise fiziksel bir buton yoktur; kullanıcı arka plana dokunarak menüden çıkabilir.

4. Özel (Custom) ve Markalı Tasarımlar

iOS’un standart görünümü çok popüler olsa da, birçok uygulama (Örn: Foodpanda, Noom) bu yapıyı kendi marka renkleri ve ikonlarıyla harmanlayarak “Özel Tasarım” (Custom UI) oluşturur.


Avantajlar ve Dezavantajlar

Neden Seçmelisiniz? (Avantajlar)

  • Erişilebilirlik: Ekranın alt kısmına yakın olduğu için mobil cihazlarda tek elle kullanımı çok kolaydır.
  • Hız: Sayfa değiştirmeden işlem yapma imkanı tanır, kullanıcı akışını bölmez.
  • Netlik: Kullanıcıyı o anki eyleme odaklar ve diğer dikkat dağıtıcıları arka plana iter.

Dezavantajlar ve Riskler:

  • Alan Sınırlaması: Dikey alan kısıtlı olduğu için çok fazla seçenek eklemek alt butonların erişimini zorlaştırabilir.
  • Farklılık Karmaşası: Eğer standart iOS yapısından çok uzak bir tasarım yapılırsa, kullanıcı bunun bir “iptal edilebilir menü” olduğunu anlamayabilir.

Son Karar: Action Sheet vs. Bottom Sheet vs. Dialog

  • Action Sheet: Ekran kenarlarına yapışmaz, yüzer. Hızlı seçenekler içindir.
  • Bottom Sheet: Ekranın alt ve yanlarına yapışır. İçinde daha karmaşık içerikler (formlar, listeler) barındırabilir.
  • Dialog: Ekranın ortasında belirir ve kullanıcı bir karar vermeden gitmez. Genellikle daha “ağır” ve kesintili bir deneyim sunar.

Özetle: Action Sheet, arayüzünüzün “karar asistanıdır.” Onu idareli ve yerinde kullanırsanız kullanıcılarınıza pürüzsüz bir deneyim sunarsınız. Unutmayın; seçenekleri azaltmak, karar verme hızını artırır!

image
Kemal ŞAHİN | Akademik Hayat

Akademisyen, kullanıcı deneyimi ve arayüz tasarımı, veri görselleştirme, web/mobil uygulama geliştirme.

Kemal ŞAHİN'i yakından tanıyın.