Birçok site neden her web sayfasının yarısını boş bırakıyor? Bu ekran alanı israfı değil mi?
Bunun güzel bir örneği Stack Exchange Network siteleridir:
Gördüğünüz gibi, her sayfanın her iki tarafında bir ton boşluk kalmıştır.
Beyaz alan, siteleri belirli ekran boyutlarıyla uyumlu hale getiriyor mu?
Alandan ayrılmak siteleri mobil cihazlara uygun hale getirmeye yardımcı oluyor mu?
Alan, sayfaları daha az kalabalık ve dolayısıyla daha kullanışlı hale getiriyor mu?
Yoksa iyi bir neden yok mu ve insanlar bunu yapmaları gerektiği için yapmıyorlar mı?
Her iki tasarımı da kullanan sitelerde çalıştım ve kullanıcıları her iki şekilde de şikayet etmedim.
Bunun birçok nedeni var, ancak başlıcaları görsel karmaşa ve bilgi hiyerarşisidir bir tarafta ve UI tarafında yapısal tutarlılık .
Dağınıklık hayatımızda önemli bir olgudur ve kullanıcı arayüzleri ve bilgi görselleştirmelerinin tasarımında önemli bir husustur. Mevcut birçok görüntüleme sistemi, kullanıcının gördüğü nesneleri veya bilgileri filtreleyerek veya ekranın ortasındaki nesnelerin daha fazla görüntüleme alanına izin vermesi için doğrusal olmayan büyütme teknikleri kullanarak dağınıklığı azaltmak üzere tasarlanmıştır. Web sayfaları, haritalar ve diğer görselleştirmeler tasarlamaya yönelik ipuçları, genellikle, bu bilgilerin temsili ve düzenlenmesi konusundaki dikkatli seçimler yoluyla dağınıklığı minimumda tutarken, büyük miktarda bilgi görüntüleme tekniklerine odaklanır. [Rosenholtz ve diğ., 2005]
Basitçe söylemek gerekirse, fikir, öğeleri mantıklı bir şekilde sunarak görsel ve dolayısıyla bilişsel aşırı yüklenmeden kaçınmaktır. Bu mantıksal yol bir sonraki nokta ile ilgilidir:
Bilgilerin bir hiyerarşisi vardır ve göstermek istediğiniz şeyin en önemli parçasıdır. Yani, başarısızlık ve başarı arasındaki fark.
Bilgi hiyerarşisi, e-Öğrenim tasarımı da dahil olmak üzere her türlü tasarımda kullanılması gereken evrensel bir tasarım ilkesidir. Tanım olarak, bir sayfadaki/ekrandaki öğelerin veya içeriğin, bir önem sırasını (artan veya azalan) ortaya çıkaracak şekilde düzenlenmesidir.
Aşağıdaki kutulu modeline bir göz atın:
Gördüğünüz gibi, hiyerarşinin çoğu insan tarafından yapılandırılmış ve anlaşılabilir olduğu oldukça açıktır. Duyarlı modda bu hiyerarşinin tüm öğeleri beklendiği gibi biriktireceğini unutmayın, bu nedenle mobil avantaj çok açıktır
Şimdi, aynı düzen, tam genişliğe dönüştürüldü:
Şimdi, hiyerarşi 1 gitti ve kullanıcının gözü muhtemelen önce 2 ve 3'ü tarayacak. Ve sonra 6 ve 7! Temel olarak, en önemli unsurumuz hiyerarşinin altında. Bunu değiştirebiliriz, böylece sipariş 3-1-2-4 gibi bir şeydir. Ardından, duyarlı modellerde istifleme yaparken de sorunlar yaşayacağız (sadece cihazlar değil, ekran yeniden boyutlandırma da), çünkü 3 ilk öğe olacak, bu yüzden tekrar, sorunları çözmek yerine sorunlar yaratıyoruz.
Gördüğünüz gibi, sorunlar oldukça büyük ve bunlar sadece ana konular.
Ancak, kullanıcı arayüzü veya düzen tarafı da var:
Diyelim ki tam genişlikte bir sayfanız var. Ne olursa olsun,% 100 olacak. Küçük bir dizüstü bilgisayarda kişi için% 100 ve 24 inç monitörde% 100. Bir dizüstü bilgisayardaki kişinin, ekrandaki çok belirli miktarda bilgi ile öğeleri çok spesifik bir şekilde gösterecek belirli bir yapıya sahip yoğun bilgileri göreceğini görmek kolaydır.
Şimdi, bu 24 inç monitördeki kullanıcı son derece farklı bir şey görecek. Her şeyden önce, kullanıcı kafasını bir taraftan diğer tarafa geçecek şekilde bir tenis maçı gibi hissedecektir. Görsel doygunluk ve sürtünme elbette inanılmaz derecede yüksek olacak . Ancak bilgilerin dikey gösterimi de farklı olacaktır. Aşağıya bakın:
Oldukça büyük bir fark, ha? Görüntüler büyütüldü (ve bu başka bir sorun olabilir!) ve metin boyutunu korudu, neredeyse metin miktarını iki katına çıkardı. Şimdi bunun inanılmaz miktarda ekran boyutu ile çarpıldığını ve hala var olmayan ve önümüzdeki aylarda ortaya çıkacak olanları düşünün.
Başka bir deyişle: kontrolü korumak yerine, rastgele olma lehine vazgeçiyoruz .
Tabii ki, son derece spesifik vakalardan değil, genel kurallardan bahsediyoruz, bu yüzden burada ve orada istisnalar olacak
Tam genişlikteki örneklerinizden sadece Amazon'un kullandığı ve sayısız A/B testi ile yıllarca süren testlerin (bununla ilgili şu anda bulamadığım çok ilginç bir makale vardı) açıkça belirtmek istiyorum. Ancak burada hiyerarşi çalışıyor: çoğu ürün benzer bir yaklaşık ağırlık olduğundan, önceden hiyerarşiyi bilmeyecekleri ürünler satıyorlar, böylece kullanıcının eşleşmesi için elinizden geleni yapacaksınız arama.
Google'a gelince, bir kutulu model kullanıyorlar ve içeriği solda küçük bir boşluk bırakarak sola hizalıyorlar. LinkedIn ana sayfaları kutulu ve ortalanmış olmasına rağmen, oturum açmamış kullanıcılar için açılış sayfasının tam genişlikte bir öğesi olduğu doğrudur. Ancak dikkat ederseniz, o sayfada bile her şey kutulu
Gövde metniniz için en uygun satır uzunluğu, boşluklar dahil olmak üzere satır başına 50-60 karakter olarak kabul edilir (“Tipografi”, E. Ruder). Diğer kaynaklar 75 karaktere kadar kabul edilebilir olduğunu göstermektedir.
Bir web sitesini temiz (ve basit) tutmak bir tasarım trendidir, ancak aynı zamanda kullanılabilirlik değerlerine de sahiptir. Daha az gürültü var ve kullanıcılar işleri daha kolay bulabiliyor.
Ancak içeriğinize maksimum genişlik eklemek öncelikle okunabilirlik için iyidir. reddit 'a bir bakın ve satır uzunluğunun neden önemli olduğunu fark edeceksiniz.
Kullanıcının bir kerede görmesi gereken bilgi miktarında makul bir sınır vardır .
Görünüm, kullanıcının asimile edebileceği/anlayabileceğinden daha fazla bilgi ile doldurulursa, ezici olur. Bu, içeriğin türüne bağlıdır ve bilgilerin görüntülenme şekli.
Boş alan bırakmak değil, ihtiyaç duyulan alan miktarını kullanmak, daha fazla değil.
Konuyu örneğinizle göstermek için:
Web siteleri kaydırma özelliğini kullanabildiğinden, tek bir ekrana olabildiğince fazla bilgi koymaya gerek yoktur.
Şimdi, içeriği nasıl dağıtırım?
Siteye bağlı olarak, içerik ortalanmış veya sola hizalanmış olabilir (bu sonuncusu muhtemelen Soldan Sağa okunması nedeniyle). Boşluğu kapların sınırlarında değil, elemanların içinde dağıtmak için başka bir alternatif var. Kapların içinde birkaç sütun varsa ve her iki tarafta bir kenar çubuğu varsa bu tür bir düzen yararlı olabilir. Başka bir deyişle, yeterli sütun olup olmadığına değer ve bir noktada her elemanın (her satır) tutarlılığı, bilginin çok uzak olması nedeniyle kırılmaya başlayacaktır . Ve o noktaya geldiğimizde, o boş alanı önceki yollardan herhangi biriyle eklemeye devam ediyoruz.
Ekranda ne kadar çok nesne varsa, o kadar fazla göz ve beyin işlemek zorunda kalır [3] . Boş alan ile sayfayı işlemek için gerekli dikkat kaynaklarını azaltıyoruz . Ancak, çok fazla (% 50'den fazla) okunabilirlik ve kullanıcı memnuniyeti üzerinde olumsuz bir etkisi olabilir [4] .
Beyaz alan, siteleri belirli ekran boyutlarıyla uyumlu hale getiriyor mu?
Pek sayılmaz. Sayfada beyaz boşluk yoksa (ve içerikle istiflenmişse), farklı çözünürlükler için tasarım yaparken, sayfanın tüm öğelerinin farklı çözünürlükler için nasıl konumlandırılacağı büyük bir sorun haline gelecektir.
Alandan ayrılmak, sitelerin mobil uyumlu olmasını sağlıyor mu?
Tam olarak değil. Mobil çözünürlüklerde o kadar fazla beyaz alan olmadığını fark edebilirsiniz. Cep telefonlarında bulunan sınırlı ekran alanı nedeniyle farklı düzen yapılarına sahiptirler.
Referanslar:
[1] Chaparro B. ve ark., Çevrimiçi Metin Okuma: Dört Beyaz Boşluk Düzeni Karşılaştırması, 2004
[2] Coursaris C. ve Kripintris K., Web Estetiği ve Kullanılabilirlik: Beyaz Alanın Etkileri Üzerine Ampirik Bir Çalışma, 2012
[3] S. Luck ve E. Vogel Özellikler ve bağlaçlar için görsel çalışma belleği kapasitesi, 1997
[4] Bernard M., Chaparro B. ve Thomasson R., Web'de Bilgi Bulma: Boşluk Miktarı Gerçekten Önemli mi?, 2000
Yaptığım siteler için konuşan bir web geliştiricisi olarak: geniş genişlikte ekran için tasarım yapmadık. Ve beyaz boşluk, tarayıcı genişliğini (veya CSS arka plan rengi ne olursa olsun) ölçeklendirdiğinizde varsayılan değerdir.
Masaüstü ve mobil cihazlarda duyarlı ve ölçeklenebilir bir web sitesi tasarlamanın ve geliştirmenin maliyeti zaten oldukça yüksek. Analizlerimiz, kullanıcılarımızın% 90'ından fazlasının sitemizi <1400 piksel geniş çözünürlükte görüntülediğini gösteriyor.
Günün sonunda, 1400 piksel genişliğindeki sitemize göz atan kullanıcıların <% 10'unu tasarlamak ve uygulamak için zaman ve para harcamak buna değmez.
İçerik doğal olarak bu kadar genişse, elbette sayfayı genişletin. Örneğin, büyük bir tablo, daha dar bir sütunda sıkılmaktan çok, gerektiği kadar genişlik kullansaydı çok daha kullanışlı olurdu. Geçmişte google dokümanlar e-tabloyu tam ekran kullandım ve bu kullanışlı.
Ancak diğerlerinin söylediği gibi, metin satırlarının okunması zorlaşmadan önce ne kadar olması gerektiğine dair bir sınır vardır. Bunun nedeni, gözünüz sola doğru hareket ederken bir sonraki satırın başlangıcını bulmak zorlaşır, bu nedenle metin sütunları yalnızca çok geniş olmalıdır.
Geniş web sayfalarına sahip olmamanın başka bir argümanı, herhangi bir web sitesinden daha fazlasını görebilmem için büyük bir monitör almadım. Ekranlar büyüdükçe pencereleri büyütme olasılığı azaldıkça, tarayıcı her nasılsa o kadar geniş değildir.
Birden fazla pencere, tarayıcı, düzenleyici vb. Yan yana olabilmem için büyük bir monitör aldım (aslında, iki büyük monitör yan yana ve makinem onları sürecekse daha fazla olurdu). Bu şekilde uygulamalar arasında sürekli geçiş yapmak zorunda kalmam, sadece birinden diğerine bakabilirim, bu da işleri daha verimli hale getirir. Bu, büyük olasılıkla, insanların aynı anda başka şeyler üzerinde çalıştığı çalışma bağlamlarında sıklıkla kullanılan stackexchange gibi siteler için geçerlidir. Eğlence siteleri için neredeyse kesinlikle daha az önemlidir.
Herhangi bir kullanılabilirlik sorusunda olduğu gibi, kullanıcılarınızın çalıştığı bağlamı düşünün. Siteniz baktıkları tek şey mi, yoksa yaptıklarının sadece bir parçası mı? Bundan gerçekten emin misin? Örneğin bu bilgileri kaydettiniz mi?
Yaptıkları tek şey olsa bile, aslında bir amaca hizmet etmedikçe, şeyleri ekrana koymanın bir anlamı yok. Aksi takdirde, sadece onlara bakmasını istediğiniz şeyden (ya da aslında bakmak istedikleri şeyden) kaynaklanan gürültüdür. Yani, gerçekten yararlıysa, devam edin. Ama sadece uğruna boşluk doldurmayın.
Bu tasarım bootstrap kullanılarak kolayca bulunur ve değiştirilir, örnek burada: http://getbootstrap.com/css/#grid-example-fluid
Kullanıcı arayüzü için basit bir cevap, paragraf genişliğinin, bir gözün soldan sağa yapabileceği zorla hareket miktarıyla karşılaştırılabilir olmasıdır - ayrıca bir kağıtla karşılaştırılabilir.
Normalde bir paragrafın okunabilir alanı, ortalama bir elden daha geniş olmamalıdır.
Bu soruyu ve konuya olan ilgiyi görmek beni gerçekten şaşırttı. Bana öyle geliyor ki, "Beyaz alan boşa harcanıyor mu?"
Bence bu bir efsane ve beyaz alanın başarılı tasarımın anahtarı olduğu fikrini destekleyen birçok argüman var.
Ana içerik bloğunun genişliğini sınırlamak ve düzen beyaz boşluğa sahip olmak için en önemli argüman, tasarımı daha kullanışlı hale getirir ve kullanıcılara yardımcı olur en önemli unsurlara odaklanın . Size deneyimlerimden anlatabilirim ki, bu web sitelerini o kadar fazla bilgi ile bırakıyorum ki, ihtiyacım olanı asla bulamayacağım hissine sahibim. Tüm ekranda bilgileri görmek yorucu ve sol ve sağ taraftaki metinlerle orta sütuna nasıl odaklanabileceğimi anlamıyorum.
Bunun biraz öznel olduğunu biliyorum, ama sayfada çok fazla bilgi bulunan, geliştiricilerin "daha fazla" ile bir düğme eklemek veya önemli olanı sentezlemek için daha fazla zaman harcamak istemediğini hissediyorum. Bir ceza gibi geliyor ve ucuz geliyor.
Beyaz boşluk aşağıdakilere yardımcı olur:
Bu yazıda Beyaz Alan Neden UX Tasarımı İçin Çok Önemli , ilginç bir fikir buldum:
Beyaz alanın, anlayışı% 20'ye kadar artırdığı kanıtlanmıştır. (...)
Beyaz alan zihinsel haritalar oluşturmaya yardımcı olur. (...)
Beyaz alanın gücü, insanın dikkatinin ve hafızasının sınırlarından gelir
Güncelleme: Daha spesifik olmak gerekirse, solda ve sağda kenar boşluklarına sahip olmanın alternatifi daha fazla sütun veya daha geniş bir ana kutuya sahip olmaktır.
Birinci seçenekle ilgili sorun, önemli bilgileri önceliklendirmenin zor, ikincisi ise büyük genişlikte bir metni okumak zor olmasıdır.
Bir sütunun genişliğini sınırlamak için iyi bir argüman sunulmuştur burada ve bu referanstan bahsetmek önemlidir:
İçerik için ideal bir satır uzunluğu var mı?
“Web Stili Kılavuzu - Web sitesi oluşturmak için temel tasarım ilkeleri” nden bir alıntı yapmak.
Metin düzeni için ideal satır uzunluğu insan gözünün fizyolojisine dayanır ...
Normal okuma mesafesinde, görsel alanın yayı sadece birkaç inçtir - iyi tasarlanmış bir metin sütununun genişliği veya satır başına yaklaşık 12 kelime. Araştırmalar, satır uzunluğu ideal genişliği aşmaya başladığında okumanın yavaşladığını ve alıkonma oranlarının düştüğünü gösteriyor, çünkü okuyucunun bir satırın sonundan bir sonraki satırın başlangıcına kadar izlemek için göz ve boyun kaslarını kullanması gerekiyor. Gözün sayfada büyük mesafeler kat etmesi gerekiyorsa, okuyucu kolayca kaybolur ve bir sonraki satırın başlangıcı için avlanmalıdır. Nicel çalışmalar orta çizgi uzunluklarının metnin okunabilirliğini önemli ölçüde artırdığını göstermektedir.
Web Stil Kılavuzu - Web Sitesi Oluşturmak için Temel Tasarım İlkeleri Patrick J. Lynch ve Sarah Horton 2. baskı, sayfa 97.
Görme alanının bir rol oynadığını söyleyebilirim. Bir kağıt parçasını kolayca okuyabilirsiniz ve web sitesinin genişliği yaklaşık aynı boyuttadır. Bu şekilde, sayfayı okurken veya ayrıştırırken kafanızı yatay yönde fazla hareket ettirmeniz gerekmez.
Ayrıca boşlukları azaltmaya çalışsanız bile, bunu nasıl yapardınız? Her zaman kolay değil. Soruların çoğu zaten oldukça kısa. 2 sayfa yan yana mı? Bu genel olarak inifinte scroll veya scrolling ile nasıl çalışır?
Yukarıdaki tüm cevapları okudum, ancak ortaya çıkabilecek duyarlı sorunlardan herhangi bir şey görmedim.
Hala 'mobil ilk' tasarımı almama rağmen, duyarlı bir web uygulaması tasarlayacaksanız, aynı içeriğin 320 pikselden güzel görünmesi gerekir. Esas olarak gösterge panolarıyla çalışıyorum, bu yüzden çok fazla alana ihtiyaç duyuyorum, ancak çoğu zaman içeriği o kadar çok uzatamıyorum ki tüm çözünürlük katmanlarında iyi bir şekilde iyi görünecek.
Kap genişliği ne kadar uzun olursa, içeriğin daha küçük çözünürlük katmanlarında yığınlanacağını ve bu çözünürlüklerde içerik bloğunun yüksekliğinin her zaman daha yüksek olacağını unutmayın. Örneğin, 1920 piksel genişliğindeki bir kaptaki tek bir metin satırı, mobil ekran görünümünde 140 piksel yükseklik tüketir - bu, küçük bir telefon ekran yüksekliğinin% 30'u kadardır ve tarayıcı kullanıcı arayüzü hariçtir. Şu anda 21: 9 3440x1440 piksel ekrandayım. Görüntüleme ekranımda yan yana uzanan öğeleri olan .. Bırakın ki bazen masaüstü yan yana görmek için başımı çevirmek zorundayım! : D
İşte bir örnek: https://jsfiddle.net/cjj1Ln36/1/
Deneyime göre, 1400 pikselden fazla bir şey, özellikle zengin içerik için bir başlıktır, örneğin bir başlık, metin ve grafik kombinasyonu. Genellikle, daha yüksek çözünürlüklerde yapılacak mantıklı şey, içeriği sütunlara ayırmaktır, ancak çözünürlüğe ve deneyime bağlı olarak, bu sütunlar çözünürlüğe bağlı olarak çok kısır veya çok yoğundur. Ayrıca, iki kod bloğunun aynı içeriği içerme olasılığı düşüktür - dinamik web sitelerinde tahmin edilmesi imkansızdır, bu nedenle bir sütunun içeriği yoğun ve diğer seyrek olabilir.
Fotoğraf açısından zengin web siteleri için işler daha da kötüdür.
a) Fotoğraflar 1400 piksel tam konteyner genişliği kullanıyor ancak 4: 3 gibi ortak bir oranı korumak zorundaysa, büyük olasılıkla ekranın tüm yüksekliğini kaplar ve büyük olasılıkla onu aşar.
b) Fotoğraf metnin yan tarafında kullanılırsa, 1400 piksel çözünürlükten fotoğrafın metnin üzerinde oturması mantıklı olan bir çözünürlüğe (ör.> 768 piksel) gitmek, büyük olasılıkla içerik çok seyrek başlar ve küçülürken muhtemelen görüntünün yüksekliğini aşacaktır. Sorunu açıklamak için bir keman yarattım. Düşük çözünürlükten maksimum 1400 piksele kadar genişletmeyi deneyin (bir kap olmadan hayal edin!). Tüm tarayıcı genişliklerinde hoş görünüyor mu? Muhtemelen değil.
Ayrıca, yukarıdaki tüm diğerleri ne dedi - çok ezici, vb
Özellikle metin ağırlıklı web sitelerinde, dar bir metin sütununu okumak, tam genişlikte bir metin duvarından daha hoştur. Ayrıca, metin bir roman değilse, metin satırlarının yarısından fazlasının tam genişliğe ulaşmadığını, böylece hoş olmayan ve düzensiz bir "metin lekesi" oluşturduğunu göreceksiniz.
Metnin sözlükle karşılaştırmalı olarak (fiziksel) bir romanda nasıl görüntülendiğini düşünün. Sözlükler genellikle iki sütunda gösterilir. Okuyucunun okunan şeye daha iyi odaklanmasını sağlar, çünkü önemlidir. Bir romandaki tüm kelimeleri tutmak o kadar önemli değil, aynı zamanda zor değil çünkü okuyucunun zaten hikayeyle ilgilendiğini varsayıyoruz.
Kısacası: İnsanların dikkat süreleri zayıftır ve bir seferde çok az bilgi verilirse odağı daha iyi korurlar.
Ayrıca içerik türüne, boyutuna ve kullanıcının ekrandan uzaklığına da bağlıdır.
Büyük fotoğraflar veya sunumlar içeren videolar, gösterge panoları için - tam ekran en iyi seçenektir.
Metin içeriği ve küçük ve orta resimler için rahat bir algılama alanını dikkate almak önemlidir.
Normal bir PC veya dizüstü bilgisayar için 50 ila 65 cm (20 ila 26 inç) mesafeden oturan bir kullanıcıya gözlerinizi soldan sağa hareket ettirmeye gerek kalmadan rahat bir algılama alanı ne kadar geniş olurdu?
Gözler çok değerlidir ve çabuk yorulurlar, bu nedenle insanlar 2B hareketten 1B harekete kadar kapsamlı serbestlik derecelerini düzeltmeyi ve sayfayı dikey olarak kaydırmayı ve gözlerin konumlarında sabit kalmasını sağlar.
Gözleri soldan sağa doğru hareket ettirmek ve ek olarak geçerli/sonraki içeriğin dikey konumunu yeniden sabitlemek gibi, sayfayı dikey olarak kaydırmak insanlar için daha kolaydır. Ana algı alanının dışına yerleştirilirse, bazı içerikler kaybolabilir.
Sonuç olarak, bir sayfadaki genel görsel izlenim zarar görebilir.