Landing page nedir, nasıl tasarlanır?

Kısaca

Wikipedia landing page'i, bir arama sonucuna, pazarlama e-postasına ya da çevrimiçi reklama tıklayınca açılan tek bir web sayfası diye tanımlar. Genel amacı ziyaretçiyi satışa ya da potansiyel müşteriye çevirmektir.

Aynı kaynak iki tür sayar: referans ve işlem. Referans türü, ziyaretçiyle ilgili bilgiyi metin, görsel ya da bağlantılarla sunar. İşlem türü ziyaretçiyi bir işlemi tamamlamaya ikna etmeye çalışır ve bunu doldurulacak bir formla yapar.

Ana sayfa ile farkı hedefindedir. Ana sayfa her türden ziyaretçiyi karşılar ve onları farklı yerlere dağıtır. Landing page ise belirli bir kampanyadan gelen kitleye tek bir şey söyler.

Landing page audit'lerinde en sık gördüğüm hata şu: sayfa şirketin kendisini anlatır, ziyaretçinin sorusunu cevaplamaz. Başlık "Biz kimiz" der, ziyaretçi ise "Bu benim işimi çözer mi?" diye sorar.

Ne zaman kullanılır

Trafiği belirli bir vaatle getirdiğiniz her durumda landing page kullanın. Wikipedia'ya göre bu sayfadaki satış metni genellikle tıklanan reklamın, arama sonucunun ya da bağlantının mantıklı bir devamıdır.

• Reklam kampanyası. Google Ads yardım sayfasına göre Kalite Puanı'nın bileşenlerinden biri landing page deneyimidir. Google bunu, sayfanın reklama tıklayan kişi için ne kadar alakalı ve yararlı olduğu diye tanımlar.
• Tek bir ürün ya da teklifin duyurusu. Yeni bir paket, bir etkinlik kaydı ya da bekleme listesi.
• E-posta ve sosyal medya kampanyası. Bağlantıya basan kişi, mesajda okuduğu şeyi sayfanın ilk ekranında görmelidir.

Şu durumlarda landing page doğru araç değildir:

• Ziyaretçiler birbirinden farklı şeyler arıyorsa. Onları ana sayfa ya da kategori sayfası daha iyi karşılar.
• Teklif henüz netleşmediyse. Önce bir wireframe çizip birkaç kişiye gösterin, sonra sayfayı kurun.
• Aynı teklif çok farklı kitlelere gidiyorsa. Bu durumda her kitleye ayrı bir sayfa açmayı düşünürüm, çünkü her kitlenin ilk sorusu farklıdır.

Bölüm bölüm anatomi

İyi bir landing page yukarıdan aşağıya ziyaretçinin sorularını sırayla cevaplar. Bu nedir, bana uyar mı, gerçek mi, ne kadar, şimdi ne yapacağım? Aşağıdaki iskelet bu soruları bölümlere dağıtır.

Tıklanabilir anatomi

1. 1Üst şerit
2. 2Hero: başlık ve buton
3. 3Güven kanıtı
4. 4Nasıl çalışır
5. 5Somut örnek
6. 6Fiyat ve koşullar
7. 7SSS ve son çağrı

1. Üst şerit

İşi: Kimin sayfasında olduğunuzu söyler. Ziyaretçi logoya bakıp doğru yere geldiğini anlar.

Yap

Logoyu sol üste koyun. Yanına en fazla bir bağlantı ya da sayfadaki butonun aynısını ekleyin.

Yapma

Sitenin bütün menüsünü buraya taşımayın. Her menü bağlantısı, teklifi okumadan sayfadan çıkmanın bir yoludur.

2. Hero: başlık ve buton

İşi: İlk ekranda ne sunduğunuzu ve kime sunduğunuzu söyler. Ziyaretçi kalıp kalmayacağına çoğu zaman burada karar verir.

Yap

Ne yaptığınızı yeni gelen birine anlatan kısa bir başlık yazın. Altına bir açıklama cümlesi, onun altına eylemi adlandıran tek bir buton koyun.

Yapma

"Hoş geldiniz" ya da "Geleceği birlikte kuralım" gibi bir şey söylemeyen başlık yazmayın. Buton metni "Hemen başla" olmasın.

3. Güven kanıtı

İşi: "Bu iş gerçek mi?" sorusunu cevaplar. Ziyaretçi sizi tanımıyorsa bu soruyu mutlaka sorar.

Yap

Gerçek müşteri logoları, izinli ve isimli alıntılar kullanın. Bir rakam yazacaksanız kaynağını da yazın.

Yapma

Uydurma yorum ya da stok fotoğraflı "mutlu müşteri" koymayın. Kaynağı olmayan yüzde de yazmayın.

4. Nasıl çalışır

İşi: Butona bastıktan sonra ne olacağını anlatır. Belirsizlik azaldıkça bir sonraki adımı atmak kolaylaşır.

Yap

İşi kullanıcının gözünden adım adım yazın. Her adımın sonunda kullanıcının eline ne geçtiğini söyleyin.

Yapma

Özellikleri ekibin iç adlarıyla sıralamayın. "Akıllı Senkron Modülü" ziyaretçiye bir şey anlatmaz.

5. Somut örnek

İşi: Soyut vaadi görünür hale getirir. Ziyaretçi ne alacağını kendi gözüyle görür.

Yap

Ürünün gerçek ekranını, örnek bir raporu ya da örnek bir çıktıyı gösterin.

Yapma

Ürünle ilgisi olmayan, yalnızca süs için konmuş bir stok görsel kullanmayın.

6. Fiyat ve koşullar

İşi: Karar için gereken bilgiyi verir: ne kadar tuttuğunu ve neyin dahil olduğunu.

Yap

Fiyatı ve neyin dahil olduğunu açıkça yazın. Teslim süresi ya da önemli bir koşul varsa onu da aynı yere koyun.

Yapma

Fiyatı bir formun arkasına ya da sayfanın dibindeki küçük yazıya saklamayın.

7. SSS ve son çağrı

İşi: Kalan soruları cevaplar ve aynı eylemi bir kez daha sunar. Sayfayı sonuna kadar okuyan kişi burada karar verir.

Yap

Satıştan önce gerçekten sorulan soruları yazın. Son butonun metni, hero'daki butonla aynı olsun.

Yapma

Sayfanın sonunda yepyeni bir teklif açmayın. İkinci bir hedef, ilkinin gücünü böler.

Yedi bölümlük bir landing page iskeleti. Bir bölüme basınca o bölümün işi ve yap, yapma notu iskeletin altında görünür. JavaScript kapalıysa bütün notlar alt alta durur.

Bölüm sayısı teklife göre değişir. Ucuz ve tanıdık bir ürün için hero, fiyat ve buton yetebilir. Pahalı ya da yeni bir hizmette güven ve örnek bölümleri uzar, çünkü ziyaretçinin soruları artar.

Sıra ise pek değişmez. Ziyaretçi ne olduğunu anlamadan güven kanıtına, ne alacağını görmeden fiyata bakmaz.

Yap ve yapma

Aşağıdaki maddelerin çoğu Nielsen Norman Group'un (NN/g) ana sayfa ve buton metni çalışmalarından geliyor. Landing page'de bu ilkeler daha da önemlidir, çünkü sayfanın tek işi ziyaretçiyi tek bir eyleme götürmektir.

"Get Started" (Hemen başla) butonu üzerine NN/g'nin 2017 tarihli bir çalışması var. Aurora Harley ve Kim Flaherty, bu butonun tıklama aldığını ama yanılttığını yazar. Çalışmadaki kullanıcılar şirketin ne yaptığını öğrenmek istiyordu. Butona basınca ise kendilerini bir testte ya da kayıt penceresinde buluyorlardı.

Huei-Hsin Wang'ın 2024 tarihli NN/g yazısı da görsel hiyerarşi için kısa bir uyarı yapar: her şey vurgulanırsa hiçbir şey öne çıkmaz. Landing page'de bunun anlamı tek bir ana butondur. Tek bir butonun sonucu ne kadar değiştirebildiğini 300 milyon dolarlık buton hikayesinde anlattım.

Mobil ve masaüstü farkı

İskelet iki ekranda da aynıdır. Değişen, bölümlerin yan yana mı alt alta mı durduğudur. Masaüstünde hero iki kolondur: solda başlık ve buton, sağda ürün görseli. Telefonda görsel metnin altına iner.

Telefonda ilk ekran çok kısa. Başlık, açıklama cümlesi ve buton bu kısa alana sığmalı. Büyük bir görseli başlığın üstüne koyarsanız buton ilk ekranın dışına düşer.

W3C'nin WCAG 2.2 standardında 1.4.10 ölçütü (AA) burada işe yarar. İçerik 320 CSS piksel genişliğinde, iki yönde kaydırma gerektirmeden okunabilmelidir. Bu, telefonda yatay kaydırma olmaması demektir.

Dokunma hedefi de mobilde önem kazanır. WCAG 2.2'nin 2.5.8 ölçütü (AA), işaretçiyle kullanılan hedeflerin en az 24 × 24 CSS piksel olmasını ister. Hedef daha küçükse, çevresinde yeterli boşluk olması da ölçütü karşılar. Ben ana butonu bunun epey üstünde, ekran genişliğine yakın tutarım.

Hero görseli telefonda çoğu zaman sayfanın en ağır parçasıdır. Hızı ölçerken bakılan değerlerden biri LCP'dir, yani sayfadaki en büyük içeriğin ekrana gelme süresi.

web.dev'de anlatılan bir laboratuvar testinde demo bir WordPress sitesi mobil emülasyonla ölçüldü. Tembel yükleme kapatılınca arşiv sayfasının medyan LCP değeri 1.657 ms'den 1.403 ms'ye indi.

Masaüstünde ise farklı bir tuzak var: üzerine gelince açılan bilgiler. Telefonda fare imleci yoktur. Fiyatın ya da koşulların yalnızca imleçle görüldüğü bir sayfa, mobil ziyaretçiye o bilgiyi hiç göstermez.

Erişilebilirlik notu

Landing page'ler en çok kayan içerikte ve buton etiketlerinde takılır. Ben şu dört ölçüte mutlaka bakarım.

• Kayan logo bandı ve slaytlar (2.2.2, A düzeyi). Kendiliğinden başlayan, beş saniyeden uzun süren ve başka içerikle birlikte gösterilen hareketi kullanıcı duraklatabilmeli, durdurabilmeli ya da gizleyebilmelidir.
• Buton adı (2.5.3, A düzeyi). Butonun ekran okuyucuya söylenen adı, ekranda görünen yazıyı içermelidir. Sesle kumanda eden biri "Fiyatları görün" dediğinde buton çalışmalıdır.
• Yeniden akış (1.4.10, AA düzeyi). Dikey kayan içerik 320 CSS piksel genişlikte iki yönde kaydırma gerektirmemelidir.
• Hedef boyutu (2.5.8, AA düzeyi). Butonlar ve bağlantılar en az 24 × 24 CSS piksel olmalı ya da yeterli boşlukla ayrılmalıdır.

2.5.3 için tipik hata şudur: tasarımcı görünür yazıyı "Başla" yapar, geliştirici aria-label ile "Kayıt formunu aç" yazar. W3C, aria-label değerinin erişilebilir adda görünür yazının önüne geçtiğini not eder. Görünür bir etiket varsa ondan kaçınılmasını ya da dikkatli kullanılmasını ister. En temiz çözüm, görünür yazının kendisini açık yazmaktır.

Klavye turunu da atlamayın. Fareyi bırakıp Tab tuşuyla ana butona ulaşabiliyor, odağı görebiliyor musunuz? Bu kontrolü UX Audit işimde her sayfada yaparım.

Uygulama notu

Aşağıda hero bölümünün sade bir HTML ve CSS hali var. Telefonda tek kolon, 900 pikselin üstünde iki kolon olur.

<!-- Başlık, açıklama ve tek buton. -->
<section class="hero">
  <div class="hero__metin">
    <h1>Kira ödemelerini tek ekrandan takip edin</h1>
    <p>Ev sahipleri için aylık ödeme takibi</p>
    <!-- Buton gideceği yeri söyler. -->
    <a class="btn" href="#fiyat">Fiyatları görün</a>
  </div>
  <!-- İlk ekrandaki görsel tembel yüklenmez. -->
  <img src="odeme-ekrani.webp" width="640" height="480"
       alt="Uygulamada aylık kira ödemeleri listesi"
       fetchpriority="high">
</section>

/* Telefonda tek kolon. */
.hero { display: grid; gap: 24px; padding-inline: 16px; }
.hero img { width: 100%; height: auto; }
/* 900 px üstünde iki kolon. */
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; }
}

İlk karar görselle ilgili. Görselde loading="lazy" yok, çünkü ilk ekrandaki görseli tembel yüklemek web.dev'e göre LCP'yi yavaşlatır. Onun yerine fetchpriority="high" var.

web.dev'in Fetch Priority yazısına göre görseller normalde düşük öncelikle başlar. Bu öznitelik tarayıcıya, görseli baştan yüksek öncelikle yüklemesi için bir ipucu verir. Aynı yazıdaki Google Flights testinde LCP 2,6 saniyeden 1,9 saniyeye indi.

Görselin width ve height değerleri yazılı, böylece tarayıcı görsel gelmeden yerini ayırır. Buton metni de gideceği yeri söyler. Tasarımı koda ben taşıdığımda bu işi Tasarla ve Yayınla Sprinti içinde yaparım.

Kontrol listesi

Sayfayı yayına almadan önce bu listeden geçerim. İşaretlenmemiş bir madde varsa sayfayı yayına almam.

• Sayfanın tek bir amacı var ve onu bir cümleyle yazabiliyorum.
• Başlık, sizi tanımayan birine ne yaptığınızı anlatıyor.
• Reklamdaki ya da e-postadaki vaat, ilk ekranda da var.
• Ana buton tek, metni gideceği yeri söylüyor.
• Fiyat ve önemli koşullar kolay bulunuyor.
• Görseller gerçek ürünü ya da gerçek bir çıktıyı gösteriyor.
• Menü kısaltıldı, sayfadan çıkan bağlantılar azaltıldı.
• Zorunlu olmayan açılır pencere ve otomatik oynayan video yok.
• Hero görseli tembel yüklenmiyor, boyutları yazılı.
• 320 piksel genişlikte yatay kaydırma yok.
• Kayan içerik durdurulabiliyor.
• Ana butona klavyeyle ulaşılıyor ve odak görünüyor.