Cara Meningkatkan Tingkat Konversi Seluler untuk Toko Online

Orang-orang menghabiskan lebih banyak waktu di ponsel mereka daripada sebelumnya. Kami menggunakannya untuk hampir semua hal — perbankan, investasi, memeriksa cuaca, memantau latihan, mendengarkan musik, menavigasi, dan, tentu saja, berbelanja.

Hampir 55% lalu lintas situs web berasal dari perangkat seluler, dan 60% pembeli online menggunakan ponsel mereka untuk menemukan produk terlebih dahulu. Jika toko Anda tidak memberikan pengalaman pengguna yang lancar di seluler, Anda berisiko kehilangan sebagian besar pelanggan potensial Anda.

Tapi bagaimana Anda bisa mengoptimalkan toko online Anda untuk meningkatkan konversi seluler?

Mulailah dengan tema WordPress yang responsif

Tema WordPress berkualitas tinggi adalah titik awal yang sempurna untuk toko online yang responsif. Tema Anda adalah dasar dari seluruh situs Anda, jadi pilih salah satu yang menawarkan pengalaman hebat pada perangkat dari semua ukuran.

Berikut adalah beberapa tip untuk mengevaluasi tema:

• Uji demo tema di tablet dan ponsel. Karena Anda mungkin tidak memiliki perangkat dalam semua ukuran layar yang memungkinkan, Anda dapat menggunakan situs seperti Alat Pengujian Responsif Situs Web untuk mensimulasikan pengalaman tersebut. Elemen demo harus terlihat bagus di semua ukuran layar — tidak ada yang terpotong, sulit dibaca, atau sulit digunakan.
• Saat melihat demo tema, ubah ukuran jendela browser Anda. Konten harus disesuaikan dan tidak ada yang harus dipotong.
• Cari fitur responsif dalam deskripsi tema. Itu harus secara khusus menyebutkan "desain responsif" atau mendiskusikan bagaimana tema menyesuaikan untuk perangkat seluler.
• Jalankan demo tema melalui alat pengujian ramah seluler Google.
• Periksa ulasan. Baca peringkat dan ulasan dari pengguna tema. Hati-hati dengan komentar negatif tentang desain responsif.

Penting juga bahwa tema Anda terintegrasi dengan WooCommerce. Ini akan mencegah masalah responsivitas bersama dengan potensi konflik lainnya.

Tema Storefront memenuhi semua hal di atas dan fleksibel serta mudah disesuaikan. Plus, ia memiliki berbagai tema anak yang dirancang untuk industri tertentu — mode, mainan, produk digital, pemesanan, dan banyak lagi.

Ingatlah kegunaan seluler

Kegunaan adalah seberapa efektif dan efisien pembeli dapat berinteraksi dengan situs web Anda. Kegunaan yang buruk berdampak negatif pada penjualan, konversi, persepsi merek, dan SEO. Saat meninjau pengalaman seluler Anda, kegunaan harus menjadi prioritas utama Anda. Pertimbangkan hal berikut:

• Pikirkan dengan ibu jari Anda. Pengguna seluler akan berinteraksi dengan situs web Anda hanya dengan menggunakan ibu jari mereka. Semua elemen yang dapat diklik — tautan, tombol, item menu, gambar — harus cukup besar agar pengunjung situs dapat mengetuk dengan mudah. Jika mereka kecil atau terlalu berdekatan, seseorang mungkin tidak sengaja mengklik hal yang salah.
• Hindari pop-up dan gangguan lainnya. Karena layar seluler sangat kecil, penting untuk memprioritaskan apa yang Anda tunjukkan kepada pengunjung. Munculan yang menutupi seluruh layar ponsel dapat mengganggu pengalaman pengguna Anda dan bahkan memiliki efek negatif pada peringkat mesin telusur Anda; hal yang sama berlaku untuk iklan dan notifikasi lainnya. Jika Anda memutuskan untuk menggunakan jenis konten ini, pastikan konten tersebut hanya menempati sebagian layar dan mudah ditutup.
• Menerapkan filter produk . Jika Anda menawarkan banyak produk, pembeli online mungkin harus menggulir sebentar untuk menemukan apa yang mereka cari. Ini bisa sangat sulit pada layar ponsel yang hanya menampilkan beberapa produk sekaligus. Pelanggan Anda mungkin merasa frustrasi dan menyerah sebelum melakukan pembelian. Filter membantu mereka mempersempit pilihan berdasarkan apa yang mereka cari. Coba ekstensi seperti Filter Produk WooCommerce untuk menyediakan fungsionalitas penyortiran.
• Gunakan font yang cukup besar . Jika teks situs web Anda terlalu kecil, akan sangat sulit bagi pengguna seluler untuk membaca apa pun — mereka tidak perlu mencubit dan memperbesar untuk mempelajari produk Anda. Bergantung pada situs dan pilihan font Anda, Anda mungkin perlu mengatur ukuran font yang berbeda untuk perangkat seluler.
• Putuskan teks. Jika Anda memiliki halaman dengan banyak informasi, bagi menjadi segmen-segmen yang lebih kecil yang lebih mudah dinavigasi di layar kecil. Anda dapat melakukan ini dengan akordeon, sakelar, atau poin-poin. Dalam posting blog yang panjang, tambahkan tautan ke subbagian yang memungkinkan pengguna untuk langsung beralih ke topik menarik.

Sederhanakan halaman checkout

Meskipun belanja di perangkat seluler telah meningkat secara signifikan selama bertahun-tahun, konversi tidak begitu besar. Faktanya, rata-rata tingkat konversi eCommerce di seluler hanya 2,03%, dibandingkan desktop sebesar 3,83%.

Proses checkout Anda memainkan peran penting dalam melakukan penjualan. Buat sesederhana mungkin di perangkat seluler untuk meningkatkan rasio konversi. Jika terlalu lama bagi pelanggan Anda untuk melakukan pembelian, mereka akan menyerah dan berbelanja di tempat lain.

Hapus bidang yang tidak perlu

Mulailah dengan melihat dari dekat informasi yang Anda butuhkan untuk checkout. Apakah semuanya perlu? Anda mungkin akan menemukan bahwa ada bidang yang dapat Anda hapus:

• Jika Anda tidak menjual ke bisnis, hapus bidang Nama Perusahaan.
• Jika Anda tidak dapat memikirkan skenario di mana Anda mungkin perlu menelepon pelanggan Anda, hapus bidang Telepon.
• Jika Anda tidak menerima catatan, hapus bidang Catatan Pesanan.

Semakin sedikit bidang semakin baik, terutama di seluler. Baca lebih lanjut tentang cara menyesuaikan bidang checkout WooCommerce.

Izinkan pembayaran tamu

Akun pelanggan sangat bagus dan mempercepat checkout untuk pembeli yang kembali dengan mengisi informasi mereka secara otomatis dan menyimpan data kartu kredit mereka. Tapi bagaimana dengan pelanggan baru?

Tidak semua orang ingin membuat akun di toko Anda, terutama di perangkat seluler tempat mereka ingin check out secepat mungkin. Faktanya, membutuhkan akun pelanggan dianggap berkontribusi pada 35% gerobak yang ditinggalkan.

Untuk mengizinkan pembayaran tamu dengan WooCommerce:

1. Arahkan ke WooCommerce → Pengaturan → Akun dan Privasi.
2. Pilih Izinkan pelanggan melakukan pemesanan tanpa akun.
3. Klik tombol Simpan Perubahan di bagian bawah halaman.

Pelajari cara menentukan apakah pembayaran tamu tepat untuk toko Anda.

Terima login sosial

Pelanggan Anda mungkin masuk ke akun media sosial di perangkat seluler mereka. Mengaktifkan login sosial di situs Anda memungkinkan mereka masuk menggunakan Facebook, Twitter, Google, Amazon, dan lainnya untuk menyederhanakan checkout dan mencegah mereka harus membuat akun baru.

Aktifkan Login Sosial WooCommerce.

Terima beberapa opsi pembayaran

Menerima lebih dari satu bentuk pembayaran mempercepat checkout. Meskipun Anda mungkin juga mengizinkan transaksi kartu kredit, mengaktifkan opsi seperti PayPal atau Amazon Pay memungkinkan pelanggan membayar menggunakan akun yang ada daripada mengeluarkan kartu kredit dan mengetikkan semua detailnya.

Lihat integrasi gateway pembayaran WooCommerce

Buat bidang checkout cukup tinggi

Sangat penting bahwa pelanggan dapat dengan mudah mengisi kolom pembayaran di situs Anda. Pastikan bidang cukup tinggi untuk diketuk dan diisi informasi tanpa harus memperbesar. Anda dapat melakukannya dengan beberapa CSS sederhana.

Mulailah dengan menggunakan inspektur browser di halaman checkout Anda. Ini akan membantu Anda mengidentifikasi kelas setiap bidang individu. Kemudian, gunakan kode berikut untuk setiap kelas tertentu; bidang Email digunakan dalam contoh ini.

 /** Customize height of checkout fields **/ input[type='email'].input-text{ padding: 100px !important; }

Sesuaikan padding berdasarkan situs spesifik Anda dan pengaturan saat ini; Anda mungkin perlu bermain sedikit untuk menemukan apa yang berhasil. Anda juga dapat menyesuaikan perangkat tertentu yang menerapkan kode ini dengan menggunakan kueri media.

Catatan: Jika Anda tidak terbiasa dengan kode dan menyelesaikan potensi konflik, Anda mungkin ingin memilih WooExpert atau Pengembang untuk bantuan. Kami tidak dapat memberikan dukungan untuk penyesuaian berdasarkan Kebijakan Dukungan kami.

Edit halaman produk

Sangat penting bahwa halaman produk individual Anda juga responsif. Pelanggan harus dapat membaca detail produk, membolak-balik foto, dan menambahkan item ke keranjang mereka.

Buat tombol Tambahkan ke Keranjang lengket

Tombol Tambahkan ke Keranjang yang melekat mengikuti pembeli di halaman saat mereka membaca informasi produk. Jika mereka yakin untuk membeli, mereka tidak perlu menggulir ke belakang untuk melakukan pembelian. Faktanya, tombol Tambahkan ke Keranjang yang lengket telah terbukti meningkatkan pesanan sebesar 7,9%! Tambahkan CSS ini untuk membuat tombol Anda lengket di perangkat seluler:

 /** Make the Add to Cart button sticky **/ @media only screen and (max-width: 900px) { .cart { position: fixed; bottom: 0; background: #ffffff; width: 100%; z-index: 3; } }

Anda mungkin perlu sedikit bermain dengan CSS, tergantung pada tema dan desain situs web Anda. Tetapi jika Anda tidak ingin mengedit kode, Anda juga dapat menggunakan plugin seperti Sticky Add to Cart for WooCommerce.

Buat gambar menjadi intuitif

Saat pembeli mendarat di halaman produk, mereka berharap dapat menggesek galeri gambar Anda untuk melihat lebih banyak foto dan menggunakan jari mereka untuk memperbesar item. Gerakan seluler ini sangat intuitif sehingga dibuat hampir secara tidak sadar. Pastikan situs Anda mendukungnya.

Tambahkan panah atau titik untuk menunjukkan bila ada banyak foto. Jika tidak, pengguna ponsel Anda mungkin bahkan tidak tahu bahwa mereka dapat menggesek!

Prioritaskan informasi penting

Pastikan pelanggan dapat melihat informasi produk penting tanpa harus menggulir terlalu jauh. Prioritaskan harga, variasi (warna, ukuran, dll.), diskon, ulasan, dan detail lain yang spesifik untuk produk Anda: Jika Anda menjual pakaian, bahan mungkin penting. Atau jika Anda adalah toko elektronik, Anda mungkin ingin menonjolkan garansi yang menyertai setiap pembelian.

Informasi tambahan seperti deskripsi dan spesifikasi produk lengkap (petunjuk pencucian, SKU, bahan, dll.) dapat jatuh lebih jauh ke bawah halaman. Dengan cara ini, jika pelanggan Anda menginginkan lebih banyak informasi, mereka dapat dengan mudah menemukannya, tetapi jika mereka puas hanya dengan dasar-dasarnya, mereka tidak akan kewalahan.

Sederhanakan menu ponsel Anda

Buat menu utama Anda di perangkat seluler sesederhana mungkin. Daftar halaman yang panjang akan membanjiri dan membingungkan pengunjung situs. Persempit ke hal-hal penting, lalu prioritaskan urutan daftarnya, dengan halaman yang paling penting terlebih dahulu.

The Good Batch mempersingkat menu seluler mereka menjadi hanya lima halaman selain tautan Masuk dan Keranjang. Ini sederhana dan to the point.

Jika Anda perlu menyertakan banyak halaman, coba gunakan submenu dengan tombol yang dapat diperluas. Batasi item menu utama dan tampilkan item submenu saat pengguna memperluas masing-masing item. Pastikan untuk menggunakan simbol seperti panah untuk menunjukkan bahwa menu diperluas!

Nuria menawarkan lima item menu utama di ponsel dengan panah di sebelah masing-masing, menunjukkan bahwa ada lebih banyak opsi. Saat pengguna mengklik, menu utama meluncur untuk membuka submenu dengan tombol "kembali" yang jelas. Ini memungkinkan mereka untuk menampilkan semua opsi yang diperlukan tanpa membebani pelanggan mereka.

Ada beberapa cara untuk menampilkan menu seluler, jadi pilih salah satu yang terbaik untuk audiens Anda. Mereka termasuk:

• Menu hamburger . Simbol hamburger adalah tiga garis yang ditumpuk secara vertikal di atas satu sama lain. Menu disembunyikan sampai pengguna mengklik simbol. Ini adalah opsi yang bagus untuk situs dengan banyak halaman tetapi bisa lebih sulit ditemukan oleh pengunjung situs.
• Sebuah menu tab . Ini sangat mirip dengan navigasi desktop biasa dan mencantumkan item menu secara horizontal di bagian atas situs. Ini hanya boleh digunakan untuk menu dengan tautan minimal; pengguna tidak perlu memperbesar atau menggulir untuk melihat semua item.
• Tombol aksi mengambang . Tombol dengan ikon menu mengapung di halaman dan mengikuti pengguna saat mereka menggulir. Saat diklik, itu meluas untuk menampilkan menu. Ini adalah cara yang baik untuk menjaga agar menu utama Anda tetap dapat diakses, tetapi dapat mengganggu atau menutupi konten.
• Menu tarik-turun . Bilah menu di bagian atas halaman terbuka saat diklik untuk menampilkan opsi halaman. Ini memakan sedikit lebih banyak ruang daripada menu hamburger tetapi mungkin lebih mudah dilihat oleh pengunjung situs.

Biasanya, tema Anda akan menyertakan gaya menu responsif. Jika tidak, atau jika Anda ingin menggunakan opsi lain, lihat plugin ini:

• Menu Seluler WP
• ShiftNav
• Menu Responsif

Opsi mana pun yang Anda pilih, pastikan pelanggan Anda mudah menggunakannya dan sesuai dengan kebutuhan mereka. Dan ingat, itu mungkin berarti membuat menu seluler yang sepenuhnya terpisah!

Jadikan fitur penting mudah ditemukan

Dengan ruang layar yang terbatas pada perangkat seluler, item mudah hilang. Pastikan pengunjung dapat menemukan fungsi penting dengan cepat.

Buat bilah pencarian terlihat

Banyak situs web menyertakan kotak telusur di bilah sisinya, tetapi kotak tersebut biasanya didorong ke bagian bawah laman pada perangkat seluler. Fungsionalitas pencarian di header desktop Anda mungkin tidak muat di ruang yang sama di ponsel. Tapi itu adalah fungsi penting bagi pembeli online, yang bisa mendapatkan keuntungan dari kemampuan untuk mencari produk yang mereka inginkan.

Solusi yang bagus adalah dengan menyertakan bilah pencarian di menu seluler Anda, yang mudah terlihat oleh pembeli. Beberapa tema menawarkan pengaturan untuk fungsi ini, tetapi jika milik Anda tidak, Anda dapat mencapai hal yang sama menggunakan kode khusus.

Buka file header.php Anda dan tambahkan fungsi berikut: <?php get_search_form(); ?> <?php get_search_form(); ?> . Kemudian, Anda dapat menatanya sesuai kebutuhan Anda menggunakan CSS.

Dan jika Anda tidak ingin menyentuh kode, plugin seperti Ivory Search memiliki fungsi yang sama.

Tampilkan informasi kontak dengan jelas

Jika Anda menyertakan informasi kontak di footer atau sidebar, pengguna seluler akan kesulitan melihatnya karena harus menggulir ke bagian bawah halaman. Lawan itu dengan tautan yang terlihat ke halaman kontak Anda di menu.

Anda mungkin juga ingin menyertakan nomor telepon dan/atau alamat email yang dapat diklik di menu utama Anda sehingga pengguna dapat dengan mudah menghubungi. Untuk melakukan ini:

1. Arahkan ke Appearance → Menu di dashboard WordPress Anda.
2. Di tarik-turun di samping “Pilih menu untuk diedit”, pilih menu yang benar. Ini akan menjadi menu utama Anda atau menu seluler Anda, tergantung pada bagaimana Anda mengaturnya.
3. Perluas Tautan Khusus di kolom kiri.
4. Di kotak URL , tambahkan tautan yang sesuai. Untuk nomor telepon, tambahkan tel:+18005553927, ganti nomor dengan nomor Anda. Pastikan tidak ada spasi atau simbol lainnya. Untuk alamat email, tambahkan mailto:[email protected].
5. Di kotak Teks Tautan , tambahkan teks yang akan ditampilkan di menu Anda. Misalnya, Anda dapat mengatakan, “Hubungi Kami”, atau “Hubungi 800-555-3927”.
6. Klik tombol Tambahkan ke Menu dan seret ke lokasi yang Anda pilih.
7. Klik tombol Save Menu berwarna biru di pojok kanan bawah.

Ketika pengguna mengklik nomor telepon di perangkat seluler mereka, itu akan secara otomatis menghubungi Anda. Ketika mereka mengklik alamat email Anda, itu akan membuka email baru untuk Anda di aplikasi email default mereka.

Jadikan troli mudah diakses

Jika pelanggan ingin terus berbelanja setelah menambahkan produk ke keranjang mereka, penting bagi mereka untuk dapat mengedit keranjang itu dan memeriksanya nanti.

Plugin Mini Cart untuk WooCommerce menambahkan opsi keranjang ke versi desktop dan seluler situs web Anda. Di desktop, keranjang menyertakan nama item, foto, dan harga, dan memungkinkan pembeli mengedit jumlah tanpa meninggalkan halaman. Di ponsel, ini menunjukkan jumlah item di keranjang mereka dan total pesanan. Plus, pembeli dapat membuka halaman Keranjang dalam satu klik.

Fokus pada kecepatan situs web

Meskipun kecepatan situs web penting di perangkat apa pun, itu bisa dibilang lebih penting untuk perangkat kecil. Pembeli seluler sering kali menggunakan koneksi internet atau data seluler yang lebih lambat untuk menjelajah, jadi Anda harus melakukan semua yang Anda bisa untuk memastikan situs Anda dimuat secepat mungkin. 53% pengguna seluler meninggalkan situs jika memuat lebih dari tiga detik, dan pengindeksan seluler pertama Google memprioritaskan versi seluler situs web Anda.

Mulailah dengan memahami waktu buka situs Anda saat ini. Tes Kecepatan Situs Web GTMetrix dan Pingdom dapat membantu Anda memahami kecepatan situs Anda dan menawarkan rekomendasi untuk peningkatan. Google PageSpeed ​​Insights bahkan menawarkan pengujian khusus untuk perangkat seluler.

Kemudian, gunakan sumber daya berikut untuk mengoptimalkan situs Anda:

• Cara Mengoptimalkan Gambar untuk Mempercepat Toko Online Anda
• Hal Pertama yang Perlu Dipertimbangkan dengan WooCommerce dan Kecepatan
• Mengapa Situs WooCommerce Saya Lambat dan Bagaimana Memperbaikinya
• Cara Mencapai Skor Kinerja Tinggi di Google PageSpeed ​​Insights untuk WooCommerce
• Percepat Situs WooCommerce Anda dengan Fitur Jetpack ini

Anda mungkin juga ingin mempertimbangkan untuk mengaktifkan AMP (Accelerated Mobile Pages), kerangka kerja yang dibuat oleh Google untuk menciptakan pengalaman seluler yang ringan dan efisien. Ini adalah cara yang bagus untuk mempercepat posting blog, terutama untuk toko online tertentu. Pelajari lebih lanjut cara meningkatkan kecepatan situs dengan AMP.

Uji toko online Anda di ponsel

Sangat penting untuk menguji toko Anda secara teratur dan memahami bagaimana semuanya berfungsi di perangkat seluler. Proses untuk situs Anda mirip dengan langkah-langkah yang tercantum di atas untuk menguji demo tema — gunakan kombinasi alat seperti pengujian ramah seluler Google dan metode manual seperti mengubah ukuran jendela browser Anda.

Uji semuanya! Klik pada setiap tautan; gulir melalui setiap halaman; dan periksa setiap bagian dari fungsionalitas. Semua aspek situs Anda harus mudah dilihat, dibaca, dan dinavigasi di ponsel dan tablet.

Beberapa perubahan kecil di seluler dapat membuat perbedaan besar dalam kepuasan dan konversi pelanggan. Mencari lebih banyak kiat? Baca Cara Membuka Kunci Kekuatan WooCommerce di Seluler.