Hệ thiết kế số cho thương mại điện tử: ưu tiên phễu mua
Nhất quán đúng chỗ khách hay rời đi mới là việc hệ thiết kế số cần làm trước tiên cho bất kỳ sàn nào.
Với thương mại điện tử, hệ thiết kế số nên ưu tiên nhất quán và tốc độ xuyên suốt hành trình mua. Hành trình ấy còn gọi là phễu mua: khách đi từ lúc xem hàng đến lúc thanh toán. Các khối lặp nhiều nhất gồm thẻ sản phẩm, bộ lọc, giỏ hàng và luồng thanh toán. Những khối này cần được chuẩn hoá thành component (thành phần giao diện dựng sẵn, dùng lại nhiều lần) có đủ trạng thái thật, trước khi mở rộng sang phần khác. Quy mô còn nhỏ thì bắt đầu từ token (bộ giá trị dùng chung về màu, kiểu chữ, khoảng cách) cộng bộ component lõi của phễu mua. Hệ đầy đủ chỉ đáng đầu tư khi đã có đội trong nhà vận hành liên tục.
- doanh thu lớn, nhiều danh mục, có đội trong nhà vận hành liên tục
- sàn nhiều gian hàng hoặc nhiều đội cùng dựng giao diện
- phễu mua có nhiều khối lặp lại cao như thẻ sản phẩm và giỏ hàng
- sàn còn nhỏ hoặc mới có một cửa hàng trực tuyến (dùng tầng token và component lõi)
- đầu tư hệ đầy đủ khi quy mô còn nhỏ, chi phí vận hành vượt lợi ích
Thương mại điện tử đặt ra một bài toán thiết kế rất cụ thể. Trong một lần mua, khách đi qua hàng chục điểm chạm (những chỗ khách nhìn và bấm vào trên trang). Chỉ cần một chỗ lệch chuẩn nhỏ giữa các trang là khách thấy vướng đúng lúc sắp quyết định mua. Vì vậy, câu hỏi đúng với hệ thiết kế số ở đây là: nên chuẩn hoá chỗ nào trước?
Khối lặp nhiều nhất mới là ưu tiên số một
Brad Frost gọi đây là hiệu ứng nhân của hệ thiết kế số: mỗi lần chỉnh đúng một chỗ, kết quả được nhân lên trên toàn phễu mua. Với thương mại điện tử, những khối lặp nhiều nhất là thẻ sản phẩm, ô lọc và sắp xếp, giỏ hàng, và luồng thanh toán. Đây là nơi cần phủ component trước tiên, với đủ trạng thái thật: trạng thái mặc định, trạng thái khi rê chuột qua (hover), trạng thái lỗi, trạng thái hết hàng.
Ngược lại, nhiều dự án chạy theo số lượng component và bỏ sót đúng vài khối quan trọng nhất. Kết quả là có một thư viện component dài nhưng giỏ hàng và trang thanh toán vẫn dùng kiểu chữ, màu nút, và thông điệp lỗi mỗi trang một kiểu.
Nhất quán thị giác xuyên phễu mua
Alla Kholmatova phân biệt hai lớp nhất quán trong hệ thiết kế: lớp chức năng (component kỹ thuật) và lớp cảm nhận, hay còn gọi là perceptual (màu sắc, kiểu chữ, giọng văn, biểu tượng). Với thương mại điện tử, lớp cảm nhận ảnh hưởng trực tiếp đến niềm tin của khách. Ba điểm dễ lệch nhất và cần kiểm soát sớm nhất là:
- Nút hành động chính (thêm vào giỏ, mua ngay): màu, kích thước, độ đậm của chữ phải đồng nhất từ trang sản phẩm đến trang thanh toán.
- Huy hiệu tin cậy (bảo hành, đổi trả, bảo mật thanh toán): cần xuất hiện nhất quán và đúng ngữ cảnh, không phải lúc có lúc không.
- Giá và thông tin khuyến mãi: định dạng số, vị trí, cách hiển thị giá gốc và giá khuyến mãi phải theo một quy tắc duy nhất.
Nhất quán là để mọi phần của trang hoạt động và mang lại cảm giác như thuộc về cùng một hệ thống, dù không phải phần nào cũng trông giống hệt nhau.
Alla Kholmatova, Design Systems (Smashing Magazine)
Khi nào chọn tầng nền tảng, khi nào chọn hệ đầy đủ
Tầng nền tảng: token cộng component lõi của phễu mua. Phù hợp khi sàn chỉ có một cửa hàng trực tuyến, đội nhỏ, hoặc mới bắt đầu chuẩn hoá. Chi phí dựng và vận hành thấp, đủ để giữ nhất quán xuyên phễu mà không cần bộ máy lớn.
Hệ đầy đủ có quản trị. Phù hợp khi doanh thu đã đủ lớn, có nhiều danh mục mở rộng liên tục, và có đội thiết kế cùng kỹ thuật trong nhà vận hành thường xuyên. Đặc biệt cần thiết khi nhiều đội cùng xây giao diện song song, ví dụ sàn nhiều gian hàng hoặc nhiều thị trường. Nielsen Norman Group nhận định rằng hệ đầy đủ chỉ đáng tiền khi đã đủ quy mô và đội ngũ nội bộ để duy trì nó.
Lỗi thường gặp cần tránh
- Dựng component nhiều nhưng bỏ sót trạng thái lỗi và các trường hợp ngoại lệ hiếm gặp của giỏ hàng và thanh toán, đúng chỗ khách hay vấp nhất.
- Bỏ qua hiệu năng tải trang khi dựng hệ: trang nặng làm khách rời trước khi component đẹp kịp phát huy tác dụng. Hệ thiết kế không thay thế tối ưu kỹ thuật, nhưng component được chuẩn hoá giúp đội kỹ thuật tối ưu một chỗ và nhân lên toàn bộ trang.
- Đầu tư hệ đầy đủ khi quy mô còn nhỏ: chi phí vận hành và đồng bộ liên tục vượt lợi ích mang lại.
- Dừng ở token và bỏ qua pattern chức năng: token giữ nhất quán thị giác nhưng không thay thế được component đã định nghĩa đủ trạng thái thật.
Góc nhìn của Sinh Vũ
Khi làm việc với sàn và website thương mại điện tử, Sinh Vũ bắt đầu bằng rà soát giao diện hiện có, tìm điểm lệch chuẩn trong phễu mua trước khi dựng bất cứ thứ gì mới. Thường thì điểm lệch không nhiều nhưng nằm đúng chỗ nhạy cảm: nút ở trang sản phẩm một màu, đến trang giỏ hàng lại khác; huy hiệu tin cậy xuất hiện ở trang chủ nhưng mất hút ở bước thanh toán.
Từ rà soát đó, Sinh Vũ ưu tiên chuẩn hoá các khối lặp nhiều nhất thành component có đủ trạng thái thật, sau đó mới tính đến mở rộng. Nếu Anh / Chị chưa có đội trong nhà vận hành liên tục, Sinh Vũ sẽ khuyên đi tầng nền tảng trước và giữ hệ đủ gọn để đội ngoài vẫn bàn giao được rõ ràng. Sinh Vũ không cam kết các con số chuyển đổi cụ thể vì chúng phụ thuộc vào sản phẩm và thị trường của từng doanh nghiệp.
Bảng kiểm quyết định
Chủ đề: Sàn và website thương mại điện tử ưu tiên gì trong hệ thiết kế số. Cẩm nang Sinh Vũ, sinhvu.com
Bấm chọn từng mục Anh / Chị thấy đúng hoặc đã trả lời được, rồi bấm Tải bản gửi nhanh để gửi đi, hoặc bấm In nếu cần bản giấy.
Nếu Anh / Chị đánh dấu phần lớn ở nhóm dấu hiệu trên, đây là lúc nên trao đổi kỹ hơn. Sinh Vũ có thể cùng Anh / Chị soi lại và đề xuất hướng đi.
Nguồn tham khảo
Alla Kholmatova, Design Systems (Smashing Magazine). Nielsen Norman Group, Small by Design: The Strength of Lean Design-System Teams. Brad Frost, The Design System Ecosystem và Atomic Design.
Câu hỏi thường gặp
Sàn của tôi đang dùng Shopify hoặc một nền tảng có sẵn, có cần hệ thiết kế số riêng không?
Nền tảng có sẵn đã cung cấp một bộ component kỹ thuật, nhưng chúng giải quyết bài toán kỹ thuật, không giải quyết bài toán thương hiệu và nhất quán thị giác của riêng Anh / Chị. Nếu quy mô còn nhỏ, một bộ token màu sắc, kiểu chữ và một số component lõi được định nghĩa rõ là đủ để giữ nhất quán mà không cần dựng hệ riêng hoàn toàn.
Tôi có mấy trăm sản phẩm, vậy hệ thiết kế số có giúp trang tải nhanh hơn không?
Hệ thiết kế số không trực tiếp làm trang tải nhanh hơn, vì tốc độ tải thuộc về kiến trúc kỹ thuật và hình ảnh. Tuy nhiên, khi component được chuẩn hoá và dùng chung, đội kỹ thuật chỉ cần tối ưu một chỗ là áp dụng được cho toàn bộ trang, không phải xử lý từng trang riêng lẻ. Hiệu quả gián tiếp là có, nhưng Sinh Vũ không cam kết con số cụ thể vì còn phụ thuộc vào hạ tầng của từng dự án.
Khi nào thì cần đầu tư vào hệ thiết kế số đầy đủ thay vì chỉ làm tầng nền tảng?
Khi doanh thu đã đủ lớn để duy trì một đội thiết kế và kỹ thuật trong nhà, khi số danh mục và mặt hàng mở rộng liên tục, hoặc khi có nhiều đội cùng xây giao diện song song. Nếu chưa đạt các điều kiện đó, chi phí vận hành hệ đầy đủ thường vượt lợi ích mang lại.