107 lines
6.0 KiB
Markdown
107 lines
6.0 KiB
Markdown
# CTA çekmecesi tasarım algısı — "Sıralamanla nereye yerleşirsin? Saniyede gör."
|
||
|
||
Bu doküman, programatik SEO sayfalarındaki funnel CTA'sının (`src/components/cta-sira-form.tsx`)
|
||
alttan açılan çekmece (drawer) tasarımının arkasındaki algıyı ve kuralları belgeler.
|
||
Yeni bir funnel giriş noktası eklerken ya da bu bileşeni değiştirirken buradaki
|
||
ilkelere uy.
|
||
|
||
## 1. Temel algı: vaadi verdiğin yerde tahsil et
|
||
|
||
Eski davranış adayı ana sayfaya (`/`) gönderiyordu: "Saniyede gör" vaadi verip
|
||
saniyeler süren bir sayfa geçişi ve bağlam kaybı yaşatıyordu. Yeni algı şu:
|
||
|
||
- **Kart vaat eder** — SEO sayfasının içinde duran kart (`bg-primary/5`,
|
||
`border-primary/20`) merak uyandırır: "Sıralamanla nereye yerleşirsin?"
|
||
- **Çekmece tahsil eder** — CTA butonu sayfadan koparmadan alttan bir çekmece
|
||
açar; sıralama girişi, sihirbaz adımları ve tamamlama hepsi aynı bağlamda akar.
|
||
- **Ödül `/sonuc`'ta** — seçimler tamamlanınca profil yazılır, çekmece kapanır
|
||
ve aday doğrudan sonuç sayfasına gider. Sayfa geçişi yalnızca ödül anında olur.
|
||
|
||
Akış: **kart (vaat) → çekmece (sıralama) → sihirbaz (kişiselleştirme) → /sonuc (ödül)**.
|
||
|
||
Profilli adayda çekmece hiç devreye girmez: kayıtlı sıralamayla doğrudan
|
||
`/sonuc` linki gösterilir — sıralamasını girmiş adaya bir daha girmesini
|
||
söylemeyiz.
|
||
|
||
## 2. Neden çekmece, modal değil?
|
||
|
||
- Çekmece **sayfanın üstüne değil, altına eklenir** algısı verir: aday hâlâ
|
||
okuduğu üniversite/bölüm sayfasının üzerindedir, içerik kaybolmaz (overlay
|
||
hafif: `bg-black/10` + blur).
|
||
- Alttan gelen yüzey mobilde başparmak menzilinde; hedef kitle (YKS adayı)
|
||
ağırlıkla mobilde.
|
||
- Swipe-to-dismiss (tutamaktan) ve overlay/Escape ile kaçış ucuz: "bir bakayım"
|
||
maliyeti düşük tutulur. `handleOnly` kullanılır ki form/sihirbaz içindeki
|
||
kaydırmalar çekmeceyi yanlışlıkla kapatmasın.
|
||
- Desktop'ta çekmece tam genişliğe yayılmaz: `sm:max-w-2xl` ile ortalanır,
|
||
`sm:border-x + sm:shadow-2xl` ile sayfadan yükselen bir panel gibi durur
|
||
(liste çekmecesiyle aynı reçete).
|
||
|
||
## 3. Görsel dil: yeni hiçbir şey icat etme
|
||
|
||
Çekmecedeki her parça sitede zaten var olan kanonik kaynaktan gelir:
|
||
|
||
| Parça | Kaynak / kural |
|
||
| --- | --- |
|
||
| Eyebrow rozeti ("Saniyede gör") | `SectionEyebrow` (`pixel-decor.tsx`) — elle pill yazılmaz |
|
||
| Kapatma çarpısı | `dialog.tsx`'teki kanonik set: `size-9`, `rounded-full`, `border-slate-200`, `size-4` X, hover `bg-slate-100`, `active:scale-[0.96]` |
|
||
| CTA butonları | Metin önce, sonda `ArrowRight` (`size-4`); yıldız/Sparkles yok; `bg-orange-500 → hover:bg-orange-600` |
|
||
| Puan türü çipleri | Hero formundaki radiogroup çipleriyle birebir aynı class seti |
|
||
| Sıralama girişi | Profil kapısındaki desen: sola `Trophy` ikonu, `h-12`, `pl-11` |
|
||
| Kanıt üçlüsü | Arama funnel kartıyla aynı üçlü: 24 tercihlik plan / Risk analizi / YÖK Atlas verisi (`ListChecks`, `ChartNoAxesCombined`, `Database`) |
|
||
| Başlık/kopya tipografisi | `font-heading` bold başlık, `text-slate-600` gövde, `text-slate-900` vurgu |
|
||
|
||
Algı hedefi: çekmece açıldığında aday "yeni bir yere geldim" değil, "aynı ürünün
|
||
bir katmanı kalktı" hissetmeli. Bu yüzden çekmeceye özgü hiçbir yeni renk,
|
||
rozet, buton varyantı tasarlanmaz.
|
||
|
||
## 4. İçerik tonu
|
||
|
||
- Öğrenci diliyle, ikinci tekil: "Sıralamanı yaz", "bu sayfadan ayrılmadan gör".
|
||
- Sürtünme kaldıran güvence her zaman görünür: **"Ücretsiz, üyelik gerekmez."**
|
||
- Kanıt üçlüsü süs değil, ürün vaadinin özetidir; metin etiketleri ikonsuz da
|
||
anlamlı olmalı (renk/ikon tek başına anlam taşımaz — ürünün risk renk dili
|
||
kuralıyla aynı ilke).
|
||
- Buton etiketleri eylemin sonucunu söyler: "Programları gör" (girdi adımı),
|
||
"Ücretsiz tablonu gör" / "Yapay Zeka listemi kur (3 kredi)" (sihirbaz sonu, girişe göre).
|
||
|
||
## 5. Davranış ve teknik algı
|
||
|
||
- **Statik kalır:** Kart RSC sayfalarında prerender edilir; oturum bilgisi
|
||
mount'ta değil, facet isteğiyle **paralel** çözülür (hero formundaki desen) —
|
||
landing başına gereksiz auth turu atılmaz.
|
||
- **Preload:** CTA butonuna `pointerenter`/`focus` ve sıralama inputuna `focus`
|
||
geldiğinde `preloadSihirbazAdimlar()` çalışır; sihirbaz açıldığında chunk
|
||
çoktan inmiştir. "Saniyede gör" vaadi teknik olarak da tutulur.
|
||
- **İki adım, tek yüzey:** çekmece içinde `sira → sihirbaz` adımları vardır;
|
||
erişilebilir ad sabittir (sr-only `DrawerTitle`/`DrawerDescription`), görünür
|
||
başlıklar adıma göre değişir.
|
||
- **Kapanış = sıfırlama, ama nazikçe:** çekmece kapanınca adım ve facet'ler
|
||
sıfırlanır; adayın yazdığı sıralama ve puan türü **korunur** (tekrar açarsa
|
||
baştan yazmasın).
|
||
- **Tamamlanınca:** `tercihProfiliYaz` → çekmece kapanır → `sonucHref` ile
|
||
`/sonuc` (girişliye `sihirbaz: "1"`, girişsize `hazir: "1"`). Giriş duvarı
|
||
sihirbazın hemen arkasında değildir; değer önce gösterilir.
|
||
- **Lenis:** çekmece içeriği ve kaydırma kabı `data-lenis-prevent` taşır;
|
||
sayfadaki smooth-scroll çekmece içi kaydırmayı ezmez.
|
||
|
||
## 6. Erişilebilirlik
|
||
|
||
- Sıralama alanı: `inputMode="numeric"`, binlik ayraçlı biçimleme
|
||
(85000 → 85.000), hata durumunda `aria-invalid` + `aria-describedby` +
|
||
`role="alert"`.
|
||
- Puan türü seçimi `role="radiogroup"` / `role="radio"` + `aria-checked`.
|
||
- Kapatma yolları: çarpı butonu, overlay, Escape, tutamaktan swipe.
|
||
- `prefers-reduced-motion` vaul/motion tarafında zaten sadeleşir; çekmeceye
|
||
özel ek animasyon eklenmedi.
|
||
|
||
## 7. Bu deseni ne zaman kullan / kullanma
|
||
|
||
**Kullan:** İçerik sayfasında duran ve adaydan tek kritik girdi (sıralama)
|
||
isteyen her funnel girişi. Adayın okuduğu bağlam değerliyse (bölüm, üniversite,
|
||
rehber) çekmece doğru araçtır.
|
||
|
||
**Kullanma:** Zaten modal/dialog içinde olan akışlar (arama modalındaki funnel
|
||
kartı gibi — modal üstüne çekmece açılmaz, oradaki kart mevcut kapı/dialog
|
||
akışını kullanır) ve profilli kısayollar (doğrudan link yeterli).
|