Tầm quan trọng của trải nghiệm UI/UX trong chuyển đổi

Chúng tôi từng bàn giao hai website cho hai công ty cùng ngành, cùng ngân sách quảng cáo. Sau ba tháng, một bên có tỉ lệ để lại thông tin 4,1%, bên còn lại 0,9%. Giao diện cả hai đều "đẹp" theo cảm nhận của chủ doanh nghiệp. Khác biệt nằm ở chỗ khác.

Đẹp và dễ dùng là hai chuyện khác nhau

UI là những gì người dùng nhìn thấy: màu sắc, phông chữ, khoảng cách, hình ảnh. UX là những gì họ trải qua: tìm thông tin mất bao lâu, có bị bối rối ở bước nào không, có hoàn thành được việc mình định làm không.

Một trang có UI xuất sắc nhưng UX kém giống như một cửa hàng bày biện lộng lẫy mà không có biển chỉ dẫn và nhân viên thì trốn đâu mất.

Năm giây đầu tiên quyết định tất cả

Khách truy cập quyết định ở lại hay thoát trong khoảng 5 giây. Trong khoảng đó họ cần trả lời được ba câu hỏi:

1. Trang này bán/cung cấp cái gì?
2. Nó có liên quan tới vấn đề tôi đang gặp không?
3. Bước tiếp theo tôi phải làm gì?

Nếu phần đầu trang không trả lời đủ ba câu, mọi thứ phía dưới đều vô nghĩa vì không ai cuộn xuống.

Bài kiểm tra 5 giây: đưa trang chủ cho một người chưa biết gì về công ty bạn xem đúng 5 giây, rồi tắt đi và hỏi họ công ty bạn làm gì. Nếu họ trả lời sai, phần đầu trang cần viết lại.

Nút kêu gọi hành động: một trang, một mục tiêu

Lỗi phổ biến nhất chúng tôi gặp là đặt sáu nút cùng độ nổi bật trên một màn hình: "Đăng ký", "Xem thêm", "Tải báo giá", "Liên hệ", "Chat Zalo", "Gọi ngay". Khi mọi thứ đều quan trọng thì không gì quan trọng cả.

• Mỗi màn hình chỉ nên có một hành động chính, nổi bật bằng màu tương phản nhất trên trang
• Các hành động phụ để dạng viền hoặc chữ, đừng tô đặc
• Chữ trên nút phải mô tả kết quả: "Nhận báo giá trong 24h" tốt hơn "Gửi"

Biểu mẫu — nơi mất khách nhiều nhất

Mỗi ô nhập liệu thêm vào đều làm giảm tỉ lệ hoàn thành. Hãy tự hỏi với từng ô: thiếu thông tin này thì có tư vấn được không? Nếu có thì bỏ.

Với form liên hệ của một agency, thường chỉ cần họ tên và số điện thoại. Email, ngành nghề, ngân sách... để dành cho lúc gọi điện.

Vài chi tiết nhỏ tạo khác biệt lớn:

• Bàn phím số tự bật khi nhập điện thoại trên điện thoại di động
• Báo lỗi ngay bên dưới ô sai, không phải một dòng đỏ trên đầu trang
• Nhãn luôn hiện, đừng chỉ dùng placeholder — người dùng quên mất ô đó hỏi gì sau khi bắt đầu gõ

Điện thoại là mặc định, không phải phụ

Hơn 70% lượt truy cập website doanh nghiệp Việt Nam đến từ điện thoại. Vậy mà nhiều bản thiết kế vẫn được duyệt trên màn hình 27 inch rồi mới "thu nhỏ lại cho vừa".

Ba lỗi hay gặp trên di động:

• Vùng bấm nhỏ hơn 44×44px — ngón tay không bấm trúng
• Bảng giá tràn ngang khiến cả trang cuộn ngang theo
• Nút gọi/chat nổi che mất nội dung hoặc nút gửi form

Đo, đừng đoán

Cảm giác "trang này nhìn ổn" không phải dữ liệu. Ba công cụ miễn phí đủ dùng cho hầu hết doanh nghiệp nhỏ:

• Google Analytics 4 — xem trang nào có tỉ lệ thoát cao bất thường
• Microsoft Clarity — xem lại video phiên truy cập thật và bản đồ nhiệt, miễn phí không giới hạn
• Search Console — biết người ta gõ từ khoá gì để tới trang của bạn

Xem 20 phiên ghi lại trên Clarity thường cho bạn nhiều insight hơn cả tháng tranh luận nội bộ về màu nút.