Önsöz

İnternet, reklamcıklık açısından önemli bir mecra. Üstelik geleneksel medyanın aldığı yolu kısa sürede katetmiş bir mecra. Ben de bu mecraya sonradan dahil olmuş bir tasarımcı. Rakip çok ama başarı imkansız değil. Başarının sırrı ise dönüşüm odaklı tasarımda...

İşte bu kitap bu mecrada “Dönüşüm mer-kezli tasarımcı olmak” için yapılmış araştırmala-rımdan bir derleme. Benim için verimli olmuş bu sürecin sizin için de ultra keyifli olması dileğiyle... Herşey Tasarımca Olsun...

1

İçindekiler

BÖLÜM 1Tasarımcı için açılış sayfası nedir?Dönüşüm Odaklı Tasarımın 7 İlkesi Tasarım Kapsülleme Kontrast ve Renk Yönlü İpuçları Boşluk Psikoloji Aciliyet ve Kıtlık Satın Almadan Önce Deneyin Sosyal KanıtDönüşümsüz Tasarımın 4 İlkesiDönüşüm Merkezli 3 Açılış Sayfası İnceleme

BÖLÜM 2Banner Tasarım Nedir?Banner Tasarımda 7 Kural Yer Boyut Renk Font Yönlendirme Başlık Aciliyet

BÖLÜM 3A / B Testi Genel Bakış

KaynakçaSonuç

2

Bölüm 1

Tasarımcı İçin Açılış Sayfası Nedir?

Dönüşüm hedefi tamamlamak için nasıl bir tasarım kullanarak, bir ziyaretçiyi ikna edersiniz? Etkili bir açılış sayfası tasarımı için birçok hareketli parça olmasına rağmen, en çok gözden kaçan şey ne? Ce-vap veriyorum: 1- CCD İlkeleri, 2- Tasarım.

3

Unbounce Kurucu ve Kreatif Direktörü Oli Gardner’a göre CCD, özellikle tek bir iş ve hedefe ulaşmak için deneyimleri tasarlamayı hedefleyen bir disiplindir. O belirli bir eylemi tamamladıktan sonra dönüşümlerini artırmak için cihazlar olarak ikna edici tasarım ve psikolojik tetikleyicileri kulla-narak doğru ziyaretçi arar.

CCD’nin kalbi de açılış sayfasıdır. Yani açı-lış sayfası bir web tasarımı değildir. Bir anasayfa hiç değildir. O bağımsız, kampanyaya özel bir web sayfasıdır. Onun niyeti tek bir eylemi tamamlamak için ziyaretçi elde etmektir. Flint McGlaughlin Mar-keting Experiments oldukça sık uzayan sayfa tasa-rımlarının bu düşünce dizisi rehberleriğinde oluştu-rulan tasarım olmadığını söylüyor.

Dikkat oranı (bir kampanya için her zaman 1) bu sayfada amaçlanan eylemlerin sayısına bir sayfada etkileşim noktaları (linkler) oranıdır. Bir ana sayfasında bu 39 rahatsız edici eylemler ve 1 iste-nen eylem olduğunu düşünürsek dikkat oranı 1/40 olur. Halbuki odaklanmış bir açılış sayfası 1/1 dik-kat oranına sahiptir. İşte bu oranı tutturmak için ziyaretçiyi istenilen alana doğru çekecek tasarım ilkeleri vardır. Sabredin, birlikte inceleyeceğiz...

4

Kapsülleme

Bu teknik sayfada ziyaretçi ilgisini hedefte toplamak için yapılan klasik, vazgeçilmez ve de çok önemli bir tekniktir. Ziyaretçi için zaman önemlidir ve detaylar sıkıcıdır. Kapsülleme, açılış sayfaların-da, ziyaretçinin yorulmaması için hedefin pencere-lerden göz kırpması gibidir, ilgiyi üstüne çekmesini iyi bilir. Ziyaretçiyse buna asla kayıtsız kalamaz. En kısa sürede buluşma gerçekleşir. Süper...Hem ziyaretçi mutlu hem de siz...

Dönüşüm Odaklı Tasarımın Yedi İlkesi

A) Tasarım

5

Resim 1

Resim 2

6

Kontrast ve Renk

İyi dönüşüm merkezli bir tasarımcı açılış sayfasında bir star bulundurmanın gerekliliğini bilir ve her starın farkınıda ortaya koymak ister. Kimdir star? Evet bu star, ziyaretçiyi hedefe ulaştıracak düğmelerden başkası değildir. Peki nasıl fark yara-tır? Tabi ki alakasızlığıyla... Örneğin; sayfa kırmızı ise düğme yeşil olma-lıdır. Böylece hem düğme kendini ilk bakışta göste-recek hem de size absürtde gelse sayfanın renk bütünlüğü sağlanmış olacaktır. Bilinmelidirki kont-rans renkler tamamlayıcı renklerdir.

7

Resim 3

8

Yönlü İpuçları

Cömert olun. Amacınız ziyaretçiyi oyala-mak değil , aksine sayfanızı ziyaretçinin en kısa sürede keşfetmesine ve sizin hedefinize ulaşma-sına yardımcı olmak. Bu nedenle sayfanıza ıpuçları koyun ve ziyaretçiyi siz yönlendirin.Nasıl mı? Oklar ve kullanılan fotoğraflarla... Hedefi ziyaretçiye direkt oklarla işaret ede-bilirsiniz. Onca metin arasında ziyaretçiye “Ee şim-di ne olacak” dedirtmemek için bu teknik bir fırsat... Kullandığınız fotoğrafın seçimi de ikinci bir yol. Fo-toğrafın yönü, bakışları, vs. Nereye bakmakta ve neyi işaret etmekte...Bunu yaparken tabi gözün düşündüren gücünden yararlanmasını bilmeniz la-zım.. Ziyaretçinize nereye bakmasını, şimdi neyi okumasını yada nereye gitmesini istiyorsanız bu teknik sizin başarı ıpuçlarınız...

9

Resim 4

10

Gözün düşündüren gücü

Bir göz izleme çalışmasında, aynı bebeğin farklı iki açısı kullanılarak metin üzerindeki etkisi saptandı. İlk örnekte bebek üzerinde göz gezdirilken, ikinci örnekte telkin gücü kendisini tam anlamıyla gösterdi ve bebeğe bakan gözlerin slogana ve ürüne doğru gittiği saptandı. İşte biz de tam bun agözün düşündüren gücü diyoruz. Malzemenin doğru ve bilinçli kullanımı diyoruz.

11

Resim 6

Resim 5

12

Boşluk

Açılış sayfasının günlük hedeflediği ziyaretçi sayısının yüzlercesi ki bunlar bir fiyat listesinin nasıl isteneceğini veya nasıl satış yapılacağını kolayca yapamayanlardır, bu kullanıcılar için siteye yönelik yapılan tanıtım manipülasyonları anlamsızdır. Kullanıcı bu sayfada açık bir şekilde ne yap-acağını görmek ister. Unutmayın ki bir açılış say-fasına yalnızca ana sayfadan ziyaretçi gelmez, an-cak ürün sayfası yorumları, kişiler veya etkileşimde olunan yerlerden de gelir.Bu bağlamda, dönüşüm yolunun yapımı biraz daha karmaşık hale gelir. Böylece, açılış sayfanızın geçiş sayfası olması gerekir ve aynı zamanda kendi hedef kullanıcılarına yönlendirmesi gerekir. Sizde kafası karışan ziyaretçinizi daha fazla yor-mayın...Tasarımınıza her türlü ihtimali cevaplayabi-lecek boşluklarla nefes aldırın...

13

Resim 7

14

A) Psikoloji

Aciliyet ve Kıtlık

Şimdi satın al! Kaçırmayın! Biz bu cümleleri duymaya alıştık. Aciliyet Tabloları ziyaretçiyi alıma zorlamak için kullanılır.Aciliyet ,kıtlık. Çok etkili bu teknikten bahsedelim şimdi. AciliyetBu ziyaretçinin satın alma durumunu hızlandırmak için zamanın sonlu vurgusudur. Kişi bir an önce alı-mı yapmazsa bir daha yapma fırsatı bulamayacağı fikrine kapılmalıdır. Kıtlık “Son 2 ürün” bilgisi mesela. Hemen yanın-daki diğer ürünnün tükendiği haberi... Bunlar ziyaretçinin ürünün azlığından şüphe duymasına sebep olacak etiketler... Örneğin Ticketmaster bilet satın alma aci-liyetini artırmak için bir yol buldu. Ve ziyaretçisine koltuk seçtikten sonra, yalnızca bir defalık fırsat süresi verdi ve bu süreyi sayfasında gösterdi. Kıt-lık kavramının doğru kullanımıyla da biletin o süre sona erdikten sonra satıldığını söyledi. Bu ziyaretçi-nin fırsatı kaçırma korkusununun artmasına sebep oldu. Ve ikinci bilet seçiminde aynı kişinmin bileti satın aldğı saptandı. İşte Ticketmaster’ın başarısı...

15

Resim 8

16

Satın Almadan Önce Deneyin

Biz insanlar süpermarkette, manavda vs. beğendiğimiz ürünü almadan önce deneriz. Bu ka-bul edilebilir bir hırsızlık :) Bir dönüşüm merkezli pazarlamacı olarak, ziyaretçilerin bir satın alma / indirmek için taahhüt-te bulunmadan önce onlara önizleme fırsatı sun-mak pazarlamacı ve tasarımcının güven aşılaması için gözden kaçırmaması gereken bir detay. Bunu ziyaretçiden asla esirgemeyin, siz açık olursanız ziyaretçide cömert olacaktır...

17

Resim 9

18

Sosyal Kanıt

Sosyal kanıt genelllikle belirli bi rkalabalığın istatistik ve eylemleri ile bildirilir ve bu ölçüde ziya-retçide “bende” faktörüarttırmayı sağlar. 1969 yılında S. Miligran, L. Brickman ve L. Barkowitz tarafından bir deney gerçekleştirilir. Newyork sokaklarında bir adam tek başına doğru yukarıy baktırılır. Daha sonra aynı eylem beş kişilik bi grup tarafından yaptırılırken, daha sonra da 18 kişilik bir grupla denenir. Sonuç: Sokaktan geçen-ler tek kişinin eylemine kayıtsız kalırken, beş kişi-lik grubunki sokakta merak yaratır. On sekiz kişilik grubunkinde ise 400 aşkın kişinin aynı reaksiyonda bulunduğu saptanır. Halk arasında sürü psikolojisi denilen şey-den başkası olmayan bu psikolojik eylem, bugün tasarımda yardımına başvurulan bir ilke.

19

Resim 10

20

-Vahşi arka plan renkleri -Cafcaflı metinler -Abartılı görsel süslemeler -Süresi uzun animasyon veya video

Örnek Çalışma Credo Mobile, San Francisco merkezli, sos-yal bilince sahip cep telefonu şirketi. Yeni bir e-pos-ta kampanyası için bir açılış sayfasının performan-sını geliştirme kararı aldı. Resim 1’ deki varolan taslakları üzerinden iyiliştirmeye giderek Resim2’ deki taslağa ulaştı. Sonuçlar çarpıcı! İkinci tasarım, eski tasarımdan %84 daha fazla dönüşüm sağlayarak bu radikal değişikliğide haklı çıkarmış oldu.

Dönüşümsüz Tasarımın Dört İlkesi

21

Resim 11

Resim 12

22

Örnek Çalışma Yine aynı tasarımlar üzeirnde yapılan göz iz-leme çalışmasında, göz hareketleri sarı hatla gös-teriliyor. Renk ve kontrastın parlak bloklar ile çizilmiş yerler-de gözler bir süre duruyor. Renklin yoğunluğu aynı sayfada birçok alana ilgi yayılmasını sebep olduğu yine çalışmada saptanan bir durum. Bu görsel “gü-rültü” ise yeşil çağrı butonunun gözardı edilmesine sebep oluyor. Buna karşılık, yeni tasarımda kontrollü cep telefonu,çağrı düğmesi ve başlık dikkat çekmek is-tenmiş, bu sepeble olabildiğince beyaz boşluklardan faydalanılmıştır. Yapılan taramayla da hedeflendiği gibi gözün sadece bu üç ayrıntı üzerinde yoğunlaş-tğı saptanmıştır.

23

Resim 13

Resim 14

24

Dönüşüm Merkezli 3 Açılış Sayfası İnceleme

Form kapsülleme Zıtlık Boşluk Sosyal kanıt Yön İpuçları Burada yönlü işaretin iki formunu fark ede-ceksiniz. İlk soldan sağa bakışları ile doğrudan kadı-nın hattını kullanır. Bakışı ziyaretçide farklı güdüler uyandırabilir nitelikte. Kişide üzgün olduğu ve daha iyi bir yaşam arzusu duyduğu hissi de uyandırabilir, ziyaretçinin doğrudan sloganı okumasına da sebep olacaktır. İkincisi düğmeyi işaret eden küçük bir ok...Küçük detaylar büyük başarı getirecektir.

25

Resim 15

26

Form kapsülleme Zıtlık Boşluk Yön İpuçları Bu sayfamızda okla sitenin haritası çizilmiş desek yanlış olmaz. “Ücretsiz bir demo için bize katılın” diyen ok bizi forma, form alanındaki zıtlığı ile tüm dikkati üzerine çeken düğme de “ücretsiz demo kitap” için bizi alıma yönlendirmekte. Sosyal Kanıt Şablon açıklayıcı bir başlık ile (altında video ve müşteri logoları) sosyal kanıt unsurlarını tasa-rımına dahil ederek üstünlüğünü kabul ettirmeye çalışır, bu da dikkatinizden kaçmasın.

27

Resim 16

28

Zıtlık Boşluk Sosyal Kanıt Kapsülleme Bu saçılış sayfamızın düğmesi biraz risk alı-narak sitenin en altında da kullanılmış fakat ziya-retçiyi ona götürücek kritik bilgiler konumlandırıla-rak verilmiş. Zİyaretçinin sayfayı inceledikten sonra tekrar yukarı çıkmazk zorunda kalmayışı güzel bi jest. Yönlü İpucu İpucunu görebildiniz mi? İşret Eyfel Kulesi’nin ta kendisi ve düğmenin otutulduğu yer. “Eyfel Kulesi’ne gitmek için tıkla” der gibi... Mükemmel değil mi?

29

Resim 17

30

Bölüm 2

Banner Tasarım Nedir?

İnternet üzerinde gösterilen banner rek-lamlar, birçok markanın başvurduğu reklam yön-temlerinden biri. Kullanıcıların bu reklamlara olan yaklaşımı her ne kadar son yıllarda değişse de yine de bu sektör üzerine halen üzerine çok fazla ya-tırım yapılmakta. Yapılan araştırmalar kullanıcıların %60’ının banner reklamlara dikkat etmediğini gös-terirken, %14’ünün de banner reklamlara tıklaya-rak, geri dönüş sağladığını ve bu kullanıcıların ürün-leri incelediğini gösteriyor. Yüzde 3’lük bir bölüm ise tıkladıkları reklamların gerekli olduğunu belirtiyor.

31

Başka bir araştırma ise site üzerindeki rek-lamların hangilerinin kullanıcıları rahatsız ettiğini ortaya koyuyor. Özellikle flash reklamlar kullanıcılar üzerinde negatif bir izlenim yaratırken, genel olarak online reklamların kötü bir izlenim bıraktığını söyle-yen yüzde 82’lik bir kesim bulunuyor. Son dönemlerde bu reklamların sayısının çok fazla artması nedeniyle kullanıcıların bu rek-lamlara olan duyarsızlığı ve ilgisizliği de artıyor. Tabii ki bu da markaların reklamlarına tıklanma sayısının azalmasına da doğal olarak neden olabiliyor.

32

Yeri

Sayfa içinde banner yerleştirirken, reklamın nereye yerleştirildiği önemli. Sayfa açıldığında kul-lanıcıların en rahat göreceği ve reklamı gördükten sonra eyleme geçeceği yerlere reklamları yerleş-tirmekte fayda var. Özellikle sayfa açıldığında ta-rayıcıda görünen ilk kısımda (yani sayfanın üst kıs-mında) yer alan reklamların daha görünür olduğu gözardı edilmememli.

33

Boyutu

Banner hazırlarken, dosya boyutuna da dik-kat edilmesi gerekiyor. Dosya boyutunun büyük olması, bannerın yüklendiği sayfanın yavaş açılma-sına, bu da ziyaretçinin sabrınını düşünecek olursak neden olacağı için dosya boyutlarını oldukça düşük tutmaya özen göstermek şart.İnternet hızı yavaş olan kullanıcılar, bu sayfaları zor açacakları için banner’ları da göremeyeceklerdir.

34

Başlık

İçerik hazırlarken birçok markanın en büyük sorunu başlık bulmak olabiliyor. E-posta pazarlama ve içerik pazarlamanın en önemli başrol oyuncula-rından olan yazı başlığı, söz konusu banner olunca yine kendini gösteriyor. Banner üzerinde kullanılacak başlıkların ilgi çekici ve eyleme yönlendirici olması gerekiyor. İlgi çekmeyen ve reklamla ilgisi olmayan yazıların yer alması, banner’ın geridönüşüm oranını düşürebilir.

35

Yönlendirme

Eylemden kastımız, call to action (CTA). Banner üzerinde yer verilen, “buraya tıklayın”, “ücretsiz dene”, “ücretsiz kargo” vb.eyleme çağrı butonlarıyla banner’ı gören kullanıcı-lar siteye ya da hazırlanan landing page’e yönlendi-rilebilir.

36

Font

Zor okunan bir yazı fontunun kullanımı da banner’ın geri dönüşüm oranının düşmesine neden olabilecek bir diğer faktör. Banner üzerindeki yazı-nın ilk bakışta rahat bir şekilde okunabilmesi olduk-ça önemli. Bir kez ziyaretçinin gözünden kaçtıktan sonra, kullanıcı tekrar o banner’ı okumaya çalışma-yacaktır.

37

Yönlendirme

Açılış sayfaları için renk ne kadar önemliyse, banner kullanımında da renkler o denli önemli.Banner’da kurumsal renklerin kullanımı, markayı akıllara getirmeli; banner’ın öne çıkmasını ve zor algılanmasını sağlayacak renkler burada kullanıl-mamalı. Banner’ın arka fonuyla, yazıların kontrast oluşturacak şekilde hazırlanarak, sunulan içeriği öne çıkarılmalıdır.. Renklerin psikolojik etkileri vazgeçilmez olunmalıdır. Örenğin turuncu gibi dikkat çeken ya da güven duygusu oluşturan mavi renkleri seçile-bilir. Kırmızı renk kullanımının negatif duyguları da uyarabileceğinden dolayı kırmızıdan sonra en çok dikkat çeken renklerden olan turuncunun kullanımı daha doğru olacaktır.

38

Bölüm 3

A/B Testi Yüksek Dönüşümler İçin Tasarımlar A/B testi ikili karşılaştırmalarla farklı içerik ve tasarım örneklerini karşılaştırmak. Bu karşılaş-tırmanın amacı A/B testini uyguladığınız sisteme göre farklılık gösterebilir. Anasayfa, üyelik sayfası, satış sayfası, landing page ya da bülten için fark-lı A/B testleri uygulayabilir ve hedeflediğiniz eyle-min(üye olma, satışa dönüş, tıklama..) değişimini takip edebilirsiniz. Bu süreçten kısaca behsetmek istiyorum size…

A/B test süreci

39

Nerede başlar?

Ana sayfanızda, Fiyatlandırma sayfasında, Açılış sayfaları dahil olmak üzere Sitenizdeki en yüksek profil sayfalarında…

Ne test edilir?

Başlık, Harekete çağrı,Düğme kopyalama, Form uzunluğu veTasarım…

40

Bir test için fikir buluşması nasıl yapılır?

Testin etkili hale gelmesi için en iyi yollardan biri zi-yaretçi geri bildirimlerini kullanmaktır. Bunu birçok farklı yolla yapmak mümkündür:

• Anket yöntemiyle insanlar ve onların deneyimleri hakkında bilgi edinerek,

• Canlı sohbet kullanarak,

• Müşterilere e-posta göndererek, A/B test süreci

41

Neden Test?

Test teorinin sınandığı bir hipotez gibi dü-şünülmeli… Büyük bir hata hipotezimiz sayesinde gerçeğe dönüşmeden test edilebilir ve teorimizi güçlendirebilir… Unutulmamalı ki daha güçlü bir hi-potez, karşı rekabet için en iyi silahtır.

42

Ve nasıl yapılır?

Şimdi bir test süreci için hazırsınız.. Deneme için birkaç kuralı takip etmenizde yarar var…

• Test sürecinde her sayfa en azından 100 tekil zi-yaretçi almış olmalı..

•Test süreci farklı günlük davranışları görmek için en az bir hafta sürmelidir.

• Test sürecinizin istatistiksel anlamlılık oranı yüz-de 95’in üzerinde olmalıdır. Bu sonuçlarınıza dayalı muhtemel şans oranınızın da ölçüsüne vurgudur aynı zamanda. Sonuç bu yöndeyse şayet, deneme geçerlidir ve sonuçlarınıza güvenerek sona erdiri-lebilir.

43

A/B testinden bahsedipte uygulanmış ba-şarılı bir çalışmadan bahsetmemem ayıp olur. “Ke-sinlikle” dediğinizi duyar gibiyim. :)

44

O halde hemen örnekleyelim.Dönüşüm Oranı Optimizasyonu konusunda uz-manlaşmış Brezilyalı bir ajans Write Work.com için radikal bir değişiklikle yeni oluşturduğu web sitesi-ne A/B testini uygular. Ve testin sonucunda %50 lik artışı gözlemlenir. Şaşırmak yanlış olur, CCD ilke-leri baz alınarak yapılmış bir tasarım, karmaşadan uzak, düğmeleri net, göz yormayan renkler...

45

Resim 18

Resim 19

46

Kaynakhttp://thelandingpagecourse.com/the-psychology-of-con-version-rate-optimization/

h t t p : / / w w w . w h i t e s p a c e . o n . c a / B l o g / b i -d/98603/6-Ways-to-Increase-Landing-Page-Conversi-ons-Using-CCD

http://www.sitepoint.com/scarcity-marketing/

http://www.icbs.com/kb/marketing/kb_marketing-psycho-logical-tricks-in-selling.htm http : / /www.c l i ckz . com/c l i ckz /co lumn/1705942/how-your-graphic-designer-is-killing-your-conversion-rate

http://webdesign.tutsplus.com/articles/how-to-beco-me-a-conversion-centered-designer--cms-19664

http:/www.unbounce.com

http:/www.hubspot.com

47

Sonuç

Kazanmak için, memnun etmek için, mut-lu patron - mutlu tasarımcı - mutlu ziyaretçi için CCD ilkelerine sadık kalıcağıma söz veriyorum :)