Açılış Sayfası ve Ana Sayfa: Fark Nedir?

90'ların ortasındaki web sitesi ana sayfası tasarımı, günümüzün tasarım standartlarına göre tam bir kabustu, ancak web'in emekleme döneminde, bildiğimiz tek şey buydu. Uzayda yüzen parlak turkuaz köprüler o zamanlar iyi bir fikir gibi görünüyordu.

Yirmi yıl sonra işler değişti. Günümüzün ana sayfaları, görünür yelpazeyi kapsayan diğer dünyaya ait grafikler ve renklerle göz kamaştırmaktan çok, ziyaretçileri pazarlama hunisine çekmeye odaklanıyor. Açılış sayfası oluşturucular sayesinde, dakikalar içinde yüksek dönüşüm sağlayan deneyimler oluşturmak artık mümkün.

Bu açıdan ana sayfalar, tıklama sonrası açılış sayfalarına çok benziyor. Ama yine de aralarında bazı önemli farklılıklar var. Son derece etkili sayfalar oluşturmak için bu tasarım farklılıklarını göz önünde bulundurun.

Web sitesi ana sayfası tasarımı ve tıklama sonrası açılış sayfası tasarımı: Bilmeniz gerekenler

1. tıklama sonrası açılış sayfaları ve web sitesi ana sayfaları farklı kullanıcılar için oluşturulmalıdır

Tamam, Microsoft'un 1995'teki karmaşasına benzeyen bir ana sayfayla karşılaşma şansınız çok düşük. Ama neden?

BOP Design'ın Yaratıcı Prensibi Kara Jensen şöyle açıklıyor:

"Bir web sitesi kavramına kapılıp son kullanıcıyı unutmak kolay olabilir. Başarılı bir web sitesi sadece hoş bir görsel parça değildir; hedef kitlenizi çekmek ve onlara ihtiyaç duydukları bilgileri vermek için bir portaldır. yeni bir müşteri olmak isteyip istemediklerine karar vermek için."

Web tasarımı gibi yaratıcı mesleklerde, tasarımcıların (ve hatta müşterilerin) nihai ürüne o kadar bağlı olmaları ve bunu kimin için yaptıklarını, yani ziyaretçiyi unutmaları nadir değildir.

Yirmi yıl önce, köprülerle dolu bu uzay manzarası Microsoft'un tasarımcısına havalı görünmüş olabilir, ancak bu kullanıcının umursadığı bir şey miydi? Muhtemelen değil.

İkinci ana sayfadaki yan taraftaki "SSS" düğmesine ne dersiniz? Bu, kullanıcı düşünülerek tasarlanmış bir şey miydi? Numara.

Herhangi bir sayfayı tasarlamadan önce kendinize “Bu sayfanın amacı nedir?” sorusunu sormanız önemlidir. - veya daha da iyisi, "Bu sayfaya ulaşan bir kullanıcının amacı nedir?"

sayfanın amacı ne

Ana sayfanızda bu hedefi her ziyaretçi için tahmin etmek imkansızdır. Yeni potansiyel müşteriler veya geri dönen potansiyel müşteriler, işinizin arkasındaki hikayeyi bilmek isteyebilirken, diğerleri doğrudan planlara ve fiyatlandırma bilgilerine yönelecektir. Bu nedenle ana sayfalar, ziyaretçilere isteyebilecekleri herhangi bir içeriğe kolay erişim sağlayan gezinme çubukları ve birden çok giden bağlantı içerir.

Örneğin, navigasyonun müşterilerin, geliştiricilerin ve potansiyel müşterilerin araçla ilgili her küçük ayrıntıyı öğrenmesini sağlayan Zoho CRM ürün ana sayfasını ele alalım:

Tıklama sonrası açılış sayfalarının tek bir amacı vardır: bir ziyaretçiyi bir teklife dönüştürmek. Kullanıcılar bir promosyon bağlantısından tıklama sonrası açılış sayfanıza gittiğinde, bunun nedeni, reklamını yaptığınız teklif için hak talebinde bulunmayı düşünmeleridir. Bu nedenle, tıklama sonrası açılış sayfanızda, yalnızca ziyaretçinizin bu teklifin talep edilmeye değer olup olmadığını belirlemek için ihtiyaç duyacağı bilgileri eklemek sizin işinizdir.

İşte aynı şirket tarafından oluşturulan bir tıklama sonrası açılış sayfası:

Bir bakışta bile büyük tasarım farklılıkları ekranın üst kısmında görülebilir. Bu sayfada gezinme eksikliği, ziyaretçilerin değerlendirmek için tıkladıkları teklife odaklanmasını sağlar. Tıklama sonrası açılış sayfasındaki başlık, ana sayfadaki başlıktan çok daha fazla fayda odaklıdır.

Ekranın alt kısmında, ana sayfa, diğer sayfalara bağlantılarla dolu uygulamadan ekran görüntüleri sunarken, tıklama sonrası açılış sayfası, aracın etkinliğini kanıtlamak için belirli numaralara sahiptir.

Ana Sayfa:

tıklama sonrası açılış sayfası:

Daha da aşağı kaydırdığınızda, Zoho ana sayfasının, ziyaretçileri web sitesinin öne çıkan sayfalarına yönlendiren küçük metin paragrafları kullandığını, tıklama sonrası açılış sayfasının ise sosyal kanıtın yerine geçtiğini göreceksiniz:

Ana Sayfa:

tıklama sonrası açılış sayfası:

Ana sayfada, CTA olmayan diğer sayfalara 80'den fazla bağlantı saydık. Tıklama sonrası açılış sayfasında iki tane vardı. Yine de iki çok fazla. Tıklama sonrası açılış sayfanızdaki bağlantıların CTA düğmelerine oranı ("dönüşüm oranınız") her zaman 1:1 olmalıdır.

Bu sefer FreshBooks'tan başka bir örneğe bakalım. İlk olarak, ana sayfalarının üst kısmında:

Şimdi, ekranın üst kısmında, şirketin tıklama sonrası açılış sayfalarından biri:

Neredeyse aynı görünüyorlar, değil mi? Neredeyse, ancak tıklama sonrası açılış sayfasında başlığın ve CTA'nın değiştirildiğine dikkat edin. En önemlisi, ziyaretçilerin teklifi değerlendirmeye odaklanmasını sağlamak için gezinme menüsü kaldırıldı.

Ana sayfanın ekranın alt kısmındaki birkaç bölümü aynı. Her ikisinde de sosyal kanıt, aynı fayda odaklı metin paragrafları ve birçok aynı grafik bulunur. Ancak yakından bakın ve tıklama sonrası açılış sayfasında tüm ikincil CTA'ların "Ücretsiz Deneyin" düğmesi ile değiştirildiğini fark edeceksiniz.

İşte ana sayfadan bir ekran görüntüsü:

Ve işte tıklama sonrası açılış sayfasından bir tane:

Seçim paradoksunun devreye girmesine izin verme

Seçim paradoksunu hatırlayın: Ne kadar çok seçeneğiniz varsa, karar vermek o kadar zorlaşır. Bu nedenle menüleri daha geniş olan restoranlarda sipariş vermek her zaman daha uzun sürer.

Tıklama sonrası açılış sayfanız olan restoranda CTA'lar menü öğelerinizdir. Ziyaretçilerinize yalnızca aralarından seçim yapabilecekleri birini sunun. FreshBooks bunu sayfa boyunca "Ücretsiz Deneyin" harekete geçirici mesajıyla yapar.

FreshBooks, ana sayfalarında ziyaretçilere birden fazla CTA sunuyor, bu da sorun değil. "Daha fazla bilgi edinin" gibi bu "ikincil CTA'lar", potansiyel müşterilerin sorularına yanıt bulmalarına yardımcı olur ve doğru tasarlanmışlarsa, birincil CTA'dan çok fazla dikkat çekmezler.

Bu sayfadaki birincil harekete geçirici mesajı ve ikincil harekete geçirici mesajı görebiliyor musunuz?

"Ücretsiz Deneyin" ifadesinin aşağıdaki renksiz "Daha Fazla Bilgi Edinin" düğmelerinden nasıl daha fazla ortaya çıktığını gördünüz mü? Bu sayfanın tasarımcısı, ziyaretçiyi "Ücretsiz Deneyin" düğmesine çekmek istiyor, ancak yine de potansiyel müşterilere denemeye hazır değillerse öğrenme fırsatı veriyorlar. Ve bu, bir web sitesi ana sayfası ile bir tıklama sonrası açılış sayfası arasındaki en önemli farktır.

Ana sayfa daha çok ziyaretçiyi bilgilendirmeye ve güçlendirmeye odaklanırken, tıklama sonrası açılış sayfası ziyaretçiyi ikna etmeye odaklanır.

Her ana sayfa ziyaretçisinin hedefini kesin olarak bilemeyiz. Yine de, tıklama sonrası açılış sayfası ziyaretçisinin amacı? Bir karar vermektir. Bunu yapmalarına yardımcı olmak için anatomik olarak doğru bir tıklama sonrası açılış sayfası oluşturun.

2. Ana sayfalar, tıklama sonrası açılış sayfalarının minimalist liderliğini takip ediyor

Belirli hedefleri farklı olsa da, temel bir şekilde, tıklama sonrası açılış sayfası ziyaretçileri ve ana sayfa ziyaretçileri aynı şeyi ister. Webflow'un Baş Web Tasarım Sorumlusu Sergie Magdalin şöyle açıklıyor:

"Dünya çapındaki tasarımcılar, insanların web sitelerini içerikleri için ziyaret ettiğini fark ettiler - ister azgın tweet fırtınaları, uzun uzun okumalar veya en son "kullanıcı tarafından oluşturulan" meme olsun - ve bu tasarımın nihai rolü, içeriği sezgisel, verimli ve " keyifli" bir yol.

Skeuomorfik tasarımdan "daha düz", daha minimalist tasarım yaklaşımlarına geçişin bir nedeni budur…"

1995'te, tasarım en iyi uygulamaları ve standartlaştırılmış web buluşsal yöntemleri henüz geliştirilmemişti. Web sitesi yaratıcılarının tasarımlarını temel alacak çok az araştırmaları vardı. İnternet, uzayda yüzen köprülerle bu şekilde sonuçlandı.

Sayfa tasarımı değişmeye başladı

Daha fazla işletme ve tüketici web'e döndükçe, odak noktası gerçek dünyadan siber uzaya geçişi yumuşatmak oldu. Örneğin çöp kutusu simgesi gibi skeuomorfik tasarımlar, öğelerin ve web'deki işlevlerinin tanınmasını kolaylaştırdı.

Ancak aralarında büyük bir sorun vardı. Web sayfalarını karıştırma eğilimindeydiler. Ve bu, ziyaretçilerin istedikleri şeye müdahale ediyordu: içerik. Bugün, "daha düz" minimalist tasarım öğeleri - örneğin gölgeler, temel yazı tipi ve parlak renkler - onu ziyaretçilere basit ve anlaşılır bir şekilde sunuyor.

Bu öğeler aynı zamanda belirli bir tür sayfanın da temelini oluşturur: tıklama sonrası açılış sayfası. Web'deki bir işletmenin asansör konuşması olarak, tıklama sonrası bir açılış sayfası, bir ziyaretçinin bir teklifi hızlı bir şekilde değerlendirmek için ihtiyaç duyduğu her şeyi içerir ve daha fazlasını içermez.

Onları dönüştürmede bu kadar etkili yapan da budur. İçeriği basit bir düzen ile vurgularlar. Ve şimdi ana sayfalar da aynısını yapmaya başlıyor. Bu Otomatik Pilot tıklama sonrası açılış sayfasına bir göz atın:

Şimdi ana sayfalarına bakın:

Oldukça benzer, değil mi? Tasarımlarının ekranın alt kısmında bile benzer olduğunu görmek için tıklayın ve aşağı kaydırın.

Başka bir örneğe ihtiyacınız varsa, FreshBooks ana sayfasına geri dönün ve yukarıdaki tıklama sonrası açılış sayfasına bakın. Bugün, web sayfası ne olursa olsun, dikkati içerikten uzaklaştırmak yerine içerik sunmaya odaklanıyor.

3. Hem tıklama sonrası açılış sayfaları hem de web sitesi ana sayfaları, ziyaretçilere görsel bir hiyerarşi ile rehberlik etmelidir.

İnternetin başlangıcından beri bile insanlar sayfaları aynı şekilde inceliyorlar. İlk göz izleme çalışmaları, okuyucuların önce bir sayfaya yazılı bir sayfadaki bir resim veya başlık aracılığıyla girdiklerini, ardından madde işaretli veya italik metin aramak için sol tarafa baktıklarını gösterdi. Gövde kopyası en son okundu.

Web'de bu, F-şekilli desen olarak bilinir:

Okuyucuların en önemli içeriğinizi görmelerini sağlamak için, insanların okumayı sevme biçimine dayalı olarak “görsel hiyerarşi” denilen şeyi oluşturmanız gerekir. Bunun gibi bir şeye benzemeli:

1. Okuyucularınızı çekmek için dikkat çekici görseller ve büyük bir başlık kullanın.
2. Sayfanızın içeriğini alt başlıklara ayırın.
3. Özellikler ve avantajlar gibi bir listedeki öğelere dikkat çekmek için madde işaretlerini kullanın.
4. Kısaca ayrıntılandırmak için bu alt başlıklar ve madde imleri içindeki gövde metnini kullanın.

Hiyerarşi de tanıdık web tasarım ilkelerine dayanmalıdır. Örneğin, logolar her zaman bir web sayfasının sol üst tarafındadır. Bağlantıların altı çizili veya metnin geri kalanından farklı bir renk. İnsanların web'de okuma şeklini yeniden icat etmeye çalışmayın. Bir MIT araştırması, insanların uzun süredir devam eden en iyi uygulamalardan uzaklaşmaya çalışanlara aşina olan sayfa düzenlerini tercih ettiğini gösterdi.

Örnek

İşte iyi bir görsel hiyerarşi örneği:

Resim ve başlık okuyucunun dikkatini çekiyor. "Dünya Çapında 40.000'den Fazla Kuruluş ve Bağlı Kuruluş... ve Hala Büyüyor" alt başlığına geçiyorlar. Bunun altında, madde işaretleri yazılım hakkında önemli bilgiler taşır. Sağda, bir form potansiyel müşteri bilgilerini toplar ve parlak renkli bir düğme dönüştürme işlemini tamamlar.

Kötü görsel hiyerarşi örneği

İşte kötü bir görsel hiyerarşi örneği:

Sayfanın bir başlığı, alt başlığı, madde işaretleri ve hatta bir bilgi grafiği var - peki sorun ne?

İnsanlar soldan sağa okur ve form sol kenar boşluğunu kırdığı için metin formdan başlar. Bu, okuyucular söz konusu olduğunda, bu sayfanın bu formun sağ kenarından başladığı anlamına gelir. Ve bu, bu sayfanın en kritik bölümünün - form ve harekete geçirici mesaj - tamamen kaybolduğu anlamına gelir.

Ziyaretçiler alt başlığı, madde işaretlerini okuyacak ve görüş alanlarında olduğu için sağdaki bilgi grafiğine göz atacaklar. Bununla birlikte, bu görsel yardımın yardımıyla bile, içeriğin geri kalanı sağdayken okuyucuların forma sola bakmaları doğal değildir.

İşte iyi bir görsel hiyerarşi oluşturan bir ana sayfa (ana sayfanın tamamını görmek için buraya tıklayın):

Bir resim ve bir başlık okuyucunun dikkatini çeker, ardından madde işaretli içerikli birkaç alt başlık hizmetin faydalarını kısaca açıklar. Ardından, bir video referansı Upwork'ün gücünden bahseder. Ve bunun altında, bir harekete geçirici mesaj, ziyaretçiyi platforma katılmaya davet ediyor.

İşte kötü bir ana sayfa görsel hiyerarşisi örneği (ana sayfanın tamamını görmek için buraya tıklayın):

İlk bakışta, bu ana sayfa iyi bir hiyerarşinin kurallarına uyuyor gibi görünüyor. Üst üste bindirilmiş bir başlık içeren bir resim, ziyaretçinin dikkatini çeker; daha sonra, bir alt başlık bazı madde işaretli simgeleri tanıtır. Bunun altında, şirket ödülleri ve önde gelen müşterileri sergiliyor. Ama sonra, bunun altında?

Hiçbir şey değil. Kullanıcının bir sonraki adımı atması için yukarı kaydırması veya web sitesi altbilgisinde gezinmesi gerekir. Sayfanızdaki her öğe, ziyaretçinizi pazarlama huninizin girişine yönlendirmelidir. Bu sayfanın sonunda bir CTA olmalıdır.

Web sitesi ana sayfaları ve açılış sayfalarının düşündüğünüzden daha fazla ortak noktası var

Web sitesi ana sayfaları ve tıklama sonrası açılış sayfaları hakkındaki tüm bu konuşma, bunların tamamen farklı iki hayvan olduğunu düşünmenize neden olabilir. Bazı yönlerden, kesinlikle öyleler. Ama özünde aynılar.

Tıklama sonrası açılış sayfaları oluşturmak hiç bu kadar kolay olmamıştı - şimdiye kadar. Bu nedenle, bugün bir Instapage Enterprise demosu için kaydolun.