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. Sinh Vũ viết trang này để 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 độ. Sinh Vũ xem đây là ngưỡng thực hành, không phải tùy 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, Sinh Vũ Studio

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. Đây là lý do Sinh Vũ luôn thiết kế theo nguyên tắc một hành động chính trên mỗi trang hoặc mỗi phần chính của trang.

• 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.

Góc nhìn của Sinh Vũ

Trong quá trình thiết kế, Sinh Vũ xây dựng mỗi trang xung quanh một hành động cụ thể: trang không chỉ để đọc, mà để dẫn khách tới một bước tiếp theo rõ ràng. Nút chính được viết nhãn như một câu mời, không phải mệnh lệnh kỹ thuật. "Đặt lịch gặp" dễ bấm hơn "Submit". "Nhận hồ sơ năng lực" rõ hơn "Tải về".

Sinh Vũ không hứa một con số chuyển đổi cụ thể vì kết quả phụ thuộc vào nhiều yếu tố khác ngoài nút. Nhưng nguyên tắc là làm cho bước tiếp theo luôn 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.