Açılış sayfası nasıl kurulur? Bölüm bölüm

Açılış sayfası yaparken çoğu solo kurucu ya boş bir sayfaya bakıp donuyor ya da beğendiği büyük bir şirketin sitesini kopyalayıp her bölümü doldurmaya çalışıyor. İkisinde de aynı soru cevapsız kalıyor: Bu sayfada hangi bölümler olmalı, hangi sırayla ve neden?

Bu yazı sayfanın iskeletiyle ilgili. Başlığı ve tanıtım paragrafını nasıl yazacağını Rehber'deki tanıtım metni yazısı anlatıyor. Burada o metnin sayfada nereye oturduğuna, altına neler geleceğine ve neleri hiç koymaman gerektiğine bakıyoruz.

Dayanaklarımız Harry Dry'ın Marketing Examples'taki açılış sayfası rehberi, Y Combinator'ın startup sitelerini masaya yatırdığı "Design Review" bölümleri ve Hacker News'te kurucuların "sayfamı eleştirin" diye açtığı başlıklar.

Sayfanın iki yarısı: dikkat ve ikna

Harry Dry açılış sayfasını ikiye bölüyor. Ekranı kaydırmadan görünen üst kısım dikkati kazanıyor. Alttaki kısım satışı kazanıyor. Onun önerdiği sıra şöyle:

1. Başlık
2. Alt başlık
3. Ürün görseli
4. Kısa bir kanıt
5. Ana düğme
6. Özellikler ve itirazlara cevaplar
7. Daha fazla kanıt
8. Sık sorulanlar
9. İkinci düğme
10. Kurucudan kısa bir not

Sırayı ezberleme, mantığını anla: Her bölüm bir önceki bölümün bıraktığı soruya cevap veriyor. Başlık "ne?" sorusunu, alt başlık "nasıl?" sorusunu, kanıt "neden inanayım?" sorusunu cevaplıyor. Sık sorulanlar da geriye kalan çekinceleri topluyor.

Üst kısım: beş saniyede ne gördüğünü bilmeli

Ziyaretçi sayfayı açtığında, hiç kaydırmadan şu üç şeyi görmeli: ne yaptığın, kimin için yaptığın ve bir sonraki adım.

Y Combinator'dan Aaron Epstein ve Garry Tan'ın yapay zekâ girişimlerinin sitelerini incelediği bölümde öne çıkan uyarılardan biri, metinde fazla zekice davranmanın ters tepebileceği. Bir diğeri de ilk kez gelen birinin ürünün ne olduğunu ne kadar sürede anladığını kontrol etmek. Hacker News'te "Harika açılış sayfası örnekleri" başlığında da yorumcuların övdüğü sayfaların ortak noktası aynıydı: ne sattıklarını hemen söylüyorlardı. Bir yorumcu ise bazı sayfaların, ne teklif ettiklerini söylemeden önce senden bir şey yapmanı istediğinden şikâyet ediyordu.

Üst kısımdaki görsel için Harry Dry'ın önerisi net: süslü çizimler yerine ürünün kendisini, tercihen kullanılırken göster. Bir kuaför randevu aracı yapıyorsan, müşterinin telefondan saat seçtiği ekranın gerçek bir görüntüsü soyut bir illüstrasyondan çok daha fazlasını anlatır.

Ana düğme için de birkaç ayrıntı var. Düğmenin üzerinde sadece "Kaydol" yazmak yerine başlığın vaat ettiği sonucu tekrar edebilirsin: "İlk faturanı 2 dakikada kes" gibi. Düğmenin hemen altına en büyük çekinceyi gideren kısa bir not ekleyebilirsin: "Kart bilgisi istemiyoruz" ya da "İstediğin zaman iptal et." Elbette bunu sadece doğruysa yaz.

Tek düğme, tek hedef

YC'nin dönüşüm üzerine yaptığı Design Review bölümünde Aaron Epstein ve Pete Koomen, ziyaretçiye tek ve net bir eylem çağrısı vermeyi ve bu çağrıyla yarışan öğeleri kaldırmayı öneriyor. Aynı bölümde dikkat dağıtan hareketli slaytlardan kaçınmak da konuşuluyor.

Solo kurucu için bunun pratik anlamı şu: Sayfanın tek bir hedefi olsun. "Kaydol", "Demo iste", "Bültene katıl", "Discord'a gel" ve "Bizi takip et" düğmelerinin hepsi aynı ekrandaysa ziyaretçinin dikkati bölünür. Bir hedef seç ve sayfanın sonuna kadar aynı düğmeyi tekrar et.

Nasıl çalışıyor: üç adım yeter

Başlığı okuyan biri genelde hemen "peki bu nasıl oluyor?" diye sorar. Bunun için uzun bir özellik listesi yazma. Üç adımlık bir "nasıl çalışıyor" bölümü çoğu ürün için yeterlidir.

Örneğin küçük bir muhasebe bürosu için evrak toplama aracı:

1. Müşterine WhatsApp'tan bir link gönder.
2. Müşterin faturalarını telefonundan fotoğraflayıp yüklesin.
3. Belgeler ay sonunda klasörlenmiş halde paneline düşsün.

Harry Dry özellikler bölümünü başlıktaki vaadi somutlaştırmak için kullanıyor. Her özellik "bu sözü nasıl tutuyoruz?" sorusuna cevap vermeli. Bir özellik bu soruya cevap vermiyorsa ilk sürümün sayfasında yer almasına gerek yok.

Kanıt: sahte yorum yerine ne koyarsın?

İlk sürümde müşteri yorumun, logo şeridin, "10.000 mutlu kullanıcı" sayın yoktur. Bu boşluğu uydurma yorumlarla doldurmak hem ahlaki hem de hukuki olarak kötü bir fikir. ABD Federal Ticaret Komisyonu (FTC), Ağustos 2024'te sahte ve yapay zekâyla üretilmiş yorumları ve referansları, şirket içinden yazılan ama bunu açıklamayan yorumları ve sahte takipçi sayılarını yasaklayan bir kural açıkladı.

Hacker News'te sayfasını eleştiriye açan bir kurucuya gelen sert yorumlardan biri tam olarak buna değiniyordu: sayfada basit bir sahte yorum bileşeni vardı ve hemen fark edildi. Aynı yorumcu, en azından büyük şirketlerin ürünü kullandığı yalanını söylemediği için kurucuyu övüyordu.

Peki gerçek kanıt yoksa ne koyarsın?

• Ürünün kendisi: Ekran görüntüsü, kısa bir ekran kaydı ya da denenebilir bir demo. YC'nin Garry Tan'la yaptığı bölümde de ziyaretçiyi hızla canlı bir demoya ulaştırmak öneriliyor.
• Somut bir sonuç örneği: Kendi denemenden gerçek bir çıktı. Bir butik otel için fiyat takip aracı yapıyorsan, bir haftalık gerçek fiyat değişimlerini gösteren bir tablo.
• Kurucu notu: Harry Dry'ın listesindeki son bölüm. Kim olduğunu, bu sorunu neden çözdüğünü ve sorunla nasıl karşılaştığını birkaç cümleyle anlat. İnsanlar insanlardan satın alır.
• İlk gerçek geri bildirimler: Beta kullanıcılarından izin alarak, adlarıyla ya da işletme adlarıyla. Az olması sorun değil, gerçek olması önemli.

Kanıtı vaadine göre seç. Harry Dry'ın verdiği örnekte "daha çok satış" vaat eden bir ürün satış rakamlarını gösteriyor. Senin vaadin "zaman kazandır" ise kanıtın da zamanla ilgili olmalı.

Fiyat: sayfada görünsün

Fiyatı gizlemek, ziyaretçiye "ya çok pahalı ya da henüz bilmiyorlar" mesajı verir. Fiyatın nasıl belirleneceğini Rehber'deki fiyat yazısı anlatıyor. Burada konu, fiyatın sayfadaki yeri ve sunumu.

Hacker News'te sayfasını eleştiriye açan bir analitik aracı kurucusu iki önemli geri bildirim aldı. Birincisi, sayfanın en büyük mesajının "uygun fiyatlı" olmasıydı. Bir yorumcu bunun ürünü ucuz gösterdiğini, önce değerin anlatılması, fiyatın karar anına bırakılması gerektiğini yazdı. İkincisi, aylık fiyat sayfada tek seferlik ödeme gibi okunuyordu. Kurucu, başlığı değiştirdiğini yazdı.

Buradan çıkan pratik kurallar:

• Fiyatı yaz, ama başlığına koyma.
• "Aylık", "yıllık", "tek seferlik", "KDV dahil" gibi ifadeleri açıkça belirt.
• İlk sürümde bir ya da iki paket yeterli. Dört sütunlu bir fiyat tablosu, henüz kimsenin ne istediğini bilmediğin bir dönemde sadece kafa karıştırır.
• Türk müşteriye TL, yurt dışına USD gösteriyorsan bunu ziyaretçinin kafası karışmayacak şekilde ayır.

Sık sorulanlar bölümü: itirazları topla

Harry Dry, sık sorulanlar bölümünü cevapsız kalan özellikleri ve itirazları soru-cevaba çevirdiğin yer olarak tarif ediyor. Önerisi, müşterilerle konuşup tekrar eden itirazları gruplamak ve onlara müşterinin kendi kelimeleriyle cevap vermek.

İlk sürümde bu soruları uydurma; müşteri görüşmelerinden, ilk mesajlardan ve demo sırasında sorulanlardan topla. Düğün fotoğrafçıları için bir albüm teslim aracında bunlar "Fotoğraflar ne kadar saklanıyor?" ya da "Kendi logomu koyabilir miyim?" gibi sorular olabilir.

Sayfanın sonuna ikinci bir düğme koy. Harry Dry burada aynı düğmeyi tekrar etmek yerine, artık daha fazla yerin olduğu için tıklama sebebini yeniden hatırlatmayı öneriyor.

Sayfadan atılacaklar

Hacker News'teki eleştiri başlıklarında en çok tekrar eden şikâyetler tasarımın kendisiyle değil, yavaşlık ve dağınıklıkla ilgiliydi. 2024'te açılan bir "sayfamı eleştirin" başlığında yorumcular, ana sayfadaki videonun yüklenmesinin çok uzun sürdüğünü, kaydırırken içeriğin geç geldiğini, animasyonların can sıktığını ve metnin fazla uzun olduğunu yazdı. Bir yorumcunun önerisi, sayfayı ciddi biçimde kısaltmak ve göz gezdirilebilir hale getirmekti.

İlk sürüm için atılacaklar listesi:

• Otomatik oynayan büyük videolar
• Kaydırmaya bağlı ağır animasyonlar
• Birbiriyle yarışan çok sayıda düğme
• Henüz olmayan özelliklerin anlatıldığı bölümler
• "Geleceğin platformu" gibi genel cümleler
• Uydurma sayılar, yorumlar ve logolar

Hazır şablon kullanmaktan da çekinme. Aynı eleştiri başlığında biri sayfanın bir şablonun kopyası olduğunu söyledi. Ona cevap veren bir başka yorumcu, insanların grafik tasarım becerisiyle değil, anlatılan ürünle ilgilendiğini ve işe yarayan bir düzenin kullanılmasında sorun görmediğini yazdı.

Harry Dry'ın son testi her bölüm için geçerli: "Would this help me sell if I met the customer in person?" (Müşteriyle yüz yüze görüşsem bu bana satışta yardım eder miydi?) Cevap hayırsa bölümü kaldır.

Telefonda dene

Sayfanın linkini büyük ihtimalle WhatsApp, Instagram ya da LinkedIn üzerinden paylaşacaksın, yani çoğu ziyaretçi onu telefonda açacak. Hacker News'teki eleştirilerde de mobil sorunlar geçti: telefonda kaydırılamayan tablolar, bir iPhone'da yazı büyütülünce takılan bir sayfa.

Yayından önce sayfayı kendi telefonunda ve mümkünse eski bir Android telefonda aç. Başlık, alt başlık ve düğme ilk ekrana sığıyor mu? Fiyat tablosu dar ekranda okunuyor mu?

Bu hafta yapılacak

1. Sayfanın iskeletini kâğıda çiz: başlık, alt başlık, görsel, düğme, nasıl çalışıyor, kanıt, fiyat, sık sorulanlar, ikinci düğme, kurucu notu. Metinleri sonra yaz.
2. Ürününün gerçek bir ekran görüntüsünü ya da 30 saniyelik bir ekran kaydını hazırla. Üst kısma bunu koy.
3. Müşteri görüşmelerinden ve gelen mesajlardan en sık sorulan beş soruyu çıkar. Sık sorulanlar bölümünü bunlarla doldur.
4. Sayfadaki her bölüm için Harry Dry'ın yüz yüze satış testini uygula ve geçemeyenleri sil.
5. Sayfayı telefonundan aç, seni tanımayan birine gönder ve beş saniye sonra "Bu ne işe yarıyor?" diye sor.

Sık sorulanlar

Hiç müşterim yokken kanıt bölümünü boş mu bırakayım?

Boş bırakmak, uydurmaktan iyidir. Ama genelde boş bırakmana gerek kalmaz. Ürünün gerçek ekran görüntüleri, kendi denemenden somut bir çıktı ve kim olduğunu anlatan bir kurucu notu ilk sürüm için yeterli kanıttır. İlk beta kullanıcılarından izin alarak yorum topla ve geldikçe ekle.

Fiyatı henüz bilmiyorsam ne yazayım?

Kesin fiyat yoksa bile koşulu yaz. "Erken erişim döneminde ücretsiz, sonrasında aylık şu civarda" gibi açık bir ifade, hiçbir şey yazmamaktan iyidir. Fiyatı belirlemek için Rehber'deki fiyat yazısına bak.

Tek sayfa mı yapayım, ayrı fiyat ve özellik sayfaları mı?

İlk sürümde tek sayfa yeterli. Ziyaretçiyi farklı sayfalara dağıtmak, tek hedef ilkesine ters düşer. Ayrı sayfalar, insanların gerçekten aradığı ve tek sayfada cevap bulamadığı konular ortaya çıktığında gelir.

Hazır şablon kullanmak ürünümü sıradan gösterir mi?

Hacker News'teki tartışmada da görüldüğü gibi, ziyaretçinin çoğu tasarımla değil, ürünün ne yaptığıyla ilgileniyor. Tanıdık bir düzen, ziyaretçinin sayfada nerede ne olduğunu kolayca bulmasını sağlar. Zamanını şablon yerine metne ve ürün görseline harca.

Dayanak

• Landing Page Guide — Harry Dry, Marketing Examples: üst ve alt kısım ayrımı, on bölümlük sıra, kanıtın vaade uyması, sık sorulanlar, kurucu notu ve yüz yüze satış testi
• Design Review: How to convert more visitors into customers — Y Combinator: Aaron Epstein ve Pete Koomen; tek eylem çağrısı, hareketli slaytlardan kaçınma, kayıt sürtünmesini azaltma
• Design Review: Aaron Epstein and Garry Tan critique AI startup websites — Y Combinator: fazla zekice metnin riski, canlı demoya hızlı ulaştırma
• Ask HN: Roast My Landing Page (2023) — Hacker News: "uygun fiyat" mesajının ürünü ucuz göstermesi, yanlış okunan fiyat, mobil tablo sorunu, şablon kullanımı tartışması
• Ask HN: Roast my startup landing page (2024) — Hacker News: yavaş video, ağır animasyon, uzun metin ve sahte yorum bileşeni eleştirileri
• Ask HN: Examples of great landing pages? — Hacker News: ne sattığını hemen söyleyen sayfaların övülmesi, önce taahhüt isteyen sayfalara yapılan eleştiri
• FTC Announces Final Rule Banning Fake Reviews and Testimonials — Federal Trade Commission: Ağustos 2024 tarihli, sahte yorum ve referansları yasaklayan kural