Tips Desain Landing Page Seluler Terbaik yang Tidak Akan Anda Temukan Di Tempat Lain

Ada banyak sumber daya online yang membahas desain halaman arahan pasca-klik seluler, tetapi tidak banyak petunjuk desain khusus tentang cara membuat halaman dengan konversi tinggi.

Tata letak struktur apa yang direkomendasikan untuk tampilan seluler? Berapa banyak piksel yang seharusnya menjadi tombol? Berapa banyak piksel yang harus memisahkan elemen? Haruskah Anda menggunakan efek "melayang"? Haruskah label formulir berada di dalam atau di luar?

Nama saya Cosmin Serban, Direktur Layanan Desain di Instapage. Anda mungkin bertanya, Apa yang membuat Cosmin memenuhi syarat untuk menulis di desain halaman arahan pasca-klik seluler?

Saya telah mendidik pelanggan tentang praktik terbaik dalam merancang dan menyusun halaman arahan pasca-klik mereka untuk meningkatkan tingkat konversi mereka. Juga, saya punya:

• Meninjau lebih dari 1.000 halaman arahan pasca-klik
• Bermitra dengan pelanggan untuk memastikan pesan mereka tersampaikan dan pengunjung mereka memiliki pengalaman yang baik yang pada akhirnya menghasilkan konversi

Selain itu, saya adalah bagian dari tim yang telah mengembangkan lebih dari 200 templat yang dioptimalkan yang digunakan untuk membuat dan meluncurkan lebih dari 200.000 halaman arahan pasca-klik, Anda dapat menemukan templatnya di sini.

Desain halaman arahan pasca-klik seluler: Apa yang perlu diketahui sebelum Anda mulai

Beberapa konsep dalam artikel ini dikembangkan secara internal saat membuat perpustakaan template kami. Itu tidak berarti bahwa semua tip ini harus berlaku untuk setiap halaman arahan pasca-klik yang Anda buat. Setiap halaman arahan pasca-klik memiliki serangkaian tantangan uniknya sendiri, tetapi memahami gagasan dasar ini pasti akan membantu Anda memberikan pengalaman yang lebih baik bagi siapa pun yang berkunjung dari perangkat seluler mereka.

Mari kita mulai dengan perbedaan paling penting antara pengalaman desktop dan seluler.

Struktur

Meskipun tidak tampak seperti itu di awal proyek Anda, memiliki struktur di tempat Anda memberikan kelompok elemen yang tepat pada waktu yang tepat lebih penting daripada yang Anda pikirkan.

Hal pertama yang terlintas dalam pikiran adalah cara pengunjung kami memindai konten di halaman seluler sama sekali berbeda. Kita semua pernah mendengar tentang pola-F atau pola-Z di halaman arahan pasca-klik desktop, tetapi apa yang disebut pola untuk seluler? Kami tidak perlu memberikan nama, tetapi kemungkinan besar itu sangat linier. Menggulir ke atas dan ke bawah adalah satu-satunya cara untuk memahami apa yang ditawarkan halaman arahan pasca-klik itu:

Karena itu adalah salah satu batasan terpenting bagaimana pengunjung berinteraksi dengan halaman arahan pasca-klik, kami sarankan untuk tetap menggunakan tata letak satu kolom daripada mencoba menjejalkan banyak konten secara horizontal. (Tidak ada yang suka mencubit dan memperbesar.)

Di desktop, sebagian besar waktu pemasar digital memikirkan penempatan setiap elemen individu dan dampaknya. Di seluler, lebih baik buat perubahan dan pikirkan tentang kelompok elemen dan bagaimana Anda menumpuknya di atas satu sama lain untuk dampak maksimal.

Perbandingan berdampingan ini menunjukkan bagaimana halaman desktop disusun versus halaman seluler:

Kami merekomendasikan pergi dari kiri ke kanan dan menempatkan setiap kelompok elemen di bawah satu sama lain. Mari kita ambil area header (lipatan atas) misalnya. Kami akan memiliki logo di bagian atas, diikuti oleh grup yang dibuat dari judul utama dan judul pendukung, kemudian memiliki seluruh grup kotak formulir di bawahnya.

Kemampuan untuk mengelompokkan elemen membuat kumpulan objek yang secara native responsif seluler. Atau, grup dapat dikonfigurasi untuk mengunci rasio aspek pengaturan kompleks untuk mempertahankan proporsi yang tepat ketika mereka dikonversi ke versi seluler halaman Anda.

Mobile Aspect Ratio Lock menjaga pengelompokan berlapis Anda bersama-sama dan mengunci rasio aspek, baik di desktop atau tata letak seluler.

Setiap dua atau lebih elemen yang terkait erat atau saling melengkapi harus selalu bersatu. Dalam situasi ini tidak masuk akal untuk memiliki kotak formulir tepat di bagian atas halaman, jadi konsep memiliki formulir di area lipatan atas tidak ideal. Memberi pengunjung konteks tentang apa yang mereka daftarkan terlebih dahulu lebih penting daripada hanya memberi mereka cara untuk bertindak secepat mungkin.

Waktu pemuatan

Apa pun perangkat yang digunakan pengunjung Anda, kecepatan memuat halaman sangat penting. Harap perhatikan bahwa sebagian besar pengunjung Anda akan menggunakan batasan data seluler mereka dan dikenakan biaya untuk melihat halaman Anda, jadi berhati-hatilah dengan jenis grafik atau elemen apa yang Anda tambahkan ke halaman. Bayangkan saja mengakses halaman dan memutar video secara otomatis.

Jika Anda memerlukan banyak animasi untuk mendukung konten, kami sarankan untuk tetap menggunakan gambar sederhana untuk seluler. Secara sederhana, maksud saya Anda harus membuat gambar latar belakang khusus untuk bagian tertentu. Menggunakan perangkat lunak pengedit foto untuk menyesuaikan ukuran atau tata letak foto mungkin sepadan dengan waktu ekstra yang dibutuhkan ketika itu berarti Anda dapat mempercepat halaman Anda.

Hal yang sama dengan gambar latar belakang, karena Anda tidak memerlukan gambar dengan lebar 2.000 piksel yaitu 300kb untuk dimuat di bagian Anda, saya sarankan meminta desainer untuk membuat gambar yang disesuaikan khusus yang dapat Anda atur sebagai latar belakang bagian Anda:

Sebagian besar waktu menjaga halaman seluler sesederhana mungkin selalu merupakan ide bagus. Misalnya, jika Anda memiliki beberapa elemen grafis yang menyampaikan pesan yang sama, cukup tampilkan satu di ponsel.

Karena sebagian besar ponsel akan beradaptasi dengan ukuran area konten yang disediakan di pembuat seluler, aturan praktis yang baik adalah memiliki gambar dengan lebar setidaknya 400 piksel untuk memastikan tidak ada ruang kosong di sampingnya.

Buat halaman arahan pasca-klik AMP

Membuat halaman arahan pasca-klik yang positif di seluler sangat penting karena halaman arahan pasca-klik adalah tempat terjadinya konversi. Jika halaman Anda dimuat terlalu lambat atau menciptakan pengalaman yang terputus-putus dari iklan ke pasca-klik, pengunjung akan terpental.

Kemudian, pertimbangkan bahwa Google melihat pengalaman halaman arahan pasca-klik sebagai salah satu faktor untuk menentukan peringkat iklan, yang pada akhirnya berkontribusi pada rasio klik-tayang Anda. Tambahkan semua itu dan merek memiliki masalah besar di tangan mereka. Untungnya, kerangka kerja AMP ada.

Halaman AMP khususnya menarik bagi pengiklan karena memungkinkan pengalaman pengguna seluler yang lebih menarik melalui waktu muat yang hampir seketika dan pengguliran yang mulus, sambil tetap mendukung beberapa gaya dan penyesuaian merek. Karena AMP membatasi HTML/CSS dan JavaScript, AMP memungkinkan rendering halaman arahan pasca-klik yang lebih cepat. Tidak seperti halaman seluler tradisional, halaman AMP secara otomatis di-cache oleh Google AMP Cache untuk waktu pemuatan yang lebih cepat di Google.

Manfaat kerangka kerja AMP benar-benar melebihi keterbatasannya:

• Kecepatan memuat halaman lebih cepat di perangkat seluler
• Pengalaman pengguna yang lebih baik untuk penelusuran seluler
• Menggunakan halaman AMP dapat membantu meningkatkan Skor Kualitas Anda
• Google Akan menyukai halaman yang menggunakan AMP

Mulai Juni 2018, Instapage menawarkan halaman arahan pasca-klik AMP tempat pemasar digital dapat membuat halaman yang sesuai dengan AMP dalam aplikasi tanpa pengembang. Karena, pada akhirnya, jika pemuatan halaman tidak instan, itu tidak cukup cepat.

Merancang untuk sentuhan

Salah satu tantangan terbesar Anda dengan desain halaman arahan pasca-klik seluler adalah memastikan semudah mungkin bagi pengunjung untuk mengambil tindakan. Tindakan itu bisa berupa pengiriman formulir atau ketukan sederhana pada tombol. Anda akan mengharapkan kebanyakan orang akan membuat beberapa penyesuaian, tapi itu tidak selalu terjadi.

Kita semua pernah mengalami halaman di mana sangat sulit untuk mengetuk sesuatu atau pengalaman tidak disesuaikan untuk pengguna seluler. Terutama tautan teks — menyesuaikan ukuran elemen teks apa pun yang di-hyperlink sangat membantu. Pengunjung Anda tidak perlu memperbesar untuk mengambil tindakan yang Anda inginkan.

Tombol

Namun masalah terbesar yang kami perhatikan adalah ukuran tombol pada halaman arahan pasca-klik. Tim kami merekomendasikan untuk mendesain tombol yang tingginya setidaknya 70 piksel dan jangan takut untuk membuatnya selebar mungkin, tetapi jangan pernah meregangkannya dengan lebar penuh (400 piksel) karena mungkin tertukar dengan bagian kecil.

Efek hover adalah sentuhan yang bagus untuk halaman desktop karena memberi sinyal kepada pengunjung bahwa mereka dapat mengambil tindakan pada elemen tertentu. Di ponsel, melalui, efek hover berlebihan.

Margin

Untuk margin, kami menyarankan untuk menjaga zona aman minimal 20 piksel bebas vertikal di setiap sisi dan menghindari ketegangan visual yang mungkin muncul dengan elemen yang terlalu dekat dengan sisi layar ponsel.

Ruang kosong adalah sesuatu yang sama pentingnya untuk halaman seluler seperti halnya untuk halaman desktop. Konsep dasarnya masih berlaku, coba saja beri jarak dan tidak ada elemen yang sangat dekat satu sama lain. Melakukan hal ini akan membantu Anda menghindari ketegangan visual.

Memiliki margin yang konsisten pasti akan menghasilkan pengalaman pengguna yang lebih baik. Tim kami biasanya memastikan untuk memiliki setidaknya 20 hingga 40 piksel di antara setiap elemen. Berapa banyak yang Anda putuskan terserah Anda karena setiap blok mungkin memiliki struktur elemen yang unik.

Ini cukup subjektif, tetapi begitu Anda membuat aturan, cobalah untuk mereplikasinya di seluruh halaman dan itu akan memberikan tampilan yang lebih modern:

Keterbacaan

Anda akan berpikir bahwa dapat membaca konten dengan jelas adalah hal yang wajar, tetapi terlalu sering kita melihat halaman arahan pasca-klik di mana teksnya terlalu kecil atau terlalu besar. Menemukan keseimbangan yang baik cukup mudah, aturan praktis yang baik untuk ukuran font yang digunakan untuk elemen tertentu adalah:

• Judul utama: 28 piksel
• Subjudul: 22 piksel
• Paragraf: 17 piksel
• Detail lainnya: 15 piksel

Tentu saja Anda dapat menyesuaikan ukuran tersebut karena tidak ada satu ukuran yang cocok untuk semua kebutuhan. Namun, ini harus berfungsi sebagai dasar yang baik ke depan dengan merancang halaman arahan pasca-klik seluler.

Item lain yang layak disebutkan adalah tinggi baris dengan elemen teks.

Dalam situasi tertentu di desktop, masuk akal untuk memiliki 1.0 atau bahkan 1.2, ketika Anda membuat halaman arahan pasca-klik seluler Anda, pastikan tinggi baris untuk elemen teks setidaknya 1,4.

Intinya: Semakin kecil ukuran font, semakin besar tinggi garis yang seharusnya.

Formulir

Karena formulir adalah bagian terpenting dari sebagian besar halaman arahan pasca-klik, memudahkan orang untuk mengirimkan informasi mereka sangat penting.

Sepanjang halaman seluler kami, kami biasanya merentangkan bidang formulir sebanyak mungkin secara horizontal dan menghindari situasi seperti memiliki bidang formulir dan tombol pada baris yang sama. Itu hanya pengalaman buruk:

Hal lain yang sangat sering keluar adalah berurusan dengan formulir yang memiliki banyak bidang.

Praktik terbaik yang ditemukan tim kami adalah bahwa setiap kali halaman memiliki lebih dari 2 bidang formulir untuk mengatur posisi label ke luar, memudahkan pengunjung untuk mengetahui informasi apa yang diperlukan daripada mencoba mengingat apa yang harus dimasukkan:

Tingkatkan konversi seluler Anda mulai hari ini

Sama seperti halaman desktop, desain halaman arahan pasca-klik seluler adalah tentang pengalaman pengguna terlebih dahulu dan apa yang akan membujuk orang untuk terlibat dan berkonversi. Tanpa mempertimbangkan saran di atas, tingkat konversi seluler Anda kemungkinan akan menurun dan orang-orang akan terpental.

Pertimbangkan untuk menerapkan rekomendasi dan lihat bagaimana halaman arahan pasca-klik Anda berubah menjadi aset konversi yang sangat dioptimalkan. Dapatkan demo AMP Instapage hari ini.