Ana Sayfada Ekran Alanı: Neyi Ölçmeli, Neyi Kesmeli
Ana sayfa tartışmalarının çoğu aslında alan tartışması. Logo, kayan görsel, duyuru şeridi ve çerez kutusu yerleştikten sonra kullanıcının aradığı şeye ne kaldığı belirleyici olan. Bu alanı büyütmenin yolu daha büyük ekran varsaymak değil; ekranı ölçmek ve her bloğa ne iş yaptığını sormak.
Katlamanın üstü sabit bir yer değil
"Önemli içerik katlamanın üstünde kalsın" tavsiyesi tek başına uygulanamaz, çünkü herkesin katlaması farklı yerde. 1080 piksel yüksekliğinde bir monitörde tarayıcı çubukları ve sekmeler düştükten sonra geriye yaklaşık 900 piksel kalır. Aynı sitenin dizüstü ziyaretçisinde bu sayı 600'lere iner. 700 piksellik bir kapak görseli ile 64 piksellik yapışkan başlık, o kullanıcıda ilk ekranı tek başına doldurur.
Katlama çizgisini tahmin etme, analitik aracında viewport yüksekliği dağılımına bak. Yarım saatlik iş, tasarım toplantısının yarısını gereksiz kılar. Hedefi ortalamaya değil alt dilime göre kur: ziyaretçilerin yaklaşık onda birinin altında kaldığı yükseklik neyse, ilk ekran ona göre tasarlansın. Ortalamaya göre kurulan yerleşimde kullanıcıların önemli bir bölümü ana eylemi hiç görmeden kaydırmak zorunda kalır.
Geniş ekran, daha çok metin demek değil
Büyük monitör yaygınlaştıkça içerik alanını da genişletme refleksi geliyor. Metin için bu ters teper. Rahat okunan satır 60 ile 80 karakter arasında; 1600 piksele yayılan bir paragrafta göz satır sonundan bir sonraki satırın başına dönerken yolu kaybeder. Metin sütununa max-width: 70ch gibi bir sınır koyun, artan genişliği sütunlara, yan panellere veya kart ızgarasına verin.
Geniş ekranın gerçek kazancı yan yana durabilen bloklar. Tek bir öğeyi büyütmek değil.
Alanın nereye gittiğini sayın
Ana sayfanın gerçek viewport yüksekliğinde ekran görüntüsünü alın, sonra her bloğu işlevine göre işaretleyin: marka, navigasyon, içerik, dekor, promosyon. Kabaca piksel yüksekliklerini toplayın. Sayı çıkınca tartışma zevk meselesi olmaktan çıkıyor.
İlk ekranda içeriğin payı yarının altına düşüyorsa kesecek yer vardır. Sırayla bakılacak yerler: içi boş renk blokları, ikinci bir duyuru şeridi, aynı mesajı tekrar eden ikinci kapak görseli, gerçek bilgi taşımayan dekoratif ikonlar. Her öğeye tek soru yeter: bu blok kaldırılırsa kullanıcı ne kaybeder? Cevap yoksa blok da gitsin.
Bu sayımı kapak görselinin ağırlığıyla birlikte yapın. İlk ekranı dolduran görsel aynı zamanda sayfanın en geç yüklenen parçasıysa, hem alanı hem açılış süresini birden harcıyorsunuz.
Navigasyon yer kaplamadan yol göstersin
Yapışkan başlığı 60 ile 70 piksel bandında tutun, üst üste iki çubuk koymayın. Alt kategorileri açılır menüye alın, hepsini sürekli görünür tutmak ana sayfada içerikten yer çalar. Menü adları kısa ve tanıdık olsun; kurum içinde kullanılan özel isimler yerine kullanıcının aradığı kelimeyi yazın.
404 sayfasını da bu yerleşimin parçası sayın. Boş bir hata metni yerine arama kutusu ve en çok ziyaret edilen birkaç bağlantı koyarsanız, yanlış adrese düşen ziyaretçi çıkmak yerine sitede kalır.
Mobilde sıralama, masaüstünde yerleşim
Dar ekranda her şey alt alta gelir, yani tek karar sıralamadır. İlk üç blok neyse kullanıcının gördüğü odur. Masaüstünde ise yatay alan devreye girer ve aynı içerik iki ya da üç sütuna dağılabilir. Aynı tasarımı iki bağlamda da savunmaya çalışmak yerine, ölçüyü ikisi için ayrı ayrı yapın: mobilde ilk ekranda ne var, masaüstünde ilk ekranda ne var. İki cevap birbirini tutmuyorsa sorun genelde masaüstü tarafındaki dekorda.