Yayına Çıkmadan Önce: Arayüz Denetimi — Atlas

KAZANIM Bu dersin sonunda: uygulamanı mağazaya ya da kullanıcıya vermeden önce hangi 13 şeyi kontrol ettirmen gerektiğini bilir, otomatik denetimin nerede yalan söylediğini tanır ve "bulgu yok" raporunu okuduğunda ne anlaman gerektiğini ayırt edersin.

Bu dosyanın rolü: DERİNLİK — prod-vakalari altyapının sessiz hatalarını anlatır; bu ders arayüzün sessiz hatalarını. İkisi aynı hastalığın iki yüzü: hata vermeyen hata.

📅 Son tarama: 4 Eylül 2026. Bu bir Atlas dokümanıdır; vakalar gerçek, altı aydan eskiyse sondaki istemle tazele.

Neden bu ders var

Kod bilmeyen bir yönetici için arayüz hatası, altyapı hatasından daha tehlikelidir. Sebebi basit: altyapı hatası bir yerde çöker, log basar, seni uyandırır. Arayüz hatası hiçbir şey yapmaz. Kullanıcı düğmeyi bulamaz, vazgeçer, gider. Sana ulaşan tek sinyal, hiç gelmeyen kullanıcıdır.

Bu dersin çekirdek cümlesi şu:

"Bulgu yok" ile "sorun yok" aynı şey değildir.

Bir denetim aracı iki yönde de yanılabilir. Yanlış temiz rapor verir (sorun var, göremedi) ya da yanlış alarm verir (sorun yok, var sandı). İkincisi daha sinsidir: her sayfada öten bir kontrol, kimsenin okumadığı bir kontrole dönüşür — ve o kontrol gerçekten bir şey bulduğunda da okunmaz.

Bölüm 1 · 13 kontrol

Bunlar teorik liste değil; her biri gerçek bir kullanıcı kaybının adı.

Okunuyor mu

1 · KontrastMetin zemininden yeterince ayrılıyor mu? Ölçü WCAG AA: normal yazı için 4,5:1, büyük yazı için 3:1.

🔑 Gözle karar veremezsin, model de veremez. 4,6:1 (geçer) ile 4,3:1 (kalır) ekranda birebir aynı görünür. Bu yüzden bu iş ölçüm işidir, izlenim işi değil.

2 · Çok küçük yazı12px altı mobilde okunmaz. Yasal metinler bahane değil; okunmayan onay, alınmamış onaydır.

3 · Kırpılan metinKabına sığmayıp kesilen yazı.

⚠️ Yanlış alarm burada başlıyor: line-clamp ile bilinçli kısaltma da "kırpılmış" görünür. Gerçek bir taramada 18 "kırpık" bulgunun 17'si bilinçliydi. Aracın bunu ayırt etmesi gerekir; ayırt etmiyorsa raporu sen ayıklayacaksın.

Ulaşılıyor mu

4 · Dokunma hedefiParmak fare değildir. Apple ve WCAG 44px diyor. Web'de 32px'lik bir düğme fareyle sorunsuz, telefonda ıskalanır.

5 · Üstüne binen öğelerBir şey başka bir şeyi örtüyor mu?

📌 Gerçek vaka (4 Eyl 2026): Bir uygulamada "başa dön" düğmesi ile sohbet balonu tam olarak aynı koordinatlardaydı (bottom-5 right-5, ikisi de). Giriş yapan kullanıcıda ikisi birden çıkıyor, biri diğerinin altında kayboluyordu. Aylardır oradaydı, kimse bildirmedi — çünkü kaybolan düğmeyi kimse aramaz.

🔑 Kesişme örtme demek değildir. İki kutu geometrik olarak üst üste binebilir ama biri arkada olabilir; ekranda sorun yoktur. Doğru soru "kesişiyorlar mı" değil, "o noktaya dokunsam hangisi cevap verir".

6 · Sabit çubuk ve klavye altında kalanlarAlt çubuk bir düğmeyi örtüyor mu? Ekran klavyesi açılınca yazdığın kutu görünüyor mu?

7 · Çentik ve ev çubuğuTelefonun üst çentiği ya da alttaki ev çubuğu içeriği yiyor mu?

🔑 Bunun net bir kapısı var: sayfa viewport-fit=cover ile tam ekranı istememişse iOS zaten kenarları boş bırakır, sorun oluşmaz. Hata ancak tam ekranı isteyip karşılığında gelen boşluğu kullanmayınca doğar — PWA'larda en sık görülen hata budur.

8 · Yatay kaydırmaSayfa sağa sola kayıyorsa bir yerde taşan bir öğe vardır.

Mantıklı mı

9. Hangisi ana eylem? "Kaydet · İptal · Sil" üçü de aynı renkse kullanıcı hangisine basacağını renkten değil okuyarak bulmak zorunda kalır. Ana eylem ayrışmalı.

⚠️ Ama alt gezinme çubuğu bunun istisnası. "Ara / Takvim / Mesaj / Profil" zaten aynı görünmeli — sekmeler eşittir. Filtre çipleri de öyle. Bu kontrolün ötmesi gereken tek yer, yanlış tıklamanın bedeli olan eylemlerdir: kaydet, sil, gönder, öde.

10. Hata mesajları. "Bir hata oluştu." Hangi hata? Kullanıcının elinde tek seçenek kalır: tekrar dene ve umut et. Mesaj ya sorunu adlandırmalı ya da bir çıkış yolu sunmalı ("Tekrar dene" düğmesi).

11. Geri dönüşü olmayan işlem. Silme onay sormalı, geri alma olmalı. Ayrıca hesap silme her uygulamada bulunmalı — Google Play bunu zorunlu tutuyor.

12. Karanlık mod. Koyu temada kalan beyaz panel, gece kullanan birinin gözüne bir el feneri gibi çarpar. İki temada da aynı kalan renk = sabit-kodlanmış renk.

13. İzin isteği. Kamera, konum, bildirim — gerekçesiz istenen izin %30'un altında onaylanıyor. Kullanıcı daha hiçbir şey yapmadan açılışta çıkan izin kutusu, arkasında bir sebep olmadığı için reddedilir. Önce neden gerektiğini göster, sonra iste.

Bakarak ölçülemeyen ikisi

Çevrimdışı davranış. İnternet gidince ne oluyor? Açıklama mı, sonsuz dönen bir çember mi, boş ekran mı? Dönen çember en kötüsüdür: hiçbir şey gelmiyorken bir şey geliyormuş gibi söz verir.

🔑 Adil olmak için ayrım şart: service worker'ı olmayan bir sayfa çevrimdışına zaten cevap veremez, bu hata değildir. Ama "çevrimdışı da çalışır" diyen bir PWA için aynı şey tam olarak hatadır.

Geri tuşu. Bir önceki ekrana dönmeli, uygulamadan düşürmemeli. Android'de en sık şikâyet edilen davranış budur.

Bölüm 2 · Otomatik denetim nerede yalan söyler

Bu bölüm dersin asıl değeri. Yukarıdaki 13 maddeyi bir araca koşturmak kolay; raporu okumayı bilmek zor.

Yalan 1 · Yanlış temiz

Bir kullanıcı telefonundan dört ekran görüntüsü çekip "şurada hata var" dedi. Aynı ekranlar otomatik denetimden "temiz" geçmişti. Sebep: motorda üstüne-binme kontrolü yoktu. Kontrast ve boyut kuralları, bir öğenin başkasının üstünde durduğunu göremez.

📌 Ders: Aracın kontrol listesinde olmayan hata, aracın gözünde yoktur. "Bulgu yok" cümlesi, "kontrol ettiklerimde bulgu yok" demektir — hepsinde değil.

Yalan 2 · Yanlış alarm

Aynı araç bir uygulamada "ana eylem belirsiz" diye üç bulgu verdi. Üçü de yanlıştı: ikisi bir tanıtım telefon maketinin içindeki sahte menüydü, biri filtre çipiydi.

Bir başkası "aynı ekranda iki dil" dedi: 591 Türkçe işarete karşı 7 İngilizce — hepsi bir karuselin next etiketi. %1 gürültü.

📌 Ders: Doğru davranışta öten kontrol, kimsenin dinlemediği kontroldür. Bir araç sana sürekli yanlış alarm veriyorsa, o aracın gerçek bulgusunu da okumayacaksın.

Yalan 3 · Yapay vakayla test etmek

Bir kontrolü sınamak için elle "hatalı" bir sayfa yazmak cazip. Ama gerçeği temsil etmeyen yapay vaka, aracı bozan bir düzeltme üretir.

📌 Gerçek vaka: Klavye kontrolü için yapay bir "tuzak sayfa" yazıldı, kontrol onu yakalamadı, model değiştirildi — sonra gerçek telefonda bakıldığında anlaşıldı ki ilk model doğruymuş, yapay sayfa gerçek bir tuzak değilmiş. Aynı şey örtülme kontrolünde ve yuvarlak düğme köşelerinde de yaşandı. Üçü de ancak gerçek şeye bakınca düzeldi.

Yalan 4 · Girişin arkasını hiç görmemek

Elle bulunan dört gerçek hatanın üçü girişin arkasındaydı, biri yalnız tek bir rolde görünüyordu. Anonim tarama uygulamanın yarısını hiç görmez.

📌 Yukarıdaki üst-üste-binen-düğme vakası tam olarak böyleydi: sohbet balonu yalnız giriş yapana render ediliyordu, dolayısıyla anonim denetim onu asla göremezdi.

Bölüm 3 · Cepte duracak istem

Yayın öncesi, her projede aynısı:

Yayına çıkmadan önce arayüz denetimi yap.

1. Önce ölç: kontrast, 44px dokunma hedefi, 12px altı yazı, yatay taşma,
   üstüne binen kontroller, karanlık modda kalan açık alanlar.
2. Sonra GÖZLE bak — hizalama, çakışma ve boşluk hataları ölçüme takılmaz.
3. Girişin arkasına geç. Rol varsa hepsini gez. Geçemezsen "geçemedim, sebebi
   şu" diye AÇIKÇA yaz, sessizce atlama.
4. İnternet kesilince ve geri tuşuna basılınca ne oluyor, dene.
5. Bulguları ayıkla: her bulguyu düzeltme, önce gerçek mi bak. Yanlış alarm
   dediğine sebebini yaz.

Bana dört başlıkta rapor et: ne buldum · ne düzelttim · ne düzeltmedim neden ·
aracın göremedikleri.

Dördüncü başlık en değerlisidir: gözünle gördüğün ama aracın ölçmediği şey, bir sonraki kontrolün ta kendisidir.

Bölüm 4 · Bunu neyle yapacaksın

Bu dersteki 13 maddenin tamamı otomatik ölçülebilir hale getirildi — ikisi (çevrimdışı, geri tuşu) ağı gerçekten kesip düğmeye gerçekten basarak.

uisight — MCP sunucusu + canlı panel + CLI. Editör eklentisi olarak Antigravity, Cursor ve VSCodium'da tek tıkla kurulur.

npx uisight https://siteniz.com --theme both

🔑 Maliyet uyarısı, ölçülmüş rakamlarla: CLI bir rapor dosyası yazar, model onu bir kez okur (~800 token). MCP araçlarını ekran ekran sürmek ise her adımda tüm sohbeti yeniden gönderir. Uygulama taramak için CLI'yi kullan; MCP'yi bir sayfada iş yapmak için sakla. Bu ayrım, bir kullanıcının aylık planını iki denemede bitirmesiyle öğrenildi.

Kontrol soruları

Denetim raporu "bulgu yok" diyor. Bu ne demek, ne demek değil?
Alt gezinme çubuğundaki dört sekme aynı renk. Bu bir hata mı? Neden?
Bir kontrolün yanlış alarm vermesi neden yanlış temiz vermesinden daha kötü olabilir?
Anonim tarama neden uygulamanın yarısını göremez? Örnek ver.
İzin isteğini açılışta değil de kullanıcı bir şey yaptıktan sonra göstermek neyi değiştirir?

Mentor istemi

[arayuz-denetimi.md] dersini okudum. Kendi projemde bu 13 maddeyi tek tek
kontrol ettir, ama her bulgu için önce "bu gerçek mi yoksa yanlış alarm mı"
diye sor ve gerekçesini yaz. Sonra bana dört başlıkta rapor et.