Üçler Kuralı: Kompozisyonu Dokuz Kutuya Bölmek

Üçler Kuralı, bir görsel alanı yatayda ve dikeyde üçe bölüp dokuz kutu elde etmeye dayanır. Asıl mesele kutular değil, çizgilerin kesiştiği dört nokta. Fotoğrafçılıkta iki yüzyıldır kullanılıyor, web sayfasında da işe yarıyor. Ama her sayfada değil.

Kural tam olarak ne diyor

Çalıştığınız alanı yatayda iki çizgiyle, dikeyde iki çizgiyle bölün. Elinizde dokuz eşit kutu ve dört kesişim noktası kalır. Kompozisyonun taşıyıcı öğesini, yani bakılmasını istediğiniz şeyi, bu dört noktadan birine ya da noktaları birleştiren çizgilerden birinin üstüne yerleştirirsiniz.

Kaçınılan yer merkezdir. Tam ortaya oturtulan özne dengeli değil durgun görünür, bakış orada takılır ve kadrajın geri kalanını dolaşmaz. Kural bu durgunluğu bozmak için var.

Nereden geldiği

Terimi 1797'de İngiliz gravür sanatçısı John Thomas Smith, Remarks on Rural Scenery adlı kitabında yazdı. Smith manzara resminde ışıklı ve gölgeli alanların oranını tartışıyordu, ekran arayüzünü değil. Kuralın bugüne kadar gelmesinin sebebi kanıtlanmış bir algı yasası olması değil, uygulanmasının çok kolay olması: iki çizgi yatay, iki çizgi dikey, bitti.

Altın oran ve phi grid ile farkı

Phi grid de dokuz kutu üretir, ama çizgilerini altın orana göre yerleştirir. Üçler Kuralı'nda çizgiler kenardan 0,333 ve 0,667 uzaklıkta durur. Phi gridde 0,382 ve 0,618.

Aradaki fark alanın genişliğinin yaklaşık yüzde 4,9'u. 1920 piksellik bir hero alanında bu 93 piksel eder, yani sıradan bir butonun genişliğinden az. Metin blokları, iç boşluklar ve mobil kırılımlar hesaba katıldığında bu farkın gözle ayırt edilebildiği bir senaryo bulmak zor. Hangisinin daha uyumlu olduğu tartışması, pratikte ölçülemeyecek kadar küçük bir sapmanın etrafında dönüyor.

Kurmak da zor değil. Üçler Kuralı CSS'te grid-template-columns: repeat(3, 1fr) satırıdır, phi grid ise grid-template-columns: 0.382fr 0.236fr 0.382fr. Ben bu hizayı genelde tasarım aracının sürüklenebilir kılavuz çizgileriyle değil doğrudan grid tanımıyla kurarım: kılavuz çizgisi tasarım dosyasında kalır, grid tanımı tarayıcıya kadar gider ve kırılım noktalarında kendini korur.

Sayfada hangi öğe nereye

Fotoğrafta özne bir kesişim noktasına oturur. Web sayfasında kesişim noktasına oturan şey genellikle metin değil, karar noktasıdır: başlık ile butonun oluşturduğu blok.

Nielsen Norman Group'un göz izleme çalışmaları, yoğun metin içeren sayfalarda bakışın kabaca F harfi çizdiğini, sol üst bölgede yoğunlaştığını gösterdi. Bu bulgu Üçler Kuralı'nı doğrulamıyor, onunla kısmen çakışıyor: sol üstteki kesişim noktası zaten okumanın başladığı yer. Sağ alttaki nokta ise, tersine, en son bakılan yer. Aynı gride koyduğunuz iki öğenin ağırlığı eşit değil.

• Ana başlık ve birincil buton: sol üst kesişim noktası ya da o noktadan aşağı inen dikey çizgi.
• Ürün görseli veya portre: karşı taraftaki dikey çizgi, böylece metinle görsel birbirini itmez.
• İkincil bilgi (fiyat notu, güven rozeti): alt yatay çizgi civarı.

Boş alan bu düzenin parçasıdır. Dokuz kutunun dokuzunu da doldurursanız gridin sağladığı hiyerarşi kaybolur ve elinizde sadece kalabalık bir kompozisyon kalır.

Merkezin hâlâ doğru olduğu yerler

Üçler Kuralı hikâye anlatan kompozisyonlar için bir araç. Sayfanın işi hikâye anlatmak değilse kural ters çalışır.

Giriş formu, ödeme onayı, hata sayfası, tek eylemli modal: bunların hepsinde doğru yerleşim simetrik merkezdir. Kullanıcının yapacağı tek bir şey varsa gözü gezdirmenin bir anlamı yok, aksine gecikme yaratır. Aynı şekilde veri tabloları, ayar ekranları ve yönetim panelleri de grid estetiğiyle değil hizalama tutarlılığıyla ayakta durur.

Kısaca: kullanıcıya bakması gereken bir şey sunuyorsanız üçe bölün, yapması gereken tek bir şey sunuyorsanız ortalayın.