Web Sitesi Örnekleri Size Yalan Söylüyor: Ajanslar İçin Bir Saha Rehberi

Özet

Web sitesi örnekleri bitmiş ürünler gibi görünür, ancak aslında henüz sormadığınız bir sorunun cevaplarıdır. Çoğu ekip örnekleri toplar, müşterilere gösterir ve sonra görünümü kopyalamaya çalışır. Bu süreç, yapı yerine yüzeyi kopyaladığı için başarısız olur. Bu makale, web sitesi örnekleriyle ilgili altı efsaneyi düzeltir: zekice başlık, her şeyi açıklayan hero, ekstra CTA, sektör kural kitabı, 'güzel göründüğünde biter' teslimi ve şablon kopyalama içgüdüsü. Her düzeltme, her müşterinin bir sonraki yapımında uygulayabileceğiniz tekrarlanabilir bir eleştiri sunar. Sıralamayı bir kez kullandığınızda, sayfaları örneklere benzetmeyi bırakıp örneklerin yaptığını yapan sayfalar oluşturmaya başlarsınız.

Müşterinizin yeni sitesi, sevdikleri örneğin aynısı mı görünüyor ama yine de ölü mü hissediliyor? Yalnız değilsiniz. Sayfa aynı düzene, aynı renklere, aynı kalın yazı tipine sahip. Ve yine de dönüşüm yapmıyor. İşte nedeni: web sitesi örnekleri şablon değil, cevaplardır. Belirli bir hedef kitle için belirli bir sorunu çözmek üzere inşa edilmişlerdir. Yüzeylerini kopyalarsanız, mantıklarından hiçbirini devralmazsınız. Bu rehber, web sitesi örnekleriyle ilgili altı efsaneyi çürütüyor, böylece herhangi bir örneği bir sonraki müşteride işe yarayan tekrarlanabilir bir eleştiriye dönüştürebilirsiniz. Sadece eğlenceli olanlarda değil, her yapımda kullanın.

Efsane: Sadece örneğe benzet

Yapılacak işle başlayın. Tek bir örnek açmadan önce, bu sayfanın mümkün kılması gereken tek eylemi yazın. Eylemler değil. Tek bir. SaaS sayfası için: deneme başlat. Ajans sayfası için: görüşme ayarla. Portfolyo için: bilgi talebi gönder. Şimdi örnekleri açmaya gidin. Saklamaya değer olanlar, bir yabancıyı en az sürtünmeyle bu tür bir karara iten sayfalardır.

Gerçek: bir sayfa tek çıktılı bir makinedir. İşlerin çoğu burada ters gider. Ekipler görsel katmandan başlar. Bir hero'yu severler, bir rengi severler, bir yazı tipi kombinasyonunu severler. Bu yüzden bu öğeleri tamamen farklı bir işi olan bir sayfada yeniden inşa ederler. Sonuç, örneğe benzer ve onun gibi davranmaz. Örnek dönüşüm yaptı çünkü yapısı işine uygundu. Sizinki bir kostüm giyiyor.

Çözüm tek cümlelik bir testtir. Topladığınız her örnek için şunu yazın: Bu sayfa, [ziyaretçi türü] birini [tek eylem] yapmaya ikna ediyor. Bu cümleyi tamamlayamıyorsanız, örnek dekorasyondur. Ruh hali panonuzu destekliyorsa dekorasyon toplamaya devam edin, ancak strateji olarak müşterinin önüne koymayın.

İşte bu, hesaplarda böyle işler. Yazılım satan bir müşteriniz ve koçluk satan bir müşteriniz var. Farklı sektörler, aynı soru. Bir ziyaretçi gelir. İlişkiyi ileri taşıyan tek eylem nedir? Yazılım müşterisi için: deneme başlat. Koç için: görüşme ayarla. Bunları yazın ve masanızda tutun. Sayfadaki her tasarım kararı, her metin seçimi, her bölüm bu eylemi destekler ya da kendini kaldırır. Bu tekrarlanabilir kısımdır. Zevke bağlı değildir. Herhangi bir aracı açmadan önce verdiğiniz bir karara bağlıdır.

Kopyalama ve inşa etme arasındaki temel fark budur: kopyalama gördüğünüzü tekrarlar, inşa etme örneğin karar verdiğini tekrarlar. Önce kararı tanımlarsanız, derileri yerine iskeletlerini çalabilirsiniz. Bunu yapın ve aynı örnek bir SaaS sayfasına, bir ajans sayfasına ve bir portfolyoya ilham verebilir. Müşteri değişir. Mantık değişmez.

Efsane	Gerçek
Harika bir web sitesi ayırt edici görünür	Harika bir web sitesi yabancıya yapması gereken tek net bir iş verir
Hero her şeyi açıklamalı	Hero kaydırmayı hak etmeli
Daha fazla CTA daha fazla dönüşüm demektir	Tek sayfa, tek birincil eylem
Netlik daha çok metin demektir	Netlik daha az, daha iyi seçilmiş kelimeler demektir
Örnekler kopyalanacak şablonlardır	Örnekler bir kararın kanıtıdır
Doğru göründüğünde iş biter	Sayfa, trafik kanıtlayana kadar bir hipotezdir

Efsane: Güçlü marka zekice başlık demektir

Calendly'nin ana sayfasına bakın. İlk satırı 'Gereksiz e-postalar olmadan toplantı planlayın.' Zekice hiçbir şey yok. Ne kelime oyunu ne de cinas. Sonucu belirtir ve acıyı ortadan kaldırır. Bir değer önerisi böyle çalışmalı: müşterinin elde ettiği değişimi ve ortadan kaldırdığınız sürtünmeyi adlandırın.

Gerçek: açıklık, zekilikten üstündür. Müşteriler bu konuda size direnecek. 'Yıkıcı,' 'güçlendirici,' 'serbest bırakan' kelimelerini isteyecekler. Bu kelimeler, tıklamaya karar veren bir ziyaretçi için hiçbir anlam ifade etmez. Ziyaretçi, müşterinizin misyonunu umursamaz. Tıkladıktan sonra ne olacağını umursar.

Finansal koçluk satan bir müşteriyi ele alalım. Mevcut hero'su 'İnsanların güvenle servet oluşturmasına yardımcı olmak' diyor. Bu bir kategori, vaat değil. Yeniden yazın: 'Tek 45 dakikalık görüşmede net bir aylık tasarruf planı alın.' Hangi sürüm bir yabancıya ne alacağını söylüyor? Hangi sürüm bir sonraki adımı belirgin kılıyor? Gönderilecek olan bu.

Bu yüzden başlığı, bir müşterinin bir meslektaşına söyleyeceği bir cümle olarak yazın. Slogan değil. Bir cümle. Cümle herhangi birinin kafasını karıştıracaksa, karıştırmayacak hale gelene kadar kesin. Sonra alt başlık için de aynısını yapın: bir paragraf değil, tek satırlık destek. En net sayfalar bunu amansızca yapar. Yüksek dönüşüm sağlayan SaaS sayfalarının herhangi birindeki kalıba bakın: temiz bir başlık, kısa bir alt başlık, tek bir harekete geçirme çağrısı. Ödül kazanan örnekler bazen bu kalıbı kırar. Dönüşüm sağlayan örnekler nadiren kırar.

Marka önemlidir, ancak düşündüğünüz yerde değil. Marka ses, görüntü ve sayfanın hissinde yaşar. Başlık, muğlak olunacak yer değildir. Başlık, sade olunacak yerdir. Müşteriler karşı çıktığında, ilk okumada kafalarını karıştıran bir slogan için hayran oldukları bir şirket söylemelerini isteyin. Bulamayacaklar. Kafa karışıklığı eylemin düşmanıdır.

Efsane: Fold'un üstü her şeyi hero'ya sığdırmak demektir

Fold, doldurulacak bir çizgi değil. Bir karar noktasıdır. Ziyaretçi ilk ekrana bakar ve üç soruyu yanıtlar: Bu nedir? Kimin için? Neye tıklamalıyım? Eğer hero bundan daha fazlasını yapmak zorundaysa, dönüşüm yapabilecekleri zaten kaybettiniz.

Gerçek: fold bir filtredir. Performans gösteren hero bölümlerine bakın. Linear'ın ana sayfası bir referanstır: minimal başlık, minimal alt başlık, tek bir sonraki adım. Slayt yok. 'Başlayın' ile yarışan 'Daha fazla öğren' yok. Sadece tek bir net yol ileri. Hikayenin geri kalanı karardan sonra gelir, öncesinde değil.

Bu, müşteri güvenine en çok mal olan efsanedir, çünkü boş alan tasarım için para ödeyen birine bitmemiş hissettirir. Çizgiyi koruyun. Net bir başlığı ve tek bir CTA'sı olan bir hero bitmemiş değildir. Bir filtredir. Yanlış ziyaretçiye hızla ayrılmasını, doğru ziyaretçiye nereye tıklayacağını söyler.

Kapak testini yapın. Değerlendirdiğiniz her örnekte ekranın altını bir kağıt parçasıyla kapatın. Kalanlardan üç soruyu yanıtlayamıyorsanız, örneği reddedin. Müşterinizin mevcut sitesine de aynısını yapın. Egzersiz iki dakika sürer ve bir sayfanın çok fazla şey yapmaya çalıştığını kanıtlamanın en hızlı yoludur.

'Alanı kullanmalıyız' dediğini duyacaksınız. Bu bir müşteri kaygısıdır, bir tasarım ilkesi değil. Alan boşa harcanmaz; muğlaklık boşa harcanır. Sayfayı anlamak zorunda kalan ziyaretçi, zaten ayrılan ziyaretçidir. Pratik soruları yanıtlamak için fold'u kullanın, sonra yaratıcı detayları aşağıda düşünün.

İşte karşıt görüş: sadelik de amaç değildir. Ürünün ne yaptığını asla söylemeyen seyrek bir hero, sadece güzel bir bulmacadır. Amaç netliktir. Sadelik, netliğe yardımcı olan bir taktiktir ve dağınıklık onu öldüren bir taktiktir. Her öğeyi, ziyaretçinin tek kararı vermesine yardımcı olup olmadığına göre değerlendirin. Yardımcı olmuyorsa, kesin. Netleştiriyorsa, tasarım yoğun görünse bile tutun. Test 'bu temiz mi?' değil. 'Bir yabancı yolu görebiliyor mu?'

Efsane: Daha fazla CTA, daha fazla dönüşüm şansı demektir

Yarın bir CTA denetimi yapın. Müşterinizin ana sayfasını açın ve ana eylemle rekabet eden her düğmeyi ve bağlantıyı sayın. Çoğu sayfada birkaç tane vardır: 'Daha Fazla Öğren,' 'Hizmetleri Keşfet,' 'Bize Ulaşın,' 'Blogu Oku,' 'Fiyatları Gör.' Her öğe dikkat istediğinde, hiçbiri alamaz. Ziyaretçi hiçbir şey yapmayarak yanıt verir.

Gerçek: tek sayfa, tek birincil eylem. Başarılı sayfalar buna direnir. Örneğin Notion'ın sitesi tek bir harekete geçirme çağrısını hedefler. Tek sayfa, tek birincil eylem. Disiplin bir seçim yapmaya zorlar: bu ziyaretçinin gerçekte ne yapmasını istiyoruz? Cevap 'deneme başlat'tırsa, sayfanın tamamı bu düğmenin hizmetindedir. Diğer her şey ya onu destekler ya da çıkar.

Tek bir birincil CTA, yalnızca tek bir bağlantı anlamına gelmez. İkincil eylemlere izin verilir. Daha sessiz olmalı, daha sonra yerleştirilmeli ve asla hero'da birincil düğmenin yanına konumlandırılmamalıdır. Seçenekleri ortadan kaldırmıyorsunuz. Onları sıralıyorsunuz. Ziyaretçi hâlâ keşfedebilir, okuyabilir ve karşılaştırabilir. Ancak sayfanın bir omurgası vardır ve omurga tek bir yönü gösterir.

Her müşteri için en önemli olan tek düğmeyi adlandırın. Onu hero'ya koyun. Kanıt bölümünden sonra tekrarlayın. Sonra yoldan çekilin. Bir müşteri hero'da ikinci bir rekabetçi düğme isterse, hangisine çeyrek büyüklüğünde bahse gireceklerini sorun. Seçtikleri birincildir. Diğeri dikkat dağıtıcıdır.

Hiyerarşiyi tek satırda kurun: birincil düğme (tek), ikincil bağlantı (sessiz), üçüncül bağlantılar (menü). Bunu teklifinize yazın ki müşteri tasarımı görmeden planı bilsin. Müşteri daha sonra ikinci bir birincil düğme talep ettiğinde, satıra geri dönün. Bire anlaştınız.

Bu tekrarlanabilir bir konuşmadır. Her müşteriyle yapacaksınız, çünkü her müşteri daha fazla seçenek isteyecek. Cevabınız her zaman: tek sayfa, tek iş, tek birincil eylem. Bu yaratıcı bir görüş değil. En iyi örneklerde işleyen kalıptır.

Efsane: Müşterinizin sektörünün kendi kurallarına ihtiyacı var

Hata, 'SaaS' ve 'ajans'ı farklı türler olarak ele almaktır. İş aynıdır. Bir yabancıyı tek bir karara taşıyın. Değişen şey, bu kararı güvenli hissettirmek için kullandığınız kanıtlardır.

Gerçek: aynı iş, farklı kanıt. Bir SaaS sayfası, ürünün bir demo, deneme veya ürünün kendisinin ekran görüntüsüyle çalıştığını kanıtlar. Bir ajans sayfası, ekibin vaka çalışmaları ve sonuçlarla çalıştığını kanıtlar. Bir portfolyo, öncesi/sonrası netliği ve müşterinin kendi sözleriyle işin işe alınmaya değer olduğunu kanıtlar. Aynı iskelet, farklı kanıt.

Bu yüzden bir örneği başka bir sektörden olduğu için reddetmeden önce yüzeyin ötesine bakın. Hangi kararı yönlendirdiğini ve hangi kanıtla başladığını sorun. Bir diş hekimi için rezervasyon sayfası ile bir SaaS ürünü için rezervasyon sayfası aynı anatomiye sahip olabilir: net başlık, tek CTA, tıklama riskini azaltan kanıt. Diş hekimi 'Sigorta derdi yok' der. SaaS ürünü 'Kredi kartı gerekmez' der. Farklı kelime dağarcığı, aynı iş.

Bu yüzden diğer sektörlerden web sitesi örnekleri ödünç almak işe yarar. Ödünç alınan örnek, müşterinizin kendi sektörünün nasıl görünmesi gerektiğine dair varsayımlarını kırar. Ayrıca bir kararı gerekçelendirmek için yerleşik bir neden verir. Müşteri 'rakiplerimizin hepsi bunu yapıyor' dediğinde, aynı işi daha iyi yapıyla yapan sektör dışı bir sayfaya işaret edebilirsiniz.

Karar ağırlığını sorun. Bir proje yönetim aracı seçen ziyaretçi, altı haneli bir retainer verenden daha düşük riskli bir karar verir. Yapı aynı kalır: tek iş, tek CTA, katmanlı kanıt. Katmanlar değişir. Ajans sayfası daha derin vaka çalışmaları, belirli roller ve çalışma ilişkisine dair daha güçlü bir his gerektirir. SaaS sayfası bir demo, bir deneme ve hız kanıtı gerektirir.

Uyarı: gerçek sektör kısıtlamalarından kaçmak için dışarıdan bir örnek kullanmayın. Bir hukuk bürosu, bir arkadaşlık uygulaması gibi dönüşüm yapamaz; yapı farklı olduğu için değil, güven gereksinimleri ve karar ağırlığı farklı olduğu için. Hâlâ tek bir eylemi yönlendirirsiniz. Sadece daha fazla kanıta ve daha az kahkahaya ihtiyacınız var. Sektör, bir kural dizisi olarak değil, bir kısıt olarak önemlidir. İşle başlayın, sonra kanıtı ayarlayın.

Efsane: Doğru göründüğünde iş biter

Sayfayı yayınlayın, sonra her seferinde bir şeyi değiştirin. Dönüşüm, gerçek bir ziyaretçi kanıtlayana kadar bir hipotezdir. İlk sürüm, örneklerden gelen kanıtlara dayanan bir tahmindir. Tahminin doğru olup olmadığını bilmenin tek yolu, onu trafiğin önüne koymak ve ne olduğunu izlemektir.

Gerçek: her sayfa bir hipotezdir. Aynı anda yedi test yapmayın. Hangi değişikliğin sonucu değiştirdiğini bilemezsiniz. Başlığı değiştirin, ölçün. CTA'yı değiştirin, ölçün. Kanıt sırasını değiştirin, ölçün. Her seferinde tek bir değişken, trafiğe bağlı olarak test başına bir veya iki hafta ve bu müşterinin kitlesinin gerçekte neye tepki verdiğini öğrenirsiniz. Dönüşüm yapan çirkin sayfa, dönüşüm yapmayan güzel sayfayı yener. Güzellik amaç değildir. Sürtünmesizlik amaçtır.

Bu, çirkin işi yayınlamak için bir bahane değil. Cilası daha sonraki bir aşama olarak ele almanın bir nedenidir, ilk aşama değil. Kanıtın ödüllendirdiği şeyi cilalarsınız. Bir tahmini cilalamazsınız. Bir müşteri 'yenileme' istediğinde, geri itin. Mevcut sayfanın neyi başarması gerektiğini ve gerçekte neyi başardığını sorun. Kimse işi tanımlamadıysa, yenileme omurgasız bir sayfaya yeni bir boya katmanıdır.

Ölçümü lansmandan önce ayarlayın. Sayfa için başarı sayılacak tek bir metrik tanımlayın. Bir tıklama, bir arama, bir form gönderimi olabilir. İş hedefi gerçekten o değilse 'etkileşim' ya da 'sayfada geçirilen süre' olamaz. O zaman test edeceğiniz bir şeyiniz olur. Trafik düşükse, bunun yerine nitel geri bildirim kullanın: neye tıklayacaklarını soran beş müşteri görüşmesi. Ancak kanıt olmadan kazanan ilan etmeyin.

Her lansmanı bir denetimin başlangıcı gibi ele alın. Sayfaya bir ziyaretçinin gerçekten baktığı gibi bakın: hızlı, şüpheci ve biraz sıkılmış. Bu, her hesaba uygulayabileceğiniz bir beceridir ve uygulamalısınız. En iyi örnekler, tasarımcıları daha yaratıcı olduğu için iyi görünmez. Ekipleri, sayfa işle eşleşene kadar tek bir şeyi değiştirmeye devam ettiği için dönüşüm yaparlar.

Bunu yapın

Bir sonraki müşteri toplantınız örneklerle başlayacak. Bu sorun değil. Onları kullanın. Ancak bir ruh hali panosuyla değil, bir soruyla açın: 'Bu sayfada bir ziyaretçi ne yapmalı?' Sonra sevdikleri örnekleri alın ve yukarıdaki testlerden geçirin. Her biri hangi işi yapıyor? Üç hero sorusunu yanıtlayabiliyor musunuz? Tek bir birincil CTA var mı? Hangi kanıt tıklama riskini azaltıyor?

Direnişle karşılaşacaksınız. Müşteriler zekice başlığı ve ekstra düğmeyi savunacak. İşte o zaman onlara örneğin gerçekte ne yaptığını, neye benzediğini değil, ne yaptığını hatırlatırsınız. Web sitenizi umursamayan bir müşteri gibi denetleyebilirsiniz ve bir sayfanın bir tıklamayı ne kadar çabuk kazandığını veya kaybettiğini gösterebilirsiniz.

Bu sıralama tekrarlanabilir: işi tanımlayın, sade cümleyi yazın, hero'yu tek bir karar etrafında kurun, rakip CTA'ları ayıklayın, aynı işe sahip örneklerden yapıyı çalın, sonra yayınlayın ve her seferinde bir şeyi değiştirin. Her müşteri için, her sayfada uygulayın ve örnekler bir stil kaynağı olmaktan çıkar. Bir strateji kaynağı haline gelirler. Web sitesi inşa eden bir ekip ile kararlar inşa eden bir ekip arasındaki fark budur.