Tasarım birçok ögeden oluşur. Genellikle en ihmal edilen öge ise en hayati unsur olarak niteleyebileceğimiz ve tasarım ögelerinin içinde veya çevresinde bulunan boşluklardır. Beyaz alanlar, tasarımcıların kullanıcı deneyimi (UX) tasarlamaları için kullandıkları en önemli unsurlardan biridir.
Bir web sitesinde, uygulamada veya bir tasarımda birçok farklı görsel öge düzeni oluşturur. Bunlara tipografi, çizgiler, simgeler, resimler gibi ögeler dahildir. Bir resim tablosu hayal edin. Bu tabloyu oluşturmak için neye ihtiyacımız var? Bir tuvale ihtiyacımız var. Beyaz alan bir tuval gibidir; ögeleri tasarımda bir arada tutan ve öne çıkmalarını sağlayan arka plandır.Beyaz alanı tasarlamanın neden bu kadar önemli olduğunu görelim.
Beyaz Alan Nedir
Beyaz alan veya diğer bir ifadeyle boşluk veya boş alan tasarım ögeleri arasındaki alandır.
Herhangi bir renk, doku, desen ve hatta bir arka plan görüntüsü ile beyaz alan oluşturulabilir.
Beyaz alan, tasarlanması gereken bir alandır.
Ne yazık ki, birçok müşteri veya yönetici, beyaz alanların boşa harcandığını, beyaz alanlara daha fazla bilgi veya görsel öge yerleştirilebileceğini düşünür. Bu nedenle beyaz alan kullanımı tasarımcılar ve müşteriler arasında sorunlara neden olabilir. Tasarımdaki anlayışı kolaylaştırmak, zarafeti öne çıkarmak için beyaz alan kullanımı teşvik edilir ve kaliteli bir kullanıcı deneyimi oluşmasını sağlar.
Beyaz alan, görsel iletişim deneyimini geliştirmek için tasarım ögelerini dengelemede ve içeriği daha iyi düzenlemede harika bir unsurdur. Tasarımlara nefes aldırır, anlaşılırlığı artırır, hiyerarşi oluşturur.
Tasarımcı olmayanların bu gözle tasarımları değerlendirmesi gerekir. Tasarımcıların ise beyaz alanın oynadığı rolü anlaması, onunla diğer ögeler arasında doğru dengeyi bulmak için denemeler yapması ve dengeli beyaz alanlar ayarlayarak tasarımları oluşturması gerekir.
Beyaz Alan Türleri
İki tür beyaz alan vardır.
– Mikro Beyaz Alan
Harfler, paragraflar, ikonlar ve butonlar gibi küçük ögeler arasındaki boşluktur.Mikro boşluk, içeriğin okunabilirliği üzerinde doğrudan bir etkiye sahiptir. Örneğin; paragrafları çevreleyen kenar boşluğu, kullanıcının okuma hızını ve anlamasını etkiler. Paragrafların dışındaki boşluklar az ise insanlar onu daha yavaş okur. Bu boşlukların az olması okuyucuların metni anlamasını zorlaştırır.
– Makro Beyaz Alan
Metin ve resimler gibi daha büyük ögeler arasındaki boşluktur ve ayrıca dolgu ve kenar boşluklarını ifade eder. Mikro boşluktan farklı olarak makro boşluk, tasarımın genelinde bir kapsayıcı görev görür. Bu makro boşluk resmin bir ögesidir, fark edilmesi daha kolaydır. Makro boşluğu etkili bir şekilde uygulayan en iyi web sitesi örneği muhtemelen google.com’un ana sayfasıdır. Google’ın ikonik görünümü oldukça basittir, ancak başka bir şey fark ettiniz mi? Bu sadelik aynı zamanda sakinleştiricidir. Dağınıklık olmadığı için gözleriniz ve zihniniz daha az çalışır. Orada bulunma nedeninize odaklanabilirsiniz; bir şey aramak.
Beyaz Alanın Kullanımı
1. Form ögelerini beyaz alan kullanarak gruplandırın
Araştırma çalışmalarında, bir formu doldururken en ufak bir tereddüt anının bile, formun yanıt oranını (yani formu dolduran kişi sayısını) önemli ölçüde etkileyebildiği görülüyor.[3]
Formlar sadece bir amaca yönelik bir araçtır. Kullanıcılar, formları hızlı ve karışıklık olmadan tamamlayabilmeliler.
Aşağıdaki düzenlemelerle formlar daha verimli hale getirilebilir;
A. Etiketi ilgili metin alanına daha yakın yerleştirin
Resim 1. Etiketin doğru kullanımı / yanlış kullanımı
Formda, etiket ile altındaki metin alanı arasındaki boşluk, metnin nereye girileceğini belirlemeyi zorlaştırmaktadır. Bu hata form tasarımlarında sıklıkla görülür. Sadece şu ilkeyi hatırlayın: Birbirine yakın ögeler ilişkili görünür. İlgili ögeleri birbirine daha yakın yerleştirme ilkesi yeni değil; bu aslında Gestalt psikolojisinden Yakınlık İlkesidir.[2]Gestalt psikologları, beynin bir nesneyi tek tek parçaların toplamından ziyade bir bütün olarak nasıl ve neden algıladığıyla ilgilendiler. Yakınlık İlkesi bunlardan biriydi.
Resim 1’deki görselde sağdaki ekran görüntüsünde formu doldurmanız gerektiğini düşünün. Forma bakarken bir an tereddüt edebilirsiniz, çünkü hangi bilginin hangi alana girileceği belli değil.
Yukarıdaki görselde soldaki ekran görüntüsünde görebileceğiniz gibi, alan etiketlerini ilgili alanların yakınına yerleştirmek, her bir ögeyi doldurma konusunda netlik ve anlaşılırlık sağladı.
B. İlgili alanları beyaz alan kullanarak gruplandırın
Birçok veri girişi alanı olan uzun formlar sıkıcı gelebilir. İlgili alanları birlikte gruplamak, kullanıcıların doldurmaları gereken bilgileri anlamalarına yardımcı olur. Örneğin; ad soyad ve telefon bilgileri kişisel bilgiler olabilirken şehir, ilçe, mahalle gibi bilgiler adres bilgilerini oluşturabilir.
Bir alışveriş sitesindeki kişisel bilgileri soldaki düzenlenen hali ile karşılaştıralım.
Resim 2. İlgili alanların beyaz alan ile gruplanarak kullanımı / İlgili alanların beyaz alan ile gruplanmadan kullanımı
Resim 2’de, soldaki form sağdaki forma göre daha anlaşılır ve daha kolay kullanılır çünkü ilgili alanlar birlikte gruplanarak gösterilmiştir. Form ögeleri arasındaki boşluğu artırmak, formu daha anlaşılır ve okunabilir yapar, dolayısıyla tamamlanma olasılığını artırır. Kullanıcılar artık 3 parçalı bir form görüyor. Grup başlıkları zorunlu değildir ancak anlam kazandırmakta yardımcı olabilirler.
2. Beyaz alanı ayırıcı olarak kullanın
Resim 3. Beyaz alanın ayırıcı olarak kullanımı / Çizginin ayırıcı olarak kullanımı
Resim 3’te de görüldüğü gibi, daha anlaşılır hale getirmek için tasarıma bir şeyler ekleyerek kalabalıklaştırmak yerine, beyaz alan kullanılarak daha sade ve okunabilir tasarımlar elde edilebilir.
Yatay ayırıcı çizgiler, ilgisiz ögeleri ayırmaya veya aralarındaki hiyerarşiyi vurgulamaya yardımcı olabilir. Ancak, kart tasarımında bunun tersine, beyaz alan eklemek içeriği daha anlaşılır yapar. [1]
3. Taranabilirliği arttırmak için yeterli beyaz alanlar kullanın
Boşluğu bir tasarım ögesi olarak kullanmak gereklidir ve bu gözle değerlendirilmelidir. Taranabilirliği iyileştirmek için yeterli beyaz alan ekleyin.
Resim 4. Yeterli beyaz alanın doğru kullanımı / yanlış kullanımı örnek 1
Resim 4’te soldaki kartta görüldüğü gibi, kart ögeleri etrafındaki beyaz alan, görsel hiyerarşiye katkıda bulunabilir. Sağ karttaki gibi yeterli beyaz alan olmadığında, kartlar dağınık görünür ve kullanılabilirliği azalır. İç boşluklar, ögelerin öne çıkmasını sağlar (özellikle birincil butonların) ve kartın genel taranabilirliğini de artırır. Böylece kullanıcılar ihtiyaç duyduklarını bulmak için daha az zaman harcarlar.
İyi beyaz alan kullanılarak gösterilen içerik anlaşılırlığı artırır ve kullanıcıların önemli olana odaklanmasına yardımcı olur.
Resim 5. Yeterli beyaz alanın doğru kullanımı / yanlış kullanımı örnek 2
Doğru kullanıldığında beyaz alan, görsel hiyerarşinin mükemmel bir destekçisidir ve kullanıcıların odağını içeriğin temel parçalarına yönlendirir. Resim 5’teki görsellere baktığımızda boşa alan eklenmesi ile yani beyaz alanların tasarımsal bir öge gibi kullanılması sonucunda soldaki versiyonu hiyerarşik okuma düzeni sağlayacak hale getirmiş, daha okunaklı ve anlaşılır yapmıştır.
4. Dış boşluklarda yeterli beyaz alan kullanın
Bileşenler arasındaki boşluklar, dış boşluk (margin) olarak adlandırılır. Dış boşluklar, bileşenlerin kolay ayırt edilebilmesini sağlamanın yanı sıra, ana tasarımdaki arka plan boşluğunun kullanıcıyı rahatsız etmeyecek şekilde yönetilmesine de imkân sağlar. Örneği resim 6’da görebiliriz.
Resim 6. Dış boşluklarda yeterli beyaz alan örneği
5. İç boşluklarda yeterli beyaz alan kullanın
İç boşluklar (padding), bileşenin kenarları ile içindeki nesneler arasında yer alır. Yeterli seviyede iç boşluk ile bileşen olarak gösterilmek istenen nesneler belli bir çerçeveye oturtulmuş olur.
Bileşen kenarları ile bileşen içindeki nesnelerin ayırt edilebilmesi için yeterince iç boşluk bırakılmalıdır. Örneği resim 7’de görebiliriz.
Resim 7. İç boşluklarda yeterli beyaz alan örneği
6. Beyaz alanı ana hatlar oluşturmak için kullanın
Tasarımda tutarlı boşluklar oluşturmada ana hatlar (base line) önemli bir araçtır. Bunlar, yerleşim ızgarasının dışına çıkacak ögeleri hizalamaya yardımcı olan hayali çizgilerdir. Yapı ve organizasyonun korunmasına yardımcı olurlar. Özellikle profil resmi ve ona eşlik eden metin gibi farklı türdeki komşu ögeler arasında içeriğinizi dengede tutmak için hayati önem taşırlar. Örneği resim 8’de görebiliriz.
Resim 8. Beyaz alanı ana hat olarak kullanma örneği
Boşlukların tasarımdaki önemi görüldüğü gibi yok sayılamaz. Bir ressam için tuval ne kadar önemliyse, boşluklar da bir tasarım için o kadar hayatidir. Tasarımın ve bilgi akışının bu kadar önemli olduğu bir çağda, verimi, memnuniyeti, uyumu ve vurguyu beyaz alanlar sayesinde yakalarız. Unutmayalım, beyaz alanlar tasarıma dahildir, hatta tasarlanması gereken bir alandır.
Önceki
