Sàn thương mại điện tử ưu tiên gì trước trong hệ thiết kế số

Thương mại điện tử có ba đặc điểm riêng mà SaaS hay website branding không có: giao diện thay đổi liên tục theo chiến dịch, người dùng đưa ra quyết định mua trong vài giây, và tỷ lệ thoát khỏi giỏ hàng rất cao nếu luồng thanh toán có trở ngại. Ba đặc điểm đó quyết định design system của anh chị phải ưu tiên những gì khác so với sản phẩm phần mềm thông thường.

Hai lớp token: nền tảng không thể thiếu

Sai lầm phổ biến nhất khi xây design system cho e-commerce là để token phẳng, tức là một danh sách biến màu và font không phân cấp. Kết quả là mỗi khi Tết đến hay 11.11, đội kỹ thuật phải vào sửa tay hàng chục file, rủi ro phá layout rất cao.

Cách tổ chức đúng là tách token thành hai lớp rõ ràng:

• Structural token (token cấu trúc): khoảng cách, shadow, border radius, tỷ lệ grid. Lớp này cố định, không thay đổi dù chiến dịch nào.
• Campaign token (token chiến dịch): màu nền, màu accent, kiểu chữ tiêu đề, màu badge khuyến mãi. Lớp này thay đổi theo mùa vụ mà không chạm vào lớp structural.

Khi tách rõ như vậy, marketing team có thể tự cập nhật giao diện cho chiến dịch mới mà không cần kỹ sư theo dõi từng thay đổi, và baseline accessibility (tiêu chuẩn tiếp cận) của checkout flow vẫn được giữ nguyên.

Core Web Vitals không phải việc của kỹ thuật đơn thuần

Core Web Vitals là bộ chỉ số Google dùng để đo trải nghiệm người dùng thực tế, gồm LCP (tốc độ tải nội dung chính), FID (độ trễ tương tác đầu tiên) và CLS (độ ổn định bố cục khi tải). Ba chỉ số này ảnh hưởng trực tiếp đến thứ hạng SEO và tỷ lệ người dùng ở lại trang.

Quyết định thiết kế ảnh hưởng trực tiếp đến các chỉ số này. Carousel tự động chạy ảnh, video background, component nặng trên màn hình đầu tiên đều có thể kéo tụt LCP và CLS. Vì vậy trong giai đoạn thiết kế, Sinh Vũ khuyến nghị đặt performance budget (ngân sách hiệu suất): xác định ngưỡng kích thước tối đa cho từng loại component, đặc biệt là những component xuất hiện trên product listing page và trang chủ.

Tại Việt Nam, tỷ lệ mua hàng qua mobile cao và kết nối mạng không đồng đều, nên responsive không chỉ là co giãn màn hình mà còn là tối ưu cho thao tác một tay, button đủ kích thước chạm, và skeleton loading (trạng thái hiển thị tạm khi dữ liệu chưa về) để tránh giao diện trông bị vỡ.

Luồng chuyển đổi: ưu tiên checkout trước, visual sau

Baymard Institute qua nhiều năm nghiên cứu về usability của e-commerce chỉ ra rằng checkout là điểm thoát lớn nhất, và nguyên nhân thường đến từ ba vấn đề: form validation không rõ ràng, thiếu trust signals (tín hiệu tin cậy như badge bảo hành, đánh giá người dùng, chính sách đổi trả), và quy trình quá nhiều bước.

Từ đó, Sinh Vũ tư vấn xây phần checkout và form thanh toán theo chuẩn Baymard và WCAG (tiêu chuẩn tiếp cận quốc tế) trước khi bàn đến visual. Cụ thể:

• Inline validation: báo lỗi ngay khi người dùng rời khỏi ô nhập liệu, không chờ đến khi bấm submit.
• Focus management: bàn phím và trình đọc màn hình phải điều hướng được qua toàn bộ luồng mua hàng.
• Trust signals được chuẩn hóa thành component tái sử dụng, xuất hiện nhất quán trên product card, trang sản phẩm và checkout.

Product card và các component lặp lại nhiều

Product card là component xuất hiện nhiều nhất trên sàn và cũng là nơi dễ mất nhất quán nhất. Khi không có chuẩn, mỗi danh mục hay mỗi chiến dịch lại có card hiển thị giá khác nhau, badge giảm giá khác nhau, trạng thái hết hàng khác nhau. Người dùng khó so sánh và mất tin tưởng vào giao diện.

Nielsen Norman Group chỉ ra nguyên tắc Progressive Disclosure (tiết lộ thông tin theo tầng ưu tiên) đặc biệt quan trọng ở product listing page: hiển thị đủ để quyết định click vào xem chi tiết, không nhồi mọi thông tin vào card. Anh chị cần thống nhất ngay từ đầu: card hiển thị tối đa bao nhiêu thông tin, thứ tự ưu tiên là gì, và trạng thái nào cần badge riêng.

Ngoài product card, các component cần chuẩn hóa sớm bao gồm: countdown timer cho flash sale, trạng thái hàng tồn kho, và add-to-cart button với các biến thể trạng thái đủ để dùng lại toàn sàn.

Lăng kính Sinh Vũ

Giao diện đẹp không giữ người dùng ở lại checkout. Luồng rõ ràng, form không gây nhầm lẫn, và trang tải nhanh mới giữ được. Visual là lớp cuối cùng, không phải điểm bắt đầu.

Sinh Vũ Studio, nguyên tắc tư vấn thiết kế thương mại điện tử

Trong thực hành, Sinh Vũ ưu tiên thứ tự: chuẩn hóa component checkout và form trước, xây hệ token hai lớp tiếp theo, sau đó mới thiết kế visual cho product card và trang danh mục. Sàn đa người bán cần thêm một lớp theming nữa cho gian hàng người bán, với quy tắc rõ ràng về những gì người bán được phép thay đổi và những gì phải giữ theo chuẩn sàn. Sinh Vũ không tham gia tích hợp payment gateway hoặc hệ thống logistics phía backend.