Kemampuan CSS dan UI mengacu pada fitur dan sintaksis CSS baru yang memungkinkan Anda mengurangi atau mengganti solusi JavaScript kustom atau beberapa peretasan CSS serta membantu Anda menulis kode yang lebih baik dan sederhana. Dengan mengadopsi fitur CSS modern, developer dapat:
- Mengurangi waktu pengembangan.
- Meningkatkan efisiensi, keterbacaan, dan pemeliharaan kode.
- Meningkatkan performa.
- Buat antarmuka pengguna yang indah dan lancar, efisien, dan mudah diakses.
Dalam serangkaian studi kasus ini, pelajari cara berbagai situs e-commerce mengadopsi
animasi berbasis Scroll, View Transitions, Popover API, Kueri Container,
dan pemilih has(), serta manfaat yang mereka dapatkan dari penerapan tersebut.
Mengapa situs e-commerce harus menggunakan fitur ini?
Dalam Six steps for Justifying Better UX, Forrester Research menunjukkan bahwa UI yang didesain dengan baik dapat meningkatkan konversi hingga 200%. Pengguna tampaknya menghubungkan kualitas desain dengan kepercayaan dengan 94% konsumen mengutip desain sebagai alasan utama untuk meninggalkan atau tidak memercayai situs. Itulah sebabnya situs e-commerce akan mendapatkan manfaat terutama dari kemampuan CSS dan UI ini. Funnel konversi harus selancar mungkin, agar pengguna dapat menyelesaikan tugas mereka dengan mudah dan percaya diri. Interaksi responsif dan navigasi yang lancar dapat memberikan masukan visual yang baik bagi pengguna, serta menambahkan kesenangan dan ekspresi pada keseluruhan perjalanan.
Fitur-fitur ini telah didesain agar mudah digunakan, dan dapat diimplementasikan sebagian besar di CSS dengan JavaScript minimal. Solusi ini membantu menciptakan pengalaman e-commerce yang luar biasa tanpa harus menggunakan library pihak ketiga atau JavaScript kustom untuk membuat fungsi yang sama. Menggunakan lebih sedikit JavaScript juga dapat meningkatkan performa Anda: menjadikan pengalaman ini lebih lancar dan responsif.
Kemampuan UI web dapat digunakan di semua bagian perjalanan pengguna. Berikut ini beberapa contoh nyata:
| Fitur/Perusahaan | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Animasi berbasis scroll | Keranjang | Halaman Listingan Produk (PLP) | Halaman Detail Produk (PDP) |
| Melihat Transisi | Login | PDP | PDP |
| Pop-up | - | - | PDP |
| Kueri Penampung | Beranda | - | PDP |
| :has() | - | data konversi (PLP) | PDP |
Kolom ini juga dapat ditampilkan sebagai funnel konversi:
Studi kasus berikut menyajikan cara perusahaan menerapkan fitur ini dan manfaat yang mereka temukan.
Terima kasih kepada Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme, dan Rachel Andrew atas masukan dan ulasan Anda terkait rangkaian artikel ini.