Modal mı Bottom Sheet mi: Mobil Uygulamada Hangisini Ne Zaman Kullanmalı
Modal engeller, bottom sheet ise gezinmeye izin verir. İkisi arasında karar veren tek soru, yeniden kurulmuş iki kalıp, on yaygın durum için karar tablosu ve arkasındaki platform kuralları.
Modal ve bottom sheet ikisi de ekranın üstüne kayarak gelir, bu yüzden ekipler onları şekli farklı aynı şey sanır. Değiller. Biri kullanıcı cevap verene kadar onu durdurur, diğeri bir şey seçip yoluna devam etmesine izin verir. İşte kararı veren tek soru, yeniden kurulmuş iki kalıp ve her uygulamada karşınıza çıkan durumlar için bir karar tablosu.
Tek soru: Şimdi cevaplanması şart mı?
Kişi seçim yapmadan devam edemiyorsa bu bir modaldır. Görmezden gelse de ekran anlamlı kalıyorsa bu bir sheet'tir.
Bu tek soru, kimse görünüş üzerine tartışmaya başlamadan önce vakaların çoğunu çözer. İki kalıp arasındaki diğer her farkı da açıklar: modal ortada durur ve her şeyi karartır, çünkü cevaplanana kadar başka hiçbir şey önemli değildir; sheet ise alttan yükselir ve ekranı görünür bırakır, çünkü mesele hâlâ o ekrandır.
Modal: devam etmeden karar ver
Android'de diyalog, iOS'ta alert denen modal bilerek böler. Şu durumlarda doğru seçimdir:
- Kullanıcılar devam etmeden karar vermelidir. Uygulama cevabı tahmin edemez.
- Eylem geri alınamaz. Herkes için 24 dosyayı kaldıran bir projeyi silmek bir duraklamayı hak eder.
- En fazla iki seçenek vardır. İptal ve eylem, fiil olarak adlandırılmış: Tamam değil, Sil.
Nerede başarısız olur: isteğe bağlı her şeyde. Puan isteyen, yeni özellik duyuran ya da menü sunan bir modal, kullanıcıları gelme amaçlarından alıkoyar ve onlar da okumadan kapatan her yere dokunmayı öğrenir.
Bottom sheet: gez, sonra seç
Bottom sheet, ekranda zaten olan şeye ait seçenekleri barındırır. Şu durumlarda doğru seçimdir:
- Seçenekler bu ekrana aittir. Bu projeyi paylaş, çoğalt, taşı ya da arşivle.
- Kullanıcılar kaydırarak vazgeçebilir. Cevap zorunlu değildir.
- İkiden fazla seçenek vardır. Sheet bir liste için yer sunar ve liste başparmağın erişiminde durur.
Nerede başarısız olur: atlanmaması gereken her şeyde. Bir sheet yanlışlıkla yapılan bir kaydırmayla kapanabilir, bu yüzden yalnızca sheet içinde yaşayan yıkıcı bir onay kolayca kaybolur ya da kazara tetiklenir.
Çok fazla düğme, kılık değiştirmiş bir sheet'tir
Yanlış: bir modal
Doğru: bir sheet
Soldaki ekran en yaygın karıştırmadır. Ortalanmış bir kutuda üst üste dizilmiş altı düğme, kullanıcılardan bir kesinti içinde menü okumalarını ister. Seçeneklerin hiçbiri acil değildir, bu yüzden hiçbir şeyin ekranı engellemesi gerekmez. Aynı seçenekler bir sheet'te liste gibi okunur, başparmağın erişiminde kalır ve kaydırmayla kapanır.
Material Design'ın kuralı kısadır: bir diyalog en fazla iki eylem içermelidir. Üçüncüye ihtiyaç duyduğunuzda elinizde bir menü vardır ve menü bir sheet'e aittir.
İkisi birlikte: sheet'ten sil, modal ile onayla
Önce sheet
Sonra modal
Bu kalıplar rakip değildir. Yıkıcı bir seçenek, diğer eylemlerle birlikte bir sheet'te durabilir, kırmızıyla gösterilir ve en sona konur. Ona dokunmak modalı açar, çünkü geri alınamayacak bir karar ancak şimdi ortaya çıkmıştır. Sheet'te gez, önemli olduğu anda engelle.
Modal mı sheet mi: bir karar tablosu
| Durum | Seçim | Neden |
|---|---|---|
| Bir projeyi herkes için silmek | Modal | Geri alınamaz, iki seçenek |
| Kaydedilmemiş değişiklikleri atmak | Modal | Kullanıcılar ayrılmadan önce karar vermeli |
| Paylaşılan bir cihazda çıkış yapmak | Modal | Durumu değiştiren bir evet ya da hayır |
| Paylaş, çoğalt, taşı, arşivle | Sheet | Ekrandaki öğe için seçenekler |
| Bir listeyi sıralamak ya da filtrelemek | Sheet | Kullanıcılar listenin arkada değiştiğini görmek ister |
| Ödemede kayıtlı bir kart seçmek | Sheet | İkiden fazla seçenek, ekranın parçası |
| Kameradan ya da kitaplıktan fotoğraf eklemek | Sheet | Bir kaynak seçimi, vazgeçmesi kolay |
| Haritada yer ayrıntıları | Sheet | Mesele harita olarak kalır |
| Devam etmeden önce yeni şartları kabul etmek | Modal | Uygulama cevap olmadan devam edemez |
| Yeni bir özelliği duyurmak | İkisi de değil | Kimsenin karar vermesi gerekmiyor. Satır içi bir banner kullanın |
Bunu iyi yapanlar
Bunları bugün telefonunuzda kontrol edebilirsiniz:
- Apple Maps ve Google Maps, arama sonuçlarını ve yer ayrıntılarını haritanın üzerinde bir sheet'te tutar, böylece yerinizi hiç kaybetmezsiniz.
- iOS paylaşım sheet'i, baktığınız şey için her uygulamayı ve eylemi listeler ve kaydırmayla kapanır.
- Instagram'ın bir gönderideki "daha fazla" menüsü, o gönderiye ait seçeneklerden oluşan bir bottom sheet olarak açılır.
Apple'ın yönergeleri aynı çizgiyi öbür taraftan çizer: alert'ler kullanıcıların hemen ihtiyaç duyduğu kritik bilgiler içindir, bir eylemin veriyi yok edebileceği uyarısı da buna dahildir; sheet'ler ve action sheet'ler ise kullanıcıların yaptığı işle ilgili seçenekleri barındırır.
SSS
Modal yerine ne zaman bottom sheet kullanmalıyım?
Seçenekler mevcut ekrana aitse, ikiden fazlaysa ve kimsenin devam etmek için seçim yapması gerekmiyorsa. Paylaşmak, sıralamak, filtrelemek ve bir listeden seçmek sheet işleridir.
Modal diyalogu ne zaman kullanmalıyım?
Kullanıcılar devam etmeden önce karar vermek zorundaysa, genellikle eylem geri alınamadığı için. İki eylemle sınırlı tutun: bir iptal ve fiil olarak adlandırılmış eylem.
Bir modalda kaç düğme olmalı?
En fazla iki. Material Design, bir diyalogun en fazla iki eylem içermesi gerektiğini söyler. Daha fazlasına ihtiyacınız varsa seçenekler bir menüdür ve sheet'e aittir.
Bottom sheet bir modal mıdır?
Modal bir bottom sheet ekranı karartır ve kullanıcılar ekranı yeniden kullanmadan önce kapatılmalıdır, ancak kaydırmayla kapatılabilir ve hiçbir şey sormaz. Diyalog ise bir soru sorar ve cevap bekler.
iOS'ta alert ile action sheet arasındaki fark nedir?
Alert, kritik bilgiyle ve küçük bir düğme kümesiyle böler. Action sheet ise kullanıcıların yeni başlattığı bir eylemle ilgili seçeneklerle, mesela bir fotoğrafın seçenekleriyle, alttan yükselir.
Kaynaklar
- Dialogs ve Bottom sheets, Material Design 3.
- Alerts, Sheets ve Action sheets, Apple Human Interface Guidelines.
- İlk olarak UX Brainy üzerinde bir carousel olarak yayımlandı.
Want your app's dialogs, sheets and every other pattern chosen and designed as one system? Our team designs app UI from the first flow to the finished components.
Get Started
