Beyaz boşluk (negatif alan) nedir ve neden önemlidir?

Beyaz boşluk nedir?

Beyaz boşluk, tasarım öğeleri arasındaki alandır. Aynı zamanda, tipografi glifleri (okunabilir karakterler) arasındaki boşluk da dahil olmak üzere, tekil tasarım öğelerinin her birinin içinde yer alan boşluktur.

İsmine rağmen beyaz boşluğun beyaz olmasına gerek yoktur. Herhangi bir renk, doku, desen ve hatta bir arka plan görüntüsü olabilir.

Beyaz boşluk, tasarımcılar ve müşteriler arasında sorunlara neden olabilir. Tasarım teorisi, beyaz alanın şık bir görünüm elde etme amacıyla kullanılmasını ve bu sayede kaliteli bir kullanıcı deneyimi sağlanmasını teşvik eder. Fakat ne yazık ki, birçok müşteri ve yönetici beyaz alanın boşa harcandığını; daha fazla bilgi veya daha fazla görsel unsurun bu alana yerleştirilmesi gerektiğini düşünürler.

Aksine, beyaz boşluk, görsel iletişim deneyimini iyileştirmek amacıyla tasarım öğelerini dengelemek ve içeriği daha iyi düzenlemek için harika bir araçtır. Bir mutfak aletleri şirketi için yüzlerce el kitabı oluşturmaktan sorumlu teknik bir yazar olsaydınız, mükemmel bir yazı ve resim dengesi bulmak için çabalardınız. Biliriz ki çok az insan kılavuzları zevk için okur; dolayısıyla bir kılavuzda okuyucuların dikkatini çekmek çok önemlidir! Bunun için, yazıllar ve resimler arasında çalışan beyaz boşluk, gösterinin gerçek yıldızıdır. Her sayfanın yorucu görünmesini engeller. Böylece kılavuzu okuyan okuyucular (kılavuzu okumayı bırakıp) yardım hattını aramak yerine, kılavuzdaki sorun giderme tavsiyelerini sindireceklerdir.

İnsanlar bilgi bombardımanına maruz kaldıklarında hayal kırıklığına uğrar; zira bizler insanız, makine değil. Beyaz boşluk, “nefes almamıza” izin vererek bizi sakinleştirir.

Diğer kullanıcı arabirimi öğelerinde olduğu gibi, bir tasarımcı olarak beyaz alanın oynadığı rolü anlamamız ve bununla diğer öğeler arasında doğru dengeyi bulmaya çalışmamız gerekir.

Mikro ve makro beyaz boşluk

Beyaz boşluk, genellikle mikro beyaz alanın yoğunluğuna ve makro beyaz alanla ilişkisine göre kategorize edilir. Burada oran ve orantılardan bahsediyoruz.

Mikro beyaz boşluk

Tasarım öğeleri arasındaki küçük boşluğa mikro beyaz boşluk diyoruz. Mikro beyaz boşluklara bir örnek, satırlar ve paragraflar arasında yer alan boşluklardır. Izgara görüntüleri arasında yer alan ve menü bağlantılarını ayırmak için kullanılan boşluklar da mikro beyaz boşluklar olarak değerlendirilebilir.

Mikro beyaz boşluk, içeriğin okunabilirliği üzerinde doğrudan bir etkiye sahiptir. Örneğin, paragrafları çevreleyen beyaz marjinler (kenar boşlukları), kullanıcının okuma hızını ve kavrayışını etkiler. Metin normal paragrafların dışındaki kenar boşluklarına taşıyorsa, insanlar böyle bir metni daha yavaş oku ve kenar boşlukları olmayan bir metni anlaşılması daha zor bulurlar.

Makro beyaz boşluk

Makro beyaz boşluk, ana düzen öğeleri ile tasarım düzenini çevreleyen alan arasındaki geniş boşluktur. Çoğu web sitesinde içeriğin sağında ve solunda veya içerik blokları arasındaki alanda makro beyaz boşluklar bulabiliriz.

Mikro beyaz boşluğun aksine, makro beyaz boşluk genel tasarımın bir kapsayıcısı olarak görev görür. Yani “büyük resim” beyaz boşluktur ve fark edilmesi daha kolaydır. Makro beyaz alanı yoğun (ve etkili) uygulayan bir web sitesine muhtemelen en iyi örnek, Google.com‘un ana sayfasıdır. Google’ın ikonik görünümü çok sadedir ancak fark etmeliyiz ki, bu basitlik aynı zamanda sakinleştiricidir. Dağınıklık olmadığı için gözlerimiz ve zihnimiz için daha az iş vardır. Orada bulunma nedenimize odaklanabiliriz — yani bir şey aramaya!

Google’ın ana sayfasının neden bu hale geldiğinin ardında harika bir hikaye var. Google.com, beyaz alandan kapsamlı şekilde yararlanan ilk web sitelerinden biridir. Başladıklarında, internet bağlantıları çok daha yavaştı. Kullanıcı testlerine katılanlar, ekranda olan her şeye rağmen sayfanın indirilmesini beklerdi. Çok fazla beyaz alan görmeye alışkın değildiler! Bu kullanıcı testlerinden, Google’daki tasarımcılar, kullanıcıların sayfanın tamamen yüklendiğini bilmeleri için telif hakkı bildirimini sayfanın altına eklemeye karar verdiler.

Peki hangi beyaz alanı kullanmanız gerektiğini belirleyen nedir?

Hem makro hem de mikro alanların kullanımı aşağıdaki faktörlere bağlıdır:

İçerik

Düzende daha fazla bilgi olduğunda, daha az miktarda makro beyaz alan mevcut olacaktır. Aksine, mikro beyaz boşluk hacmi artacaktır. Bu uzlaşma hayati önem taşır; aksi takdirde sayfalar birer katı veri bloklarına dönüşür ve okunması son derece zor olur! Örneğin, Boulton (2007) haber web sitelerinin etkili bir okunaklı deneyim sağlamak için mikro beyaz boşluğa nasıl bağımlı olma eğiliminde olduklarını açıklar. Kullanıcıların okuma rahatlığı çok önemlidir.

Tasarım

Kullanıcı arayüzü tasarımı, düzendeki mikro ve makro beyaz alanlar arasındaki oranı etkiler. Tasarım stilini tasarımcı seçer ve bu seçim, tasarımda kullanılan beyaz alan türleri arasında bir denge oluşturur.

Kullanıcı

Kullanıcı araştırması (demografik bilgiler dahil), söz konusu hedef kitle için makro ve mikro beyaz alanların doğru dengesini belirlemek amacıyla kullanılabilir. Her tür kullanıcı için geçerli olabilecek “pratik bir kural” yoktur. Kullanıcı deneyiminde her zaman olduğu gibi, ürünümüzün veya hizmetimizin hedef kullanıcılarını gözeterek seçimler yapmamız gerekir.

Marka mesajı

Beyaz alan kullanmak, bir şirketin bütçesini ve dolayısıyla ürünün kalitesini öne çıkarabilir. Apple, Mercedes Benz ve IKEA gibi şirketlerin marka kimliğini düşünün; bu teoriyi nasıl destekliyorlar?

Aşağıdaki resim, BBC haber web sitesinin eski bir sayfasında hem makro hem de mikro beyaz boşlukları göstermektedir. Kağıt gazeteleri yansıtan haber siteleri, beyaz alanı az kullanma eğilimindedir. Bunun yerine, sayfadaki bu yüksek miktardaki içerik aracılığıyla güvenilirliklerini gösterirler.

Aktif ve pasif: Beyaz boşluğun kullanışlılığına yaklaşmanın başka bir yolu

Mikro ve makro beyaz alan arasındaki farkın yanı sıra, beyaz boşluğa aktif veya pasif olarak da bakabiliriz.

Aktif beyaz boşluk

Sayfa yapısını geliştirmek ve kullanıcıya sayfanın içeriği boyunca rehberlik etmek için kullanılan beyaz boşluktur.

Pasif beyaz boşluk

Kullanıcıya belirli bir okuma, akış veya içerik sırası boyunca rehberlik etmeden mizanpajın estetiğini iyileştirmek için uygulanır. Örneğin, font glifleri ile paragraf satırları arasındaki beyaz boşluk bu şekilde işlev görür (Boulton, 2007).

Yukarıdaki görüntü, beyaz boşluk uygulanmamış, pasif beyaz boşluk uygulanmamış ve ayrıca hem pasif hem de etkin beyaz boşluklar uygulanmış metin arasındaki farkı göstermektedir:

• Soldaki görseldeki metinde karakterler, satırlar, paragraflar vb. arasında pek beyaz boşluk yok. Beyaz boşluk olmamasının metni ezip sıkıştırdığını hemen fark ediyoruz. Okumak çok zor.
• Ortadaki örnekte, bazı pasif (ve mikro) beyaz boşluklar ekledik. İlkine göre ne kadar daha kolay okuyabildiğinizi fark ettiniz mi?
• Sağ taraftaki örneğe geçersek, metinde kendimize rehberlik edecek bazı aktif beyaz boşluklar ekledik. Ne mutlu ki, ilk gördüğümüz o sert “metin duvarı”, alıştığımız bir biçimde tasarlanmış bir şey haline geldi. Beyaz boşluk metnin genel okunabilirliğini ve akışını artırabilir, ancak sadece bunun için değil, göz sağlığımız ve akıl sağlığımız için de buna ihtiyacımız var!
  

Negatif alan tasarlarken dikkate alınması gereken üç unsur

Okunaklılık

Gördüğümüz gibi, mikro beyaz boşluk arayüz içeriğini okunaklı hale getirmek için çok önemlidir. Bir tasarımcı olarak yazı tipi, boyut, renk, stil, satır aralığı, karakter aralığı ve izleme (tracking) gibi tasarım tipografi özelliklerini seçerken beyaz alanı göz önünde bulundurmalısınız. Yukarıdaki resmi hatırlıyor musunuz? Beyaz alan düzenini değiştirmek, okuma performansını ve genel kullanıcı deneyimini etkiler. Mutlu okuyucuların sayfanızda kalma olasılığı çok daha yüksektir.

Tasarım tonu ve marka bilinci oluşturma

Beyaz boşluk, genel tasarımın tonuna katkıda bulunur. Daha fazla makro beyaz alana sahip web siteleri minimalizmi ve lüksü yansıtabilir. Daha az miktarda makro beyaz alana sahip web siteleri, haber sitelerinde olduğu gibi bilgilendirici gelebilir (Kyrnin, 2015).

Not: Bu göstergeler “değiştirilemez” değildir. Kullanıcılarınız üzerinde beyaz alan kullanımını test etmek her zaman en iyisidir. Tasarımlarınızı nasıl algıladıklarını size ancak onlar söyleyebilir.

Odaklanma ve dikkat

Beyaz alan, kullanıcıya etkileşimli içerik yoluyla rehberlik etmeye yardımcı olabilir. Odak noktaları oluşturmaya ve kullanıcının dikkatini belirli düzen bölümlerine yönlendirmeye yardımcı olabilir.

Bir web sitesi için stratejik planlamanın bir kısmı, belirli öğelere veya içeriğe öncelik vermektir. Belirli öğeleri öne çıkarmak için birçok görsel yöntem kullanabilirsiniz; Bunlardan biri, bu odak noktalarının etrafındaki beyaz boşluk miktarıyla oynamaktır. Marka ve baskı endüstrileri, marka mesajlarına dikkat çekmek için bu teoriyi kullanıyor.

Özetle

Negatif alan, tasarım öğeleri arasındaki alandır. Tasarımcıların kullanıcı deneyimi (UX) tasarlarken yararlanabilecekleri bir araçtır. Beyaz boşluğun mutlaka beyaz olmadığını unutmayın; “beyaz boşluk” sadece kullanıcı arayüzü (UI) öğelerinin veya belirli içeriğin bulunmadığı boşlukları belirtmek için kullanılan bir addır.

Bir tasarımcı olarak, beyaz alanı dört ana faktöre göre kullanabilirsiniz:

• İçerik,
• Tasarım,
• Kullanıcı,
• Marka

Düzendeki içeriği organize etmek ve kullanıcıyı gösterilen içerik blokları boyunca yönlendirmek için makro beyaz alanı kullanabilirsiniz. Metin, resim ve içerik bloklarında görüldüğü gibi tasarım öğesi özelliklerinin içinde mikro beyaz boşluklar kullanabilirsiniz.

Beyaz boşluğa pasif veya aktif olarak da yaklaşabiliriz. Pasif beyaz boşluk, tasarımda kullanıcı deneyimini kolaylaştırmak dışında belirli bir role sahip değildir — daha kolay okunabilirlik sağlamakla ilgilidir. Aktif beyaz alan ise, kullanıcıların odaklanmasına ve dikkatine rehberlik eder. Daha çok öne çıkmakla ilgilidir.

Referanslar

Beyaz alan ve tasarımdaki önemi hakkında birçok makale çevrimiçi olarak bulunmaktadır. Aşağıdakiler, negatif alanın gücünü ve kullanımını inceleyebileceğiniz makalelerin bir listesidir.

• Boag, P. (2011, 15 Şubat) Why White Space Matters. Boag World. boagworld.com/design/why-whitespace-matters/ [2014, 20 Haziran]
• Boulton, M. (2007). Whitespace. A List Apart. alistapart.com/article/whitespace. [2015, Nisan]
• Kollin, Z. UX Myths.Myth # 28: White Space is Wasted Space. uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space. [2014, 20 Haziran]
• Kyrnin, J. Web Tasarımlarında Beyaz Boşluğun Önemi. Web Tasarımının Temelleri. webdesign.about.com/od/webdesignbasics/a/whitespace.htm. [2014, 20 Haziran]
• Turnbull, C. Tasarımlarınızda Beyaz Boşluk (veya Negatif Boşluk) Kullanma. Web Design Tuts Plus. webdesign.tutsplus.com/articles/using-white-space-or-negative-space-in-your-designs–webdesign-3401. [2014, 20 Haziran]