Tingkatkan Perjalanan E-niaga Anda Dengan Interaksi Mikro UX Animasi

Diterbitkan: 2022-08-18

Ketika diterapkan di seluruh pengalaman e-niaga, interaksi mikro animasi mengomunikasikan kemajuan sistem, meningkatkan kepuasan pengguna, dan meningkatkan rasio konversi. Efek gerakan halus ini memberikan umpan balik visual yang cepat saat pengguna berinteraksi dengan komponen UI, seperti menu atau tombol, dan dimaksudkan untuk meningkatkan kemampuan menemukan dan memandu pengguna saat mereka bernavigasi di antara halaman e-niaga. Selain membantu pengguna menemukan dan membeli produk, mereka dapat menumbuhkan lingkaran kebiasaan yang menghasilkan pelanggan tetap.

Terlepas dari pentingnya mereka dalam corong e-niaga, interaksi mikro animasi tidak perlu terlalu mewah. Menurut desainer UX Alexandre Brito, anggota jaringan Toptal sejak 2016, bahkan efek animasi sederhana—seperti scrollbar, pull-to-refresh, dan swipe—dapat membantu menciptakan pengalaman belanja digital yang intuitif.

Interaksi Mikro UX animasi di Corong Penjualan E-niaga

Corong penjualan e-niaga memiliki empat langkah umum—halaman beranda, halaman kategori, halaman produk, dan pembayaran—yang memandu pengguna dari proposisi nilai awal perusahaan untuk membeli. Pada setiap langkah, lebih banyak informasi terungkap. Interaksi mikro animasi membantu dalam perjalanan penemuan ini. Misalnya, kotak telusur di beranda e-niaga mungkin menandakan interaktivitas dengan meluaskan saat pengguna mengarahkan atau mengetuknya; maka itu mungkin mengungkapkan saran otomatis animasi saat pengguna mengetikkan kueri penelusuran.

“Banyak elemen UI e-niaga memiliki fungsi yang dapat mengambil manfaat dari interaksi mikro untuk melibatkan pelanggan dan memberikan informasi penting,” kata Rashni Parichha, perancang produk dan anggota jaringan Toptal. “Misalnya, ketika pengguna menambahkan item ke troli mereka, interaksi mikro skala-down dan drop-in-cart membuat tindakan ini terasa lebih realistis, seolah-olah pengguna berbelanja di toko batu bata dan mortir,” katanya. “Semakin realistis pengalaman, semakin dalam hubungan antara pengguna dan produk, dan semakin besar kemungkinan kunjungan berulang ke situs.”

Beranda E-niaga

Pembeli digital memiliki rentang perhatian yang berkurang dan sedikit kesabaran untuk UI yang kompleks. Pilihan desain beranda, seperti navigasi, harus strategis untuk menarik perhatian pengguna. Animasi dapat membuat menu drop-down lebih menarik dan memperkuat kategorisasi produk, memudahkan pengguna untuk menemukan item dan mengurangi tingkat drop-off.

Rashni menjelaskan bahwa animasi yang mengatur sejumlah besar informasi berkontribusi pada desain yang lebih intuitif, yang pada gilirannya membantu menarik perhatian pengguna.

Pengguliran paralaks adalah teknik animasi yang kuat untuk menetapkan hierarki visual konten beranda, seperti foto produk, deskripsi, dan kategori. Saat pengguna menggulir halaman beranda, konten muncul pada interval dan kecepatan yang bervariasi, meniru paralaks dunia nyata dan bertindak sebagai bentuk pengungkapan progresif yang memudahkan pengguna untuk memindai dan mencerna informasi di layar.

GIF berlabel "Paralaks, Pemicu: Gulir." Layar di bawah label menunjukkan konten yang disajikan dengan efek pengguliran paralaks. — Pengguliran paralaks membuat latar belakang situs bergerak lebih lambat daripada latar depan saat pengguna menggulir, menciptakan efek seperti 3D.

Halaman Kategori E-niaga

Situs langsung-ke-konsumen menggunakan halaman kategori untuk menyajikan beberapa variasi dari satu produk (seperti barbel di situs produsen peralatan kebugaran ini) sementara pasar e-niaga menggunakan halaman kategori untuk menampilkan berbagai merek yang menjual produk serupa (seperti halaman "kemeja" ASOS , yang menampilkan pakaian dari berbagai merek ritel).

Laman kategori yang berhasil memungkinkan pengguna memindai opsi mereka dengan cepat sebelum menggali lebih detail. Untuk mempercepat proses penemuan produk (dan menghemat ruang di seluler), banyak situs e-niaga menggunakan carousel gambar di halaman kategori mereka. Fitur "Tampilan Cepat" Ikea memungkinkan navigasi cepat melalui kategori situs yang paling populer—menghemat waktu dan klik pengguna.

Korsel gambar menampilkan empat kategori produk di situs web Ikea. — Korsel gambar "Tampilan Cepat" Ikea memungkinkan pengunjung untuk melihat pratinjau kategori produk paling populer di halaman yang sama.

Studi menunjukkan bahwa carousel otomatis membuat frustrasi pengguna karena gerakan cepat dapat mengganggu. Sebaliknya, carousel manual (seperti milik Ikea) mengizinkan pengguna untuk mengklik atau menggesek gambar, dan interaksi mikro animasi yang membuat pengguna mengendalikan UI mereka telah terbukti meningkatkan waktu di halaman dan konversi.

GIF berlabel "Korsel, Pemicu: Klik/Gesek." Layar aplikasi seluler di bawah label menunjukkan serangkaian gambar dalam carousel. — Carousel gambar memungkinkan pengguna untuk melihat beberapa produk dalam waktu singkat tanpa meninggalkan halaman kategori.

Untuk pengalaman carousel gambar terbaik, Rashni merekomendasikan untuk fokus pada transisi yang mulus dan navigasi yang intuitif:

Interaksi mikro slide yang mulus dan berkelanjutan membantu menciptakan ilusi interaksi alami dengan objek fisik. Antisipasi di awal animasi slide dan tindak lanjut di akhir akan membantu memastikan transisi Anda mulus. Antisipasi adalah gerakan sebelum urutan aksi utama (animasi slide kiri/kanan pada carousel gambar). Gerakan singkat berlawanan arah dari aksi utama ini membantu membangun momentum dan kegembiraan. Demikian pula, tindak lanjut adalah gerakan halus mengikuti urutan gerakan, yang membantu membuat animasi tampak lebih realistis.
Navigasi harus mudah diidentifikasi. Kontrol titik atau panah membantu pengguna mengidentifikasi cara bergerak di dalam carousel gambar. Panah harus menunjukkan arah. Titik harus dilubangi secara default dan diisi untuk menekankan gambar saat ini.

Halaman Produk E-niaga

Halaman produk adalah tentang membantu pengguna melakukan tindakan yang terkait dengan konversi, seperti memilih gaya dan jumlah item, menambahkan produk ke keranjang, atau mem-bookmark item favorit. Setiap tindakan ini harus divalidasi dengan umpan balik.

Misalnya, e-retailer Etsy memiliki ikon hati yang memungkinkan pengguna untuk menambahkan item ke favorit mereka. Setelah diklik atau diketuk, animasi yang dihasilkan mengubah hati yang sebelumnya tidak berwarna menjadi merah. Meskipun ini mungkin tampak tidak signifikan, momen interaktivitas seperti itu meningkatkan kepuasan pengguna dengan mengonfirmasi masukan dan menyampaikan kepribadian merek.

Selain itu, ketika antarmuka menggunakan isyarat visual seperti efek animasi untuk mengenali tindakan pengguna, pengguna merasa yakin untuk pindah ke tugas berikutnya.

GIF berlabel "Ikon 'Cinta', Pemicu: Klik/Ketuk." Di bawah label, gambar sepatu kets dan ikon hati yang berubah dari tidak berwarna menjadi biru. Hati biru yang lebih kecil kemudian naik. — Ikon "cinta" atau hati yang digunakan pada platform e-commerce tertentu memungkinkan pengguna untuk menyimpan item ke favorit mereka.

Halaman Pembayaran E-niaga

Alur checkout terbaik dirancang tanpa gesekan: Pengguna Amazon dapat mempercepat pembayaran dengan satu klik tombol "Beli sekarang". Tetapi checkout juga merupakan waktu di mana pengguna membutuhkan panduan ekstra saat mereka memasukkan informasi pribadi yang diperlukan untuk pembelian.

Langkah-langkah kemajuan memecah informasi pembelian menjadi bagian-bagian yang dapat dicerna, seperti detail masuk, pengiriman, dan penagihan. Menambahkan interaksi mikro animasi ke stepper memberikan umpan balik visual yang mengarahkan dan memotivasi pengguna untuk menyelesaikan proses checkout. Misalnya, saat pengguna memasukkan data ke dalam bidang formulir pembayaran, animasi langkah kemajuan mungkin menunjukkan garis yang bergerak dari satu langkah (diwakili oleh lingkaran) ke langkah berikutnya. Efek seperti itu memberi pengguna umpan balik yang berkelanjutan saat mereka mendekati tujuan mereka untuk melakukan pembelian.

GIF berlabel "Progress Stepper, Trigger: Input Data." Di bawah label, stepper kemajuan dengan dua titik. Formulir di bawah stepper diisi dan titik kedua berubah status agar sesuai dengan titik pertama. — Stepper kemajuan menampilkan kemajuan melalui urutan langkah logis dan terkadang bernomor. Setiap titik mewakili satu langkah.

Praktik Terbaik untuk Mendesain Interaksi Mikro E-niaga Animasi

Interaksi mikro animasi terdiri dari empat bagian: pemicu, aturan, umpan balik, dan loop dan mode. Selain memahami struktur dasarnya, ada beberapa praktik terbaik yang perlu dipertimbangkan saat merancang interaksi mikro animasi untuk platform e-niaga.

Buat Lingkaran Kebiasaan yang Memikat

Lingkaran kebiasaan adalah kerangka kerja untuk memahami perilaku reaksioner. Ini terdiri dari isyarat, rutinitas, dan hadiah. Karena orang kembali ke aktivitas yang menyenangkan, banyak situs e-commerce menawarkan hadiah yang mendorong tindakan berulang, seperti kode tabungan yang diberikan setelah checkout untuk membujuk pembelian di masa mendatang.

Selain itu, ketika kita menemukan hal-hal baru dan menarik, otak kita melepaskan dopamin, yang menciptakan putaran pencarian hadiah. Interaksi mikro animasi membantu menciptakan momen penemuan dan kesenangan ini, membentuk lingkaran kebiasaan yang memacu interaksi dan keterlibatan berkelanjutan. Misalnya, Etsy memperkenalkan ikon pemberitahuan animasi ketika pengguna menambahkan item ke keranjang atau daftar keinginan (isyarat). Ketika pengguna mengklik ikon (rutin), mereka menemukan penawaran dan diskon terkait (hadiah).

Sebuah lingkaran abu-abu. Tiga kotak di sepanjang keliling diberi label "Isyarat", "Rutin", dan "Hadiah". — Interaksi mikro yang dirancang dengan baik dapat membantu menciptakan lingkaran kebiasaan yang mengarah pada keterlibatan pengguna yang berkelanjutan.

Tetap Fungsikan Animasi

Interaksi mikro animasi fungsional memberikan isyarat visual sederhana yang mempercepat banyak proses di saluran penjualan. Misalnya, selama checkout, efek pudar pada klik mouse akan menghapus teks placeholder bidang input dan memberi sinyal kepada pengguna bahwa mereka dapat mulai menulis.

GIF berlabel "Teks Placeholder, Pemicu: Klik/Ketuk." Di bawah label, formulir nama pengguna dan kata sandi dengan tombol "Masuk". — Interaksi mikro animasi memberikan petunjuk bermanfaat yang membantu pengguna dalam melengkapi formulir.

Namun, jika pengguna mengklik keluar dari bidang dan placeholder tidak kembali, mereka mungkin merasa frustrasi jika mereka tidak dapat mengingat apa yang dibaca placeholder. Interaksi mikro tidak perlu diperhatikan, tetapi harus diimplementasikan dengan cara yang tidak mengurangi pengalaman pengguna. Brito menekankan bahwa animasi “harus melengkapi pengalaman pengguna, daripada mencuri fokus darinya.”

Desainer produk Muhammad Junaid, anggota jaringan Toptal sejak 2020, menegaskan kembali bahwa interaksi mikro harus memiliki tujuan yang jelas dan menghindari pengguna yang terganggu. “Di situs e-commerce, mereka harus mendorong konversi daripada hanya menawarkan nilai estetika. Animasi yang berlebihan menyebabkan kelebihan kognitif dan pengabaian keranjang.”

Gunakan Satu Interaksi Mikro Per Tindakan

Komponen UI, seperti tombol ajakan bertindak dan ikon keranjang belanja, berulang kali muncul di seluruh situs e-niaga individual. Namun, interaksi mikro animasi yang ditetapkan untuk komponen tersebut harus berbeda dan konsisten. Misalkan menggesek ke kiri atau ke kanan melalui carousel gambar halaman kategori memicu munculnya foto produk animasi: Kombinasi interaksi yang sama harus digunakan untuk carousel gambar halaman produk (untuk mencocokkan model mental pengguna) tetapi tidak untuk "Meningkatkan Kuantitas Item" tombol.

Dari sudut pandang desain, menganimasikan interaksi mikro memperkenalkan lapisan kompleksitas pada pengambilan keputusan yang kreatif. Gerakan mengilhami komponen UI dengan ciri karakter berbeda yang mengkomunikasikan makna, dan mungkin sulit untuk merancang dan menerapkan gaya animasi yang kohesif di seluruh situs e-niaga. Untungnya, Anda tidak perlu menambahkan gerakan ke setiap komponen e-niaga: Kami telah membuat infografis yang memvisualisasikan interaksi mikro berdampak tinggi untuk dianimasikan di setiap langkah corong penjualan e-niaga.

Serangkaian 12 fitur dan interaksi mikro terkait yang biasa digunakan pada platform e-niaga, termasuk bilah pencarian, korsel, laci troli, dan formulir pembayaran.

Memaksimalkan Interaksi Mikro Animasi untuk E-commerce

Interaksi mikro animasi merupakan aspek penting dari desain e-niaga yang meningkatkan keterlibatan, membuat fitur desain UI lebih intuitif dan informatif, dan membantu mengubah pembeli biasa menjadi pembeli tetap. Dengan tetap memperhatikan praktik terbaik dan wawasan ahli, Anda dapat menghindari efek gerakan yang berlebihan dan merancang interaksi mikro animasi yang berkonversi.

Bacaan Lebih Lanjut di Blog Desain Toptal

Panduan Utama untuk Desain Situs Web E-niaga
Panduan Komprehensif untuk Desain Notifikasi
Menarik dan Bergerak: Panduan untuk Prinsip Desain Gerak