Thiết kế nút: làm sao để khách bấm đúng

Nút kêu gọi hành động (call-to-action, tức là nút dẫn khách tới bước tiếp theo) là điểm giao giữa giao diện và mục tiêu kinh doanh. Dù trang trình bày tốt đến đâu, nếu khách không nhận ra nút, không hiểu bấm vào sẽ được gì, hoặc không chạm trúng trên điện thoại, thì toàn bộ nội dung phía trước đều không đến đích. Trang này giúp Anh / Chị hiểu ba yếu tố cốt lõi và tránh các lỗi phổ biến nhất.

Ba yếu tố không thể thiếu

Một nút đủ tốt cần hội đủ ba điều theo thứ tự này:

• Trông bấm được: khách phán đoán cái gì có thể bấm dựa trên kinh nghiệm đã có, hình khối có viền hoặc nền màu tương phản cao, ngữ cảnh quen thuộc. Nếu nút trông giống chữ thường hay thẻ trang trí, phần lớn khách sẽ bỏ qua. Nielsen Norman Group gọi đây là tín hiệu "affordance" (khả năng gợi tác động): giao diện cần phát tín hiệu đúng để khách không phải đoán.
• Đủ to để chạm trúng: theo Định luật Fitts (Fitts's Law, 1954), thời gian chạm tới một đích phụ thuộc vào khoảng cách và kích thước của đích đó. Đích nhỏ làm tăng tỷ lệ chạm trượt, nhất là trên di động. Apple khuyến nghị vùng chạm khoảng 44 điểm ảnh, Android khoảng 48 đơn vị mật độ. Đây là ngưỡng thực hành, không phải tuỳ chọn.
• Nhãn nói ra kết quả: khách đọc nhãn nút trong chưa đầy một giây và quyết định có bấm không. "Nhận tư vấn miễn phí", "Xem bảng giá", "Tải hồ sơ năng lực" cho khách biết bấm xong sẽ nhận được gì. "Gửi", "Tiếp tục", "OK" thì không cho biết điều gì cả.

Nhãn nút nên viết bằng ngôn ngữ của khách và mô tả kết quả, không phải mô tả hành động kỹ thuật phía sau.

Kinh nghiệm thực hành

Thứ bậc: một chính, các phụ mờ hơn

Khi một trang có nhiều nút cùng nổi bật ngang nhau, khách bị phân tán và thường không chọn cái nào. Vì vậy mỗi trang, hoặc mỗi phần chính của trang, nên xoay quanh một hành động chính.

• Nút chính (primary action): nền màu đặc, tương phản cao, đặt ở vị trí khách nhìn tới khi đã đọc xong phần quan trọng nhất.
• Nút phụ (secondary action): dùng kiểu đường viền không có nền, hoặc kiểu chữ liên kết có gạch chân, để tồn tại mà không cạnh tranh sự chú ý.
• Không dàn đều: nếu tất cả đều to và nổi ngang nhau, thứ bậc thị giác sụp đổ, khách không biết đâu là bước nên làm trước.

Vị trí và luồng quyết định

Nút đặt đúng chỗ không có nghĩa là đặt ở góc phải trên hay đáy trang theo quán tính. Đặt đúng là đặt ở nơi khách đang cần quyết định, sau khi họ đã đọc đủ thông tin để ra quyết định đó.

• Nếu trang trình bày một dịch vụ ngắn gọn, nút chính có thể xuất hiện sớm ngay phần đầu.
• Nếu trang cần trình bày nhiều nội dung thuyết phục trước, nút chính đặt sau đoạn thuyết phục đó, không giấu tận cuối khi phần lớn khách đã rời đi.
• Trên di động, ưu tiên đặt nút trong tầm ngón tay cái, tránh góc xa màn hình mà người cầm điện thoại một tay khó với tới.

Lỗi hay gặp nhất

• Nhãn kỹ thuật thay vì kết quả: "Gửi", "Đồng ý", "OK" không nói được gì. Khách do dự và bỏ qua.
• Quá nhiều nút chính: khi mọi thứ đều quan trọng thì không có gì quan trọng. Chọn một.
• Nút không có tín hiệu bấm được: nút trông giống văn bản thường hoặc thẻ trang trí, khách đọc chứ không bấm.
• Vùng chạm quá nhỏ hoặc quá sát nhau: trên di động, hai nút cạnh nhau mà không có khoảng cách đủ lớn dẫn đến chạm nhầm thường xuyên.
• Giấu nút quan trọng tít dưới đáy: phần lớn khách không cuộn tới đáy trang dài. Nút đặt ở đó thực chất là không có nút.

Không nút nào tự bảo đảm một con số chuyển đổi, vì kết quả còn phụ thuộc nội dung, giá và độ tin cậy của trang. Điều nút làm được là khiến bước tiếp theo hiển nhiên và dễ chạm, để khi khách đã sẵn sàng quyết định, không có gì cản họ lại.

Bài viết là thông tin tham khảo. Phạm vi, giá và cam kết cụ thể của Sinh Vũ ghi trong hồ sơ đề xuất và hợp đồng đã ký.