Üretim sektöründen bir alıcı web sitenize geliyor ve şık bir SaaS panosunun hero görselini görüyor. Bir fintech potansiyel müşterisi geliyor ve aynı görseli görüyor. İkisi de sayfanın kendileri için hazırlandığını hissetmiyor ve ikisi de saniyeler içinde ayrılıyor. Sorun, açılış sayfası görsellerinin eksik olması değil. Sorun, aynı görsellerin kim olduklarına veya neye ihtiyaç duyduklarına bakılmaksızın herkese gösterilmesi.
Açılış sayfası görselleri bir kez, genellikle sayfayı tasarlayan kişi tarafından seçilir ve ardından her ziyaretçiye gösterilir. Birkaç sektöre ve alıcı rolüne hitap eden bir B2B sitesinde bu, ziyaretçilerin çoğunun başkasının dünyasına ait bir resim görmesi demektir. Ana görseli ziyaretçinin sektörüne, rolüne veya aşamasına göre eşleştirmek, yeni metin gerektirmediği için daha ucuz kişiselleştirme biçimlerinden biridir; ancak yalnızca görsel spesifik bir şey söylüyorsa işe yarar. Bu yazı her görsel türünün ne işe yaradığını, videonun ne zaman zahmetine değdiğini, görsellerin segmentlerle nasıl eşleneceğini ve tüm bunların işe yarayıp yaramayacağını belirleyen performans ve erişilebilirlik ayrıntılarını ele alıyor.
Genel Açılış Sayfası Görselleri B2B'de Neden Başarısız Olur
Görseller genellikle ziyaretçinin gözünün ilk takıldığı yerdir; bu yüzden başlık okunmadan önce ilk izlenimi şekillendirirler. Genel bir görsel tek başına pek zarar vermez; asıl kayıp, ziyaretçiye tanıdığı bir şeyi gösterme fırsatının kaçırılmasıdır.
Birden fazla alıcı personası olan B2B şirketleri için tek bir görsel seti yapısal bir dezavantaj yaratır. Platformunuzu değerlendiren bir Mühendislik Başkan Yardımcısının görsel beklentileri, aynı şeyi yapan bir CMO'dan farklıdır. Biri teknik mimariyi, entegrasyonları veya veri akışlarını görmek ister. Diğeri panellere, kampanya metriklerine veya ROI grafiklerine tepki verir. İkisi de aynı genel ofis fotoğrafını gördüğünde, hiçbiri onları kaydırmaya devam ettiren alaka sinyalini almaz. Aynısı onları getiren reklam için de geçerlidir; duyarlı görüntülü reklamların ne zaman kullanılacağı rehberimiz görüntülü reklam kreatifini sayfayla tutarlı tutmayı anlatıyor.
Cam bir ofiste el sıkışan insanların stok fotoğrafları alışılmış suçludur. Stok olduğu kolayca anlaşılır, dolayısıyla hiçbir katkı sağlamazlar ve bir ürün ekran görüntüsünün, gerçek bir müşterinin veya iş akışı diyagramının olabileceği alanı işgal ederler. Bir açılış sayfasının görsellerinde tek bir şey test edecekseniz, gerçek bir görseli (ürününüz, müşterileriniz, ekibiniz) stok görsele karşı test edin.
Görselleri Ziyaretçi Segmentleriyle Eşleştirmek
Kişiselleştirilmiş görsellerin arkasındaki fikir, sayfaya geliş ile "bu benim için" hissi arasındaki süreyi kısaltmaktır. Bunu yapmanın pratik yolu, görsel varyantlarını zaten izlediğiniz segmentlerle eşlemektir. Şirketin sektörünü, büyüklüğünü veya coğrafyasını tespit etmek için ziyaretçi tanımlama kullanıyorsanız, aynı veri noktaları sayfada hangi görsellerin görüneceğini de belirleyebilir.
Segmentleri görsellerle eşleştirme yolları:
Sektöre göre görseller. Üretim sektöründen gelen ziyaretçilere bir üretim sahası gösterin. Finansal hizmetlere bir işlem masası gösterin. Sağlık sektörüne bir hastane iş akışı gösterin. Satılan ürün aynıdır, ancak görsel bağlam ziyaretçinin günlük gerçekliğine uyacak şekilde değişir.
Role dayalı görseller. Teknik alıcılar mimari şemalara, kod parçalarına ve entegrasyon akışlarına tepki verir. İş tarafındaki alıcılar ise panellere, grafiklere ve sonuç metriklerine tepki verir. Görsel dili alıcının uzmanlığıyla eşleştirmek, onların bakış açısını anladığınızı gösterir.
Aşamaya dayalı görseller. İlk kez gelen ziyaretçiler, ne yaptığınızı ortaya koyan üst düzey fayda illüstrasyonlarından yararlanır. Ürün içeriklerini zaten tüketmiş geri dönen ziyaretçiler ise ayrıntılı ekran görüntülerine, karşılaştırma tablolarına ya da müşteri kanıtlarına daha iyi yanıt verir.
Şirket büyüklüğü. Kurumsal ziyaretçiler ölçeği, güvenlik sertifikalarını veya çok ekipli iş akışlarını gösteren görsellere tepki verebilir. Küçük şirketler ise hızı, sadeliği ve hızlı kazanımları gösteren görsellerle bağ kurar.
Görsel Türleri ve Her Birinin En İyi Performans Gösterdiği Durumlar
Farklı görsel öğeler bir açılış sayfasında farklı işlevler görür. Bu ayrımları anlamak, neyi kişiselleştireceğiniz ve neyi sabit tutacağınız konusunda bilinçli seçimler yapmanıza yardımcı olur.
Hero görselleri ilk izlenimi belirler ve tüm değer önerisinin çerçevesini çizer. Sayfadaki en değerli alanı kaplarlar. Ürünü kullanım hâlinde, ideal olarak ziyaretçinin tanıdığı veriler üzerinde veya bir ortamda gösteren bir hero görseli, soyut bir grafikten çok daha fazlasını anlatır. Kişiselleştirilmiş sayfalarda hero, değiştirilecek doğal ilk öğedir; çünkü sayfaya gelen herkes onu görür.
Ürün ekran görüntüleri ne sattığınızın somut kanıtını sunar, ancak özensiz kullanıldığında sayfaları kalabalık gösterebilir. Ziyaretçinin kullanım senaryosuyla en alakalı özellikleri vurgulayan tek bir açıklamalı ekran görüntüsü, açıklamasız birden fazla görüntüden daha iyi çalışır. Segmentasyon verileriniz bir ziyaretçinin analitiğe önem verdiğini söylüyorsa analitik panosunu gösterin. Entegrasyonlara önem veriyorsa entegrasyon panelini gösterin.
İllüstrasyonlar ve özel grafikler karmaşıklığı sadeleştirmede çok başarılıdır. Soyut bir iş akışını veya çok adımlı bir süreci anlatmanız gerektiğinde, özel illüstrasyonlar paragraflarca sürecek şeyi saniyeler içinde iletir. Açıklamanın ziyaretçinin teknik düzeyine göre değişmesi gereken kişiselleştirilmiş sayfalarda özellikle faydalıdır. Tasarım ve metnin birlikte planlanması için her bölümün hangi görsele ihtiyaç duyduğunu açılış sayfası metin brief'inde not edin.
Sosyal kanıt görselleri müşteri logolarını, ekip fotoğraflarını ve vaka çalışması küçük resimlerini içerir. Bunlar, ziyaretçinin sektöründen veya şirket büyüklüğü seviyesinden logolar gösterilerek kişiselleştirilebilir. Orta ölçekli bir SaaS şirketi, kendisini ilişkilendiremeyeceği Fortune 500 logoları yerine diğer orta ölçekli SaaS şirketlerinin logolarını gördüğünde daha fazla güven duyar. B2B landing page örneklerimiz, her sayfa türünün hangi kanıt öğesiyle başlaması gerektiğini gösteriyor.
Arka plan görselleri dikkat çekmeden atmosfer yaratır. İnce gradyanlar veya geometrik desenler, dikkat dağıtmadan derinlik kattıkları için çoğu zaman fotoğraflı arka planlardan daha iyi sonuç verir. Görevleri alaka sinyali vermek değil, desteklemek olduğu için nadiren kişiselleştirme gerektirirler.
Açılış Sayfasında Video: Ne Zaman Yerini Hak Eder?
Video, hem sayfa ağırlığı hem de talep ettiği dikkat açısından ekleyebileceğiniz en ağır görseldir. Görüşümüz: Bir açılış sayfasındaki video, ziyaretçinin bir ekran görüntüsünden yanıtlayamayacağı tek bir soruyu yanıtlamalıdır; genellikle "biri bunu gerçekten kullandığında nasıl görünüyor?" sorusunu. Video arkasında müzikle başlığı tekrarlıyorsa, iyi seçilmiş bir ekran görüntüsü aynı işi daha hızlı yapar. Açılış sayfalarının ötesindeki videolar için B2B video pazarlama rehberimize bakın.
B2B sayfalarında videonun genellikle karşılığını verdiği yerler:
- Demo ve kayıt sayfalarında ürün tanıtımları. Temel iş akışını gösteren altmış ila doksan saniyelik bir video, ziyaretçinin görüşme ayarlamadan önce kendini nitelendirmesine olanak tanır. İmleci yavaş hareket ettirin ve arayüzün oynatıldığı boyutta okunabilir olmasını sağlayın.
- Son aşama sayfalarında müşteri hikâyeleri. Sorunu kendi sözleriyle anlatan bir müşteri, bir logonun veremeyeceği bir kanıttır. Bunu ayrı bir video galerisine değil, desteklediği iddianın hemen yanına koyun.
- Webinar ve etkinlik sayfaları. 30 saniyelik bir konuşmacı klibi, oturumun zaman ayırmaya değer olduğunu gösterir. Etkinlikten sonra yerini kayıt alır.
Ve genellikle işe yaramadığı yerler: başlığın arkasında otomatik oynatılan bir arka plan döngüsü olarak (metinle yarışır ve yükleme süresine mal olur) ve temel bilgilere ulaşmanın tek yolu olarak (birçok B2B ziyaretçisi iş yerinde sesi kapalı gezinir).
Sayfayı yavaşlatmadan video eklemek
- Bir poster görseli kullanın ve oynatıcıyı tıklandığında yükleyin. Tam bir YouTube veya Vimeo yerleştirmesi, kimse oynat'a basmadan komut dosyalarını yükler. Google'ın Lighthouse dokümantasyonu, etkileşimde gerçek oynatıcıyla yer değiştiren statik bir önizleme olan üçüncü taraf yerleştirmeleri bir cephe (facade) arkasında geç yüklemeyi öneriyor.
- Ekranın alt kısmındaki gömülü öğeleri geç yükleyin. web.dev'in iframe geç yükleme rehberinde açıklandığı gibi, iframe'lere
loading="lazy"eklemek ekran dışındaki oynatıcıların yüklenmesini erteler. - Her şeye altyazı ekleyin. Altyazılar sesi kapalı izleyenlere hizmet eder ve sesli, önceden kaydedilmiş videolar için bir erişilebilirlik gerekliliğidir.
- CTA'yı video olmadan da görünür tutun. Form veya buton asla birinin videoyu sonuna kadar izlemesine bağlı olmamalıdır.
Videonun işe yarayıp yaramadığını ölçmek
GA4'ün gelişmiş ölçümü, JS API desteği etkin olan yerleşik YouTube videoları için video_start, video_progress ve video_complete olaylarını kaydeder. İki rakam izlenmelerden daha önemlidir: oynatma oranı (oynatmaların sayfa ziyaretçilerine bölümü) ve videoyu oynatan ziyaretçilerin oynatmayanlara göre dönüşüm oranı. İkincisinde dikkatli olun. Oynat'a basan ziyaretçiler zaten daha ilgilidir; bu yüzden izleyiciler arasındaki daha yüksek dönüşüm oranı, buna videonun neden olduğunu kanıtlamaz. Adil test, sayfanın videolu ve videosuz hâlinin izlenme süresine göre değil, dönüşümlere göre değerlendirildiği bir A/B testidir.
Video da iyi kişiselleştirilir. Bir üretim sektörü ziyaretçisi ile bir yazılım sektörü ziyaretçisi, iki farklı demo veri setiyle kaydedilmiş aynı tanıtımı görebilir; senaryo hazır olduğunda bu kulağa geldiğinden daha ucuzdur.
Kişiselleştirilmiş Sayfalarda Görsel Hiyerarşi
Görseller, ziyaretçilerin sayfada nasıl ilerlediğini şekillendirir. Metin ağırlıklı sayfalarda insanlar genellikle üst kısmı yatay olarak, ardından sol tarafı aşağı doğru tarar (F kalıbı); seyrek sayfalarda ise göz çoğu zaman sol üstten sağ üste ve aşağıya zikzak çizer. Görselleri bu yolları göz önünde bulundurarak yerleştirin.
Kişiselleştirilmiş hero görselinizi, gözlerin ilk düştüğü F'nin üst kısmına yerleştirin. Destekleyici görseller dikey tarama yolu boyunca yer alır. Görsellerde bir kişinin bakışı veya bir şemadaki ok gibi yön belirten ipuçları kullanıyorsanız, bunları harekete geçirici mesajınızdan uzağa değil, ona doğru yönlendirin.
Boyut hiyerarşi yaratır. Daha büyük görseller önemi işaret eder. Bir hedef hesaptan gelen ziyaretçinin belirli bir sonuca veya yeteneğe odaklanmasını istiyorsanız, o görseli sayfadaki baskın görsel yapın. Müşteri logoları veya destekleyici ekran görüntüleri gibi ikincil görseller, rekabet etmeden destekleyecek şekilde daha küçük kalmalıdır.
Ana görsele yer açın. Etrafında boşluk olan, segmentle eşleşen tek ve net bir görsel, dikkat için yarışan üç sıkışık görselden daha hızlı algılanır ve sürdürülecek üç değil tek bir varyant demektir.
Açılış Sayfası Görsellerini Kişiselleştirmek İçin Adım Adım İş Akışı
Görsel kişiselleştirmeyi uygulamak tüm sitenizi yeniden inşa etmeyi gerektirmez. İşte küçük başlayıp ölçeklenen pratik bir iş akışı.
1. adım: En büyük nitelikli segmentlerinizi seçin. Analitik veya ziyaretçi tanımlama aracınızdan veri çekin. Nitelikli trafiğinizin büyük kısmını hangi sektörler, şirket büyüklükleri veya roller oluşturuyor? Ölçülebilecek kadar büyük ve farklı görsellerin gerçekten anlamlı olacağı kadar ayırt edici segmentlerle başlayın.
2. Adım: Mevcut açılış sayfası görsellerinizi denetleyin. En yüksek trafikli açılış sayfalarınızdaki her görseli listeleyin. Her biri için sorun: bu görsel üç segmentin hepsinde eşit derecede karşılık buluyor mu? Evetse, ya güçlü ve evrensel bir görseldir ya da kimseye hitap etmeyen genel bir görseldir. Segmente özel bir varyantın ilgililik katabileceği görselleri işaretleyin.
3. adım: İşaretlenen her alan için 2-3 görsel varyantı oluşturun. Tam bir yeniden tasarıma ihtiyacınız yok. Hero görselleri için bu, aynı düzenin farklı arka plan görselleri, farklı ürün ekran görüntüleri veya farklı kullanım senaryosu çizimleri içeren üç sürümü anlamına gelebilir. Sayfa yapısını değil görsel içeriğini test etmek için kompozisyonu ve CTA yerleşimini aynı tutun.
4. Adım: Segment bazlı gösterim kurallarını ayarlayın. Kişiselleştirme platformunuzu kullanarak her varyantı hedef segmentiyle eşleştirin. Hiçbir segmente uymayan ziyaretçiler için bir varsayılan tanımlayın. Her segmentten test hesaplarıyla önizleme yaparak doğru görsellerin doğru ziyaretçilere göründüğünü test edin.
5. adım: Ölçün ve yineleyin. Dönüşüm oranını yalnızca genel olarak değil, segmente göre takip edin. Üretim sektöründen gelen ziyaretçilerin dönüşümünü artıran bir hero görseli, SaaS ziyaretçilerinde performansı düşürebilir. Görsel değişikliklerinin etkisini diğer sayfa öğelerinden ayırmak için her segmentte A/B testleri yürütün. Örneklem büyüklüğünü test başlamadan önce belirleyin (A/B testi örneklem büyüklüğü rehberimiz nasıl yapılacağını gösteriyor), en az iki tam hafta yürütün ve panel iyi göründüğü için testi erken durdurmayın.
Teknik Performans: Hız ve Görsel Kalite
Geç yüklenen kişiselleştirilmiş bir hero alanı, zamanında yüklenen genel bir hero alanından daha kötüdür. Hero görseli genellikle Largest Contentful Paint öğesidir; bu yüzden boyutu ve yüklenme sırası sayfanın ne kadar hızlı hissettireceğini belirler.
Modern formatlar kullanın. Google'ın dokümantasyonuna göre kayıplı WebP görseller benzer JPEG'lerden %25-34 daha küçüktür ve kayıpsız WebP görseller PNG'lerden %26 daha küçüktür. AVIF çoğu zaman daha da fazla sıkıştırır. AVIF veya WebP'yi <picture> öğesi aracılığıyla JPEG yedeğiyle sunun.
Başkasının boyut sınırlarını kopyalamak yerine kendi sayfalarınız için bir bütçe belirleyin: PageSpeed Insights'ta mobil profilde hero alanının dosya boyutunu ve LCP değerini kontrol edin ve varsayılandan belirgin şekilde ağır olan her varyantı bir hata olarak ele alın.
srcset nitelikleriyle duyarlı (responsive) görseller kullanın. Mobil bir ziyaretçiye 2000 piksel genişliğinde bir görsel sunmak bant genişliğini boşa harcar ve görüntülemeyi geciktirir. Tarayıcıların görüntü alanı genişliğine göre uygun boyuttaki görseli seçmesine izin verin. Kişiselleştirilmiş sayfalarda bu, her görsel varyantının kendi duyarlı boyut setine ihtiyaç duyması demektir; ancak derleme araçları bunu otomatikleştirebilir.
Hero görselini tembel yüklemeyin. Ekranın üst kısmındadır, dolayısıyla tembel yükleme onu geciktirir; bunun yerine fetchpriority="high" ile işaretleyin ve yalnızca daha aşağıdaki görselleri tembel yükleyin. Segment varyantları için en temiz kurulum, varyanta sunucuda veya uç noktada karar verir; böylece doğru görsel en başından HTML'de bulunur. Değişim istemci tarafında oluyorsa, görsel yüklendiğinde düzen kaymaması için görselin boyutlarını önceden ayırın.
Tüm Görsel Varyantları İçin Erişilebilirlik
Her kişiselleştirilmiş görsel varyantının kendi alternatif metni olmalıdır. Bir üretim iş akışını gösteren hero görselinin alternatif metni, herhangi bir varyanta uyabilecek genel bir metin değil, o sahneyi anlatan bir metin olmalıdır. Ekran okuyucular sayfada ne olduğunu seslendirir ve alternatif metin, o segmentteki gören ziyaretçilerin gerçekte gördüğüyle eşleşmelidir.
İyi bir alt metin, görselin içeriğini çevresindeki bağlamla ilişkilendirerek kısaca tanımlar. 100 karakterin altında tutun. Dekoratif görseller (arka planlar, boşluk öğeleri), ekran okuyucuların atlaması için boş alt nitelikleri kullanmalıdır. Bağlantılı grafikler gibi işlevsel görsellerin, bağlantının gittiği yeri tanımlayan bir alt metne ihtiyacı vardır.
Yüklenemeyen görseller alt metni görsel olarak gösterir; bu da alt metnin yavaş bağlantıdaki gören ziyaretçiler için bile bir yedek işlevi gördüğü anlamına gelir. Kişiselleştirilmiş görsel varyantlarınız olduğunda, bu da her varyantın ortak bir yer tutucu yerine benzersiz ve açıklayıcı bir alt metne ihtiyaç duymasının bir başka nedenidir.
Kişiselleştirilmiş Görsellerde Yaygın Hatalar
Görsel kişiselleştirmeye yeni başlayan ekipler çoğu zaman aşırı kişiselleştirir. Sayfadaki her görseli ziyaretçi segmentine göre değiştirmek bakım yükü yaratır ve gerçekten önemli olan değişikliklerin etkisini sulandırır. Kişiselleştirmeyi en yüksek etkiye sahip bir veya iki görsel alanına (genellikle hero ve ana sosyal kanıt bölümü) odaklayın ve geri kalanını tutarlı bırakın.
Bir başka yaygın hata, segment verilerini rahatsız edici hissettiren varsayımlar yapmak için kullanmaktır. Ziyaretçi kendini tanıtmadan önce ona şirket logosunu göstermek bir sınırı aşar. Sektörüyle ilgili görseller göstermek faydalıdır. Ofis binasını göstermek ise tedirgin edicidir. Ayrım, bağlamsal alaka ile gözetim arasındadır.
Aynı anda çok fazla varyantı test etmek üçüncü bir tuzaktır. Dört segment çarpı üç görsel alanı ve her birinde birkaç varyant, şimdiden onlarca kombinasyon demektir; bu da B2B trafiğinin test edebileceğinin çok üzerindedir. Her segment içinde bir seferde bir değişkeni test edin, istatistiksel anlamlılığı bekleyin ve yeni katmanlar eklemeden önce her değişikliğe güven oluşturun.
Daha kapsamlı bir B2B açılış sayfası optimizasyonu planı üzerinde çalışan ekipler için görsel kişiselleştirme makul bir erken adımdır, çünkü metin kişiselleştirmesine göre daha az yeni içerik gerektirir. Püf noktası, gerçek ve segmente özel görsellere sahip olmanıza bağlı olmasıdır; üretebildiğiniz tek şey her sektör için farklı bir stok fotoğrafsa, zamanınızı metne harcayın.
Nereden Başlamalı
En çok trafik alan açılış sayfanızı açın ve hero görseline tek bir soruyla bakın: En büyük segmentinizden gelen bir ziyaretçi bu görselde kendi işini tanır mı? Tanımıyorsa, tanıyacağı bir ürün ekran görüntüsü veya müşteri görseliyle değiştirin ve mevcut görsele karşı test edin. Ancak gerçek bir görsel stok görseli geride bıraktıktan sonra segment başına varyant üretmeye değer. Bu varyantları kuralları kendiniz oluşturmadan sunmak isterseniz, Markettailor ziyaretçi tanımlama verilerini görseller dahil sayfa içi içerikle birleştirir.
