Add design documentation for CTA drawer and UX improvements
- Introduced a new document detailing the design principles behind the funnel CTA drawer, emphasizing user flow and context retention. - Added a UX/CRO corrections document outlining critical findings from a recent audit, including payment flow adjustments, button transparency, and pricing clarity. - Created a gamification document to outline user engagement strategies and the program evaluation model for the Kolay Tercih feature. - Developed a vision document for TercihAI, detailing the product's positioning, revenue model, and MVP scope, aimed at providing AI-assisted preference guidance for students.
This commit is contained in:
106
docs/tasarim/cta-cekmece-tasarimi.md
Normal file
106
docs/tasarim/cta-cekmece-tasarimi.md
Normal file
@@ -0,0 +1,106 @@
|
||||
# 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).
|
||||
101
docs/tasarim/ux-duzeltmeler.md
Normal file
101
docs/tasarim/ux-duzeltmeler.md
Normal file
@@ -0,0 +1,101 @@
|
||||
# UX/CRO Kritik Düzeltmeler — Uygulama Takibi
|
||||
|
||||
UX denetiminden çıkan 🔴 kritik bulguların uygulama listesi.
|
||||
Kaynak: 26 Temmuz 2026 tarihli UX/CRO denetimi.
|
||||
|
||||
## K1 — Ödeme sonrası teslimat
|
||||
|
||||
- [x] `/odeme/sonuc` başarı CTA'sı doğrudan `/listem`'e gitsin (ölü `/sonuc?acildi=1` yerine)
|
||||
(sahte "paid" siparişle canlı doğrulandı: CTA → `/listem?acildi=1`)
|
||||
- [x] `/listem` ödeme dönüşünde tek seferlik "kilit açıldı" deneyimi (banner + unblur)
|
||||
- [x] Ücretli `/listem` başlık kopyası düzelsin (rozet "Paketin aktif", alt metin
|
||||
"24 tercihinin tamamını gerekçe, risk analizi ve trendleriyle…")
|
||||
|
||||
## K2 — Buton dürüstlüğü (giriş duvarı sürprizi)
|
||||
|
||||
- [x] Hero sihirbazı son butonu girişsiz kullanıcıda girişi açıkça söylesin
|
||||
("Giriş yap ve listeni gör"; girişliyse "Listemi oluştur (3 kredi)")
|
||||
- [x] Hero akışı oturumu açık kullanıcıyı `/giris`'ten sektirmeyip doğrudan `/sonuc`'a götürsün
|
||||
- [x] `/sonuc` sihirbazında girişsiz son buton "Listemi gör" yerine dürüst etiket taşısın
|
||||
- [x] Değer önce: hero sihirbazı biten girişsiz kullanıcı `/giris`'e değil doğrudan
|
||||
`/sonuc`'taki ücretsiz tabloya gitsin; AI CTA'sı oradan "5 deneme kredinle
|
||||
AI listeni kur — giriş yap" olarak verilsin (panel + sabit alt kart);
|
||||
girişten dönüşte kayıtlı seçimlerle otomatik üretim başlasın
|
||||
|
||||
## K3 — Fiyat şeffaflığı
|
||||
|
||||
- [x] Landing hero mikro-kopyasına paket fiyatı (299 TL) eklensin
|
||||
- [x] FAQ "Fiyatlandırma nasıl çalışıyor?" cevabına rakamlar yazılsın
|
||||
|
||||
## K4 — Puan türü seçici
|
||||
|
||||
- [x] Hero formuna SAY/EA/SÖZ/DİL/TYT segment kontrolü (varsayılan SAY)
|
||||
|
||||
## K5 — Ücretsiz kullanıcıya AI sohbeti
|
||||
|
||||
- [x] `/listem`'de paketi olmayan kullanıcıya kalan kredileriyle sohbet açılsın
|
||||
(fiyat kartının altında; mesaj gönderimi + kredi düşümü canlı doğrulandı)
|
||||
- [x] Kredi bitince composer yerinde paket CTA'sı görünsün (0 krediyle canlı doğrulandı)
|
||||
|
||||
## K6 — Ödeme/AI hata mesajları
|
||||
|
||||
- [x] iyzico/Anthropic yapılandırma hataları kullanıcıya ham sızmasın (log'a detay, kullanıcıya sade mesaj)
|
||||
(iyzico yolu canlı doğrulandı: "Ödeme şu anda başlatılamıyor; kartından çekim yapılmadı…")
|
||||
- [x] `/paket` sayfası `?hata=token|siparis` parametresini okuyup banner göstersin
|
||||
|
||||
## Bonus
|
||||
|
||||
- [x] Hero rozetindeki "açıkk" yazım hatası düzeltilsin
|
||||
|
||||
---
|
||||
|
||||
# 🟠 Önemli
|
||||
|
||||
- [x] Ö1: `/listem` paywall ara kartı kopyası netleşsin (kilit ikonu + "aşağıdaki tüm
|
||||
satırlar açık" çelişkisi giderilsin; CTA fiyatı söylesin)
|
||||
(yeni kopya: "İlk 3 tercihte AI analizini gördün… Analizleri aç — 299 TL")
|
||||
- [x] Ö2: İl seçimi mobilde aranabilir liste ile yapılabilsin; harita mobilde geri
|
||||
çekilsin; harita illerine erişilebilir isim (aria-label) eklensin
|
||||
(arama + çip birincil; harita ≥sm'de görsel destek; path'lerde aria-label/aria-pressed)
|
||||
- [x] Ö3: "Listem" isim çakışması giderilsin (manuel liste "Seçtiklerim" olsun,
|
||||
AI raporu /listem "Listem" kalsın)
|
||||
- [x] Ö3b: Navbar'daki "Seçtiklerim" butonu liste boşken görünmesin — tabloya
|
||||
ulaşmamış ziyaretçiye "0/24" gürültü; ilk program eklenince belirir,
|
||||
liste boşalınca kaybolur (canlı doğrulandı)
|
||||
- [x] Ö4: Güven sayfaları eklensin (gizlilik/KVKK, kullanım & iade koşulları,
|
||||
iletişim) ve footer + giriş + paket sayfalarından bağlansın
|
||||
(NOT: metinler MVP taslağı — yayın öncesi hukuki gözden geçirme gerekir)
|
||||
- [x] Ö5: AI'ın ürettiği genel değerlendirme ve uyarılar /listem'de görünsün
|
||||
(paketliye tam, paketsize kilitli önizleme — "Danışman özeti" kartı)
|
||||
- [x] Ö6: Paketlinin gerçek revizyon akışı /listem'de çalışsın (geri bildirim
|
||||
kutusu; başlıktaki "Revize et" oraya götürsün)
|
||||
(`revizyon-kutusu.tsx` → `listeRevize` aksiyonu; kalan hak sayacıyla)
|
||||
- [x] Ö7: Liste tepesine dilim özeti (hayal/dengeli/garanti dağılımı) ve tek
|
||||
şehir uyarısı eklensin
|
||||
- [x] Ö8: 2024/2025 verisi eksik satırda çelişkili trend rozeti gösterilmesin
|
||||
(rozet iki yıl da doluysa çıkar; yoksa "Veri eksik")
|
||||
- [x] Ö9: Magic link "gönderildi" ekranına yeniden gönder + e-postayı düzelt eklensin
|
||||
(30 sn bekleme sayaçlı yeniden gönder + "E-postayı düzelt")
|
||||
- [x] Ö10: Mobilde sohbete hızlı erişim (yüzen "Danışmana sor" kısayolu)
|
||||
|
||||
# 🛠 Dev araçları
|
||||
|
||||
- [x] Dev süperadmin paneli: yalnızca geliştirme ortamında sol altta "DEV"
|
||||
butonu — anında giriş (magic link atlanır), kredi/paket/rapor senaryoları,
|
||||
sahte "paid" siparişle ödeme başarı ekranı, tüm sayfalara hızlı bağlantılar
|
||||
(`src/components/dev/dev-panel.tsx` + `src/lib/dev/actions.ts`;
|
||||
layout NODE_ENV kontrolüyle monte eder, aksiyonlar sunucuda ayrıca korunur)
|
||||
|
||||
# 🟢 Güzel olur
|
||||
|
||||
- [x] G1: Sıralama girişinde canlı binlik ayracı + toast yerine input altı hata
|
||||
- [x] G2: Sihirbaz adım göstergesi tamamlanan adımı işaretlesin; 1. adımda
|
||||
"Geri" görünmesin
|
||||
- [x] G3: Route-level loading / error / not-found boundary'leri eklensin
|
||||
(kök loading/error/not-found + /sonuc ve /listem'e Skeleton'lı loading)
|
||||
- [x] G4: Landing istatistik kartlarının yanında "yerleşme garantisi vermeyen
|
||||
dürüst araç" konumlandırması cesur işlensin (koyu kart: "Yerleşme
|
||||
garantisi vermiyoruz. Çünkü kimse veremez.")
|
||||
- [x] G5: `sonButonEtiketi` şeffaflığı hero varyantına taşınsın (girişli:
|
||||
"Listemi oluştur (3 kredi)"; girişsiz artık ücretsiz tabloya gittiği
|
||||
için "Ücretsiz tablonu gör")
|
||||
Reference in New Issue
Block a user