Pattern — Do / Don't
Do — eylem fiili
Buton metni imperatif + noun-phrase. Ne yapacağı tek bakışta belli.
Don't — belirsiz
"Tamam / Devam / İleri" hangi eylemi onayladığını söylemez. Kullanıcı modalı kapatır, ne yaptığını sonra fark eder.
Do — semantik renk
Hazırlanıyor Yolda Teslim Edildi
Her durum kendi rolüne ait renk ailesinden — amber=bekleme, mavi=hareket, nötr gri=tamam.
Don't — tek renk seti
Hazırlanıyor Yolda Teslim Edildi
Hepsi aynı renk → durum farkı çözünmez. Kanban'da hızlı tarama imkânsız hale gelir.
Do — content emoji (WA içinde)
WhatsApp mesaj balonu
Emoji WA mesaj içeriğinde kullanılır — orada native okunur.
Don't — UI dekorasyonu
🚀 Sipariş Panosu ✨
Nav, sayfa başlıkları ve butonlarda emoji yasak. Heroicons SVG kullanın (stroke 1.5).
Do — sticky +90 etiketi
+90
Prefix değiştirilemez label. Input value sadece 10 haneli yerel kısım — backend ile pürüzsüz çalışır.
Don't — input içine yaz
Kullanıcı +90'ı silebilir, çift yazabilir. Validation ve formatlama her seferinde patlar.
Do — TR locale
1.663,00 TL 12.450,50 TL
Bin ayraç ., ondalık ,. Para birimi sonda. tabular-nums ile hizalı.
Don't — US locale
$1,663.00 12,450.50₺
"$" işareti yanlış pazar; "₺" karakteri okunabilir değil. Karışık locale müşteriyi tedirgin eder.
Do — kısa, eyleme özel
✓
Kurye atandı. Mehmet K. siparişe yönlendirildi.
Toast: bir cümle özet + bir cümle detay. 4 sn'de kapanır; kalıcı bilgi içermez.
Don't — açıklama metni
✓
Başarılı! Sipariş #1247 için kurye olarak Mehmet Kaya atandı. Kurye yaklaşık 8 dakika içinde restoran konumuna ulaşacak. Ek bilgi için kurye yönetim sayfasına gidebilirsiniz...
Toast'a paragraf sığmaz. Kalıcı bilgi Detail Sidebar'a taşınır.
Do — sebep + eylem
Henüz kurye eklemediniz
Kuryeleri tanımlayınca siparişler otomatik atanmaya başlar.
Empty state: başlık → sebep → CTA. Kullanıcı çıkış yolunu hep görür.
Don't — ölü ekran
Veri yok.
"Veri yok" çıkmaz sokak. Kullanıcı ne yapacağını bilmez, geri tuşuna basar.
Do — tek karar
Siparişi iptal et?
Müşteriye otomatik bildirim gönderilir.
Modal: tek kritik karar. İki buton: Vazgeç + asıl eylem.
Don't — formul modal
Yeni Müşteri
Çok alanlı form modal değil side panel ya da kendi sayfası olur. Modalda kaybolan veri = yeniden başla.