[UX mevs] #06 — Pek Önemsemezler: Tasarım Sürecinde Beyaz Alan Dengesi ve Hizalamaların Önemi
#S01E06
Herkese selam, ben TurkNet Design ekibinden Emre. Bugün size iş sahipleri tarafından çokta önemsenmeyen hatta “şurayı biraz doldursak mı?” diyerek sevilmeyen boşluk dengesinden ve hizalamalardan bahsedeceğim.
Boşluk dengesi “white-space” olarak bilinen her zaman beyaz olması gerekmeyen bir tasarım terimidir aslında. Ancak boşluk dengesini kurmak oldukça zor bir süreçtir. Çoğu zarar azı karar olan bu terimi öğrenip uygulamak çok fazla başarılı örnek incelemek ve bir o kadar denemekten geçiyor.
Peki tamam objeler arasında biraz boşluk bıraktık sağdan soldan eşit uzaklıklara sahip şimdi ben boşluk dengesini kurmuş oldum mu?
Derseniz cevap bilmiyorum. Sevgili Çağdaş’ın bana yıllardır söylediği bir söz var, verdiği bir işi bitirip ona gösterdiğimde genellikle “bu beni iyi hissettirmiyor” diyip dururdu. Aradan geçen onca zaman
sonra aslında ne demek istediğini anlamaya başlamıştım.
Sizi rahat hissettirmeyen şey kullanıcılarınızı asla rahat hissettirmeyecektir. Onlarca denemeden sonra sonunda ağzından “evet abi bu beni ferah hissettiriyor, olmuş” dediğini duyup motive olmuştum.
Nedir bu rahat hissettirmek?
Harfleri ve kelimeleri ne kadar iyi ayırt edebileceğimi ve içeriği ne kadar sorunsuz bir şekilde tarayabileceğimi anlatan bir olgudur. Bunun yanında etrafındaki objelerden kolaylıkla ayrıştırabiliyorsam bu beni rahat, ferah hissettiren bir içerik olmuştur. Tebrikler doğru yoldasınız. 👊🏻 Bunun en iyi örneklerinden biri şimdi bu yazıyı okuduğunuz platform olan Medium’dur.
Çok fazla metin odaklı gittik ancak rahat hissetmenin tek yolu metinler değil elbette kullanıcının harekete geçeceği, aksiyon alacağı objelerin (örnek:butonların) etrafındaki boşluk dengesini kurmanız kullanıcıların odak noktasını toplamaya yardımcı olacak ve daha ferah hissedeceklerdir.
Özetle:
Rahat hissettirmenin bir formülü yok. Ürettiğiniz her çıktıdan sonra prototipe bakıp test etmeniz gerekmekte. 🎥
Gelin bir örnekle beyaz alanın tutarlı kullanımını beraber inceleyelim.
Boşluk dengesinin en önemli konusu elementlerin arasındaki tutarlı uzaklıklardır. Bu alanın doğru kullanımı tasarımdaki her öge için uygun alanın yaratılmasında önemli rol oynar.
Ortak bir dil konuşmak: 8px Grid
Web siteleri, mobil cihazlar, tabletler vs insanların günlük hayatta etkileşim halinde oldukları birçok farklı kanal ve bu kanallara bağlı ekran boyutu bulunmaktadır. Bu kadar fazla ekranın olduğu bir sistemde ortak bir dil oluşturmak ve bunun tüm kanallarda sorunsuz çalışması için bir sisteme ihtiyacımız vardır, 8px tam bu noktada hayatımıza giriyor. (8, 16, 24, 32, 40, 48, 56, vb. kullanmaktır.)
Bu yöntem tasarım öğelerinin boyutlarını, dolgusunu ve kenar boşluklarını tanımlamak için kullanılır. Popüler ekran boyutlarının çoğu 8'e bölünebilir ve bu bizlere geliştirici ile aramızdaki kolay uyumu sağlar.
Tasarımcılar ve geliştiriciler arasındaki en iyi iletişim sistemi olan 8px sayesinde geliştirici objeler arasındaki mesafelerin 8 ve 8'in katı olduğunu kolayca anlayabilir ve süreçlerine bu şekilde devam ederler.
Objeler arası 8px grid sistemi daha büyük perspektifte bir ekrana objelerin hangi kural seti ile dizileceğini oluşturur. Sisteminize en uygun grid yapısını seçmeli ve ona uygun kural setlerini oluşturmanız gerekmektedir.
Aşağıdaki örnekte 3 farklı renk ile gösterilen objeler mevcut.(margin mor, column turuncu ve gutter mavi ile gösterilmiş.) Bu objeler bir kural seti belirlemek için gerekenlerdir. Başlıkta belirttiğim gibi geliştirici ile ortak bir dil konuşmak istiyorsak bunları yapmak durumundayız.
Bugün sizlere bahsedeceğim diğer konu ise hizalama. Bu konunun çocukluğuna inecek olursak taaaa askeri düzendeki hizalamalara bakmamız gerekecek. Bordo bedellilere selam olsun.🔫
Düzensiz yürüyen bir birliğin etkisi ile uygun adım yürüyen ve aralarındaki hizaya dikkat eden bir birliğin bıraktığı etki elbette aynı olmayacaktır. Bu prensip objelerin hizaları ve final çıktısının yarattığı etki ile ilişkilidir.
Hizalamanın amacı, yapı ve bağlantı elemanları ile bir birlik duygusu yaratmaktır. Okunabilirlik ve kullanıcı deneyimini daha iyi hale getirmek için hizalama önemli bir rol oynar.
Hizalama neden önemlidir?
Hizalama, dijital ürünlerin estetiğine katkıda bulunur. Bu, bir ürünle ilk kez etkileşime giren kullanıcılar üzerinde iyi bir izlenim bırakmanın en kolay yoludur.
Basit bir örnekle metinlerdeki hizalamanın okunabilirliğe katkısına bakalım:
Ayrıca, kullanıcıların kolayca ve zahmetsizce gezinmesine yardımcı olan yapı ve organizasyonu destekler. Dijital ürünlerdeki tüm elementler organize olduğunda kullanıcılar onları daha hızlı bulabilirler. Aksi halde kullanıcıya iletmek istediğiniz mesaj görülmeyebilir. 🫤
Haftaya bizi hangi konu bekliyor?
[UX mevs] #07 — Von Restorff etkisi
