Mấy tháng trước, một khách hàng hỏi chúng tôi vì sao nút CTA trên trang không ai bấm – một câu hỏi tưởng nhỏ nhưng lại đụng đúng vào phần kiến thức thiết kế website và giao diện số mà rất nhiều người bỏ qua. Trang của họ có lượng khách vào khá đông, ảnh chụp gửi kèm cho thấy rõ điều đó. Chúng tôi mở trang lên xem thử, và vấn đề lộ ra ngay trong vài giây.
Nút "Đặt hàng" nằm cuối trang, màu xám nhạt gần như chìm vào nền. Chữ trên nút chỉ vỏn vẹn hai từ: "Gửi đi".
Khách lướt nhanh, mắt không dừng lại chỗ đó. Nếu có dừng lại, họ cũng chẳng hiểu bấm vào để làm gì. Câu chuyện này không hiếm gặp.
Rất nhiều website chúng tôi từng kiểm tra đầu tư kỹ nội dung, hình ảnh, bố cục. Nhưng họ lại bỏ quên đúng cái nút quyết định khách có hành động hay không.
Nút CTA trong kiến thức thiết kế website và giao diện số: yếu tố nhỏ nhưng tác động lớn đến tỷ lệ chuyển đổi
CTA là viết tắt của "call to action" – lời kêu gọi hành động. Nói dễ hiểu, đó là nút bấm mời khách làm một việc cụ thể: mua hàng, để lại số điện thoại, hoặc tải tài liệu. Trên phần lớn website, nút này chỉ chiếm một góc nhỏ màn hình.
Nhưng chính góc nhỏ đó lại quyết định phần lớn tỷ lệ chuyển đổi. Đó là tỷ lệ số người vào trang thực sự thực hiện hành động mong muốn.
Nhiều chủ website vẫn thiết kế nút CTA theo cảm tính. Thấy đối thủ dùng màu cam thì cũng chọn màu cam. Thấy chữ "Mua ngay" quen thuộc thì copy nguyên văn, không cần biết có hợp sản phẩm của mình hay không.
Cách làm này không sai hoàn toàn. Nhưng nó thiếu một khâu quan trọng: kiểm chứng bằng nguyên tắc thiết kế, thay vì đoán mò theo cảm giác.
Chúng tôi từng thử nghiệm trên một trang bán khóa học online. Chỉ đổi màu nút từ xanh dương sang cam, đồng thời dời nút lên gần tiêu đề hơn. Sau hai tuần theo dõi, tỷ lệ click tăng khoảng 18%.
Không có phép màu nào ở đây. Nút CTA trước đó đơn giản là bị bỏ quên, chưa từng được ai thiết kế cho đúng.
Nút CTA càng quan trọng hơn với các website có mục tiêu bán hàng trực tiếp. Nếu bạn đang cần thiết kế web bán hàng, hãy tính chuyện này ngay từ đầu. Vị trí và màu nút "Mua ngay" hay "Thêm vào giỏ" nên quyết từ lúc lên bố cục, đừng chờ tới cuối.
Nút CTA chịu ảnh hưởng bởi ba yếu tố chính: màu sắc, vị trí, câu chữ. Hiểu rõ từng yếu tố giúp việc tối ưu có định hướng, thay vì đoán mò theo cảm tính. Đội ngũ thiết kế có thể dựa trên nguyên tắc đã được kiểm chứng, sau đó mới tinh chỉnh theo đặc thù từng ngành hàng. Ba phần tiếp theo, chúng tôi sẽ đi từng yếu tố một.
Vai trò của màu sắc trong thiết kế nút CTA
Màu sắc là yếu tố đầu tiên mắt người nhìn thấy, trước cả khi kịp đọc chữ trên nút. Nguyên tắc cơ bản nhất: nút CTA cần có màu tương phản rõ với nền xung quanh. Nếu nền trang chủ yếu là trắng và xanh nhạt, nút màu cam hoặc đỏ sẽ nổi bật ngay lập tức. Ngược lại, chọn màu gần giống nền thì mắt khách sẽ lướt qua, dù nút đặt ở vị trí đẹp đến đâu.
Tương phản ở đây không có nghĩa chọn màu sặc sỡ bất chấp. Chúng tôi hay dùng bánh xe màu để tìm cặp màu đối lập nhau, ví dụ xanh dương đi với cam, tím đi với vàng. Cách chọn này giúp nút bấm bật lên tự nhiên. Nó không bị lạc lõng như dán một miếng màu ngẫu nhiên lên trang.
Nhưng tương phản chỉ là một nửa câu chuyện. Nửa còn lại là sự phù hợp với bộ nhận diện thương hiệu. Một thương hiệu mỹ phẩm cao cấp thường không hợp với nút CTA đỏ tươi chói mắt, dù màu đó tương phản tốt.
Họ hợp hơn với tông hồng phấn, be, hoặc vàng đồng. Những màu này vẫn nổi bật so với nền, nhưng không phá vỡ cảm giác sang trọng của cả website.
Xu hướng thiết kế website hiện đại gần đây thiên về màu sắc tối giản, ít chi tiết thừa. Tối giản không đồng nghĩa nút CTA phải chìm vào tổng thể. Ngược lại, nền càng đơn giản, nút bấm càng cần một điểm nhấn màu sắc rõ ràng để mắt khách có chỗ dừng lại.
Sai lầm thường gặp nhất chúng tôi thấy: dùng đúng màu chủ đạo của thương hiệu làm luôn màu nút CTA. Thương hiệu có tông xanh dương chủ đạo, nền website cũng xanh dương, rồi nút CTA cũng xanh dương cho "đồng bộ". Kết quả là nút biến mất giữa các mảng màu khác.
Mẹo chúng tôi hay áp dụng: giữ màu thương hiệu cho logo, menu, tiêu đề. Nút CTA thì dùng một màu phụ riêng. Màu phụ này chỉ xuất hiện ở nút bấm và vài điểm nhấn nhỏ khác trên trang.
Vai trò của vị trí và câu chữ trên nút CTA
Màu sắc kéo được sự chú ý, nhưng vị trí quyết định khách có kịp nhìn thấy nút hay không. Nguyên tắc chung: nút CTA quan trọng nhất nên nằm trong vùng khách thấy ngay khi mở trang. Dân thiết kế gọi vùng này là "above the fold" – phần màn hình hiển thị trước khi cuộn xuống. Với màn hình laptop phổ biến, vùng này thường chỉ cao khoảng 600 đến 700 pixel.
Không phải lúc nào cũng nhét vừa mọi thứ vào vùng đó. Với trang có nhiều thông tin sản phẩm, chúng tôi thường đặt thêm một nút CTA lặp lại ở cuối phần mô tả. Vị trí này xuất hiện sau khi khách đã đọc đủ để tin tưởng.
Cách này giúp khách không phải cuộn ngược lên đầu trang để tìm nút bấm. Tỷ lệ bỏ ngang giữa chừng nhờ vậy cũng giảm hẳn.
Chúng tôi từng phân tích nhiều trang thiết kế website bán hàng là gì. Nút CTA ở đó thường lặp lại ba vị trí: đầu trang, giữa mô tả sản phẩm, và cuối trang trước phần đánh giá. Ba điểm chạm này giúp bắt kịp khách ở bất kỳ giai đoạn nào họ quyết định mua.
Câu chữ trên nút cũng quan trọng không kém vị trí. "Gửi", "Xác nhận", "Submit" là những chữ an toàn nhưng vô cảm. Chúng không nói cho khách biết điều gì sẽ xảy ra sau khi bấm.
Chúng tôi khuyên dùng cụm từ hành động cụ thể, ví dụ "Nhận báo giá trong 5 phút" hay "Đặt lịch tư vấn miễn phí". Câu chữ càng cụ thể, khách càng dễ hình dung lợi ích ngay khi vừa đọc xong.
- Chữ yếu, chung chung: "Gửi", "Xem thêm", "Tìm hiểu"
- Chữ cụ thể, có lợi ích: "Nhận tư vấn miễn phí", "Tải bảng giá ngay", "Đặt chỗ – còn 3 suất"
Một sai lầm khác chúng tôi hay gặp: website dùng chữ CTA chung chung. Lại không có kênh nào khác cho khách hỏi thêm trước khi bấm. Nếu khách còn phân vân, gắn thêm công cụ chat trực tuyến cho website cạnh nút CTA sẽ giữ khách ở lại thêm chút nữa. Thay vì để họ thoát trang vì còn một câu hỏi chưa được giải đáp.
Mẹo nhỏ từ kinh nghiệm của chúng tôi: mỗi trang chỉ nên có một nút CTA chính, mang một thông điệp duy nhất. Nhiều website nhét ba bốn nút cùng lúc – "Mua ngay", "Liên hệ", "Tải app" – đặt cạnh nhau với độ nổi bật ngang nhau. Khách nhìn vào không biết nên bấm cái nào trước. Cuối cùng, họ thường không bấm cái nào cả.
Kết luận
Quay lại câu chuyện đầu bài, chúng tôi đã đổi ba thứ trên nút CTA của khách. Màu đổi từ xám sang cam, vị trí dời lên gần đầu trang. Chữ trên nút đổi từ "Gửi đi" thành "Nhận báo giá miễn phí". Sau ba tuần, tỷ lệ khách bấm vào nút tăng gần gấp đôi so với trước, dù lượng truy cập gần như không đổi.
Nếu bạn đang băn khoăn vì sao website có khách mà ít đơn hàng, hãy nhìn lại nút CTA. Đừng vội đổ lỗi cho sản phẩm hay giá cả. Chọn một màu tương phản rõ với nền, đặt nút ở chỗ khách không phải tìm.
Viết một câu chữ nói đúng điều khách sẽ nhận được. Ba việc này không tốn nhiều công sức để thử. Nhưng chúng thường mang lại kết quả nhanh hơn bất kỳ thay đổi lớn nào khác trên website. Nắm vững phần kiến thức thiết kế website và giao diện số này, bạn sẽ biết chính xác nên bắt đầu tối ưu từ đâu.