Kemampuan CSS dan UI mengacu pada fitur dan sintaksis CSS baru yang memungkinkan Anda mengurangi atau mengganti solusi JavaScript kustom atau beberapa hack CSS dan membantu Anda menulis kode yang lebih baik dan lebih sederhana. Dengan mengadopsi fitur CSS modern, developer dapat:
- Mengurangi waktu pengembangan.
- Meningkatkan efisiensi, keterbacaan, dan pemeliharaan kode.
- Meningkatkan performa.
- Buat antarmuka pengguna yang menarik, lancar, efisien, dan dapat diakses.
Dalam rangkaian studi kasus ini, pelajari cara berbagai situs e-commerce mengadopsi
Animasi yang didorong scroll, Transisi Tampilan, Popover API, Kueri Penampung,
dan pemilih has(), serta manfaat yang mereka peroleh dari melakukannya.
Mengapa situs e-commerce harus menggunakan fitur ini?
Dalam Six Steps for Justifying Better UX, Forrester Research menunjukkan bahwa UI yang dirancang dengan baik dapat meningkatkan konversi hingga 200%. Pengguna tampaknya mengaitkan kualitas desain dengan kepercayaan, dengan 94% konsumen mengatakan bahwa desain adalah alasan utama mereka meninggalkan atau tidak memercayai situs. Itulah alasan situs e-commerce akan sangat diuntungkan dengan kemampuan CSS dan UI ini. Funnel konversi harus selancar mungkin, sehingga 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 kepuasan dan ekspresi ke perjalanan secara keseluruhan.
Fitur ini telah dirancang agar mudah digunakan, dan sebagian besar dapat diterapkan di CSS dengan JavaScript minimal. Library 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 memberikan peningkatan performa: membuat pengalaman ini lebih lancar dan responsif.
Kemampuan UI web dapat digunakan di semua bagian perjalanan pengguna. Berikut adalah beberapa contoh di dunia nyata:
| Fitur/Perusahaan | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Animasi yang didorong scroll | Keranjang | Halaman Listingan Produk (PLP) | Halaman Detail Produk (PDP) |
| Transisi Tampilan | Login | PDP | PDP |
| Popover | - | - | PDP |
| Kueri Penampung | Beranda | - | PDP |
| :has() | - | PLP | PDP |
Hal ini juga dapat ditampilkan sebagai funnel konversi:
Studi kasus berikut membagikan cara perusahaan menerapkan fitur ini dan manfaat yang mereka temukan.
Kami mengucapkan terima kasih kepada Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme, dan Rachel Andrew atas masukan dan peninjauan rangkaian artikel ini.