Các tính năng CSS và giao diện người dùng đề cập đến các tính năng và cú pháp CSS mới, cho phép bạn giảm hoặc thay thế các giải pháp JavaScript tuỳ chỉnh hoặc một số thủ thuật CSS, đồng thời giúp bạn viết mã tốt hơn và đơn giản hơn. Việc sử dụng các tính năng CSS hiện đại cho phép nhà phát triển:
- Giảm thời gian phát triển.
- Cải thiện hiệu quả, khả năng đọc và khả năng bảo trì của mã.
- Cải thiện hiệu suất.
- Tạo giao diện người dùng đẹp mắt, liền mạch, hiệu quả và dễ tiếp cận.
Trong loạt nghiên cứu điển hình này, hãy tìm hiểu cách nhiều trang web thương mại điện tử đã áp dụng ảnh động do cuộn, Chuyển đổi chế độ xem, API cửa sổ bật lên, Truy vấn vùng chứa và bộ chọn has(), cũng như những lợi ích mà họ nhận được từ việc này.
Tại sao các trang web thương mại điện tử nên sử dụng các tính năng này?
Trong báo cáo Sáu bước lý giải cho việc cần có trải nghiệm người dùng tốt hơn, Forrester Research cho thấy rằng một giao diện người dùng được thiết kế tốt có thể làm tăng số lượt chuyển đổi lên tới 200%. Người dùng có vẻ như liên kết chất lượng thiết kế với niềm tin, trong đó 94% người tiêu dùng cho rằng thiết kế là lý do chính khiến họ rời khỏi hoặc không tin tưởng một trang web. Đây là lý do các trang web thương mại điện tử sẽ đặc biệt hưởng lợi từ các tính năng CSS và giao diện người dùng này. Phễu chuyển đổi cần phải trơn tru nhất có thể để người dùng có thể dễ dàng và tự tin hoàn thành nhiệm vụ của mình. Các hoạt động tương tác thích ứng và điều hướng liền mạch có thể cung cấp phản hồi trực quan tốt cho người dùng, đồng thời mang lại niềm vui và sự thể hiện cho toàn bộ hành trình.
Các tính năng này được thiết kế để dễ sử dụng và có thể được triển khai chủ yếu trong CSS với JavaScript tối thiểu. Các thành phần này giúp tạo ra trải nghiệm thương mại điện tử tuyệt vời mà không cần phải sử dụng thư viện của bên thứ ba hoặc JavaScript tuỳ chỉnh để tạo cùng một chức năng. Việc sử dụng ít JavaScript hơn cũng có thể giúp bạn tăng hiệu suất: giúp các trải nghiệm này mượt mà và thích ứng hơn.
Bạn có thể sử dụng các tính năng của giao diện người dùng web trên tất cả các phần của hành trình của người dùng. Dưới đây là một số ví dụ thực tế:
| Tính năng/Công ty | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Ảnh động do cuộn | Giỏ hàng | Trang thông tin sản phẩm (PLP) | Trang thông tin sản phẩm (PDP) |
| Chuyển đổi thành phần hiển thị | Lượt đăng nhập | PDP | PDP |
| Cửa sổ bật lên | - | - | PDP |
| Truy vấn vùng chứa | Trang chủ | - | PDP |
| :has() | - | PLP | PDP |
Bạn cũng có thể xem thông tin này dưới dạng phễu chuyển đổi:
Các nghiên cứu điển hình sau đây chia sẻ cách các công ty triển khai các tính năng này và lợi ích mà họ nhận được.
Xin cảm ơn Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme và Rachel Andrew đã dành thời gian phản hồi và xem xét loạt bài viết này.