Các chức năng của CSS và giao diện người dùng là các tính năng và cú pháp mới của CSS, cho phép bạn giảm bớt hoặc thay thế các giải pháp JavaScript tuỳ chỉnh hoặc một số mẹo sử dụng 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ử đã sử dụng ảnh động điều hướng cuộn, hiệu ứng chuyển đổi khung hiển thị, 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ọ thấy đượ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ài viết 6 bước để lý giải trải nghiệm tốt hơn, Forrester Research cho thấy rằng giao diện người dùng được thiết kế hợp lý có thể tăng số lượt chuyển đổi lên đến 200%. Có vẻ như người dùng sẽ liên hệ được mối liên hệ giữa 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 người dùng 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 chức năng CSS và giao diện người dùng này. Phễu chuyển đổi cần phải mượt mà nhất có thể để người dùng có thể hoàn thành nhiệm vụ của mình một cách dễ dàng và tự tin. 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 tốt bằng hình ảnh cho người dùng, đồng thời làm tăng sự thích thú và biểu cảm 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 rất ít JavaScript. Các API 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 sử dụng thư viện của bên thứ ba hoặc JavaScript tuỳ chỉnh để tạo chức năng tương tự. Việc sử dụng ít JavaScript hơn cũng có thể giúp bạn tăng hiệu suất: khiến những trải nghiệm này mượt mà và phản hồi nhanh hơn.
Các chức năng của giao diện người dùng web có thể được dùng trên mọi giai đoạn trong hành trình của người dùng. Sau đây là một số ví dụ thực tế:
| Tính năng/Công ty | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Ảnh động hướng cuộn | Giỏ hàng | Trang danh sách sản phẩm (PLP) | Trang chi tiết sản phẩm (PDP) |
| Xem hiệu ứng chuyển đổi | Đăng nhập | trang mô tả sản phẩm | trang mô tả sản phẩm |
| Cửa sổ bật lên | - | - | trang mô tả sản phẩm |
| Truy vấn vùng chứa | Trang chủ | - | trang mô tả sản phẩm |
| :has() | - | PLP (Danh sách mở rộng) | trang mô tả sản phẩm |
Thông tin này cũng có thể hiển thị 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 cũng như lợi ích mà họ khám phá được.
Xin đặc biệt gửi thư mời Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme và Rachel Andrew cung cấp ý kiến phản hồi và đánh giá cho loạt bài viết này.