da0e9dff7a
- docs/ekip-raporlari/2026-10-07, 2026-10-09, 2026-10-10 raporları ve ekran görüntüleri (ses/ altındaki mp3 dosyaları depoya alınmadı, 38 MB) - BACKLOG #38: rehber yazılarına "Dinle" düğmesi adayı - scripts/seslendir.py (Türkçe TTS) ve .gitignore'a .venv-tts/ - scripts/eval/sonuc: 8–10 Ekim revizyon eval çıktıları Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
69 lines
6.9 KiB
Markdown
69 lines
6.9 KiB
Markdown
# Tasarımcı — /sonuc tadımlığı: daha kısa, daha ikna edici (10 Eki 2026)
|
||
|
||
Bilal: "tadımlık çok büyük yer kaplıyor; pazarlamacı tarafı eksik."
|
||
|
||
## Özet (5 madde)
|
||
|
||
1. **Yükseklik:** 1280 px'te **599 → 372 px** (%38 kısa; hedef ≥ üçte bir), 375 px'te **1002 → 819 px**. Telefonda örnek satır + CTA birlikte ~470 px: tek ekranda (812) okunuyor.
|
||
2. **Kurgu:** Tek kart, masaüstünde iki sütun — solda öğrencinin kendi sırasıyla başlık ("**85.000.** sıra için 24 tercih, her satırı böyle gerekçeli") + üç kanıt + turuncu CTA; sağda gerçek rapor satırı. Telefonda sıra: başlık → örnek → CTA. Kutu içinde kutu kalktı (eski `rounded-xl bg-slate-50` iç blok yok; örnek alanı kartın kendi bandı).
|
||
3. **Pazarlama dili:** Üç kanıt marka mesaj mimarisinin üç sütunu (veri · yöntem açıklığı · dürüst vaat), rakamlar tek kaynaktan (`DILIM_ETIKET`, `VERI_ARALIGI`, `VERI_YIL_SAYISI`). Vaat/garanti/korku/sahte sosyal kanıt yok.
|
||
4. **Durum yansıyor (§11.2 md. 1, 6):** sıra başlıkta; sihirbaz seçimi varsa etiket "Sırana ve seçimlerine uygun örnek satır" olur ve yeni satır blur çözülerek gelir (`kt-unblur`, azalt'ta yalnız opaklık); ilk boyada sahne yok.
|
||
5. **Teknik:** analitik (`tadimlik_goruntulendi`, `giris_cta_tiklandi/tadimlik`), `girisUrl` callback'i, SSR genel satır + `/api/tadimlik` yarış koruması aynen. `pnpm tasarim:denetim` 0 hata, `npx tsc --noEmit` temiz. Commit atılmadı.
|
||
|
||
## Değişen dosyalar
|
||
|
||
- `src/features/rapor/components/tadimlik-satiri.tsx` — yerleşim ve metin yeniden; mantık aynı. CTA artık `Button variant="cta" size="lg"` (elle `bg-orange-500` kalktı).
|
||
- `src/features/rapor/components/rapor-listesi.tsx` — `RaporSatirDetayi`'ye isteğe bağlı `sikistir` prop'u (yalnız ölçü: `text-sm`, `p-3`, `gap-2`; varsayılan değişmedi, rapor listesi etkilenmez).
|
||
- `page.tsx`, `tadimlik-bolumu.tsx`: dokunulmadı.
|
||
|
||
## Önce / sonra ölçüm (`getBoundingClientRect`, başsız Chromium + CDP)
|
||
|
||
| Genişlik | Önce | Sonra | Fark |
|
||
|---|---|---|---|
|
||
| 1280 px | 599 px | 372 px | −227 px (%38) |
|
||
| 375 px | 1002 px | 819 px | −183 px (%18) |
|
||
| 375 px, örnek + CTA | — | ~470 px | tek ekran |
|
||
|
||
Listesi olan ziyaretçi (liste çerezi = 3): bölüm tablonun altında (375'te y=4129, 1280'de y=2520), yükseklik aynı. Yatay taşma yok (`scrollWidth ≤ innerWidth` iki genişlikte de).
|
||
|
||
## Metin değişiklikleri
|
||
|
||
| Eski | Yeni |
|
||
|---|---|
|
||
| Rozet: "Yapay zekâdan örnek satır" | "Yapay zekâ listesi" |
|
||
| h2: "Yapay zekâ listendeki her satırı böyle anlatır" | "**85.000.** sıra için 24 tercih, her satırı böyle gerekçeli" (sıra `tr-TR` biçimli, mavi) |
|
||
| Paragraf: "Sıralamana uygun bir programın gerekçesi, yerleşme riski ve taban trendi — 24 tercihlik listenin her satırı bu formatta kurulur, ilk üçü hemen açılır." | Üç kanıt: "3 risk dilimi: Hayal · Dengeli · Güvenli" · "2021–2026 YÖK Atlas verisi, 6 yıl" · "Garanti, komisyon, reklam yok; [yöntem açık](/meraklisina)" |
|
||
| Kart altı: "Bu, 24 satırlık Yapay Zeka listenden yalnızca bir örnek." + "Kredi kartı gerekmez · Google ya da e-posta ile 30 saniyede · Giriş sonrası liste hemen üretilir" | Örnek etiketi: "Sırana uygun örnek satır" / "Sırana ve seçimlerine uygun örnek satır"; CTA altı: "Kredi kartı gerekmez · 30 saniyede giriş · İlk 3 satır hemen açık" |
|
||
| CTA: "Kendi listemi oluştur" | aynı (listenin tamamını vaat etmez; `ACIK_SATIR`=3 bağı yorumda korundu) |
|
||
|
||
## Ekranda bakılanlar
|
||
|
||
Gerekçe: oran, hiyerarşi, sütun dengesi ve metin sarması koddan görünmez. Bilal'in dev sunucusu (3000) kullanıldı; önizleme sekmesi başka bir oturum tarafından `/listem`'de kullanıldığı için ona dokunulmadı (bir kez 375'e küçültülüp geri alındı), görüntüler başsız Chromium'dan (`~/Library/Caches/ms-playwright` kabuğu, CDP) alındı. Giriş yapılmadı, hiçbir CTA'ya basılmadı.
|
||
|
||
- **1280 px açık/koyu:** iki sütun dengede (sol 21 rem). Başlık 2 satır, kanıtlar tek satır (üçüncüsü link sarmalı), CTA tam genişlik, not 2 satır. Sağda logo + ad + üniversite + Devlet çipi + il, sparkline + ~78.178., "Dengeli · Riskli · Devlet", iki kutu yan yana. Koyu temada yüzey `bg-card`, örnek bandı `bg-slate-50` → en koyu zemin; sorun yok.
|
||
- **375 px açık/koyu:** rozet, 2 satır başlık, 3 kanıt (üçüncüde "yöntem açık" bütün olarak ikinci satıra iner), örnek bandı (logo gizli — rapor listesiyle aynı §4.15 kararı), iki kutu alt alta, CTA ve not. Taşma yok.
|
||
- **Sihirbaz seçimi olan ziyaretçi** (localStorage profil: Mühendislik & Teknoloji, devlet): satır Sakarya Bilgisayar Mühendisliği'ne döndü, etiket "Sırana ve seçimlerine uygun örnek satır". 1280'de görüldü.
|
||
- **Listesi olan ziyaretçi** (liste çerezi): tadımlık tablonun altında, kart birebir aynı. 375'te görüldü.
|
||
|
||
Bakılmayan: 768 ve 1024 px (768–1023 tek sütun, kutular yan yana — koddan çıkarım); gerçek `prefers-reduced-motion` davranışı (CSS `kt-unblur-sade` dalı var); uzun üniversite adı ("Adana Alparslan Türkeş Bilim ve Teknoloji Üniversitesi") tadımlık havuzunda rastlanmadı — `SATIR_ALT_AD` sarar, koddan çıkarım.
|
||
|
||
## Tek kaynaklar ve §11
|
||
|
||
- Kanonik parçalar: `SectionEyebrow`, `Button variant="cta" size="lg"` + sondaki `ArrowRight`, `UniLogo`, `TurCipi`, `SATIR_*` sınıfları, `RaporSatirDetayi`, `DILIM_ETIKET`, `VERI_ARALIGI`/`VERI_YIL_SAYISI`, `kt-unblur`. Yeni bağımlılık yok, `dark:` yok, elle turuncu yok.
|
||
- En yakın vaka: **V4** (üst çubuk = kullanıcının durumu): başlık öğrencinin sırasını söyler, etiket seçimini tanır. Kurgu `PikselCtaYuzeyi`'nin "metin solda, kreatif sağda" düzeninden.
|
||
- §11.5: referans vaka açık ✓ · her eylemin cevabı (CTA `active:scale`, satır değişince blur çözülmesi) ✓ · durum yansıyor ✓ · tek sahne (ilk boyada hareket yok) ✓ · telefonda gizlenen yok (logo §4.15 gereği, sparkline zaten `md:`) ✓ · azalt'ta bilgi tam ✓ · hareket.ts/variant/bağımlılık ✓ · dış kaynak yok ✓.
|
||
|
||
## Denetim
|
||
|
||
`pnpm tasarim:denetim`: **0 hata, 42 uyarı** (hiçbiri bu iki dosyada; `elle-cta` uyarıları `sihirbaz-cagri-karti.tsx`, `cta-sira-form.tsx`, `tercih-degisti-modali.tsx`'te — başka iş). `npx tsc --noEmit` temiz.
|
||
|
||
## Backlog önerisi
|
||
|
||
- `sihirbaz-cagri-karti.tsx:282/304/334` ve `cta-sira-form.tsx:284`: elle yazılmış turuncu CTA'lar `variant="cta"`'ya alınmalı (denetim uyarısı; küçük).
|
||
- `trBaslikDuzeni("İSTANBUL ÜNİVERSİTESİ-CERRAHPAŞA")` → "İstanbul Üniversitesi-cerrahpaşa": tire sonrası kelime büyük harfe çevrilmiyor; tüm listelerde görünür (küçük, `src/lib/slug.ts`).
|
||
|
||
## Bilal'den istenen
|
||
|
||
1. `/sonuc`'a girişsiz girip 375 ve masaüstünde karta bakması; başlık cümlesi ve üç kanıt metnini onaylaması (2 dk).
|
||
2. Üçüncü kanıttaki "Garanti, komisyon, reklam yok" ifadesi markanın dış sözü olacak — uygun mu? (1 dk) [BİLAL]
|