CTA Button là nút kêu gọi hành động trên website. Ví dụ “Nhận báo giá”, “Đặt lịch tư vấn”, “Thêm vào giỏ”. Nút tốt phải nói rõ bấm xong khách sẽ làm gì, dễ bấm và có phản hồi đúng. Nút đẹp nhưng không gửi được yêu cầu vẫn là nút chưa tốt.
Không có màu hay vị trí nút nào luôn mang lại nhiều khách hơn. Hãy xem khách có hiểu lời mời, tin tưởng dịch vụ, dùng được trên điện thoại và hoàn tất việc cần làm hay không.
Chủ doanh nghiệp chỉ cần nhớ
Năm việc: (1) chữ trên nút nói rõ hành động; (2) chỉ một nút chính mỗi khu vực; (3) dễ nhìn và dễ chạm; (4) báo đang xử lý, thành công hoặc lỗi; (5) chỉ tính là có yêu cầu khi hệ thống đã nhận thật. Không giấu phí hoặc tạo hạn chót giả.
Nút CTA khác liên kết mở trang thế nào?
- Nút thực hiện việc gì đó: gửi yêu cầu, thêm vào giỏ, mở thông tin. Khi bấm, website phải phản hồi rõ.
- Đường dẫn: mở trang dịch vụ, bảng giá hoặc bài viết khác; cần dẫn đúng trang.
- Nút bật/tắt: bật thông báo, hiện mật khẩu; khách cần biết đang bật hay tắt.
- Nút mở menu: mở các lựa chọn; phải đóng và điều khiển được bằng bàn phím.
Với đội kỹ thuật: dùng <button> khi thực hiện thao tác, như gửi thông tin; dùng <a href> khi mở trang khác, như bảng giá. Khách cần dùng được bằng bàn phím.
Viết chữ trên nút để khách hiểu ngay
Trước khi viết nút, hãy hỏi:
- Khách muốn hoàn thành việc gì?
- Họ nhận được gì sau khi bấm?
- Có phí hoặc thông tin bắt buộc phải biết trước không?
- Bấm xong, hệ thống báo kết quả thế nào?
- Đặt lịch: “Chọn lịch tư vấn” rõ hơn “Liên hệ ngay”.
- Tải tài liệu: “Tải danh sách kiểm tra” rõ hơn “Nhận ngay”.
- Xem giá: “Xem bảng giá” rõ hơn “Tìm hiểu thêm”.
- Mua hàng: “Thêm vào giỏ” đúng hơn “Tiếp tục” nếu đây là bước thêm giỏ.
- Xin báo giá: “Gửi yêu cầu báo giá” rõ hơn “Gửi”.
Chữ trên nút nên nói rõ điều xảy ra tiếp theo. “Xem bảng giá” thường dễ hiểu hơn “Tìm hiểu thêm”. Không cần dùng câu giục mua nếu khách chưa đủ thông tin.
Một nút chính hay nhiều nút?
Mỗi khu vực nên có một nút quan trọng nhất. Khách chưa sẵn sàng có thể chọn nút phụ như “Xem quy trình” trước khi bấm “Yêu cầu báo giá”.
- Nút chính: việc muốn khách làm nhất, ví dụ “Đặt lịch tư vấn”.
- Nút phụ: giúp khách tìm hiểu thêm, ví dụ “Xem quy trình”.
- Liên kết ít quan trọng: đọc điều khoản, chính sách.
- Việc khó hoàn tác: xóa tài khoản, hủy đơn; cần giải thích và xác nhận phù hợp.
Nếu nhiều nút đều nổi bật như nhau, khách khó biết nên chọn gì. Tham khảo cách sắp xếp thông tin nổi bật.
Chọn màu nút sao cho dễ nhìn
Không có màu nút nào bảo đảm làm tăng doanh thu. Hãy chọn màu dễ thấy, chữ dễ đọc và nhất quán trên website. Thử trên nền sáng, tối và điện thoại.
- Màu nút phải nổi trên nền, chữ đủ rõ để đọc.
- Nút chính nổi bật hơn lựa chọn phụ, không cần màu sắc gây chói.
- Nút có dấu hiệu dễ nhận ra khi dùng bàn phím.
- Không chỉ dùng màu đỏ, xanh để báo lỗi hoặc thành công; thêm chữ giải thích.
- Việc xóa hay hủy phải có nhãn và xác nhận rõ.
Xem thêm màu sắc trong thiết kế website và hướng dẫn WCAG về contrast.
Nên đặt nút ở đâu và lớn bao nhiêu?
Nút cần dễ bấm trên điện thoại, có khoảng cách tránh bấm nhầm. WCAG 2.2 có tiêu chí 24 × 24 điểm ảnh CSS trong các trường hợp áp dụng, nhưng có ngoại lệ như khoảng cách đủ lớn hoặc liên kết nằm trong câu. Hãy thử trên thiết bị thật.
- Đầu trang: khi khách đã hiểu sản phẩm hoặc dịch vụ.
- Sau phần giải thích: khi khách cần đọc lợi ích, chi phí hay ví dụ trước.
- Cuối bài: mời nhận tư vấn hoặc xem nội dung liên quan.
- Nút luôn hiện trên điện thoại: không được che nội dung hay thông báo quan trọng.
- Trong biểu mẫu: ghi rõ sẽ gửi thông tin hoặc hoàn tất bước nào.
Không bắt buộc nút mua hàng phải đặt ngay đầu trang. Dịch vụ cần giải thích nhiều có thể đặt nút sau phần lợi ích, ví dụ và điều kiện.
Nút phải dùng được bằng bàn phím
Nút cần có tên nói rõ công dụng và sử dụng được bằng bàn phím. Nếu chỉ có biểu tượng, phải có tên để công cụ đọc màn hình hiểu đó là nút gì.
<button type="submit">Gửi yêu cầu báo giá</button>
<button type="button" aria-label="Đóng hộp thoại">
<svg aria-hidden="true">…</svg>
</button>- Thử phím Tab để đến nút, Enter hoặc phím cách để bấm nút.
- Khi dùng bàn phím, phải thấy rõ nút đang được chọn.
- Nút chỉ có biểu tượng phải có tên, chẳng hạn “Đóng” hoặc “Tìm kiếm”.
- Nếu nút mở hộp thông tin, phải dùng và đóng được bằng bàn phím.
- Tên mà thiết bị hỗ trợ đọc không được mâu thuẫn với chữ hiển thị.
Tham khảo cách tạo nút dễ dùng theo W3C và hướng dẫn cách đặt tên rõ ràng cho nút và ô nhập.
Sau khi bấm nút, website phải phản hồi
- Chưa bấm: chữ rõ, biết nút dùng để làm gì.
- Đang gửi: hiển thị “Đang gửi…” và tránh gửi trùng.
- Thành công: báo đúng “Đã nhận yêu cầu” khi hệ thống xác nhận.
- Lỗi: nói lỗi gì, giữ thông tin đã nhập nếu có thể và chỉ cách sửa.
- Chưa thể bấm: giải thích cần làm gì, ví dụ “Vui lòng chọn ngày”.
Nếu bấm “Gửi yêu cầu” mà không có thông báo, khách dễ bấm lại và gửi trùng. Đội kỹ thuật cần xử lý tình huống này; đọc thêm cách thiết kế các tình huống sau khi bấm và cách website phản hồi thao tác.
Không tạo áp lực mua hàng bằng thông tin giả
Chỉ ghi “Sắp hết hạn” hay “Còn 2 sản phẩm” khi có dữ liệu thật. Không dùng đồng hồ đếm ngược tự chạy lại, giấu phí hoặc gây khó khi khách muốn từ chối.
- Đúng sự thật: ghi “Hạn đăng ký đến…” khi có hạn thật và cập nhật đúng.
- Không phù hợp: “Chỉ hôm nay” nhưng hôm nào cũng hiện.
- Đúng sự thật: chỉ ghi “Còn 3 chỗ” khi có dữ liệu xác nhận.
- Không phù hợp: bịa số lượng, làm nút từ chối khó tìm hoặc giấu phí.
Nút trên trang dịch vụ, đặt hàng và liên hệ
Nút cần phù hợp với loại trang và việc khách đang làm:
- Trang giới thiệu một dịch vụ: ví dụ nút “Yêu cầu báo giá” hoặc “Xem quy trình”.
- Trang giới thiệu chương trình: nút đúng với lời mời, như “Đăng ký nhận tư vấn”.
- Trang thanh toán: phân biệt “Tiếp tục” với “Xác nhận đặt hàng”.
- Biểu mẫu: giải thích thông tin sẽ được dùng để làm gì trước khi khách gửi.
Xem thêm trang giới thiệu một sản phẩm hoặc chiến dịch và cách làm trang thanh toán dễ dùng.
Đo hiệu quả nút bằng kết quả thực tế
Số lượt bấm chưa phải số khách hàng. Ví dụ, 100 lượt bấm “Nhận báo giá” không có nghĩa có 100 yêu cầu. Khách có thể bỏ dở hoặc gặp lỗi trước khi gửi.
- Có nhìn thấy nút không? Có thể đo lượng khách thực sự thấy nút nếu cài công cụ phù hợp.
- Có bấm không? Đếm lượt nhấn, nhưng chưa tính là khách hàng.
- Có hoàn thành không? Kiểm tra khách điền biểu mẫu, có gặp lỗi không.
- Hệ thống đã nhận chưa? Đếm yêu cầu, lịch hẹn hoặc đơn hàng được tiếp nhận thành công.
- Kết quả kinh doanh: xem yêu cầu nào phù hợp và trở thành khách thật, nếu có dữ liệu.
Khi thử hai cách viết hoặc vị trí nút, hãy thay đổi có kiểm soát và xem kết quả khách hoàn tất công việc, không chỉ lượt nhấp. Đừng kết luận từ vài lần bấm hay cho rằng màu nút tự tạo doanh thu.
Danh sách kiểm tra trước khi bàn giao
- Nút nói rõ khách bấm xong sẽ làm gì.
- Có một hành động chính dễ thấy trong mỗi khu vực.
- Chi phí và điều kiện quan trọng không bị giấu.
- Nút và liên kết đưa tới đúng nơi.
- Dùng được trên điện thoại và bằng bàn phím.
- Có thông báo khi đang xử lý, đã thành công hoặc bị lỗi.
- Biểu mẫu gửi thử đã được hệ thống tiếp nhận thành công.
- Không gây áp lực bằng thời hạn hoặc số lượng giả.
- Có người chịu trách nhiệm sửa lỗi được tìm thấy.
Câu hỏi thường gặp về nút CTA
Màu CTA nào chuyển đổi tốt nhất?
Không có màu tốt nhất cho mọi website. Hãy chọn nút dễ thấy, chữ dễ đọc, rồi kiểm tra trên giao diện thực tế.
Có phải nút luôn đặt ngay đầu trang?
Không. Nút nên xuất hiện khi khách đã hiểu dịch vụ hoặc sản phẩm. Đôi khi cần giải thích trước khi mời đặt hàng.
“Xem thêm” có phải nhãn CTA xấu?
Không phải lúc nào cũng xấu, nhưng “Xem bảng giá” hay “Xem quy trình” thường rõ hơn.
CTA có trực tiếp giúp SEO không?
Không có bảo đảm đổi nút sẽ cải thiện thứ hạng Google. Nút chủ yếu giúp khách thực hiện bước tiếp theo.
Kết luận
Nút CTA hiệu quả phải dễ hiểu, dễ bấm và giúp khách hoàn thành việc cần làm. Trước khi đổi màu, hãy kiểm tra chữ trên nút, trang mở ra, thông báo sau khi bấm và yêu cầu có được nhận thật hay không.
Nhiều lượt bấm nhưng ít người liên hệ?
Hãy kiểm tra biểu mẫu, thông báo lỗi và các bước sau khi khách bấm nút. Nếu cần đánh giá thêm, xem dịch vụ thiết kế website cho doanh nghiệp của WebsiteHCM.
Nguồn chính
Đoàn Trình Dục là Giảng viên Khoa Công nghệ Thông tin tại Đại học Công nghệ Sài Gòn (STU), với hơn 10 năm kinh nghiệm thực chiến trong các lĩnh vực Mạng máy tính, Marketing Online, SEO và Bảo mật hệ thống.
Với nền tảng sư phạm và kinh nghiệm tư vấn cho nhiều doanh nghiệp, thầy chuyên sâu vào việc xây dựng các giải pháp kỹ thuật số toàn diện và hiệu quả.