kolaytercih/docs/tasarim/2026-09-25-samimi-arayuz-arastirmasi.md

# Samimi ve oyunsu arayüz: araştırma ve öneriler

> 25 Eylül 2026. Bilal'in isteği: "Duolingo gibi basit ve oyunsu, Apple gibi irdeleyici gözle
> kurulmuş, samimi bir arayüz." Kaynaklar sonda. Uygulaması `tasarim/ogrenci-samimi` dalında;
> kurallar `DESIGN.md` §10'a işlendi.

## Tek cümle

Bizim öğrencimiz için "samimi" neşe değil, **güven** demek: kaygılı öğrenciye her ekranda
nerede olduğunu, sıradaki tek adımı ve kendi yaptığı küçük ilerlemeyi göstermek. Duolingo'nun
ilerleme ve küçük kutlama dilini alıyoruz. Seri, puan ve kayıp korkusunu almıyoruz.

## Neden böyle: öğrencimiz kim?

Aynı klasördeki öğrenci senaryoları (`docs/arastirma/2026-09-24-ogrenci-senaryolari/`) üç
duyguyu tekrar tekrar gösteriyor:

- **Yanlış yapma korkusu.** Can, geçen yılın tabanına güvenip listeyi yanlış kurmaktan korkuyor.
- **Mahcubiyet.** Ayşe Hanım "sistemi bilmiyorum" demekten, Yusuf "ailem para gönderemiyor"
  demekten çekiniyor.
- **Dağınık bilgi.** Bilgi var ama dağınık ve zamansız. Kimse "şimdi şunu yap" demiyor.

Duolingo günlük bir alışkanlık ürünü. Tercih ise birkaç haftalık, tek seferlik ve yüksek riskli
bir karar. Bu yüzden oyunlaştırmanın yalnız bir kısmı bize uyuyor.

## Duolingo'dan alınacaklar ve alınmayacaklar

| Alıyoruz | Almıyoruz, çünkü |
|---|---|
| **Görünür ilerleme.** "Listen 7/24", "Adım 2/3: Şehir" | **Seri (streak).** Günlük alışkanlık için. Tercih günlük iş değil. |
| **Küçük kilometre taşı kutlaması.** İlk program eklendi, liste 24/24 doldu. Seri ekranındaki kutlama animasyonu yeni kullanıcının 7. günde kalma oranını %1,7 artırmış. | **Kayıp korkusu.** Duolingo uzun seride bunu bilerek kullanıyor, ama kırılınca motivasyonun çöktüğünü kendisi yazıyor. Kaygılı öğrenciye uygun değil. |
| **Başta küçük adımı büyük hissettirmek.** 2'den 3'e çıkan seri %50 büyür. Bizde ilk eklenen program. | **Puan, rozet koleksiyonu, liderlik tablosu.** Tek seferlik kararda toplanacak bir şey yok. Başkasıyla yarış kaygıyı artırır. |
| **Beyaz boşlukla ayırmak, kutuyla değil.** Duolingo 2026 sekme yenilemesi. | **Karakter ve maskot.** Yeni çizim işi. Piksel imzamız zaten bizim karakterimiz. |
| **Tutarlılık amaca hizmet eder.** Her başlığa süs koymak tutarlı ama zorlama. | **Şaka ve "Hay aksi!" tonu.** Apple: samimiyetsiz duruyor. Kaygılı kullanıcıya hiç. |

## Apple'dan alınacaklar (irdeleyici göz)

- **Sesimiz sabit, tonumuz duruma göre.** Liste tamamlanınca hafif bir tebrik. Hata ya da
  ödemede düz ve ciddi. Açıkta kalan öğrenciye kutlama yok. NN/g'nin deyişiyle "neşe
  dayatılamaz".
- **Ekranın amacı ilk satırda.** En önemli bilgi önce. Birden çok fikir varsa ekranı böl.
- **Düğmede fiil.** "Listemi aç", "Sıralamamı gir". "Hadi bakalım!" gibi şirin etiket yok.
  Çok adımlı akışta tutarlı dil: "Devam" → "Devam" → son adımda ne olacağını söyleyen fiil.
- **"Biz" az.** Hata mesajında "biz" yok. "Bir sorun oluştu" değil, ne olduğu ve ne
  yapılacağı yazılır.
- **Boş ekranda net sonraki adım** ve tek düğme.
- **Geri bildirim önemiyle orantılı.** Sıradan eklemede sessiz onay (düğme ✓ olur, sayaç
  artar). Önemli anda (ilk program, liste doldu) görünür onay. Uyarı penceresi yalnız geri
  dönüşsüz kayıpta.
- **Dürüst ilerleme.** Sahte yüzde yok. Beklerken ne yapıldığı kısa ve doğru yazılır.
- **İpucu yerinde.** Baştan eğitim turu yerine, öğrenci bir şeye ilk dokunduğunda.

## İlkeler

1. **Her ekranın tek cümlelik cevabı var.** `/sonuc`'a gelen öğrenci önce kendi sonucunu
   görür: "85.000. sıradasın · Sayısal. 4.760 program açık."
2. **Öğrenci nerede olduğunu her ekranda görür.** Liste durumu sayıyla ("Listende 5/24
   program · 19 yer kaldı"), sihirbazda adın kendisi ("Şehir"). Hedef eğimi ve Zeigarnik
   etkisi: yarım işi tamamlama isteği. (Üç adımlı bir "tercih yolu" şeridi de düşünüldü;
   ücretsiz liste ile yapay zekâ listesi iki ayrı yol olduğu için tek şeride sığdırmak
   yanıltıcı olurdu, yapılmadı.)
3. **İlerleme dürüst ve somut.** Sayı ile yazılır ("7/24"), yüzde ya da sahte hız yok.
4. **Kutlama küçük, yerinde ve hak edilmiş.** Yalnız öğrencinin kendi başardığı adımda.
   Yerleşme gibi sonuçlarda kutlama yok. "Hareketi azalt" açıksa animasyon yok, metin var.
5. **Metin sen diliyle, sakin, vaatsiz.** Fiil düğmeler. Jargon ilk geçtiği yerde açıklanır.
   Hata mesajında suçlama ve ünlem yok.
6. **Boş durum = ne olduğu + tek düğme.**
7. **Anlamsal yapı herkes için.** Sayfa başına tek `h1`, bölümler `h2`. Odak almayan durum
   değişiklikleri (`Listene eklendi`, `Adım 2/3`) ekran okuyucuya duyurulur (WCAG 4.1.3).
   Açılır satırda `aria-expanded` ve `aria-controls` (APG). Dokunma hedefi 44 px (WCAG 2.5.5).

**Yapmadıklarımız (aldatıcı desenler):** sahte aciliyet ve geri sayım baskısı, sahte kıtlık,
utandırarak onay ("Hayır, geleceğimi umursamıyorum"), ısrarlı açılır pencere. "Kredi" dilinin
TL karşılığı açık bir karar olarak Bilal'e bırakıldı (aşağıda).

## Ekran ekran öneriler (öğrencinin kullandığı yerler)

| Ekran | Bugün | Öneri |
|---|---|---|
| `/sonuc` | Sayfada `h1` yok. İlk ekran yapay zekâ örneği, öğrencinin kendi sonucu değil. | Üstte sonuç başlığı: `h1` + sıra + açık program sayısı; dilim sayıları zaten hemen alttaki sekmelerde. Altında liste durumu. Tadımlık kartı yerinde kalır, bir blok aşağı iner. |
| Liste çekmecesi | "5 / 24 tercih" ve çubuk var. Doluluğun anlamı yok. | Risk dağılımı metinle ("2 riskli · 2 az riskli · 1 güvenli"). 24/24'te sakin bir tebrik satırı. |
| ＋ ile ekleme | Profilliyken hiç geri bildirim yok. Profilsizde uzun bir açıklama. | İlk eklemede tek sefer "İlk programın listende · 1/24". Sonrakiler sessiz (düğme ✓, sayaç artar). |
| Sihirbaz | "Adım 1/3" ve üç nokta. Adımların adı yok. | Adımların adı: Alan · Şehir · Öncelik. Adım değişince ekran okuyucuya duyurulur. |
| Sıralama yok sayfası | "Geçerli bir sıralama gerekli" (robotik). İkon düğmenin başında. | "Önce sıralamanı gir" ve bunun ne işe yaradığını söyleyen tek cümle. CTA kurala uygun (ok sonda). |
| Liste hazırlanırken | Aşama mesajları var (iyi). "Sayfayı kapatma" uyarısı 12 px gri. | Önemli uyarı okunur boyda. Başlık iri. |
| Rapor satırı aç/kapa | `aria-expanded` var, `aria-controls` yok. | Açılan bölgeye kimlik ver ve bağla. |

## Skill'lerle değerlendirme (25 Eyl 2026)

- **Emil Kowalski, `emil-design-eng`:** Nadir ve hak edilmiş an küçük bir girişle kutlanır
  (scale 0.95 + opaklık, güçlü ease-out, 300 ms altı); sık tekrarlanan etkileşim
  canlandırılmaz; sekme (bounce) yok. Uygulandı: "Listen tamam" girişi, sihirbaz çubuğu
  transform ile doluyor, dilim sekmesinde sekme kaldırıldı. Zaten uygundu: hover yalnız gerçek
  imleçli cihazda (Tailwind v4), `transition-[…]` ile açık özellik, `active:scale`.
- **Emil Kowalski, `apple-design`:** Yön bulma (her ekran "neredeyim"i söyler), özerklik
  (onay penceresi yerine geri al), "keyif konfeti değil, diğer yedi ilkenin sonucu".
- **Jakub Krehel, `better-ui` (ui-skills.com):** projeye eklendi
  (`.claude/skills/better-ui`), başına DESIGN.md önceliği notu düşüldü.
- **Vercel Web Interface Guidelines** (`web-design-guidelines` skill'inin kaynağı): skill
  eklenmedi, çünkü her çalışmada uzak bir adresten talimat çekip uyguluyor; kurallar bir kez
  okunup uygulandı: yıkıcı işleme geri al, çekmecede `overscroll-contain`, "İçeriğe geç"
  linki, başlıkta `text-balance`, bekleme metninde "…".
- `ui-ux-pro-max` AGENTS.md gereği kullanılmadı.

## Bu dalda yapılanlar (`tasarim/ogrenci-samimi`)

| Ekran | Yapılan |
|---|---|
| `/sonuc` | `h1` + tek cümlelik cevap ("85.000. sıradasın… 4.760 program sana açık"), liste durumu düğmesi |
| ＋ ile ekleme | İlk programda ve 24/24'te tek seferlik onay; dolu listede ne yapılacağı |
| Bildirimler | Denendi, geri alındı: sitenin geri kalanıyla uyumsuz duruyordu (Bilal) |
| Liste çekmecesi | Risk dağılımı metinle, "Listen tamam", güvenli yoksa ipucu, silmede geri al |
| Sihirbaz | Adlı adımlar (Alan · Şehir · Öncelik), ekran okuyucuya duyuru |
| Sıralama yok | "Önce sıralamanı gir" + ne işe yaradığı |
| `/listem` | "Tercih listen" + sayılarla özet; **telefonda 434 px yana taşma hatası düzeldi** |
| Kaydet bandı | Telefonda kelime kelime kırılma düzeldi |
| Site geneli | "İçeriğe geç" linki |

## Bilal'e kalan kararlar

- **Kredi ve TL.** Aldatıcı desenler listesinde "para birimi karmaşası" var. Bildirimde "(3
  kredi)" yazıyor; kredinin TL karşılığı pakete göre ≈4–5 TL. Yanına TL yazılsın mı?

- **`/sonuc` sırası.** Tadımlık 22 Eylül'de dönüşüm için bilerek ilk ekrana alındı. Sonuç
  başlığı onu yaklaşık 170 px aşağı itiyor (375 px'te hâlâ ilk ekranda başlıyor). Ölçümde
  "tadımlık görüntülenme" düşerse başlık küçültülür, kaldırılmaz.
- **Kutlama hareketi.** Şimdilik yalnız metin, hafif bir büyüme ve renk. Konfeti ya da ses
  yok. Daha "Duolingo" isteniyorsa bir sonraki adım piksel imzasıyla kısa bir "ısınma"
  (hero'daki pikseller gibi) olabilir.

## Kaynaklar

1. Duolingo, "Elevating craft: How we refreshed our core tabs", 4 Şub 2026. https://blog.duolingo.com/core-tabs-redesign/
2. Duolingo, "The habit-building research behind your Duolingo streak", 31 Oca 2022. https://blog.duolingo.com/how-duolingo-streak-builds-habit/
3. Duolingo, "Start earning brand-new Achievements", 11 Ara 2023. https://blog.duolingo.com/achievement-badges/
4. NN/g, Tanner Kohler, "Autonomy, Relatedness, and Competence in UX Design", 9 Oca 2022. https://www.nngroup.com/articles/autonomy-relatedness-competence/
5. NN/g, Therese Fessenden, "Three Pillars of User Delight", 27 Kas 2022. https://www.nngroup.com/articles/pillars-user-delight/
6. NN/g, Jakob Nielsen, "Progressive Disclosure", 2006. https://www.nngroup.com/articles/progressive-disclosure/
7. NN/g, Kate Kaplan, "Designing Empty States in Complex Applications", 19 Eyl 2021. https://www.nngroup.com/articles/empty-state-interface-design/
8. Apple HIG, Writing (güncelleme 16 Ara 2025). https://developer.apple.com/design/human-interface-guidelines/writing
9. Apple HIG, Onboarding (10 Haz 2024). https://developer.apple.com/design/human-interface-guidelines/onboarding
10. Apple HIG, Feedback. https://developer.apple.com/design/human-interface-guidelines/feedback
11. Apple HIG, Progress indicators. https://developer.apple.com/design/human-interface-guidelines/progress-indicators
12. Laws of UX (Jon Yablonski): Goal-Gradient Effect, Peak-End Rule, Hick's Law, Zeigarnik Effect. https://lawsofux.com
13. W3C WCAG 2.2: 2.5.8 Target Size (Minimum), 4.1.3 Status Messages; WAI-ARIA APG Disclosure Pattern. https://www.w3.org/WAI/
14. Harry Brignull, Deceptive Patterns: Types. https://www.deceptive.design/types