M.AIM.AISoloLabsUI Sözlüğü · Geri bildirim

← UI Sözlüğü

Kısa bildirim toast / snackbar

bilinen diğer adları toast · snackbar · geçici bildirim

Böyle diyorsan: "köşede çıkıp kaybolan mesaj" · "kaydedildi yazısı" → bunun adı kısa bildirim.

Köşede belirip birkaç saniyede kendiliğinden kaybolan küçük durum mesajı.

Kısa bildirim, bir işin sonucunu köşede birkaç saniye gösterip kendiliğinden kaybolan mesajdır. Sözleşmesi tek cümledir: KAÇIRILMASI ÖNEMLİ OLMAYAN şeyler için. Kaybolduğunda geri getirilemediği için kritik bilgi buraya konmaz — 'Ödeme başarısız' bir kısa bildirim değildir, çünkü kullanıcı başka yere bakıyorsa o bilgi tamamen kaybolur. İkinci kural süredir: kullanıcı okuyacak kadar zaman bulamıyorsa bildirim işe yaramaz; içinde bir eylem varsa (geri al) süre daha da uzun olmalı ya da hiç otomatik kapanmamalıdır.

Kapsam: Bu madde kendiliğinden kaybolan geçici mesajı kapsar. Sayfada duran ve kaybolmayan kutu Uyarı Şeridi, kullanıcıyı durdurup cevap bekleyen pencere Kip Pencere maddesindedir. Üçü bir SPEKTRUM oluşturur: pasif şerit, geçici bildirim, engelleyici pencere.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
▸ kendiliğinden de düşer — Kaydet'le yığılmayı gör
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Sağ altta toast sistemi kur: yeşil başarı ve kırmızı hata varyantı, ikon + tek satır mesaj, 3 saniyede kendiliğinden kaybolsun. Art arda gelenler dikey yığılsın (üst üste binmesin), üzerine gelince sayaç dursun, ekran okuyucular için aria-live=polite ile duyurulsun.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Toast'larım huysuz; şu klasikleri sırayla ele: (1) art arda işlemde toast'lar üst üste biniyor — yığın/kuyruk yönetimi yok; (2) zamanlayıcı temizlenmiyor, eski toast'ın sayacı yenisini kapatıyor; (3) yanlış yere monte edilmiş, sayfa geçişinde kayboluyor; (4) uzun mesaj taşıyor/iki satıra kırılıp yerleşimi bozuyor; (5) ekran okuyucu hiç duymuyor (aria-live yok). Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Konumposition: fixed

    Toast'ın yaşadığı köşe (çoğu üründe sağ alt/sağ üst); sayfa kaysa da yerinde durur.

  • 2Durum rengi + ikonsuccess / error

    Yeşil tik = başarı, kırmızı = hata; renk TEK sinyal olmamalı, ikon eşlik eder.

  • 3Mesajtek satır

    Kısa ve eylem odaklı: 'Kaydedildi', 'Bağlantı koptu'. Paragraf gerekiyorsa toast yanlış parçadır.

  • 4ÖmürsetTimeout

    Otomatik kapanma sayacı (2-5 sn); üzerine gelince durması iyi görgü kuralıdır.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ABelirdirole="status"

    Kibar duyuru: ekran okuyucu sırasını bekler, kullanıcının işini bölmez. Başarı mesajları için doğru olan budur.

  • BYığıldıkuyruk + üst sınır

    Arka arkaya birden çok bildirim. Sınır koy (ör. üç) ve eskisini düşür; ekranı kaplayan bildirim kulesi bilgi değil gürültüdür.

  • CEylemli'Geri al' butonu

    İçinde buton varsa süre uzar ya da otomatik kapanma kalkar. Kullanıcı butona uzanırken kaybolan bildirim, olmamasından kötüdür.

  • DDuraklatıldıhover / odak

    Fare üstüne gelince ya da klavye odağı girince sayaç durmalı; okumaya çalışırken kaçan mesaj erişilebilirlik sorunudur.

  • EKapandıotomatik / elle

    Kayboldu ve geri getirilemez. Bilgi önemliyse aynı bilgi kalıcı bir yerde de bulunmalı (liste, şerit, kayıt).

KODDAKİ ADLARI
CSSposition: fixedköşeye sabitleme
ARIArole="status" / aria-liveerişilebilir duyuru
shadcn/uisonnerhazır yığın + sayaç yönetimi
ERİŞİLEBİLİRLİK & SIK HATA
  • Doğru rolü seç: başarı ve bilgi mesajları için role="status" (kibar, sırasını bekler), gerçekten kritik olanlar için role="alert" (araya girer). Her şeyi alert yaparsan ekran okuyucu kullanıcısı sürekli bölünür.
  • Süreyi kullanıcı kontrol edebilmeli (WCAG 2.2.1). Hover ve klavye odağında sayaç dursun; okuma hızı herkeste aynı değildir.
  • İçinde buton varsa otomatik kapanma ya kalksın ya da belirgin biçimde uzasın — klavyeyle o butona ulaşmak zaman ister.
  • Kritik bilgiyi kısa bildirime koyma. Kaybolduğunda geri getirilemeyen bir kanaldır; 'ödeme başarısız' gibi mesajlar sayfada kalıcı olarak da görünmeli.
  • Bildirim ekranın köşesinde odak ÇALMAMALI: odağı bildirime taşımak kullanıcının yaptığı işi böler.
SIK KARIŞTIRILANLAR

Uyarı şeridinden farkı. Kısa bildirim GEÇİCİDİR ve bir olayın sonucunu söyler ('Kaydedildi'); uyarı şeridi KALICIDIR ve devam eden bir durumu anlatır ('E-postan doğrulanmadı'). Test basit: bilgi kullanıcı bir şey yapana kadar doğru kalacaksa şerittir, olay bittiği anda geçersizleşiyorsa kısa bildirimdir. Kalıcı durumu kısa bildirimle söylersen kullanıcı kaçırdığında bir daha göremez.

Uyarı şeridi sayfasına git →

Kip pencereden farkı. Kısa bildirim BİLDİRİR ve engellemez; kip pencere DURDURUR ve cevap bekler. Seçim, bilginin kaçırılmasının maliyetine göre yapılır: kaçırılırsa hiçbir şey olmuyorsa kısa bildirim, kaçırılırsa yanlış iş yapılıyorsa kip pencere. İkisi arasında kalan durumlar için uyarı şeridi vardır — spektrumun ortası odur.

Kip pencere sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Uyarı şeridi alert / bannerKip pencere modal / dialogRozet badgeAnahtar switch / toggle

AYNI AİLEDE · GERI BILDIRIM