Başka Hiçbir Yerde Bulamayacağınız En İyi Mobil Açılış Sayfası Tasarım İpuçları

Mobil tıklama sonrası açılış sayfası tasarımlarını ele alan çok sayıda çevrimiçi kaynak var, ancak yüksek dönüşüm sağlayan bir sayfanın gerçekte nasıl oluşturulacağına dair çok fazla özel tasarım talimatı yok.

Mobil görüntüleme için hangi yapı düzeni önerilir? Düğmeler kaç piksel olmalıdır? Elemanları kaç piksel ayırmalıdır? “Vurgulu” efektini kullanmalı mısınız? Form etiketleri içeride mi yoksa dışarıda mı olmalı?

Benim adım Cosmin Serban, Instapage Tasarım Hizmetleri Direktörü. Şunu soruyor olabilirsiniz , Cosmin'i mobil tıklama sonrası açılış sayfası tasarımında yazmaya uygun kılan nedir?

Müşterileri, dönüşüm oranlarını iyileştirmek için tıklama sonrası açılış sayfalarını tasarlama ve yapılandırma konusunda en iyi uygulamalar konusunda eğitiyorum. Ayrıca sahip olduğum:

• 1000'den fazla tıklama sonrası açılış sayfasını inceledi
• Mesajlarının iletilmesini sağlamak için müşterilerle ortaklık kurdu ve ziyaretçileri, sonunda bir dönüşüme yol açan iyi bir deneyim yaşadı

Ayrıca, 200.000'den fazla tıklama sonrası açılış sayfası oluşturmak ve başlatmak için kullanılan 200'den fazla optimize edilmiş şablon geliştiren ekibin bir parçasıydım, şablonları burada bulabilirsiniz.

Mobil tıklama sonrası açılış sayfası tasarımı: Başlamadan önce bilmeniz gerekenler

Bu makaledeki bazı kavramlar, şablon kitaplığımızı oluştururken dahili olarak geliştirilmiştir. Bu, tüm bu ipuçlarının, oluşturduğunuz her bir tıklama sonrası açılış sayfası için geçerli olması gerektiği anlamına gelmez. Her tıklama sonrası açılış sayfasının kendine özgü zorlukları vardır, ancak bu temel kavramları anlamak, mobil cihazlarından ziyaret eden herkes için daha iyi bir deneyim sağlamanıza kesinlikle yardımcı olacaktır.

Masaüstü ve mobil deneyim arasındaki en önemli farklarla başlayalım.

Yapı

Projenizin başında öyle görünmese de, doğru zamanda doğru grup elementleri teslim ettiğiniz bir yapıya sahip olmak düşündüğünüzden daha kritiktir.

Akla ilk gelen şey, ziyaretçilerimizin mobil sayfalardaki içeriği tamamen farklı şekilde tarayacağıdır. Hepimiz masaüstü tıklama sonrası açılış sayfalarındaki F kalıbını veya Z kalıbını duyduk, ancak mobil için kalıbın adı nedir? Buna mutlaka bir isim vermeyeceğiz, ancak büyük olasılıkla çok lineer. Yukarı ve aşağı kaydırmak, tıklama sonrası açılış sayfasının neler sunduğunu anlamanın tek yoludur:

Bu, ziyaretçilerin tıklama sonrası bir açılış sayfasıyla nasıl etkileşime girdiğinin en önemli sınırlamalarından biri olduğundan, çok fazla içeriği yatay olarak sıkıştırmaya çalışmak yerine tek sütunlu bir düzene bağlı kalmanızı öneririz. (Kimse çimdiklemeyi ve yakınlaştırmayı sevmez.)

Masaüstünde, dijital pazarlamacılar çoğu zaman her bir öğenin yerleşimini ve sahip olduğu etkiyi düşünür. Mobilde, bir değişiklik yapmak ve öğe gruplarını ve bunları maksimum etki için nasıl üst üste yığacağınızı düşünmek daha iyidir.

Bu yan yana karşılaştırma, bir masaüstü sayfasının bir mobil sayfaya göre nasıl yapılandırıldığını gösterir:

Soldan sağa gitmenizi ve her bir öğe grubunu birbirinin altına yerleştirmenizi öneririz . Örneğin başlık alanını (ekranın üst kısmında) ele alalım. En üstte logo, ardından ana başlık ve destekleyici başlıktan oluşan grup, ardından tüm form kutusu grubu altta olacak.

Öğeleri gruplama yeteneği, yerel olarak mobil duyarlı bir nesne kümesi oluşturur. Alternatif olarak, gruplar, sayfanızın mobil sürümüne dönüştürüldüklerinde tam orantılarını korumak için karmaşık düzenlemelerin en boy oranını kilitleyecek şekilde yapılandırılabilir.

Mobil En Boy Oranı Kilidi, katmanlı gruplamalarınızı bir arada tutar ve ister masaüstü ister mobil düzende olsunlar en boy oranını kilitler.

Birbiriyle yakından ilişkili veya birbirini tamamlayan iki veya daha fazla öğe her zaman birbirine yapışmalıdır. Bu durumda, form kutusunun sayfanın hemen üstünde olması mantıklı olmaz, bu nedenle formun ekranın üst kısmında olması kavramı ideal değildir. Ziyaretçiye ilk olarak kaydoldukları şeyin bağlamını vermek, onlara mümkün olduğunca hızlı hareket etmeleri için bir yol vermekten daha önemlidir.

Yüklenme zamanı

Ziyaretçilerinizin kullandığı cihaz ne olursa olsun, sayfa yükleme hızı çok önemlidir. Lütfen ziyaretçilerinizin çoğunun mobil veri sınırlamalarını kullanacağını ve sayfanızı görmek için maliyete tabi olacağını unutmayın, bu nedenle sayfalara ne tür grafikler veya öğeler eklediğinize dikkat edin. Bir sayfaya eriştiğinizi ve bir videonun otomatik olarak oynatıldığını hayal edin.

İçeriği desteklemek için çok fazla animasyona ihtiyacınız varsa, mobil cihazlar için basit resimlere bağlı kalmanızı öneririz. Basitçe söylemek gerekirse, belirli bir bölüm için özel arka plan resimleri oluşturmanız gerekecek. Fotoğrafın boyutunu veya düzenini ayarlamak için bir fotoğraf düzenleme yazılımı kullanmak, sayfalarınızı hızlandırabileceğiniz anlamına geldiğinde, gereken fazladan zamana değer olabilir.

Arka plan resimleriyle aynı şey, bölümünüzde yüklemek için 2.000 piksel genişliğinde 300 kb olan bir resme ihtiyacınız olmadığından, bölüm arka planınız olarak ayarlayabileceğiniz özel olarak uyarlanmış bir resim oluşturmak için bir tasarımcı bulmanızı öneririm:

Çoğu zaman mobil sayfayı olabildiğince basit tutmak her zaman iyi bir fikirdir. Örneğin, aynı mesajı ileten birden fazla grafik öğeniz varsa, birini mobilde göstermeniz yeterlidir.

Çoğu cep telefonu, mobil oluşturucuda sağlanan içerik alanının boyutuna uyum sağlayacağından, iyi bir kural, kenarlarda boş alan olmadığından emin olmak için en az 400 piksel genişliğinde bir görüntüye sahip olmaktır.

Tıklama sonrası bir AMP açılış sayfası oluşturun

Dönüşümlerin gerçekleştiği yer tıklama sonrası açılış sayfası olduğundan, mobil cihazlarda pozitif bir tıklama sonrası açılış sayfası oluşturmak çok önemlidir. Sayfanız çok yavaş yükleniyorsa veya reklamdan tıklama sonrasına kadar ayrık bir deneyim yaratıyorsa, ziyaretçiler hemen çıkacaktır.

Ardından, Google'ın tıklama sonrası açılış sayfası deneyimine, sonuçta tıklama oranınıza katkıda bulunan reklam sıralamasını belirleyen bir faktör olarak baktığını düşünün. Tüm bunları ekleyin ve markaların ellerinde büyük bir sorun var. Neyse ki, AMP çerçevesi var.

Özellikle AMP sayfaları, bazı stil ve marka özelleştirilebilirliğini desteklerken, neredeyse anında yükleme süreleri ve sorunsuz kaydırma yoluyla daha çekici mobil kullanıcı deneyimlerine izin verdiği için reklamverenler için çekicidir. AMP, HTML/CSS ve JavaScript'i kısıtladığından, tıklama sonrası açılış sayfasının daha hızlı oluşturulmasına olanak tanır. Geleneksel mobil sayfaların aksine, AMP sayfaları, Google'da daha hızlı yükleme süreleri için Google AMP Önbelleği tarafından otomatik olarak önbelleğe alınır.

AMP çerçevesinin faydaları, sınırlamalarından gerçekten daha ağır basmaktadır:

• Mobil cihazlarda daha hızlı sayfa yükleme hızı
• Mobil tarama için daha iyi kullanıcı deneyimi
• AMP sayfalarını kullanmak, Kalite Puanınızı artırmanıza yardımcı olabilir
• Google, AMP kullanan sayfaları tercih edecek

Haziran 2018 itibarıyla Instapage, dijital pazarlamacıların bir geliştirici olmadan uygulama içinde AMP uyumlu sayfalar oluşturabilecekleri AMP tıklama sonrası açılış sayfaları sunmaktadır. Çünkü sonuçta sayfa yüklenme anında değilse, yeterince hızlı değildir.

Dokunma için tasarlama

Mobil tıklama sonrası açılış sayfası tasarımında karşılaştığınız en büyük zorluklardan biri, ziyaretçilerin harekete geçmesinin mümkün olduğunca kolay olmasını sağlamaktır. Bu eylem, bir form gönderme veya bir düğmeye basit bir dokunuş olabilir. Çoğu insanın bazı ayarlamalar yapmasını beklersiniz, ancak durum her zaman böyle değildir.

Hepimiz bir şeye dokunmanın çok zor olduğu veya deneyimin mobil kullanıcılar için uygun olmadığı deneyimli sayfalara sahibiz. Özellikle metin bağlantıları — hiper bağlantılı herhangi bir metin öğesinin boyutunu ayarlamak çok yararlıdır. Ziyaretçiniz, istediğiniz eylemi gerçekleştirmek için yakınlaştırmak zorunda kalmamalıdır.

Düğmeler

Ancak fark ettiğimiz en büyük sorun, tıklama sonrası açılış sayfalarındaki düğmelerin boyutudur . Ekibimiz, en az 70 piksel yüksekliğinde ve mümkün olduğunca geniş yapmaktan korkmayan düğmeler tasarlamanızı önerir, ancak küçük bir bölümle karıştırılabileceğinden onları asla tam genişliğe (400 piksel) uzatmaz.

Fareyle üzerine gelme efekti, masaüstü sayfaları için hoş bir dokunuş çünkü ziyaretçiye o belirli öğe üzerinde işlem yapabileceklerini gösteriyor. Mobil cihazlarda, geçiş efektleri gereksizdir.

kenar boşlukları

Kenar boşlukları için, her iki tarafta dikey olarak serbest en az 20 piksellik güvenli bir bölge tutmanızı ve telefon ekranının kenarlarına çok yakın öğelerle görünebilecek herhangi bir görsel gerilimden kaçınmanızı öneririz.

Beyaz alan, masaüstü sayfalar için olduğu kadar mobil sayfalar için de önemli olan bir şeydir. Temel kavramlar hala geçerlidir, sadece her şeyi birbirinden ayırmaya çalışın ve birbirine gerçekten yakın öğelere sahip olmayın. Bunu yapmak görsel gerilimden kaçınmanıza yardımcı olacaktır.

Tutarlı marjlara sahip olmak kesinlikle daha iyi bir kullanıcı deneyimine yol açacaktır. Ekibimiz genellikle her öğe arasında en az 20 ila 40 piksel olmasını sağlar. Her blok benzersiz bir eleman yapısına sahip olabileceğinden, ne kadar karar vereceğiniz size kalmış.

Oldukça özneldir, ancak bir kez bir kural oluşturduğunuzda, onu sayfa boyunca kopyalamaya çalışın ve bu, ona daha modern bir görünüm verecektir:

okunabilirlik

İçeriği net bir şekilde okuyabilmenin verilen bir şey olduğunu düşünürdünüz, ancak çoğu zaman metnin çok küçük veya çok büyük olduğu tıklama sonrası açılış sayfalarını gördük. İyi bir denge bulmak oldukça kolaydır, belirli öğeler için kullanılan yazı tipi boyutu için iyi bir kural:

• Ana başlık: 28 piksel
• Alt başlık: 22 piksel
• Paragraflar: 17 piksel
• Diğer ayrıntılar: 15 piksel

Elbette her ihtiyaca uygun tek bir beden olmadığı için bu bedenleri ayarlayabilirsiniz. Ancak, mobil bir tıklama sonrası açılış sayfası tasarlama konusunda ileriye dönük iyi bir temel olarak hizmet etmelidir.

Bahsetmeye değer başka bir öğe, metin öğeleriyle birlikte satır yüksekliğidir .

Masaüstünde belirli durumlarda 1.0 veya hatta 1.2 olması mantıklıdır, mobil tıklama sonrası açılış sayfanızı oluştururken metin öğeleri için satır yüksekliğinin en az 1.4 olduğundan emin olun .

Alt satır: Yazı tipi boyutu ne kadar küçükse, satır yüksekliği de o kadar büyük olmalıdır.

Formlar

Formlar, çoğu tıklama sonrası açılış sayfasının en önemli parçası olduğundan, insanların bilgilerini göndermelerini kolaylaştırmak çok önemlidir.

Mobil sayfalarımızda genellikle form alanlarını mümkün olduğunca yatay olarak uzatır ve form alanı ile düğmenin aynı satırda olması gibi durumlardan kaçınırız. Bu sadece kötü bir deneyim:

Çok sık ortaya çıkan bir başka şey de, çok fazla alanı olan formlarla uğraşmaktır.

Ekibimizin ortaya çıkardığı en iyi uygulama, bir sayfada etiket konumunu dışarıya ayarlamak için 2'den fazla form alanı olduğunda , ziyaretçilerin ne girileceğini hatırlamaya çalışmak yerine hangi bilgilerin gerekli olduğunu bilmelerini kolaylaştırmasıdır:

Bugünden itibaren mobil dönüşümlerinizi artırın

Tıpkı masaüstü sayfalarında olduğu gibi, mobil tıklama sonrası açılış sayfası tasarımı, öncelikle kullanıcı deneyimi ve insanları etkileşime girmeye ve dönüşüm sağlamaya neyin ikna edeceği ile ilgilidir. Yukarıdaki önerileri dikkate almadan, mobil dönüşüm oranınız muhtemelen düşecek ve insanlar hemen geri dönecektir.

Önerileri uygulamayı düşünün ve tıklama sonrası açılış sayfalarınızın nasıl yüksek düzeyde optimize edilmiş dönüşüm varlıklarına dönüştüğünü görün. Bugün bir Instapage AMP demosu edinin.