--- title: 'Ekran Boyutu ve Girdi Türü' source: 'https://academia.sh/tr/kurslar/arayuz-temelleri/ekran-boyutu-ve-girdi-turu' course: 'Arayüz Tasarımının Temelleri' language: tr updated: '2026-08-17T18:09:36+00:00' license: 'CC BY-SA 4.0' --- # Ekran Boyutu ve Girdi Türü Girdi türünün ekran genişliğinden bağımsız bir değişken olması; hedef boyutu ölçütlerinin, aralık istisnasının ve etkin alan genişletmenin hesapla denetlenmesi. Önceki ders genişliği tek değişken olarak ele aldı ve düzenin genişlikle nasıl değiştiğini hesapladı. Ancak dar bir görüntü alanı yalnız dar değildir. Çoğu zaman girdi türü de değişir: imlecin bıraktığı yeri parmak alır, hedeflerin ölçüsü yeniden tanımlanır ve imlece bağlı etkileşimlerin karşılığı ortadan kalkar. Yoğunluk dersinde 33 piksellik kayıt satırının en düşük hedef eşiğini geçtiği ama gelişmiş eşiğin altında kaldığı görülmüştü. Bu ders o eşikleri ölçüt numaralarıyla hesaplar, katalog kayıt satırındaki simge düğmelerini sınar ve düzeltmenin maliyetini çıkarır. ## Girdi Türü Ekran Boyutundan Bağımsızdır **Girdi türü (input modality)**, kullanıcının arayüze dokunma, imleç ya da klavye üzerinden hangi kesinlikle eriştiğini belirtir. Yaygın varsayım, dar ekranın dokunma, geniş ekranın imleç anlamına geldiğidir. Bu varsayım üç yerde kırılır: geniş ekranlı dokunmatik yüzeyler, dar pencereye küçültülmüş imleçli oturumlar ve ikisini birden taşıyan aygıtlar. Dahası girdi türü oturum içinde değişebilir; kullanıcı aynı ekranda bir dakika parmakla, bir dakika imleçle çalışabilir. Bundan iki tasarım kuralı çıkar: - **Ölçü kararları en kaba girdiye göre verilir.** Etkileşime açık her alan bir **dokunma hedefidir (touch target)** ve ölçüsü dokunmanın gerektirdiği değere göre belirlenir; imleçle çalışan kullanıcı büyük hedeften zarar görmez. - **Yetenek kararları özellik saptamayla verilir, genişlikle değil.** Üzerine gelmenin desteklenip desteklenmediği ekran genişliğinden çıkarılamaz; ilgili ortam özelliğiyle sınanır. ## Hedef Boyutu Ölçütleri İki ölçüt vardır ve ikisi de CSS piksel cinsinden ölçülür. WCAG 2.5.8 hedefin en küçük kenarının **24 piksel** olmasını ister; 2.5.5 aynı ölçüyü **44 piksele** çıkarır. İlkinin bir de aralık istisnası vardır: hedef 24 pikselden küçük olsa bile, her hedefin sınırlayıcı kutusuna çizilen 24 piksel çaplı daireler birbirini kesmiyorsa ölçüt sağlanmış sayılır. Aşağıdaki program katalog kayıt satırının sağındaki dört simge düğmesini üç ayrı ölçü kararıyla üretir ve her ikisini de denetler. ```js // 10-hedef.mjs — hedef boyutu, aralik istisnasi ve etkin alan genisletmenin maliyeti const ENAZ = 24; // WCAG 2.5.8 Hedef Boyutu (En Az) const GELISMIS = 44; // WCAG 2.5.5 Hedef Boyutu (Gelismis) // Katalog kayit satirinin sagindaki simge dugmeleri. // Simge 16px, iki yanda ic bosluk, dugmeler arasinda ARALIK kadar bosluk. function satirUret(simge, icBosluk, aralik, sayi, baslangicX) { const kenar = simge + 2 * icBosluk; const dugmeler = []; for (let i = 0; i < sayi; i++) { dugmeler.push({ ad: `dugme-${i + 1}`, x: baslangicX + i * (kenar + aralik), y: 0, g: kenar, h: kenar, }); } return dugmeler; } function merkez(d) { return { x: d.x + d.g / 2, y: d.y + d.h / 2 }; } function merkezUzakligi(a, b) { const ma = merkez(a); const mb = merkez(b); return Math.hypot(ma.x - mb.x, ma.y - mb.y); } function denetle(ad, dugmeler) { console.log(ad); const enKucukKenar = Math.min(...dugmeler.map((d) => Math.min(d.g, d.h))); console.log(` dugme olcusu: ${dugmeler[0].g}x${dugmeler[0].h}px dugme sayisi: ${dugmeler.length}`); console.log(` 2.5.8 (>= ${ENAZ}px): ${enKucukKenar >= ENAZ ? "gecer" : "kalir"}`); console.log(` 2.5.5 (>= ${GELISMIS}px): ${enKucukKenar >= GELISMIS ? "gecer" : "kalir"}`); // Aralik istisnasi: her hedefin merkezine cizilen 24px capli daireler kesismemeli, // yani iki merkez arasindaki uzaklik en az 24px olmali. let enYakin = Infinity; for (let i = 0; i < dugmeler.length; i++) { for (let j = i + 1; j < dugmeler.length; j++) { enYakin = Math.min(enYakin, merkezUzakligi(dugmeler[i], dugmeler[j])); } } console.log( ` en yakin iki merkez arasi: ${enYakin}px aralik istisnasi: ${enYakin >= ENAZ ? "gecer" : "kalir"}` ); console.log(""); } denetle("A) simge 16, ic bosluk 4, aralik 4", satirUret(16, 4, 4, 4, 0)); denetle("B) simge 16, ic bosluk 2, aralik 2", satirUret(16, 2, 2, 4, 0)); denetle("C) simge 16, ic bosluk 14, aralik 4", satirUret(16, 14, 4, 4, 0)); // Etkin alani gorsel olcuyu buyutmeden 44px'e cikarmak const gorsel = 24; const buyume = (GELISMIS - gorsel) / 2; console.log("etkin alani gorsel olcuyu degistirmeden 44px'e cikarmak"); console.log(` her yandan eklenecek: ${buyume}px`); for (const aralik of [4, 12, 20, 24]) { const kalanBosluk = aralik - 2 * buyume; console.log( ` dugme araligi ${String(aralik).padStart(2)}px -> etkin alanlar ` + `${kalanBosluk >= 0 ? `${kalanBosluk}px aralikla ayrik` : `${-kalanBosluk}px ust uste biner`}` ); } // Satirin tamami hedefse: 44px satir yuksekliginin tarama maliyetine etkisi console.log(""); const LISTE_ALANI = 640; console.log("satirin tamami hedefse ekran basina kayit"); for (const satir of [33, 44, 73]) { const kayit = Math.floor(LISTE_ALANI / satir); console.log( ` satir ${String(satir).padStart(3)}px -> ${String(kayit).padStart(2)} kayit/ekran ` + `200 sonuc icin ${Math.ceil(200 / kayit)} ekran` ); } ``` ``` A) simge 16, ic bosluk 4, aralik 4 dugme olcusu: 24x24px dugme sayisi: 4 2.5.8 (>= 24px): gecer 2.5.5 (>= 44px): kalir en yakin iki merkez arasi: 28px aralik istisnasi: gecer B) simge 16, ic bosluk 2, aralik 2 dugme olcusu: 20x20px dugme sayisi: 4 2.5.8 (>= 24px): kalir 2.5.5 (>= 44px): kalir en yakin iki merkez arasi: 22px aralik istisnasi: kalir C) simge 16, ic bosluk 14, aralik 4 dugme olcusu: 44x44px dugme sayisi: 4 2.5.8 (>= 24px): gecer 2.5.5 (>= 44px): gecer en yakin iki merkez arasi: 48px aralik istisnasi: gecer etkin alani gorsel olcuyu degistirmeden 44px'e cikarmak her yandan eklenecek: 10px dugme araligi 4px -> etkin alanlar 16px ust uste biner dugme araligi 12px -> etkin alanlar 8px ust uste biner dugme araligi 20px -> etkin alanlar 0px aralikla ayrik dugme araligi 24px -> etkin alanlar 4px aralikla ayrik satirin tamami hedefse ekran basina kayit satir 33px -> 19 kayit/ekran 200 sonuc icin 11 ekran satir 44px -> 14 kayit/ekran 200 sonuc icin 15 ekran satir 73px -> 8 kayit/ekran 200 sonuc icin 25 ekran ``` Üç ölçü kararının üçü de aynı 16 piksellik simgeyi taşıyor; farkı yalnız iç boşluk yaratıyor. A kararı 4 piksel iç boşlukla tam 24 pikselde durur ve en düşük eşiği geçer. B kararı 2 piksel iç boşlukla 20 piksele iner ve iki ölçütü birden kaybeder. C kararı 14 piksel iç boşlukla 44 piksele çıkar ve ikisini de geçer. Aradaki tek değişken, ekranda hiç görünmeyen bir değerdir. İç boşluk simgenin çevresindeki şeffaf alandır; kullanıcı onu görmez, yalnız dokunduğunda varlığını fark eder. Hedef boyutu bu yüzden görsel bir karar değil, **görünmeyen** bir karardır ve gözle denetlenemez. ## Aralık İstisnası Neyi Kurtarır B kararında düğme ölçüsü 20 piksele indi ve ölçüt kaldı. Aralık istisnası bu durumu kurtarabilir miydi? Çıktı hayır diyor: en yakın iki merkez arası 22 piksel, gereken 24. İstisna da sağlanmıyor. Aritmetik ilginçtir. B kararında düğmeler 20 piksel genişliğinde ve aralarında 2 piksel var; merkezler arası uzaklık 22 piksel. İstisnanın geçmesi için ya düğme en az 22 piksele çıkmalı ya da aralarındaki boşluk en az 4 piksel olmalı. İkinci yol daha ucuzdur: aynı görsel ölçüyle, yalnız 2 piksel daha boşlukla ölçüt sağlanır. Bu, aralık istisnasının ne işe yaradığını gösterir. İstisna, küçük hedefleri meşrulaştırmak için değil, **hedefler arası boşluğun hedef boyutunun bir parçası olduğunu** söylemek için vardır. Yan yana duran iki küçük düğme birbirini tehlikeli kılar; tek başına duran bir küçük düğme kılmaz. Ölçüt, yalıtılmışlığı ödüllendirir. ## Etkin Alanı Büyütmenin Gizli Maliyeti Yaygın bir çözüm, görsel ölçüyü değiştirmeden **etkin alanı (hit area)** büyütmektir: düğme 24 piksel görünür, 44 piksel tıklanır. Çıktının ikinci bloğu bu çözümün gizli maliyetini veriyor. 24 pikselden 44 piksele çıkmak her yandan 10 piksel ekler. Düğmeler arasındaki boşluk 4 pikselse, iki komşu düğmenin etkin alanları 16 piksel üst üste biner: üst üste binen bölgeye yapılan bir dokunuşun hangi düğmeye gideceği tasarımın söyleyemediği bir şeydir. Boşluk 12 pikselde hâlâ 8 piksel binişme kalır. Ayrılma ancak 20 piksellik boşlukta sağlanır. Sonuç şudur: **etkin alanı büyütmek, aralığı da büyütmeden yapılamaz.** Görsel ölçüyü sabit tutup dokunma kolaylığı kazanma vaadi, komşu hedefler varken karşılıksızdır. Tek başına duran bir düğmede — örneğin kayıt ayrıntısındaki "Ödünç al" düğmesinde — vaat geçerlidir, çünkü çakışacak komşu yoktur. ## Satırın Tamamı Hedefse Katalog sonuç listesinde tıklanabilir olan çoğu zaman tek tek simgeler değil, kayıt satırının tamamıdır. Bu durumda hedef boyutu doğrudan satır yüksekliğidir ve yoğunluk kararıyla aynı sayıya bağlanır. Çıktının son bloğu bağlantıyı gösteriyor. Sıkışık düzenin 33 piksellik satırı ekranda 19 kayıt gösterir ve 200 sonuç 11 ekranda taranır. Satır gelişmiş eşiğe, 44 piksele çıkarıldığında ekranda 14 kayıt kalır ve tarama 15 ekrana çıkar — dört ekran daha. Dengeli düzenin 73 piksellik satırında maliyet 25 ekrandır. Bu, yoğunluk dersindeki ödünleşimin girdi türüne bağlı olduğunu kesinleştirir. Aynı liste, imleçle çalışan bir oturumda 33 piksellik satırla 11 ekranda taranabilir; dokunmayla çalışan bir oturumda gelişmiş eşiği tutmak için 15 ekrana çıkar. Fark yüzde 36'dır ve tasarımın bunu ya kabul etmesi ya da satır dışındaki bir hedefle çözmesi gerekir — örneğin satırın tamamını değil, yalnız kayıt başlığını hedef yapmak ve başlığın kendi yüksekliğini eşiğe çıkarmak. ## İmlece Bağlı Etkileşimin Karşılığı Yoktur Ölçü dışında bir de yetenek farkı vardır. İmleç bir konum bildirir ve bu konum tıklama olmadan da bilinir; dokunma böyle bir konum üretmez. **Üzerine gelme (hover)** durumunda görünen her şey, dokunmayla çalışan bir oturumda ya hiç görünmez ya da ancak dokunulduktan sonra görünür. Buradan bir kısıt çıkar: **üzerine gelme, bilgi taşıyan tek yol olamaz.** Kayıt satırındaki simge düğmeleri yalnız üzerine gelindiğinde beliriyorsa, dokunmayla çalışan kullanıcı onların varlığını bilemez. Aynı biçimde, bir kısaltmanın açılımı ya da bir raf kodunun anlamı yalnız ipucu balonunda veriliyorsa, o bilgi bir kullanıcı kümesi için yok demektir. Üzerine gelmenin meşru kullanımı **pekiştirmedir**: zaten görünen bir şeyin tıklanabilirliğini vurgulamak, zaten yazılı olan bir etiketi belirginleştirmek. Yeteneğin varlığı ekran genişliğinden değil, ilgili ortam özelliğinden okunur; `hover` ve `pointer` ortam özellikleri bu ayrımı doğrudan sorgular ve `pointer: coarse` değeri kaba çözünürlüklü bir girdiyi bildirir. Ölçü kararlarının bu sorgulamaya bağlanmaması gerekir: hedef boyutu her koşulda en kaba girdiye göre verilir, çünkü girdi türü oturum içinde değişebilir. ## Özet - Girdi türü ekran genişliğinden türetilemez; ölçü kararları en kaba girdiye göre verilir, yetenek kararları ise ortam özelliği sorgulanarak verilir. - Hedef boyutu görünmeyen bir karardır: aynı 16 piksellik simge, iç boşluğa göre 20, 24 ya da 44 piksellik hedef üretir ve fark ekranda görünmez. - Aralık istisnası küçük hedefleri meşrulaştırmaz; hedefler arası boşluğun hedef boyutunun parçası olduğunu söyler ve yalıtılmış hedefi ödüllendirir. - Etkin alanı görsel ölçüyü değiştirmeden büyütmek komşu hedefler varken karşılıksızdır: 24 pikselden 44 piksele çıkmak her yandan 10 piksel ekler ve 20 pikselden dar aralıkta etkin alanlar üst üste biner. - Satırın tamamı hedefse yoğunluk kararı ile hedef boyutu aynı sayıya bağlanır; 33 piksellik satır 11 ekranda, 44 piksellik satır 15 ekranda taranır. - Üzerine gelme bilgi taşıyan tek yol olamaz; meşru kullanımı zaten görünen bir şeyi pekiştirmektir. ## Sonraki Adım Düzen iskeleti bu dersle tamamlandı: sütunlar, oluklar ve kenar boşlukları ekran genişliğinden türetiliyor, aralıklar kapalı bir ölçekten geliyor, yoğunluk görevden çıkarılıyor ve hedef ölçüsü en kaba girdiye göre belirleniyor. İskeletin içine girecek metin ise henüz seçilmedi. Katalog arayüzünün taşıdığı yükün neredeyse tamamı metindir ve bu ders boyunca metin hep bir dikdörtgen gibi ele alındı — 16 piksel yüksekliğinde, 8 piksel genişliğinde karakterlerden oluşan bir blok. Sonraki bölüm bu varsayımı açar ve yazı tipi seçimini beğeniden ölçüte taşır: görünen büyüklük nasıl hesaplanır, hangi karakterler birbirine karışır, bir yazı tipi ailesi kaç hiyerarşi düzeyi taşıyabilir.