--- title: 'Yakınlık ve Gruplama' source: 'https://academia.sh/tr/kurslar/arayuz-temelleri/yakinlik-ve-gruplama' course: 'Arayüz Tasarımının Temelleri' language: tr updated: '2026-08-17T18:09:37+00:00' license: 'CC BY-SA 4.0' --- # Yakınlık ve Gruplama İlişkinin boşlukla ilan edilmesi; gruplamanın mutlak boşlukla değil boşluk oranıyla kurulması ve iç içe gruplama düzeylerinin sayısal denetimi. Önceki ders ögeleri birbirinden ayırmayı ele aldı: hangi öge önce okunur, bu sıra hangi kanallarda ifade edilir. Arayüzün ikinci işi bunun tersidir. Katalog kaydında başlık, yazar adı ve raf kodu ayrı ayrı çizilir ama aynı kitaba aittir. Bir sonraki kaydın başlığı yalnızca birkaç piksel aşağıdadır ve başka bir kitaba aittir. Bu iki durumun farkı ekranda neyle anlaşılır? Yanıt çizgi ya da çerçeve değil, boşluktur. Bu ders boşluğun ilişkiyi nasıl kurduğunu, kurulan ilişkinin neden mutlak piksel değerine değil boşluklar arası **orana** bağlı olduğunu ve bu oranın nasıl denetleneceğini gösterir. ## Yakınlık İlişkiyi İlan Eder **Yakınlık (proximity)**, birbirine yakın duran ögelerin tek bir birim olarak algılanması eğilimidir. Bu eğilim, algı psikolojisinde **Gestalt ilkeleri (Gestalt principles)** adıyla toplanan bir grubun üyesidir; aynı grupta benzer görünen ögelerin birlikte algılanması (**benzerlik**, similarity) ve ortak bir zemin ya da çerçeve paylaşan ögelerin birlikte algılanması (**ortak bölge**, common region) da bulunur. Bu ilkelerin arayüz tasarımı için önemi kuramsal değil pratiktir: ilkeler bir seçenek sunmaz, bir kısıt getirir. Ögeler bir düzleme yerleştirildiği anda gruplanmış olurlar. Tasarımcının kararı "gruplayayım mı" değil, "algılanan gruplama amaçlanan gruplamayla örtüşüyor mu" sorusudur. Boşluk verilmediğinde gruplama ortadan kalkmaz; rastgele bir gruplama yerleşir. Yakınlık ilkeleri arasında bir güç sırası vardır. İki öge birbirine yakın ama farklı renkteyse, yakınlık benzerliği yener: ögeler tek grup olarak okunur. Katalog kaydında başlık koyu ve kalın, yazar adı soluk ve normal ağırlıktaysa, aralarında 4 piksel varken bu ikisi hâlâ tek kayıt olarak algılanır. Bu, hiyerarşi ile gruplamanın çakışmadığı anlamına gelir: bir grubun içindeki ögeler birbirinden farklı ağırlıkta olabilir, grup kimliğini taşıyan şey boşluktur. ## Gruplama Mutlak Boşlukla Değil Oranla Kurulur Yakınlık göreli bir ölçüdür. "24 piksel boşluk kayıtları ayırır" cümlesi kendi başına doğru ya da yanlış değildir; kaydın içindeki boşluğun kaç piksel olduğu bilinmeden değerlendirilemez. İç boşluk 4 pikselse 24 piksel açık bir sınırdır; iç boşluk 20 pikselse aynı 24 piksel hiçbir şey ayırmaz. Bunu denetlenebilir kılmak için bir ölçüt gerekir. Bu kurs şu ölçütü benimser: bir boşluk, aynı yığındaki en küçük boşluğun **en az iki katıysa** grup sınırı sayılır. Aşağıdaki program katalog sonuç listesinin iki farklı aralık kararını bu ölçütle sınar. ```js // 02-gruplama.mjs — dikey yiginda bosluk oranina gore gruplama denetimi // Katalog sonuc listesinin iki satiri: her kayit baslik + yazar + ustveri tasir. // Her oge (ad, yukseklik, ustBosluk) verilir; ustBosluk bir onceki ogeden uzakligidir. const tasarimA = [ { ad: "kayit-1 baslik", yukseklik: 24, ustBosluk: 0, grup: 1 }, { ad: "kayit-1 yazar", yukseklik: 20, ustBosluk: 4, grup: 1 }, { ad: "kayit-1 ustveri", yukseklik: 18, ustBosluk: 4, grup: 1 }, { ad: "kayit-2 baslik", yukseklik: 24, ustBosluk: 24, grup: 2 }, { ad: "kayit-2 yazar", yukseklik: 20, ustBosluk: 4, grup: 2 }, { ad: "kayit-2 ustveri", yukseklik: 18, ustBosluk: 4, grup: 2 }, ]; const tasarimB = [ { ad: "kayit-1 baslik", yukseklik: 24, ustBosluk: 0, grup: 1 }, { ad: "kayit-1 yazar", yukseklik: 20, ustBosluk: 12, grup: 1 }, { ad: "kayit-1 ustveri", yukseklik: 18, ustBosluk: 12, grup: 1 }, { ad: "kayit-2 baslik", yukseklik: 24, ustBosluk: 16, grup: 2 }, { ad: "kayit-2 yazar", yukseklik: 20, ustBosluk: 12, grup: 2 }, { ad: "kayit-2 ustveri", yukseklik: 18, ustBosluk: 12, grup: 2 }, ]; // Kurs olcutu: bir bosluk, yigindaki en kucuk boslugun AYRIM_ORANI katiysa // grup siniri sayilir. Oran 2'nin altindaysa sinir belirsizdir. const AYRIM_ORANI = 2; function gruplandir(oge_listesi) { const bosluklar = oge_listesi.slice(1).map((o) => o.ustBosluk); const enKucuk = Math.min(...bosluklar); const gruplar = [[oge_listesi[0].ad]]; const oranlar = []; for (let i = 1; i < oge_listesi.length; i++) { const oran = oge_listesi[i].ustBosluk / enKucuk; oranlar.push({ ad: oge_listesi[i].ad, bosluk: oge_listesi[i].ustBosluk, oran }); if (oran >= AYRIM_ORANI) gruplar.push([oge_listesi[i].ad]); else gruplar[gruplar.length - 1].push(oge_listesi[i].ad); } return { enKucuk, oranlar, gruplar }; } function rapor(baslik, oge_listesi) { const { enKucuk, oranlar, gruplar } = gruplandir(oge_listesi); const amac = new Set(oge_listesi.map((o) => o.grup)).size; console.log(`${baslik} (en kucuk bosluk: ${enKucuk}px, esik orani: ${AYRIM_ORANI})`); for (const o of oranlar) { const sinir = o.oran >= AYRIM_ORANI ? "SINIR" : "grup ici"; console.log( ` ${o.ad.padEnd(18)} ustunde ${String(o.bosluk).padStart(2)}px oran ${o.oran .toFixed(2) .padStart(5)} ${sinir}` ); } console.log(` amaclanan grup sayisi: ${amac} algilanan grup sayisi: ${gruplar.length}`); gruplar.forEach((g, i) => console.log(` grup ${i + 1}: ${g.join(", ")}`)); console.log(""); } rapor("tasarim A grup ici 4px / ayirici 24px", tasarimA); rapor("tasarim B grup ici 12px / ayirici 16px", tasarimB); ``` ``` tasarim A grup ici 4px / ayirici 24px (en kucuk bosluk: 4px, esik orani: 2) kayit-1 yazar ustunde 4px oran 1.00 grup ici kayit-1 ustveri ustunde 4px oran 1.00 grup ici kayit-2 baslik ustunde 24px oran 6.00 SINIR kayit-2 yazar ustunde 4px oran 1.00 grup ici kayit-2 ustveri ustunde 4px oran 1.00 grup ici amaclanan grup sayisi: 2 algilanan grup sayisi: 2 grup 1: kayit-1 baslik, kayit-1 yazar, kayit-1 ustveri grup 2: kayit-2 baslik, kayit-2 yazar, kayit-2 ustveri tasarim B grup ici 12px / ayirici 16px (en kucuk bosluk: 12px, esik orani: 2) kayit-1 yazar ustunde 12px oran 1.00 grup ici kayit-1 ustveri ustunde 12px oran 1.00 grup ici kayit-2 baslik ustunde 16px oran 1.33 grup ici kayit-2 yazar ustunde 12px oran 1.00 grup ici kayit-2 ustveri ustunde 12px oran 1.00 grup ici amaclanan grup sayisi: 2 algilanan grup sayisi: 1 grup 1: kayit-1 baslik, kayit-1 yazar, kayit-1 ustveri, kayit-2 baslik, kayit-2 yazar, kayit-2 ustveri ``` İki tasarımın da amacı aynı: iki kayıt, iki grup. Tasarım A bunu üretir, tasarım B üretmez. Dikkat çekici olan, tasarım B'nin **daha ferah** olmasıdır. Toplam boşluğu daha fazladır, kayıtlar arasında 16 piksel bırakır, buna rağmen kayıt sınırını yok eder. Boşluk eklemek gruplamayı iyileştirmez; boşluğu **farklılaştırmak** iyileştirir. Bu, aralık kararlarının neden tek tek verilemeyeceğini de açıklar. "Kayıtlar arasına 16 piksel koyalım" kararı yalnız başına değerlendirilemez, çünkü anlamı komşu kararlara bağlıdır. Aralık kararları bir küme olarak alınır. ## İç İçe Gruplama Düzeyleri Katalog ekranında tek bir gruplama düzeyi yoktur. Başlık ile yazar adı bir düzeyde, kayıt blokları bir üst düzeyde, kayıtlar bir üstte, ekranın bölümleri en üstte gruplanır. Her düzeyin bir alt düzeyden ayrılabilmesi gerekir; aksi hâlde hiyerarşinin bir basamağı görünmez olur. ```js // 02-ic-ice.mjs — ic ice gecmis gruplama duzeylerinin bosluk oranini denetler // Katalog ekranindaki dort gruplama duzeyi, en icten en disa. const duzeyler = [ { ad: "satir ici (baslik-yazar)", bosluk: 4 }, { ad: "kayit ici bloklar", bosluk: 8 }, { ad: "kayitlar arasi", bosluk: 24 }, { ad: "bolumler arasi", bosluk: 48 }, ]; const AYRIM_ORANI = 2; console.log("duzey bosluk bir alt duzeye orani durum"); for (let i = 0; i < duzeyler.length; i++) { const d = duzeyler[i]; if (i === 0) { console.log(`${d.ad.padEnd(26)} ${String(d.bosluk).padStart(4)}px ${"-".padStart(20)} taban`); continue; } const oran = d.bosluk / duzeyler[i - 1].bosluk; const durum = oran >= AYRIM_ORANI ? "ayirir" : "BELIRSIZ"; console.log( `${d.ad.padEnd(26)} ${String(d.bosluk).padStart(4)}px ${oran.toFixed(2).padStart(20)} ${durum}` ); } ``` ``` duzey bosluk bir alt duzeye orani durum satir ici (baslik-yazar) 4px - taban kayit ici bloklar 8px 2.00 ayirir kayitlar arasi 24px 3.00 ayirir bolumler arasi 48px 2.00 ayirir ``` Dört düzey, taban boşluk 4 piksel, en dış boşluk 48 piksel. Aradaki oranların hepsi ikinin üstünde olduğu için her düzey bir alttakinden ayrılır. Buradaki asıl bulgu sayıların kendisi değil, sayıların **çarpımsal** ilerlemesidir: 4, 8, 24, 48. Toplamalı bir dizi (4, 8, 12, 16) aynı işi göremez, çünkü üst düzeylere doğru oranlar hızla bire yaklaşır. Bu gözlem, gruplama düzeyi sayısına bir sınır da koyar. Taban boşluk 4 piksel ve her düzey en az iki katı olacaksa, altı düzey en dışta $4 \cdot 2^{5} = 128$ piksel gerektirir. Bir ekranda dikey olarak 128 pikselin ne kadar pahalı olduğu düşünülürse, uygulanabilir gruplama düzeyi sayısının dört civarında kaldığı görülür. Hiyerarşi düzeylerinde olduğu gibi burada da çözüm düzey eklemek değil, gerekmeyen düzeyi kaldırmaktır. ## Boşluk mu, Çerçeve mi Ortak bölge ilkesi gruplamanın ikinci yoludur: ögeleri bir çerçeve içine almak ya da ortak bir zemin rengi vermek de onları tek birim yapar. Bu yol yakınlıktan güçlüdür — çerçeve, yakınlığı yener: kutu içindeki iki uzak öge, kutu dışındaki yakın ögeden daha ilişkili algılanır. Güçlü olması onu varsayılan seçenek yapmaz. Çerçevenin bedeli görsel gürültüdür. Yirmi kayıtlık bir sonuç listesinde her kayıt çerçevelenirse ekrana 20 dikdörtgen, yani 80 çizgi eklenir. Bu çizgilerin hiçbiri bilgi taşımaz; hepsi kayıt sınırını ilan eder. Aynı sınır boşlukla ilan edilseydi ekrana hiçbir çizgi eklenmezdi. Boşluk, sıfır mürekkeple çalışan tek gruplama aracıdır. Ölçüt şu biçimde yazılabilir: **ortak bölge, yakınlığın kuramadığı ilişkiyi kurmak için saklanır.** Yakınlığın yetmediği üç durum vardır. Birincisi, ögeler yatay ve dikey olarak ayrışmıyorsa; bir tablonun satırlarında boşluk vermek satır yüksekliğini şişireceği için zemin rengiyle ayırmak daha ucuz olabilir. İkincisi, grup ekranın geri kalanından farklı bir işlev taşıyorsa; ödünç alma eyleminin bulunduğu bölüm bir eylem alanıdır ve okuma alanından yalnız boşlukla ayrılması bilgi kaybettirir. Üçüncüsü, grup kaydırılabilir bir alansa; sınırı görünmeyen bir kaydırma alanı içeriğin nerede bittiğini gizler. ## Yanlış Bağlanan Etiket Yakınlık hatasının en pahalı biçimi arama alanının bulunduğu bölümde ortaya çıkar. Katalog arayüzünde üç süzgeç alanı vardır: yayın yılı, dil ve materyal türü. Her alanın üstünde bir etiket, altında bir açıklama satırı bulunur. Etiket ile alan arasındaki boşluk 8 piksel, alan ile açıklama arasındaki boşluk 8 piksel, açıklama ile sonraki etiket arasındaki boşluk 12 piksel yapılırsa, en küçük boşluğa oran 12 / 8 = 1.5 olur ve eşiğin altında kalır. Sonuç, üç ayrı süzgecin tek bir bloğa dönüşmesidir; okur hangi açıklamanın hangi alana ait olduğunu boşluktan okuyamaz, deneyerek bulur. Doğru düzenleme, etiketi alana bağlayıp grubu dışarıdan ayırmaktır: etiket–alan 4 piksel, alan–açıklama 4 piksel, gruplar arası 24 piksel. Oran 24 / 4 = 6 olur. Bu düzenleme kâğıt üzerinde daha "sıkışık" görünür, ekranda ise daha okunur olur; çünkü sıkışıklık grubun içinde, ferahlık grupların arasındadır. Aynı kural etiketin konumuna da uygulanır. Etiket alanın soluna yerleştirildiğinde, etiket ile kendi alanı arasındaki yatay boşluk, etiket ile bir sonraki satırın dikey boşluğundan küçük olmalıdır. İki eksende çalışan bir gruplamada oran ölçütü her iki eksende ayrı ayrı sınanır. ## Özet - Yakınlık, birbirine yakın ögelerin tek birim olarak algılanmasıdır; ögeler bir düzleme konduğu anda gruplanır, dolayısıyla soru gruplamanın var olup olmadığı değil amaçlanan gruplamayla örtüşüp örtüşmediğidir. - Gruplama mutlak boşluk değeriyle değil, komşu boşluklar arasındaki oranla kurulur; bu kursun ölçütü, grup sınırının en küçük boşluğun en az iki katı olmasıdır. - Boşluk eklemek gruplamayı iyileştirmez; boşluğu farklılaştırmak iyileştirir. Toplam boşluğu daha fazla olan bir tasarım daha zayıf gruplayabilir. - İç içe gruplama düzeyleri çarpımsal ilerler; toplamalı bir dizi üst düzeylerde oranı bire yaklaştırdığı için sınırları siler. - Ortak bölge yakınlıktan güçlüdür ama mürekkep maliyeti taşır; yakınlığın kuramadığı ilişkiler için saklanır. - Boşluk kararları tek tek değil küme olarak alınır, çünkü bir boşluğun anlamı komşu boşluklara bağlıdır. ## Sonraki Adım Bu ders ilişkiyi kurmayı ele aldı. Geriye ayrımı **ölçülü** kurmak kalıyor. Önceki iki derste ayrım hep tek yönlü ele alındı: bir ögeyi öne çıkarmak. Oysa vurgu bir bütçedir; ekrandaki her vurgulanmış öge, diğer vurgulanmış ögelerin payını azaltır. Sonraki ders görsel ağırlığı alan ve parlaklık farkı üzerinden hesaplar, katalog ekranındaki vurgu paylarını çıkarır ve üç birincil eylemin neden hiçbirini birincil bırakmadığını sayıyla gösterir.