Kişiselleştirme ziyaretçilerin gördüklerini değiştirir. Tasarım kalıpları ise bu değişiklikleri bir yıl sonra da sürdürüp sürdüremeyeceğinizi ya da kimsenin dokunmaya cesaret edemediği bir siteyle mi kalacağınızı belirler. İyi yapılandırılmış yirmi varyantlı bir siteyi yönetmek, gelişigüzel oluşturulmuş beş varyantlı bir siteden daha kolaydır. Önce temel site yapısı üzerinde çalışmak gerekiyorsa, satın alma komitelerine yönelik B2B web sitesi tasarımı rehberimizle başlayın.
Çoğu B2B web sitesi kişiselleştirme için tasarlanmamıştır. Tek bir deneyim olarak kurulmuş, kişiselleştirilmiş içerik sonradan eklenmiştir. Bu yaklaşım iki üç kural için işe yarar. Yirmi kuralda dağılır. Bu makale, hero bölümlerinden tek tek içerik bloklarına kadar sistematik kişiselleştirme yapmanızı sağlayan tasarım kalıplarını ele alıyor.
Hero Bölümü Kişiselleştirme Kalıpları
Hero alanı, çoğu B2B ekibinin kişiselleştirmeye başladığı ve gereğinden fazla geliştirmenin en kolay olduğu yerdir. İşi gören en ucuz kalıbı seçin.
1. Model: Metin Değişimi (En Az Efor)
Düzeni, görselleri ve CTA butonunu aynı tutun. Yalnızca başlık ve alt başlık metnini değiştirin. Bu en basit ve test edilmesi en kolay örüntüdür, çünkü değişkeni mesajla sınırlandırırsınız.
Bir siber güvenlik şirketi için temsili örnek:
- Varsayılan: “İşletmenizi modern tehditlerden koruyun”
- Sağlık segmenti: "Hasta verilerini koruyan HIPAA uyumlu güvenlik"
- Finansal hizmetler segmenti: “Finans kuruluşları için SOC 2 sertifikalı koruma”
Sayfa yapısı değişmez. Tasarım sisteminiz bozulmadan kalır. Yalnızca metin dizelerini değiştiriyorsunuz; bu da şablona dönüştürmeyi ve sürdürmeyi kolaylaştırır.
Kalıp 2: İçerik Bloğu Değişimi (Orta Düzey Emek)
Aynı düzen ızgarasını koruyarak tüm hero içerik bloğunu (başlık, alt başlık, destekleyici görsel ve CTA) değiştirin. Hero kapsayıcısı sabit kalır; içerikler birbirinin yerine geçebilen modüllerdir. Google'ın duyarlı görüntülü reklamları aynı fikri reklamcılığa uygular: siz öğeleri sağlarsınız, sistem de düzeni her yerleşime göre oluşturur.
Hero bölümünüzü şu özellikleri (props) alan bir bileşen olarak oluşturun: headline, subheadline, imageUrl, ctaText, ctaLink. Her kişiselleştirme varyantı farklı bir props setidir. Düzen CSS'i bir kez tanımlanır; içerik değişir.
Bu kalıp, farklı segmentlerin farklı görsellere ihtiyaç duyduğu durumlarda iyi çalışır. Bir üretim segmenti fabrika zemini görselleri görürken bir SaaS segmenti gösterge paneli ekran görüntüleri görebilir. Görsel etki yalnızca metin değişikliklerinden daha güçlüdür ve bakım maliyeti yönetilebilir düzeydedir.
Örüntü 3: Düzen Varyantı (En Yüksek Efor)
Farklı segmentler tamamen farklı hero düzenleri alır. Belki kurumsal ziyaretçiler video demolu ve "Görüşme Planlayın" CTA'lı bir hero görürken, KOBİ ziyaretçileri "Başlayın" CTA'lı ve ürün ekran görüntülü daha sade bir hero görür.
Bu örüntüyü, alıcı yolculuğunun segmentler arasında aynı düzenin ikisine birden hizmet edemeyeceği kadar temelden farklı olduğu durumlara saklayın. Kurumsal alıcılar genellikle baştan güven sinyallerine ve insan etkileşimine ihtiyaç duyar; KOBİ alıcıları ise hız ve self-servis ister. Bunlar ayrı düzenleri haklı çıkaracak kadar farklıdır.
Ödünleşim: her düzen varyantı ayrı bakım, test ve duyarlı tasarım çalışması gerektirir. Kendinizi en fazla iki veya üç düzen varyantıyla sınırlayın.
Sosyal Kanıt Değişimi
Sosyal kanıt, hero alanından sonraki ilk önerimizdir, çünkü yeni metin yazmayı değil, yalnızca daha iyi seçimi gerektirir. Bir sağlık sektörü alıcısı diğer sağlık şirketlerinin logolarını ve bir sağlık şirketi CTO'sunun yorumunu gördüğünde mesaj şudur: “Sizin gibi şirketler bunu kullanıyor.” İlgisiz sektörlerden oluşan genel bir logo duvarı çok daha az şey söyler.
Sosyal kanıt bölümlerinizi en baştan değiştirilebilir olacak şekilde tasarlayın:
Logo Şeridi
Bir dizi logo nesnesi alan bir logo şeridi bileşeni oluşturun. Her nesne görseli, şirket adını ve isteğe bağlı bir sektör etiketini içerir. Kişiselleştirme için her sektör segmentine ayrı logo dizileri tutun. Varsayılan olarak tüm sektörlerdeki en tanınmış logolarınızı kullanın. Bileşenin prototipini hazırlarken bir logo oluşturucu, maketler için yer tutucu logolar üretebilir; böylece müşteriler gerçek logolarının kullanımını onaylamadan önce düzeni test edebilirsiniz.
Pratik bir kısıt: Bir logo çubuğunu ikna edici şekilde doldurmak için segment başına en az dört logoya ihtiyacınız var. Logosunu göstermeye razı yalnızca iki sağlık müşteriniz varsa çubuk seyrek görünür. Müşteri tabanınız büyüyene kadar sektörle alakalı sertifikalar veya iş ortaklığı rozetleriyle destekleyin.
Müşteri yorumları
Referansları veri nesneleri olarak yapılandırın: alıntı metni, kişi adı, unvan, şirket, şirket logosu, isteğe bağlı vesikalık fotoğraf. Tüm referansları merkezi bir depoda saklayın. Her birini sektör, şirket büyüklüğü ve kullanım senaryosuyla etiketleyin. Kişiselleştirme motorunuz her segment için en alakalı referansı seçer.
Güçlü bir B2B müşteri yorumu ayrıntılar içerir. İşe alıştırma sürecinin ne kadar hızlandığını (kendi rakamıyla) söyleyen bir müşteri, "harika ürün" yorumundan daha etkilidir. Sektöre özel müşteri yorumları toplarken, müşterilerden adlarını vermeye razı oldukları ölçülmüş bir sonuç isteyin ve tam ifade için yazılı onay alın.
Vaka Çalışması Kartları
Aynı ilke ana sayfanızdaki veya ürün sayfalarınızdaki vaka çalışması önizlemeleri için de geçerlidir. Vaka çalışması kartını yeniden kullanılabilir bir bileşen olarak tasarlayın: öne çıkan görsel, şirket adı, sektör etiketi, tek satırlık sonuç ve tam vaka çalışmasına bağlantı. Hangi kartların görüneceğini ziyaretçinin segmentine göre değiştirin.
Erken verilmesi gereken bir tasarım kararı: kişiselleştirilmiş vaka çalışmaları varsayılan kartlarınızın yerini mi almalı, yoksa başa mı eklenmeli (önce gösterilip ardından genel vaka çalışmaları mı gelmeli)? Başa eklemek daha güvenlidir, çünkü ziyaretçiler en geniş kapsamlı kanıtlarınızı yine görür, ancak en alakalı olanlar önce çıkar.
Navigasyon Kişiselleştirmesi
Çoğu ekip sayfa içeriğini kişiselleştirir ve navigasyona dokunmaz. Oysa navigasyon her sayfada görünür; bu yüzden oradaki küçük bir değişiklik ziyaretçiyi oturum boyunca takip eder.
- Dinamik kaynak bağlantıları: Genel bir "Kaynaklar" açılır menüsünü sektöre özel öğelerle değiştirin. Sağlık sektöründen gelen ziyaretçiler "HIPAA Uyumluluk Rehberi" ve "Sağlık Sektörü Vaka Çalışmaları" görür. Fintech ziyaretçileri "SOC 2 Belgeleri" ve "Finansal Hizmetler ROI Hesaplayıcısı" görür.
- Navigasyonda kişiselleştirilmiş CTA'lar: Birincil navigasyon CTA'sı segmente göre değişebilir. Kurumsal ziyaretçiler "Satışla Görüşün" görür. KOBİ ziyaretçileri "Planları Görüntüleyin" görür. Fiyatlandırma sayfasını daha önce ziyaret etmiş geri dönen ziyaretçiler "Kuruluma Başlayın" görür.
- Vurgulanan bölümler: Ziyaretçinin segmentiyle ilgili menü öğesine hafif bir vurgu ekleyin. Bir üretim şirketi ziyaret ediyorsa, ürün açılır menünüzde "Üretim Çözümleri"ni vurgulayın. Bunun için "Yeni" rozeti kullanmaktan kaçının; yeni değil ve geri dönen ziyaretçiler bunu fark eder.
Bir uyarı: Navigasyon yapısının kendisini değiştirmeyin. Öğelerin yerini değiştirmek veya segmentlere göre bölümleri gizlemek, özellikle her şeyin nerede olduğunu hatırlayan geri dönen ziyaretçiler için kafa karışıklığı yaratır. Navigasyon mimarisini değil, navigasyon öğelerinin içindeki içeriği kişiselleştirin.
Değiştirilebilir Bölümler İçin İçerik Bloğu Mimarisi
Sayfayı, her biri tek başına değiştirilebilen bir dizi içerik bloğu olarak ele alın. Her bloğun sabit bir arayüzü (boyutlar, iç boşluk, tipografi ölçeği) ve değişken içeriği vardır. Siteniz zaten bir bileşen kütüphanesi üzerinde çalışıyorsa, bunun çoğu mevcuttur; yalnızca içeriğin koda gömülü olmak yerine verilerden gelmesini sağlamanız gerekir.
Blok Arayüzünü Tasarlamak
Her içerik bloğu standart bir şartnameye uymalıdır:
- Sabit boyutlar: Kapsayıcının genişlik ve yükseklik sınırları içerik tarafından değil, sayfa düzeni tarafından tanımlanır. Bu, kişiselleştirilmiş içeriğin sayfa akışını bozmasını önler.
- Tipografi ölçeği: Başlıklar H2 kullanır. Gövde metni paragraf kullanır. Madde işaretleri standart liste stilini kullanır. Hiçbir varyant standart dışı yazı boyutları getirmemelidir.
- Boşluk kuralları: İç ve dış boşluklar içerik tarafından değil, blok kapsayıcısı tarafından kontrol edilir. Bu, bloğu hangi içerik doldurursa doldursun görsel ritmin tutarlı kalmasını sağlar.
- İçerik sınırları: Her metin alanı için azami karakter sayısı tanımlayın. "Başlık: en fazla 60 karakter. Açıklama: en fazla 150 karakter." Bu, kişiselleştirilmiş içeriğin kapsayıcılardan taşmasını önler.
Blok Türleri
Kişiselleştirme ihtiyaçlarınızı karşılayan standart blok türlerinden oluşan bir kütüphane oluşturun:
- Metin + Görsel bloğu: Bir tarafta metin, diğer tarafta görsel bulunan bölünmüş düzen. En çok özellik vurguları ve fayda ifadeleri için kullanılır.
- İstatistik bloğu: Büyük rakamlar ve destekleyici metinle birkaç temel metrik. Metrikleri segmente göre değiştirin; örneğin kurumsal şirketler için çalışma süresi oranınızı, KOBİ'ler için tipik kurulum sürenizi gösterin. Yalnızca kanıtlayabileceğiniz rakamları kullanın; şüpheci bir alıcının ilk kontrol ettiği şey istatistik bloğudur.
- Müşteri yorumu bloğu: Alıntı, kaynak bilgisi ve isteğe bağlı şirket logosu. Tek blok, birçok içerik varyasyonu.
- Karşılaştırma bloğu: Özellik karşılaştırması veya önce/sonra sunumu. İçerik değişir, düzen sabit kalır.
- CTA bloğu: Başlık, destekleyici metin ve buton. Mesajı ve hedef sayfayı segmente göre değiştirin.
Yeni bir kişiselleştirilmiş bölüme ihtiyaç duyduğunuzda, sıfırdan tasarlamak yerine mevcut bloklardan oluşturursunuz; böylece yeni bir varyant, tasarım ve mühendislik talebi değil, bir içerik işi haline gelir.
Sektöre Özel Tasarım Örnekleri
Aşağıdaki örnekler temsilidir: bir B2B SaaS ana sayfasının yukarıdaki kalıpları kullanarak üç sektör segmenti için nasıl değişebileceği.
Sağlık Segmenti
- Hero: HIPAA uyumluluğunu ve hasta verisi korumasını vurgulayan metin değişimi. Alt başlık belirli sağlık düzenlemelerine atıfta bulunur.
- Sosyal kanıt: Logo şeridi sağlık sektöründeki şirketleri (hastaneler, sağlık teknolojisi girişimleri, ilaç firmaları) gösterir. Bir hastanenin bilgi işlem direktöründen referans.
- İçerik bloğu: Genel "Nasıl Çalışır" bölümünü, EHR entegrasyonunu ve uyumluluk kontrol noktalarını gösteren sağlık sektörüne özel bir iş akışıyla değiştirin.
- CTA: Genel "Daha Fazla Bilgi" yerine "Platformumuzun HIPAA Gerekliliklerini Nasıl Karşıladığını Görün" (ürün adınızla).
Finansal Hizmetler Segmenti
- Hero: Metin güvenlik, denetime hazırlık ve mevzuata uyumla açılacak şekilde değiştirilir. Başlık SOC 2'ye ve finansal verilerin korunmasına atıfta bulunur.
- Sosyal kanıt: Logo bandında bankalar, fintech şirketleri ve sigorta firmaları yer alır. Bir finans kuruluşundaki CISO'dan bir müşteri yorumu.
- İçerik bloğu: İstatistik bloğu, genel ürün metrikleri yerine çalışma süresini, şifreleme standartlarını ve sahip olduğunuz sertifikaları gösterir.
- Navigasyon: "Kaynaklar" açılır menüsünde uyumluluk belgeleri ve güvenlik teknik dokümanları öne çıkarılır.
Üretim Segmenti
- Hero: Genel ofis fotoğrafları yerine fabrika/endüstriyel görsellerle içerik bloğu değişimi. Başlık operasyonel verimliliğe ve tedarik zinciri görünürlüğüne odaklanır.
- Sosyal kanıt: Bir üretim şirketindeki operasyon direktöründen, zaman tasarrufunu ve hataların azalmasını vurgulayan bir müşteri yorumu.
- İçerik bloğu: SaaS odaklı bir özellik listesini üretime özel kullanım senaryolarıyla değiştirin: envanter takibi, kalite kontrol, tedarikçi yönetimi.
- CTA: Sektöre özel bir vaka çalışması sayfasına doğrudan bağlantı veren "Üretim Vaka Çalışmasını Görün".
Varyantlar Arasında Marka Tutarlılığını Korumak
Birkaç kişi bir yıl veya daha uzun süre boyunca varyant oluşturduğunda site kaymaya başlar: birbirinden biraz farklı düğme stilleri, kimsenin onaylamadığı bir üslupta yazılmış bir başlık, farklı bir kütüphaneden alınmış bir stok fotoğraf. Tek bir varyantı kimse fark etmez. Ziyaretçiler toplamını fark eder. Koruma kuralları bunu önler.
Tasarım Koruma Kuralları
Tasarım sisteminiz, kişiselleştirilmiş varyantlarda neyin değişip neyin değişemeyeceğini tanımlamalıdır:
- Sabit öğeler: Logo yerleşimi, ana marka renkleri, tipografi hiyerarşisi, üst ve alt bilgi düzeni. Bunlar varyantlar arasında asla değişmez.
- Değişken öğeler: Başlıklar, gövde metni, görseller, müşteri yorumları, CTA metni. Bunlar blok sisteminin sınırları içinde serbestçe değişir.
- Sınırlı öğeler: Vurgu renkleri (sınırlı palet), görsel stili (tanımlı fotoğraf yönergeleri), ikon setleri (onaylı bir kütüphaneden). Bunlar değişebilir, ancak yalnızca belirlenmiş sınırlar içinde.
Ton ve Üslup Yönergeleri
Şu sorulara yanıt veren tek sayfalık bir kişiselleştirme stil rehberi yazın (tam bir marka kitabı değil):
- Varsayılan üslubumuz nedir? (ör. “Profesyonel ama samimi. Doğrudan, satış ağızlı değil.”)
- Ses tonu segmente göre nasıl uyarlanıyor? (ör. "Kurumsal: daha resmi, uyumluluğa ve ölçeğe atıfta bulunun. KOBİ: daha samimi, hızı ve sadeliği vurgulayın.")
- Hangi ifadeleri her zaman kullanıyoruz? Nelerden kaçınıyoruz?
- Varsayılan mesajımızdan kabul edilebilir en büyük sapma ne olmalı?
Üç aylık denetimler sırasında kişiselleştirilmiş metinleri bu yönergelere göre gözden geçirin. Küçük ton kaymaları zamanla birikir. Bugün markadan biraz sapmış bir varyant, bir yıl içinde tanınmaz hâle gelir.
Görsel Kalite Kontrol Süreci
Herhangi bir kişiselleştirilmiş varyant yayına girmeden önce, üç ekran genişliğinde (masaüstü, tablet, mobil) ekran görüntüsünü alın ve varsayılan deneyimle yan yana karşılaştırın. Şunları kontrol edin:
- Metin taşması veya kesilmesi
- Görsel en boy oranı bozulması
- Renk kontrastı sorunları (özellikle değiştirilen arka plan görsellerinde)
- Boşluk tutarsızlıkları
- CTA butonunun boyutu ve konumu
Mümkün olan yerlerde bunu otomatikleştirin. Playwright'ın ekran görüntüsü karşılaştırması veya Percy gibi görsel regresyon araçları, varyantlar arasındaki düzen farklılıklarını canlıya çıkmadan önce işaretleyebilir. Varyantlar yayına girdikten sonra onları diğer her değişiklik gibi test edin; 90 günlük kişiselleştirme test yol haritamız testlerin nasıl sıralanacağını ele alıyor.
Sonraki Adımınız
Mevcut web sitenizi yukarıda anlatılan blok sistemine göre denetleyin. Ana sayfanızın, ürün sayfanızın ve fiyatlandırma sayfanızın hangi bölümlerinin zaten bağımsız bloklar olarak yapılandırıldığını, hangilerinin çevresindeki içeriğe sıkı sıkıya bağlı olduğunu belirleyin. Zaten modüler olan bölümler, en hızlı kişiselleştirme fırsatlarınızdır. Bağlı olanların güvenilir şekilde kişiselleştirilebilmesi için önce yeniden düzenlenmesi gerekir. Modüler olanlarla başlayın, ardından geri kalanını bölüm bölüm yeniden yapılandırın. Bloklar hazır olduğunda, Markettailor'ın segmentasyon özelliği her şirketin hangi varyantı göreceğine sektöre, büyüklüğe ya da zaten kullandığınız hesap listelerine göre karar verebilir. Segment tanımlarının kendisi için dönüşüm getiren firmografik segmentler yazısına bakın.