Files

bilalgursen 488845ae1f 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.

2026-08-06 02:27:34 +03:00

6.0 KiB

Raw Blame History

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.

Ç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).

6.0 KiB Raw Blame History Unescape Escape