Cara Meningkatkan UX Situs Seluler eCommerce Anda

Selalu ingat bahwa praktik terbaik yang dibagikan oleh seseorang mungkin bukan yang terbaik untuk orang lain. Praktik terbaik ini tidak diciptakan sama tetapi hanya titik awal. Dalam seri artikel ini, kita akan membahas praktik atau pedoman terbaik situs seluler yang sangat diteliti. Tujuan kami adalah untuk memperluas pengetahuan kami tentang mengembangkan situs seluler yang menakjubkan dan memvalidasi praktik terbaik dengan data kuantitatif tentang bagaimana pengguna memandang situs seluler dalam dimensi tertentu dari tampilan, kejelasan, kredibilitas, dan kegunaan.

Akan lebih baik untuk menggunakan panduan artikel ini dalam latihan Anda, tetapi bukan itu yang seharusnya Anda dapatkan. Di sinilah Anda harus memulai optimasi Anda. Anda harus setidaknya sebagus pedoman ini. Ingat, ini adalah praktik web saat ini. Apa yang dulu berfungsi 2 tahun yang lalu mungkin tidak berfungsi lagi. Angka taktik itu nyata. Orang, teknologi web, dan tren pemasaran selalu berubah, dan kemenangan selalu dapat hilang.

Sebaiknya pertimbangkan pedoman ini tetapi juga pertimbangkan bagaimana situs web spesifik Anda cocok atau berbeda dari pedoman. Anda dapat langsung menerapkan praktik ini di situs seluler, meskipun kami menyarankan untuk mengujinya terlebih dahulu. Mereka mungkin tidak diterapkan dalam setiap kasus. Mari kita lihat bagian pertama dari “Bagaimana cara meningkatkan UX Situs Seluler Toko E-niaga Anda?”

1. Cobalah Mendesain Situs Seluler Anda Terlebih Dahulu (yaitu Sebelum Mendesain Situs Desktop)

Kita semua tahu pentingnya perangkat seluler dalam penjualan kita. Lebih dari 50% penjualan dilakukan dari perangkat seluler. Mendesain situs seluler bukanlah hal yang menyenangkan atau mudah. Ini adalah cara paling cerdas untuk mulai mendesain situs Anda. Mari kita tahu mengapa:

Pembatasannya adalah perangkat seluler lebih tinggi daripada platform lainnya. Layar berukuran lebih kecil, dan bandwidth rendah, dan banyak batasan lainnya. Jika Anda memulai dari awal dengan situs seluler, komplikasi yang datang dengan degradasi yang baik (seperti fungsi yang tidak diterjemahkan di seluruh platform atau data yang tidak diinginkan yang membutuhkan lebih banyak waktu untuk dimuat) dapat dihindari.

Selanjutnya, situs seluler yang ramah pengguna harus bersih, intuitif, dan cepat dimuat. Persyaratan ini memaksa desainer untuk memahami mengapa pengguna mengunjungi situs dan konten serta fitur mana yang penting.
UX yang lebih baik di platform seluler berarti pengguna dapat dengan mudah menemukan semua yang mereka cari dan tidak lebih. Selain itu, mengembangkan kerangka kerja yang jelas untuk konten yang diprioritaskan mengurangi beban kerja untuk mendesain situs desktop.

2. Secara Otomatis Mengarahkan Situs Seluler, Dan Halaman Harus Dioptimalkan untuk Seluler

Jumlah pengguna ponsel masih meningkat, meningkatkan jumlah pembeli dari ponsel. Orang sering melakukan pembelian dari ponsel mereka dan berharap itu mudah. Jika Anda tidak mengikuti, Anda tertinggal.

Untuk mengikutinya, situs e-commerce harus dioptimalkan untuk semua perangkat. Berikan pengalaman seluler yang lebih baik dengan situs seluler yang dioptimalkan, yaitu, situs seluler yang sepenuhnya responsif.

Desain responsif adalah praktik di mana halaman web menyesuaikan dengan layar yang sedang dilihat. Konten halaman web secara otomatis menyesuaikan dengan layar perangkat yang berbeda seperti laptop, smartphone, tablet, desktop, dll. Tidak akan ada perubahan dalam konten dan fungsionalitas dengan pendekatan ini.

Dengan situs responsif, URL yang sama sesuai dengan semua platform. Ini berarti bahwa tidak akan ada URL terpisah untuk perangkat seluler, dan pengguna tidak perlu menunggu untuk mengarahkan ulang pada URL ini. Lebih sedikit waktu muat = pengalaman seluler yang lebih baik . Selain itu, semua SEO mengarah ke satu URL.

Situs adaptif seperti situs responsif, tetapi tidak ada tata letak tunggal untuk ukuran layar apa pun. Sebaliknya, ada beberapa tata letak untuk ukuran layar yang berbeda. Situs mendeteksi perangkat mana yang digunakan dan menampilkan tata letak masing-masing.

Sangat mudah untuk mencapai pedoman ini dengan mengembangkan situs seluler yang responsif. Pastikan untuk QA situs di berbagai platform dan perangkat (dengan browser yang berbeda). Juga, periksa semua halaman di situs untuk memastikan mereka dioptimalkan untuk seluler. Kuncinya di sini adalah menawarkan pengalaman pengguna yang optimal bagi pengguna seluler.

3. Desain Konsisten Di Berbagai Platform Untuk UX yang Lebih Lancar

Anda perlu menjaga konsistensi dan standar di semua platform dan perangkat untuk memastikan kegunaan. Ini berarti bahwa pengguna akan menemukan visual, pola, dan alur yang sama di toko e-niaga Anda terlepas dari perangkat yang mereka gunakan. Singkatnya, pengguna yang mengakses toko e-niaga Anda melalui perangkat seluler atau browser desktop memiliki pengalaman yang sama.

Karena ukuran layar berbeda, kebutuhan akan tata letak yang berbeda mungkin muncul, tetapi dalam pengalaman yang dirancang secara konsisten, pengguna akan mengenali fungsi yang sudah dikenal.

Banyak pemula dan pengusaha membuat kesalahan dengan memperlakukan situs desktop dan seluler sebagai produk yang berbeda. Pendekatan ini dapat menciptakan inkonsistensi, menghasilkan UX yang lebih buruk dan potensi kesalahpahaman merek perusahaan.

Anda dapat menghindari masalah ini. Berikut adalah beberapa rekomendasi:

A. Identitas Visual

Cobalah untuk menggunakan warna, tampilan, gaya font, elemen visual yang sama, dll.

B. Ikonografi yang Konsisten

ikon aplikasi dan web harus mewakili fungsi yang sama

C. Kata-kata

Nama tombol, tautan, dan opsi menu harus sama di situs web seluler dan desktop

D. Interaksi & aliran

Proses navigasi untuk setiap fitur harus sama (misalnya, menemukan produk atau metode checkout)

E. Koordinasi Antara Desainer, Pengembang, & penguji

Setiap orang dalam tim harus memiliki pemahaman yang sama tentang setiap fitur yang digunakan.

Menerapkan konsep dasar ini agar pengguna merasa nyaman menggunakan layanan web dan seluler tanpa kesulitan.

4. Manfaatkan Analytics Untuk Memprioritaskan Perangkat Saat Merancang Situs Seluler Anda

Kita semua mengakses situs web melalui perangkat seluler kita setidaknya sekali. Tetapi jika Anda tahu perangkat atau platform seluler mana yang paling banyak digunakan untuk menjelajahi toko Anda, Anda dapat mengoptimalkan situs Anda dengan paling baik untuk perangkat tersebut.

Alat analitik seperti Google Analytics dapat memberi Anda wawasan metrik yang efisien, cepat, dan jelas untuk menentukan dengan tepat bagaimana pengguna mengakses situs web Anda. Dengan menggunakan Google Analytics, Anda bisa mendapatkan jawaban atas pertanyaan berikut:

• Berapa banyak pengguna yang mengunjungi situs web yang berasal dari komunitas Android atau iOS?
• Berapa bagian pengunjung yang menggunakan perangkat dengan layar resolusi rendah?
• Apakah ada perbedaan jumlah kunjungan halaman dari pengguna yang menggunakan Android versi terbaru dan yang berusia 2 tahun?
• Berapa lama waktu yang dihabiskan pengguna seluler iOS di toko dibandingkan dengan yang Android?
• Jenis koneksi apa yang digunakan? Wifi atau data seluler?

Data seperti ini sangat berharga untuk strategi produk, dan perusahaan dapat fokus pada audiens target Anda. Mereka dapat menciptakan produk yang sesuai dengan kebutuhan nyata penggunanya.

Misalnya , Toko e-niaga memiliki banyak gambar, konten, dan daftar panjang yang memerlukan pengguliran di layar. Mereka mungkin menyadari bahwa sebagian besar pengguna tetap berada di situs selama beberapa detik. Perusahaan dapat memeriksa profil perangkat yang telah mengakses situs mereka. Jika pengguna yang keluar menggunakan perangkat dengan layar kecil dan resolusi rendah, orang mungkin meninggalkan situs karena UX yang buruk. Jadi langkah selanjutnya yang bisa kita lakukan adalah meningkatkan UX.

Singkatnya, semakin banyak yang kami ketahui tentang pengguna, semakin kami dapat memastikan produk yang dapat diakses, efisien, dan menyenangkan.

5. Uji Versi Seluler Situs Anda

Anda harus memeriksa tampilan dan cara kerja situs web Anda di berbagai perangkat seluler. Ada alat tertentu yang tersedia yang dapat Anda gunakan untuk menguji situs web Anda.

A. Google Mobile-Friendly

Ini adalah alat yang sederhana. Anda harus memasukkan URL situs Anda, dan Google akan menghasilkan ulasan yang “ramah pengguna”. Reviewnya bisa seperti ini:
“Halaman ini mudah digunakan di perangkat seluler.”
ATAU
“Halaman tidak mobile-friendly – ​​halaman ini mungkin sulit digunakan pada perangkat seluler. Perbaiki masalah berikut:

• Teks terlalu kecil untuk dibaca
• Area pandang tidak disetel
• Elemen yang dapat diklik terlalu berdekatan
• Menggunakan plugin yang tidak kompatibel.”

B. Tes seluler. Aku

Di test.me seluler, Anda harus memasukkan URL situs web yang ingin Anda periksa dan pilih perangkat dan sistem operasi. Dari sana, Anda bisa mendapatkan tampilan situs web lengkap di perangkat seluler apa pun. Dengan menguji, Anda dapat memperbaiki kesalahan sebelum peluncuran.

6. Buat Layout Desain Fleksibel & Fluid

Di pasar saat ini, ada banyak resolusi seluler dan ukuran layar yang meningkatkan upaya para desainer. Kepadatan banyak perangkat juga bervariasi. Dari layar berkepadatan rendah (360 piksel) hingga layar berkepadatan tinggi (4K), berikut adalah cara umum untuk menggambarkan kerapatan:

• Kepadatan rendah (ldpi)
• Kepadatan sedang (mdpi)
• Kepadatan tinggi (hdpi)
• xhdpi (Kepadatan ekstra tinggi)
• xxhdpi (Kepadatan ekstra-ekstra tinggi)
• xxxhdpi (Kepadatan ekstra-ekstra-ekstra tinggi)

Berikut adalah beberapa istilah sederhana yang terkait dengan kepadatan

A. Resolusi

Jumlah piksel di layar

B. Piksel Densitas-Independen (DP)

Unit piksel virtual mendefinisikan tata letak UI. DP mengekspresikan dimensi atau posisi tata letak dengan cara yang tidak bergantung pada kepadatan. DP sama dengan 1 piksel fisik pada layar 160dpi.

C. Ukuran Layar

Ukuran layar diukur sebagai panjang diagonal layar.

D. Kepadatan Layar

Kuantitas piksel dalam area fisik layar, biasanya diwakili oleh titik per inci.

Semua konsep ini dapat diterapkan saat mengembangkan situs seluler. Itu memastikan bahwa antarmuka dapat disesuaikan di semua perangkat. Ini disebut antarmuka fluida. Singkatnya, antarmuka fluida adalah salah satu di mana dimensi didefinisikan dalam persentase.

7. Jika Anda Tidak Menggunakan Desain Responsif, Buat URL Terpisah Untuk Menjaga Konsistensi

Saat mendesain UI toko e-niaga, desainer harus memikirkan bagaimana konten akan ditampilkan, dan pengguna dengan perangkat yang berbeda akan mengaksesnya. Dalam skenario tertentu, proporsi dan tata letak sangat berbeda dari spesifikasi desain aslinya. Ketika situs web tidak dirancang untuk muat di beberapa perangkat, mereka tidak "responsif".
Desain responsif adalah teknik pengembangan yang mendeteksi jenis perangkat klien dan menyesuaikan desainnya untuk beradaptasi dengan ukuran layar tempat perangkat itu ditampilkan. Dengan demikian, konten yang sama dapat ditampilkan dalam format 3 kolom pada desktop, format 2 kolom pada tablet, dan format 1 kolom pada smartphone.

Desain yang tidak responsif dapat menimbulkan banyak masalah seperti ukuran font yang salah, tombol yang tidak dapat diklik, dll. Tidak semua orang seperti kami yang dapat membuat desain yang sangat responsif. Tetapi ada alternatif bagi pengembang dan desainer untuk mengelola desain web yang responsif. Mereka dapat menghasilkan URL yang secara otomatis mengenali (melalui tag HTML) jenis perangkat. Setelah mendeteksi perangkat, konten dapat ditampilkan secara optimal:

Beberapa contoh URL yang dihasilkan adalah

• www.website.com (akses desktop)
• m.website.com (akses seluler)
• www.website.com (versi lebih ringan dengan HTML dasar) (akses telepon berfitur)

8. Gunakan "Tag Meta viewport" Untuk Menyesuaikan Halaman Dengan Layar Seluler

Menurut Google, "area pandang dapat mengontrol cara beranda ditampilkan di perangkat seluler." Dengan kata lain, jika desainer tidak memperhitungkan area pandang, UI pada perangkat seluler akan muncul seperti situs desktop. Sistem akan mengadaptasi layar untuk penggunaan seluler dalam skenario ini, tetapi umumnya tidak berfungsi. Dalam beberapa kasus, gambar akan terdistorsi dan menciptakan pengalaman pengguna yang buruk. Setelah menerapkan viewport, desainer dapat mengontrol mode tampilan dan meningkatkan UX.

Bagaimana Cara Mengambil Viewport Ke Akun?

Anda dapat menggunakan tag CSS yang disebut “tag meta viewport”, yang disertakan dalam spesifikasi Adaptasi Perangkat CSS.
Tag ini memiliki sintaks berikut: <meta name = “viewport” content = “width = device-width, initial-scale =1”>

9. Saat Memulai Desain Seluler, Tentukan "Inti" Situs Web.

Saat membuat desain situs seluler, perancang harus memastikan bahwa fitur utama situs disajikan dengan jelas. Singkatnya, situs web seluler harus memungkinkan fungsionalitas lengkap karena CTA terlihat jelas di situs web apa pun yang dirancang untuk perangkat seluler.

Tetapi bagaimana menentukan fitur lain yang akan disertakan? Pikirkan tentang inti situs web Anda. Apa pilar utama situs web? Apa saja fitur utama situs web? Fitur mana yang kecil tetapi meningkatkan UX (seperti pencarian, filter, dll.)?

Mari kita lihat contoh penerapan konsep inti ke situs e-commerce pengiriman makanan. Pilar utama situs ini adalah:

• Masuk dan Daftar
• Pencarian Produk
• Daftar Produk
• Masukkan ke keranjang
• Periksa

Situs desktop memiliki lebih banyak fitur, tetapi Anda dapat memfilter yang diperlukan dan memasukkannya ke dalam situs seluler. Ini juga menghilangkan kemungkinan bahwa pengguna akan merasa kewalahan dengan terlalu banyak opsi di layar kecil.

10. Gunakan Formulir Sederhana & Bidang Masukan

Ada formulir yang dapat diisi pengguna di banyak situs untuk menghubungi tim dukungan atau mendapatkan buletin dan tujuan lainnya. Pengguna seluler dapat menemukan formulir ini sebagai masalah besar jika tidak dirancang dengan benar. Semakin panjang dan kompleks bentuknya, semakin sulit bagi pengguna untuk memasukkan informasi.

Bagaimana Mengoptimalkan Formulir Untuk Perangkat Seluler?

• Sertakan hanya bidang penting yang wajib diisi oleh pengguna. Jika ada terlalu banyak bidang wajib, pengguna cenderung mengabaikan proses pendaftaran.
• Jangan membagi bidang menjadi terlalu banyak bidang. Misalnya, nama depan/nama belakang dapat dianggap sebagai nama sederhana.
• Pastikan keyboard numerik diaktifkan secara otomatis untuk bidang numerik seperti Nomor kontak. , kode pos, dll.
• Buat pesan kesalahan menjadi ringkas.
• Cobalah untuk memasukkan otomatisasi di bidang. Misalnya, saat menanyakan alamat pengguna, manfaatkan fungsi GPS dan isi terlebih dahulu bidang seperti kode Pin, negara bagian, kota, dll.

Menerapkan konsep dasar ini akan meningkatkan UX situs seluler Anda. Aplikasi ini akan membatasi kemungkinan pengguna meninggalkan formulir atau situs Anda.

Membungkus

Pada fase pertama dari seri ini, kami telah melalui 10 panduan untuk meningkatkan UX situs seluler dari toko e-niaga Anda. Di Emizentech, perusahaan pengembangan eCommerce terbaik di India, kami memiliki keahlian dalam mengembangkan toko e-niaga yang sangat responsif. Beri tahu kami kebutuhan Anda.