Web tasarımında hero alanı: ziyaretçi ilk ekranda karar veriyor
Bir web sitesine girdiğinizde ilk gördüğünüz alana hero alanı ya da karşılama alanı denir. Başlık, kısa bir açıklama, bir görsel ya da hareket ve genellikle bir buton. Kulağa basit geliyor, ama bu alan sitenin geri kalanından çok daha fazla iş yapıyor: ziyaretçiye nerede olduğunu, kiminle konuştuğunu ve neden burada kalması gerektiğini birkaç saniyede anlatıyor.
Karar saniyeler değil, milisaniyeler içinde veriliyor
Carleton Üniversitesi'nden Gitte Lindgaard ve ekibinin 2006'da yayımladığı araştırmada katılımcılar web sayfalarını yalnızca 50 milisaniye gördükten sonra puanladı ve bu ilk puanlar, sayfaya uzun süre baktıktan sonra verdikleri puanlarla büyük ölçüde örtüştü. Google'ın 2012'de paylaştığı çalışma bu süreyi 17 ile 50 milisaniye arasına çekti ve iki şeyin öne çıktığını gösterdi: kullanıcılar sade ve kategorisine tanıdık gelen tasarımları daha çok beğeniyor.
Yani ziyaretçi metni okumadan önce sitenizin genel izlenimine karar veriyor. Bu izlenimi oluşturan alan da hero.
Dikkat ilk ekranda toplanıyor
Nielsen Norman Group'un 2018 göz izleme araştırmasına göre kullanıcılar sayfada geçirdikleri sürenin %57'sini ilk ekranda, %74'ünü ilk iki ekranda harcıyor. İnsanlar elbette kaydırıyor, ama kaydırmaya değer olduğuna ikna olurlarsa. O ikna işi ilk ekranda yapılıyor.
İyi bir hero alanının beş parçası
- Net bir değer önermesi: Ne yaptığınızı, kim için yaptığınızı ve neden siz olduğunuzu tek cümlede söyleyin. "Hoş geldiniz" ya da "Geleceği birlikte tasarlıyoruz" gibi her markaya uyan cümleler hiçbir şey anlatmaz.
- Tek bir ana eylem: Teklif al, menüyü gör, randevu oluştur. Ziyaretçiye aynı anda dört seçenek sunmak, çoğu zaman hiçbirini seçmemesi demektir. İkincil bir bağlantı olabilir, ama ana buton tek olmalı.
- Markayı taşıyan bir görsel ya da hareket: Stok fotoğraf yerine ürününüzü, işinizi ya da mekânınızı gösterin. Hareket kullanılacaksa sakin ve amaçlı olmalı; dikkat dağıtmamalı.
- Bir güven işareti: Çalıştığınız markaların logoları, kısa bir müşteri yorumu ya da "8 yılda 300 marka" gibi somut bir sayı. Ziyaretçi henüz sizi tanımıyor; bu küçük işaretler o boşluğu kapatır.
- Devam etme ipucu: Aşağıda daha fazlası olduğunu hissettiren bir ok, yarım görünen bir bölüm ya da "kaydır" yazısı. İlk ekran kendi içinde kapanırsa ziyaretçi sayfanın bittiğini düşünebilir.
En sık gördüğümüz hatalar
Kayan slider ile beş farklı mesaj. Her slayt ayrı bir şey söylediğinde hiçbiri akılda kalmaz; ziyaretçi çoğu zaman ilk slaytı görüp geçer. Bir mesaj seçin ve onu iyi söyleyin.
Ağır video ve yavaş açılış. Google'ın sayfa deneyimi ölçütlerinden Largest Contentful Paint (LCP), ekrandaki en büyük öğenin ne kadar sürede yüklendiğine bakar ve bu öğe çoğu zaman hero görselidir. Google iyi bir deneyim için bu sürenin 2,5 saniyenin altında olmasını öneriyor. Görseli doğru boyutta ve modern formatta (WebP, AVIF) sunmak, hem kullanıcı hem arama sıralaması için fark yaratır.
Sadece masaüstüne göre tasarlamak. Ziyaretçilerin büyük kısmı siteye telefondan giriyor. Masaüstünde ferah duran bir başlık, telefonda ekranın tamamını kaplayıp butonu aşağı itebilir. Hero alanı her ekran boyutunda ayrıca düşünülmeli.
Markadan kopuk bir ilk ekran. Logonuz, renkleriniz ve konuşma diliniz bir yerde, hero alanınız başka bir yerdeyse ziyaretçi ilk saniyede bir tutarsızlık hisseder. İlk ekran, kurumsal kimliğin dijitaldeki ilk uygulamasıdır.
Kendi sitemizde ne yaptık?
Dada Studio anasayfasında slogan yerine doğrudan işimizi gösterdik: sayfa kaydırıldıkça açılan bir halkada 16 projemiz sırayla sahneye geliyor ve her kart ilgili projeye götürüyor. Ana eylem tek: menüdeki Teklif al butonu. Bir ajans için en güçlü değer önermesi yaptığı işin kendisi olduğu için hero alanını vitrin gibi kurguladık.
Kısa bir kontrol listesi
- Sitenizi ilk kez gören biri, 5 saniye sonra ne yaptığınızı söyleyebiliyor mu?
- İlk ekranda tek ve belirgin bir ana buton var mı?
- Görsel, size ait mi yoksa başka bir markada da görülebilecek bir stok fotoğraf mı?
- Telefonda butonu görmek için kaydırmak gerekiyor mu?
- Hero görseli 2,5 saniyenin altında yükleniyor mu?
Sitenizin ilk ekranını birlikte ele almak isterseniz web tasarım hizmetimize göz atın ya da teklif formunu doldurun.
Kaynak: Nature, Lindgaard ve ekibi, Ocak 2006
Kaynak: Google Research, Ağustos 2012
Kaynak: Nielsen Norman Group, Scrolling and Attention, Nisan 2018
