Pazarlamacılar için landing page tasarlama platformu olarak konumlanan Unbounce‘un kreatif direktörü Oli Gardner, dönüşüm odaklı tasarımın (DOT) önde gelen savunucularından. Gardner’a göre, bir websitesinde DOT’u rehber alarak yaratacağınız her sayfa, hesap verebilir içerik olarak tanımlanabilir. Bu da her bir sayfanın ziyaretçilerinin müşteriye dönüşüm sürecindeki etkisinin ve başarısının ölçülebilmesi anlamına gelir.
Kullanıcı deneyimi ekseninde tasarım çoğu zaman problem çözmek demektir. Yani tasarımcıların odaklandığı problemlerin çoğu kullanıcı-odaklıdır. Söz konusu problem çözmek olduğunda hesaba katılması gereken diğer konu ise iş/ürün odaklı sorunları çözmektir.
Dönüşüm odaklı tasarımın varoluş nedeni, tasarımcıların, tekil bir iş hedefini gerçekleştirecek deneyimler yaratmasına yardımcı olmaktır. Bu, kullancının başka bir sayfaya daha tıklamasını sağlamak kadar basit de olabilir, sayfa üzerinde satışı kapamak ya da kullanıcıyı kayıt olmaya ikna etmek kadar kompleks de.
DOT, bir sayfanın ziyaretçileri müşterilere dönüştürme konusundaki eksikliğini tespit ederek; tasarımın başarılı ya da başarısız olduğunu belirler. Tasarım için söylendiği gibi, DOT da sanat ile (görsel kullanımı, kullanıcı deneyimi ve içerik tasarımı) bilimin (sonuçların ölçümü ve analizi) birleşiminden oluşur.
Oli, dönüşüm odaklı tasarımın 7 prensibini şu şekilde tanımlıyor:
- Kapsülleme
- Kontrast
- Yönlendirme ipuçları
- Beyaz alan kullanımı
- Aciliyet ve nadirlik
- Deneme opsiyonu
- Sosyal kanıt
Şimdi bu prensipleri örnekler eşliğinde açıklayalım.
DOT’un 7 Prensibi
1- Kapsülleme
Kapsülleme en önemli içeriği nasıl ambalajladığınızla ilgilidir. Amaç, kullanıcıya bu içeriğin onun için önemli olduğunu sinyalize etmektir. İçerik öğesi, istediğiniz aksiyonu tetikleyecek bir buton ya da kayıt olmaya yönlendiren bir CTA (call-to-action) ise onu büyük ve dikkat çekecek şekilde tasarlayın.
Author/Copyright holder: Free Stock Images. Copyright terms and licence: CC BY 2.0
2- Kontrast
Açık kırmızı renk bir arkaplanın üzerine kocaman kırmızı bir buton koyduğunuzda zeminden ayrışması mümkün olmaz.
DOT’ta seçtiğiniz renkten çok arkaplanla oluşturacağı kontrast önemlidir.
Eğer buton diğer öğelerin içine karışırsa, onu kimsenin görmesi mümkün olmaz. Öte yandan kontrast kullanarak istediğiniz öğeleri ön plana çıkarabilirsiniz. Siyah üstü beyaz ya da kırmızı üstü yeşil gibi… Peki, üst seviyede kontrast yaratmak için hangi renkleri eşleştirmelisiniz? Bunun için aşağıdaki renk yıldızından faydalanabilirsiniz. Karşılıklı olarak konumlandırılan renkler, kombin olarak kullanıldığında en yüksek kontrastı yaratırlar (Gratis‘in neden mor üstünde sarı renk logo kullandığını buradan anlayabiliriz).
3- Yönlendirme ipuçları
DOT prensiplerine göre ekranlarınızı, kullanıcıdan beklediğiniz aksiyonları almaları için onları yönlendirecek şekilde tasarlamalısınız. Oklar kullanarak belli bölgelere vurgu yapabilir ya da farklı yöntemlerle odak noktası belirleyebilirsiniz. Örneğin; sayfanızda fotoğraf yer alıyorsa, görüş açısını CTA’ya yönlendirecek şekilde kullanabilirsiniz.
Aşağıdaki fotoğrafı ele alırsak; CTA’nın bebeğin göz çizgisine yerleştirilmesi, kullanıcıyı bir sonraki adımının ne olması gerektiği konusunda yönlendirecektir.
4- Beyaz alan kullanımı
Kullandığınız beyaz alan miktarıyla sitenizdeki sıkışıklık hissiyatı ters orantılı olarak çalışır. Ne kadar temiz ve ferah bir tasarımınız varsa, kullanıcının nerede aksiyon alması gerektiğini anlaması da o kadar kolaylaşır. Bu şekilde anahtar değerindeki tek bir mesajı kullanıcıya iletmek de kolaylaşır.
Beyaz alan kullanımının gücü konusunda Google anasayfadan daha iyi bir örnek düşünmek mümkün değil.
5- Aciliyet ve nadirlik
Eğer kullanıcının hemen şu an aksiyon almasını bekliyorsanız, ona bunun için bir neden vermelisiniz. Psikoloji bilimi, insanların karar alma süresini kısıtlayarak onları aksiyon almaya yönlendirebilirsiniz der. Bunu, kaynağı kısıtlı hale getirerek (Bu fiyattan satın alabileceğiniz son 2 koltuk.) ya da zamanı sınırlandırarak (Gün içinde teslimat için 15 dakika içinde sipariş vermelisiniz.) yapabilirsiniz.
İdeal olanı bu mesajları CTA’ya olabildiğince yakın şekilde konumlandırmaktır.
Aşağıdaki Amazon örneğinde de göreceğiniz gibi, indirimli fiyata sahip ürünlerin %35’i şimdiden satın alınmış. Mesaj çok net: “Şimdi al ya da şansını kaybet!”
6- Deneme opsiyonu
Süpermarkette yapılan ürün tadım aktiviteleri, üreticinin cömertliğinden kaynaklanmamaktadır. Amacı, sizin satın alma kararını vermenizi kolaylaştırmaktır. Dijital ortamda kullanıcıya bir yudum kola ikram etmek ya da bir dilim peynir tattırmak mümkün değil elbette. Ancak bu fikrin dijital versiyonunu kurgulamak mümkün.
Kapsamlı bir raporun giriş sayfalarını, bir kitabın içinden alınmış örnek bir bölümü ya da eğitim videonuzun 5 dakikasını ücretsiz olarak inceleme şansı sunduğunuzu düşünün.
Altında yatan fikir basit: Müşterilere ürününüzün yatırım yapmaya değer kalitede olduğunu göstermek. Yatırımın maddi olması gerekmez, e-posta adresini paylaşmak da kullanıcı açısından bir yatırımdır.
The Reading Room isimli firmanın sattığı kitapların bazı bölümlerini ücretsiz olarak önizleme imkanı sunması bunun en basit örneklerinden biri.
Author/Copyright holder: Unknown. Copyright terms and licence: Fair Use
7- Sosyal kanıt
“Satışı bağlamanın” anahtarlarından biri de kullanıcının müşteriye dönüşmek için ihtiyaç duyduğu güven duygusunu sağlamanızdır. Bu güveni sağlamanın en emin yollarından biri sosyal kanıt sunmaktır. Bu da diğer kullanıcı ya da müşterilerin ürün ve servisleriniz hakkında ne düşündüğünü paylaşmanız şeklinde özetlenebilir.
Bu geribildirimler yıldızlı puanlama şeklinde de gösterilebilir, testimonial formatında da. Legal and General’in websitesinde paylaşılan bir yorumu örnek olarak gösterelim:
Başarılı bir DOT örneği – Wistia.com
Wistia’nın landing page’ine bakalım ve DOT’un hangi prensiplerini uyguluyorlar görelim.
“Create account” butonu dikkat çekecek şekilde kapsüllenmiş ve zeminle arasındaki kontrast hayli belirgin. Ekranda çok yoğun bir içerik yok; bu da yeterli beyaz alan kullanımına izin veriyor ve kullanıcının yolunu bulmasını kolaylaştırıyor (form doldurmak dışında bir aksiyon alınacağını düşünmek pek mümkün değil). Ayrıca satın almadan önce deneme imkanı da sunuluyor: “Tüm paketlerimiz 2 haftalık ücretsiz deneme hakkı sunar, böylece bize tek bir kuruş ödemeden önce mutlu olup olmayacağınızdan emin olursunuz.”
Aslında bu örnekte eksik olan şeyler sadece sosyal kanıt ve nadirlik unsuru. Tabii tek bir ekranda tüm prensipleri birden uygulamak gibi bir zorunluluk yok. Önemli olan, bunlardan yeteri kadarını kullanmak ve kullanıcıya harekete geçecek motivasyonu sağlamak.
Wistia örneğini paylaşmamızın sebebi ise, Hubspot tarafından 2015’in en iyi landing page‘i seçilmesi.
Hadi toparlayalım
DOT yeni bir tasarım yaklaşımı ve Unbounce‘dan Oli Gardner bu yaklaşımın önde gelen uzmanlarından. Öte yandan, DOT’un sağlamayı hedeflediği şey yeni değil. Websitesi sahipleri ve firmalar dönüşümün peşindedir, iş hedeflerinin en başında çoğu zaman bu gelir.
Adobe Creative Cloud aboneliklerinde öğrencilere ve öğretmenlere özel %60 indirim fırsatlarını kaçırmayın.Tasarımın dönüşüm prensiplerine uygun olması ve kullanıcıya estetik olarak çekici gelmesi, ürünün kabul görmesi ya da beğenilmesi açısından önemlidir ancak tek başına yeterli değildir. Ürün kullanıcının gerçekten varolan bir problemini çözmeli ve hayatına değer katmalıdır ki başarılı olabilsin. Aksi takdirde kimse bir ürüne ya da hizmete para vermez.
Referanslar
- Ana görsel: Author/Copyright holder: Hubspot. Copyright terms and licence: All rights reserved. Img
- The 7 Principles of Conversion Centered Design for Landing Pages, Oli Gardener
- 16 of the Best Landing Page Design Examples You Need to See in 2017
