Boşluk (Whitespace)
Whitespace (negatif alan veya boşluk), bir sayfanın öğeleri arasındaki ve çevresindeki boş alandır; kenar boşlukları, iç boşluklar ve metin, görsel ile düğmeler arasındaki aralıkları kapsar.
Önemli noktalar
- Tek başına bir aralık bir şey söylemez; gruplama iç ile dış boşluğun oranıdır.
- Tek temel birime dayalı boşluk ölçeği ilişkileri bileşenler arasında tutarlı tutar.
- Boşluğun bedeli dikey mesafedir ve birincil eylemi ekrandan çıkarabilir.
- Punto boyutunun bir buçuk katına yakın satır yüksekliği uzun okumayı destekler.
- Panolarda ve karşılaştırma tablolarında yoğun düzen ferah düzeni yener.
Derinlemesine
Boşluk mutlak büyüklükle değil göreli mesafeyle çalışır. Göz yakın olanı gruplar, uzak olanı ayırır; dolayısıyla herhangi bir aralığın anlamı tümüyle yanındaki aralıklara bağlıdır. Alanına sekiz piksel, sonraki alana yirmi dört piksel uzaklıktaki bir etiket açıkça o alana aittir; iki sayıyı ters çevirdiğinizde aynı etiket üstteki alanı tanımlıyor görünür. Ekipler bunu tek bir temel birim üzerine kurulu kısa bir adım listesi, yani bir boşluk ölçeği ile sabitler.
Daha çok boşluk kendiliğinden daha iyi değildir, çünkü boşluğun bedeli dikey mesafedir. Cömert iç boşluk içeriği aşağı iter ve bir noktadan sonra birincil eylem ilk ekrandan çıkar ve satın aldığı sükûnetten pahalıya mal olur. İşe yarayan denetimler piksel değil orandır: grup içi aralıklar gruplar arası aralıklardan dar, gövde metninde satır yüksekliği punto boyutunun yaklaşık bir buçuk katı ve gözün sonraki satırı güvenle bulacağı kadar dar bir sütun, kabaca altmış karakter.
Uygulamada denetim çiftler hâlinde yapılır. Komşu iki öğe seçin, birbirine ait olup olmadıklarını sorun, sonra aralarındaki boşluğun komşularına olan boşluktan buna göre küçük ya da büyük olduğunu doğrulayın. Uyumsuzluklar anında görünür. Scorecard hunisinde aynı araç ekran başına farklı iş görür: soru ekranında yanıt seçeneklerini parmağın yanlış basamayacağı kadar ayırır ama tek bir küme olarak okunacak kadar yakın tutar; sonuç ekranında ise puanı yalıtır.
Boşluk, fazla içeriği telafi edemez. Gereğinden yarı yarıya fazla metin taşıyan bir sayfa yayıldığında da bunaltıcıdır; yalnızca uzamıştır ve okur artık fazlalığın yanından geçmek yerine içinden kaydırır. Yoğunluk bağlamsaldır da. Panolar, karşılaştırma tabloları ve fiyat matrisleri her şeyi aynı anda görmek isteyen kişilerce okunur; oralarda ferah aralıklar, kazandırdığı berraklıktan pahalı bir kaydırma dayatır. Küçük ekranlarda masaüstü iç boşluğu ekranda iki öğe bırakabilir.
Pratikte örnek
Nasıl ölçülür
Etki zevke değil kavrayışa indiği için göreve dayalı sinyalleri okuyun. Etiketler alanlarıyla açıkça birlikte durduğunda form hata ve düzeltme oranları düşer. Kayıtlarda ani ileri geri hareket olarak görünen komşu denetimlerde yanlış dokunmalar, hedefler ayrıldıkça azalır. Birincil öğe yalıtıldığında ilk etkileşime kadar geçen süre kısalır.
Aynı anda maliyet tarafını da izleyin. Boşluk değişikliğinden önce ve sonra birincil eylemin yaygın ekran boyutlarında nereye düştüğünü not edin ve ona ulaşan ziyaretçi payını gözleyin. Adım başına tamamlama yükselirken ulaşan pay düşüyorsa düzen, erişimi sükûnete değişmiştir. Bu takas bazen değer; ama bir iç boşluk değişikliğinin yan etkisi değil, bir karar olmalıdır.
Sık yapılan hatalar
En yaygın hata, boşluğu her yerde eşit artırmaktır. Her kenar boşluğu aynı miktarda büyür; böylece ayıran ve bağlayan aralıklar birlikte genişler, hiçbir şey netleşmez ve sayfa yalnızca uzar. Gruplama görelidir: onu güçlendirmek genellikle dış boşluğu açarken iç boşluğu daraltmayı gerektirir. Eşit cömertlik, pahalı görünen ama neyin neyle gittiğini yine söylemeyen bir düzen üretir.
İkincisi, sistemi uygulamada kaybetmektir. Tasarım bir ölçekte anlaşır, sonra bileşenler elle seçilmiş değerlerle yayına girer ve iki çeyrek içinde tek bir sayfa, kimsenin bilerek seçmediği on bir farklı dikey aralık taşır. Ölçeği adlandırılmış değişkenlere gömün ve kod incelemesinde keyfi sayıları geri çevirin. Bu kayma tek bileşende görünmez, tüm sayfa birleştiğinde apaçıktır.
Sıkça sorulan sorular
Whitespace görsel hiyerarşiyi nasıl destekler?
Boşluklar ilişkili öğeleri gruplar ve önemli olanları yalıtır; bu da sayfanın okunma sırasını güçlendirir. Boşlukla çevrili bir düğme, diğer öğelere sıkıştırılmış bir düğmeden daha önemli okunur.
Ne kadar boşluk fazladır?
Birincil eylemi erişilemez hâle getirmeye ya da birbirine ait olanları ayırmaya başladığında. İzlenmeye değer iki hata biçimi budur ve ikisi de zevk meselesi değil gözlenebilir şeylerdir. Değişiklikten sonra ana eylemin tipik bir telefonda nereye düştüğünü ve gruplanmış öğelerin hâlâ grup olarak okunduğunu kontrol edin. İkisi de tutuyorsa fazladan boşluk zarar vermiyordur.
Boşluk ölçeği nedir ve neden kullanılır?
Dört ya da sekiz piksel gibi tek bir temel birimden türetilmiş, her kenar ve iç boşluğun kullanmak zorunda olduğu kısa bir izinli değerler listesidir. Önemlidir çünkü gruplama görelidir: boşluk bileşen başına serbest seçilirse gruplamayı bildiren farklar keyfileşir ve sayfa yapısını yitirir. Ölçek ilişkileri tekrarlanabilir kılar ve sapmaları incelemede görünür yapar.
Whitespace beyaz olmak zorunda mı?
Hayır. Terim rengi değil boş alanı anlatır; koyu bir zemin, bir fotoğrafın sakin bölgesi ya da düz bir marka rengi aynı işi görür. Önemli olan alanın rakip içerikten arınmış olmasıdır. Bu yüzden hareketli bir arka plan görseli, düz zeminde çalışan bir düzeni bozar: boşluk teknik olarak vardır ama artık boş değildir.
Boş alanı paydaşlara nasıl savunursunuz?
Bunu boşluk değil sıralama olarak çerçeveleyin. Soru rozetin görünüp görünmeyeceği değil, birincil eylemden önce mi sonra mı görüneceğidir ve bu sırayı boşluk dayatır. Bulanık ekran görüntüsü testini ekleme olan ve olmayan hâlleriyle gösterin. Zevk tartışmaları tıkanır; ana eylemin ilk bakıştan kaybolduğunu göstermek nadiren tıkanır.
Boşluk, ekranın üst kısmıyla nasıl etkileşir?
Doğrudan ve çoğu zaman olumsuz. Hero iç boşluğundaki, başlık kenar boşluğundaki ve alt başlık aralığındaki her artış birikir ve yerinden edilen öğe birincil eylem olur. Boşlukları ayarlayın, sonra sonucu tasarımcının ekranında değil en kısa yaygın görüntü alanında kontrol edin. Büyük ekranda ikna eden sakin düzen, telefonda eylemi gömme olasılığı en yüksek olandır.
Gövde metninde hangi satır yüksekliği ve uzunluğu uygun?
Kabaca satır yüksekliği punto boyutunun bir buçuk katı, sütun genişliği ise altmış karakter civarı. İkisi de gözün yerini kaybetmeden sonraki satırın başına dönmesini sağlar. Uzun satırla dar satır aralığının birleşimi yeniden okumaya yol açar ve okurlar bunu zor tipografi değil, zor içerik olarak yaşar.