Bagaimana Membuat UX E-Commerce yang Menarik untuk Seluler?

on

|

views

and

comments

Istilah “perdagangan seluler” diperkenalkan 20 tahun yang lalu oleh Kevin Duffey ketika ia menyarankan bahwa perangkat seluler dapat berfungsi sebagai outlet ritel di kantong pelanggan. Mempertimbangkan keterbatasan teknologi saat itu, siapa yang akan mengira bahwa suatu hari kita akan dapat dengan mudah menjelajahi, mengulas, dan membeli barang pada perangkat berukuran saku kecil?

Saya tidak dapat melebih-lebihkan bagaimana seluler mengubah cara kita berinteraksi dengan konsumen kita; kita harus merangkul perubahan ini. – Joel Anderson, CEO Walmart

Pertumbuhan eCommerce yang mencengangkan juga memicu pertumbuhan eCommerce mobile , yang saat ini bernilai hampir $ 700 miliar. Mobile eCommerce saat ini adalah bagian terbesar dari pasar online raksasa. Lebih dari 80% orang Amerika telah melakukan pembelian dalam sebulan terakhir secara online — tiga tahun lalu, jumlahnya hanya 11,6%.

Sebuah laporan dari Business Insider Intelligence menyarankan bahwa perdagangan seluler akan meningkat hingga 45% pada tahun 2020. Penelitian ComScore setuju dan, pada tahun 2016, melaporkan peningkatan 44% dalam pengeluaran melalui perangkat seluler dibandingkan dengan 2015.

aspek belanja e-niaga seluler
Aspek statistik belanja smartphone oleh Statista .

Meskipun angka penjualan tinggi, lebih dari 60% pengguna masih merasa khawatir tentang peretasan informasi keuangan mereka saat menggunakan ponsel. Namun demikian, kepuasan pelanggan masih cukup tinggi, dengan raksasa ritel seluler seperti Amazon dan Apple sama-sama menerima peringkat kepuasan lebih dari 80%.

alur aplikasi ux eCommerce seluler
Konsep eCommerce seluler oleh Alex Khoroshok .

Mobile eCommerce UX Praktik Terbaik untuk Sukses

Mendukung Zoom Gambar dengan Menjepit dan Gerakan Ketuk Dua Kali

Orang-orang terbiasa dengan gerakan seperti mengetuk dan mencubit ganda untuk memperbesar gambar di ponsel. Selama studi kegunaan eCommerce mobile, Baymard Institute menemukan bahwa, secara alami, pembeli ingin dapat memeriksa produk secara menyeluruh dan memperhatikan detail kecil. Pengguna yang tertarik untuk membeli produk tetapi tidak dapat menjelajahinya dengan memperbesar tidak merasa nyaman membelinya dan sering tidak berkomitmen untuk penjualan.

halaman produk mobile eCommerce ux
Memperbesar gambar produk dalam aplikasi Overstock .

Cukup mengejutkan bahwa dari 50 aplikasi eCommerce mobile terlaris, lebih dari 40% tidak mendukung gerakan zoom . Bahkan situs yang menawarkan versi gambar close-up mengalami tingkat pentalan yang serupa, yang menunjukkan bahwa dukungan gerakan pembesaran gambar produk dalam aplikasi eCommerce seluler merupakan hal mendasar.

Mengingat ukuran layar kecil dari perangkat seluler, ini adalah masalah khusus platform. Mendukung setidaknya satu dari fitur-fitur ini akan menempatkan aplikasi di perusahaan 50% aplikasi eCommerce teratas, yaitu daftar terlaris.

Beberapa faktor yang perlu dipertimbangkan:

  • Gambar beresolusi rendah setara dengan gambar tanpa zoom. Pengguna tertarik melihat detail suatu produk dengan jelas dan membutuhkan gambar beresolusi tinggi untuk melakukannya. Pilihan untuk memperbesar pada gambar berkualitas rendah cukup banyak tidak berguna, karena tidak memungkinkan pengguna untuk melihat detail.
  • Baymard Institute menemukan bahwa 50% aplikasi tidak menunjukkan kepada pengguna bahwa mereka dapat mencubit atau mengetuk dua kali pada gambar produk. Menunjukkan ketersediaan pembesaran gambar adalah penting. Meskipun gerakan ini umumnya diketahui oleh pengguna ponsel, masih perlu ditunjukkan bahwa mereka tersedia. Disarankan untuk menggunakan ikon atau representasi visual untuk melakukan hal ini.

Berikan Fitur “Simpan” untuk Daftar Belanja

Seperti disebutkan sebelumnya, ukuran layar kecil dari perangkat seluler adalah penghalang utama dalam hal eCommerce seluler. Baymard Institute mengamati bahwa lebih dari 61% pengguna ponsel akan sering menggunakan desktop mereka untuk menyelesaikan pembelian daripada telepon mereka.

fitur penyimpanan keranjang belanja eCommerce ux mobile
Kereta belanja “yang dapat disimpan” di aplikasi Nordstrom dan Overstock .

Fitur “save shopping cart” mengurangi jumlah pengabaian keranjang dan memungkinkan pembeli untuk menyimpan item untuk pembelian di kemudian hari. Keranjang belanja yang terus-menerus memungkinkan pelanggan untuk melanjutkan belanja mereka tanpa perlu mencari produk yang diinginkan saat mereka kembali — sebuah fitur yang akan dimanfaatkan oleh 55% pembeli .

Berikut cara mempertahankan pelanggan ini:

  1. Jadikan kereta berfungsi sebagai daftar harapan dengan menyimpan item yang ditambahkan ke troli.
  2. Buat opsi untuk memungkinkan pembeli menerima email dengan item yang disimpan. Pengingat tampilan bahwa mereka dapat menggunakan desktop mereka untuk menyelesaikan pembelian.

Gunakan Formulir Deskriptif dan Ber-Label Baik

Menerapkan praktik terbaik untuk formulir seluler adalah pertimbangan lain. Sangat penting bahwa desain UX dari aplikasi atau situs eCommerce, sambil menghilangkan kebingungan, memungkinkan pengguna untuk mengisi formulir secepat mungkin.

Berikut adalah praktik terbaik untuk kegunaan bentuk seluler:

  • Tempatkan label formulir di atas formulir untuk meningkatkan keterbacaan, kemudahan penggunaan, dan kejelasan. Menjelaskan mengapa informasi tertentu diperlukan akan mengurangi kecemasan pengguna saat mengisi formulir di ponsel mereka.
  • Cocokkan input teks dengan keyboard yang sesuai. Tampilkan dial-pad saat memasukkan nomor telepon dan digit kartu kredit, dan teks-pad saat memasukkan alamat dan teks. Ini akan mengurangi kesalahan pengguna dan mempercepat penyelesaian formulir.
  • Batasi jumlah bidang input untuk mengurangi upaya pengetikan. Kolom input yang lebih sedikit akan menghasilkan formulir yang lebih sedikit dimuat dan akan meningkatkan aliran checkout UX.
  • Tingkatkan setiap bidang secara otomatis ke atas layar saat selesai. Melakukan ini tidak akan menghalangi pandangan apa pun dari bidang yang tidak lengkap.
  • Gunakan stepper alih-alih menu drop-down untuk mengurangi upaya pembelanja. Steppers digunakan untuk menambah atau mengurangi nilai dengan jumlah yang konstan dan merupakan solusi yang lebih cepat untuk digunakan dan lebih menarik bagi mata.
formulir pendaftaran ux eCommerce seluler
Formulir berlabel jelas di aplikasi seluler Sears .

Memberikan saran otomatis cerdas, deteksi otomatis, pencarian alamat, dan kesalahan

Tujuan utama di balik saran otomatis adalah untuk mempermudah dan mempercepat pengguna mengisi formulir. Saran otomatis memprediksi permintaan pencarian umum dan membantu pembeli menemukan produk dengan lebih mudah.

Kegunaan seluler dapat lebih ditingkatkan dengan menggunakan deteksi otomatis tipe kartu kredit. Deteksi otomatis memperlancar proses pembelian dengan memberikan umpan balik langsung untuk jenis kartu yang didukung. Otomatisasi sebanyak mungkin proses entri data — lebih disukai dengan visual — meningkatkan pengalaman pengguna dan secara positif akan memengaruhi tingkat konversi.

mobile eCommerce ux pencarian sugestif
Cari dengan saran otomatis di aplikasi Etsy ‘s and Toys “R” Us ‘.

Pencarian alamat dan validasi mempercepat proses checkout — berbagai API (seperti Google Places dan USPS ) memungkinkan implementasi fitur ini dengan mudah.

Memberikan validasi input inline untuk kesalahan juga merupakan praktik terbaik dalam desain UX seluler. Kurangnya kinerja cepat adalah frustrasi utama bagi pembeli eCommerce. Ini dapat membantu dengan memberikan umpan balik langsung kepada pengguna tentang kemajuan mereka (misalnya, saat checkout), terutama ketika mereka melakukan kesalahan yang tidak disengaja. Ini memungkinkan pengguna untuk memperbaiki kesalahan mereka dengan segera, yang mempengaruhi kegunaan dengan cara yang positif.

Gunakan Interaksi Mikro untuk Meningkatkan Belanja Mobile UX

Interaksi mikro adalah detail dalam antarmuka produk yang dimaksudkan untuk menyelesaikan satu tugas sekaligus meningkatkan aliran produk alami. Menyukai dan memberi peringkat produk, memilih warna dan ukuran, dan menggesekkan untuk menyegarkan data adalah contoh interaksi mikro.

interaksi mikro mobile eCommerce ux
Interaksi warna pemilihan produk dalam eCommerce seluler oleh Mykolas Puodziunas .

Mempertimbangkan seberapa umum mereka, interaksi mikro dapat membuat atau menghancurkan UX aplikasi mobile eCommerce.

Interaksi mikro dapat digunakan untuk:

  • Bimbing pengguna melalui aplikasi dengan cara yang lebih intuitif;
  • Sampaikan rasa percaya yang lebih baik, kurangi kecemasan pembeli, dan tingkatkan kenyamanan psikologis secara keseluruhan karena interaksi yang lebih halus dan lebih alami;
  • Cegah kesalahan di masa depan dan berikan umpan balik langsung kepada pengguna berdasarkan aktivitas yang telah mereka selesaikan; dan / atau
  • Tingkatkan interaksi pengguna dengan aplikasi dengan menanggapi pemberitahuan.

Memberikan Interaksi yang Mudah dan Berorientasi Ibu Jari

Memahami cara paling umum yang dimiliki pembeli untuk menggunakan perangkat selulernya meningkatkan pengalaman dan kegunaan pengguna eCommerce seluler. Pada 2013, Steven Hoober bertanya, “Bagaimana Pengguna Benar-Benar Memegang Perangkat Seluler?” dan mengamati bagaimana orang berinteraksi dengan dan memegang smartphone mereka, dan memperhatikan tiga pola perilaku utama yang seharusnya memandu desain UX seluler.

eCommerce mobile dan desain berorientasi ibu jari
Di mana tangan dan ibu jari jatuh pada perangkat? UX berorientasi jempol .

Menyesuaikan antarmuka dengan cara orang menggunakan ponsel secara alami akan meningkatkan kenyamanan pengguna dan mengurangi kecemasan pembeli. Perangkat seluler dan ukuran layar berbeda-beda, namun “zona ibu jari”, aspek kritis dari desain dan pengalaman pengguna, tetap sama.

Mendesain di sekitar “zona ibu jari”:

  • Memecahkan masalah potensial dengan navigasi dan eksplorasi
  • Meningkatkan interaksi dengan mengakomodasi gerakan dan jangkauan jari dengan lebih baik
  • Mengubah lebih baik dan meningkatkan kegunaan dengan menempatkan elemen-elemen penting di zona “mudah dijangkau”

Pertimbangan untuk Desain eCommerce Seluler yang Berorientasi Konversi

Sampaikan Rasa Aman dalam Aplikasi Mobile eCommerce

Keamanan adalah salah satu kekhawatiran terbesar bagi pengguna saat berbelanja di perangkat seluler. Mengkomunikasikan bahwa transaksi mereka aman menambah banyak nilai pada persepsi positif yang dimiliki pembeli terhadap sebuah toko.

memberikan rasa aman dalam eCommerce seluler dengan lambang kepercayaan
Penggunaan lambang kepercayaan dalam aplikasi Walmart dan Walgreens .

Berikut adalah beberapa teknik desain UX yang mengomunikasikan keamanan kepada pengguna dan mengurangi kecemasan pengguna :

  • Buat label tombol sugestif dan jelas ke mana tujuan pembeli. Kata-kata seperti “lanjutkan,” “aman,” dan “terenkripsi” akan memperkuat kenyamanan psikologis pengguna.
  • Gunakan simbol kunci untuk memberikan jaminan kepada pembeli bahwa transaksi mereka aman.
  • Gunakan lencana kepercayaan oleh penyedia keamanan seperti McAfee Secure dan Norton. Ini membantu pengguna menerima situs web secara positif (studi Baymard Institute).
  • Terapkan prinsip-prinsip psikologi warna dalam desain untuk persepsi kepercayaan yang lebih baik oleh pembeli. Beberapa prinsip ini termasuk warna yang berorientasi pada audiens dan jenis kelamin tertentu.
mobile eCommerce ux desain tombol sugestif
Desain tombol sugestif dalam aplikasi Dell .

Prioritaskan Pencarian (dan Simpan di Atas Lipatan)

Pembeli menggunakan situs atau aplikasi eCommerce seluler untuk menjelajahi produk atau membeli produk tertentu; akibatnya, pencarian yang dirancang dengan baik sangat penting untuk aplikasi eCommerce seluler. eBay percaya pencarian situsnya adalah salah satu fitur paling penting bagi pembeli ponsel dan menekankannya dengan menempatkannya di tengah dan di atas flip pada antarmuka.

pencarian eCommerce seluler
Cari di aplikasi seluler American Eagle Outfitters dan LLBean .

Pertimbangan penting untuk pencarian seluler:

  • Pastikan itu terlihat! Menjaga bilah pencarian agar mudah diakses dan di atas flip memberi pembeli cara untuk mencari produk dengan mudah.
  • Berikan pencarian penglihatan dengan menggunakan data yang diperoleh dari pola pencarian umum, dan tampilkan produk terkait pada halaman hasil pencarian.
  • Memberikan opsi pemfilteran canggih yang memungkinkan pelanggan menemukan produk yang diinginkan dengan cepat dan mudah.

Aspek penting untuk dipertimbangkan saat menampilkan formulir pencarian adalah bahwa mereka hanya bernilai pada tahap pertama interaksi pengguna dengan aplikasi. Pengguna biasanya mencari aplikasi di awal perjalanan belanja mereka, dan mungkin ada contoh saat menampilkan formulir pencarian di kemudian hari dalam perjalanan dapat membahayakan UX.

Misalnya, selama proses checkout, pencarian tidak lagi berguna dan hanya akan mengalihkan perhatian karena bisa membuat pengguna kehilangan fokus dan melepaskan komitmen mereka terhadap pembelian.

Memberikan Checkout yang Halus, Mudah, dan Cepat

Penelitian telah menunjukkan bahwa proses checkout adalah bagian yang paling menegangkan dari menyelesaikan pembelian online. Baymard Institute melaporkan tingkat 35% untuk pengabaian keranjang karena persyaratan untuk membuat akun sebelum membeli. Untuk mengurangi tingkat pengabaian gerobak, penting untuk merancang proses checkout yang mudah dan cepat yang tidak meminta pembeli untuk mendaftar terlebih dahulu.

arus checkout eCommerce ux seluler
Checkout mengalir dalam aplikasi seluler Etsy dan Ann Taylor .

Studi kegunaan telah menemukan bahwa lebih dari 60% pengguna mengalami kesulitan dalam menemukan opsi checkout tamu; ergo, opsi checkout tamu harus terlihat jelas dan mudah diakses.

alur checkout ux eCommerce seluler
Mobile checkout checkout alur gambar animasi wireframe oleh Michael Pons .

Berikut adalah beberapa saran untuk alur checkout eCommerce yang lebih baik:

  • Untuk mempromosikan keterlibatan pengguna, beri label setiap langkah dari proses checkout dengan memberi nomor dan menampilkan langkah yang saat ini aktif.
  • Gunakan representasi visual seperti bilah kemajuan untuk menampilkan memajukan ke depan dalam proses checkout.
  • Berikan opsi untuk mendaftar dan masuk selama proses checkout, tetapi pilihlah.
  • Untuk mengurangi kecemasan dan tingkat bouncing, sarankan agar pengguna masuk atau mendaftar setelah checkout jika mereka telah check out sebagai tamu.
  • Terapkan teknik pengungkapan progresif untuk meningkatkan fokus pengguna dan memuat konten 30% lebih cepat.

Singkatnya: Apa Beberapa Karakteristik Utama dari Desain eCommerce Seluler yang Sukses?

  • Memberikan proses pendaftaran dan checkout yang cepat dan mudah
  • Menanamkan rasa aman dan kepercayaan dengan menampilkan ikon, lencana, ulasan, dan testimonial yang sesuai
  • Menyediakan interaksi yang dirancang di sekitar zona yang ramah ibu jari
  • Menggunakan navigasi yang konsisten dan kental
  • Menggabungkan pencarian cepat dan penyaringan produk yang mudah
  • Memahami hubungan langsung antara stres pengguna, kecemasan, dan tingkat konversi untuk aplikasi seluler
  • Memberikan pengalaman situs seluler yang memuat dengan cepat dan responsif
  • Mendukung gerakan untuk pembesaran gambar produk

Ruang eCommerce Seluler Hanya Akan Menjadi Lebih Besar

Tren eCommerce seluler menunjukkan bahwa pasar eCommerce seluler tumbuh secara eksponensial dan pertumbuhan industri telah menciptakan banyak manfaat bagi penjual. Namun, dengan itu muncul banyak praktik terbaik dan standar untuk desain eCommerce seluler yang harus diikuti oleh penjual jika ingin sukses.

pengalaman berbelanja ux eCommerce seluler
Aplikasi toko pakaian oleh Vitaly Rubtsov .

Pembeli mengharapkan aplikasi seluler yang berfungsi dengan baik, terlihat cantik, dan disesuaikan dengan perilaku mereka. Meskipun setiap aplikasi berbeda dengan batasan dan tujuannya sendiri, mengikuti prinsip-prinsip dasar yang diuraikan dalam artikel ini akan membantu membuat aplikasi eCommerce seluler yang sukses.

sumber: toptal.com

Share this
Tags

Must-read

Mantaflow Creating Fire

Menciptakan efek api? Mudah dengan Mantaflow! https://www.youtube.com/watch?v=lR9vjaYzeYQ
spot_img

Recent articles

More like this