Xây dựng CTA button - bài học về cách làm mọi việc thông qua một việc

Để xây dựng chi tiết một nút CTA, vẽ ra một cái button và đặt nó vào chính giữa trang chủ.

Nếu thực hiện đơn giản cũng không sai, nhưng tôi muốn hiểu lý do tại sao sinh ra nút CTA, và case study từ các công ty lớn như Google, Amazon, và Facebook. Để từ đó áp dụng vào quá trình phát triển, giảm thiểu thời gian A/B testing, tối ưu quy trình và hạn chế sai sót sau này.

Phân tích nút CTA từ các công ty lớn

Google:

- Trên trang Google Ads, nút CTA phổ biến là "Bắt đầu ngay" và "Đăng nhập".

- Màu sắc thường là xanh dương (#4285F4), với văn bản trắng, đặt ở vị trí nổi bật.

- Ví dụ, nút "Bắt đầu ngay" thường xuất hiện trên trang quảng cáo, hướng người dùng đến đăng ký dịch vụ.

Amazon:

- Nút CTA chính là "Thêm vào giỏ hàng" và "Mua ngay", thường có màu cam (#FF9900) hoặc vàng, với văn bản trắng.

- Được đặt gần hình ảnh sản phẩm, dễ thấy và kích thước lớn, đặc biệt trên trang chi tiết sản phẩm.

- Ví dụ, trên trang sản phẩm iPhone 15, nút này nằm ở vị trí trung tâm, khuyến khích hành động mua sắm.

Facebook:

- Nút CTA trên trang chính là "Đăng ký" và "Đăng nhập", thường màu xanh dương đậm (#1877F2), văn bản trắng.

- Đặt ở góc trên bên phải, dễ tiếp cận, đặc biệt cho người dùng mới.

- Ngoài ra, trên các trang quảng cáo, có thể có nút như "Thích" hoặc "Chia sẻ", tùy bối cảnh.

                                                                                                                Ví dụ trên trang AWS

                                                                                                        Ví dụ trên

Cách thực hành tốt nhất từ nghiên cứu

Dựa trên các tài liệu tham khảo, dưới đây là các thực hành tốt nhất cho nút CTA:

• Ngôn ngữ: Sử dụng văn bản ngắn gọn, kêu gọi hành động, như "Đăng ký ngay" thay vì "Nhập thông tin".
• Màu sắc: Đảm bảo tương phản cao, ví dụ, nút đỏ hoặc xanh trên nền trắng, để nổi bật (17 Best Practices for Crazy-Effective Call-To-Action Buttons).
• Vị trí: Đặt nút trên cùng hoặc giữa trang, tránh bị che khuất bởi nội dung khác.
• Kích thước: Đủ lớn để dễ nhấn, đặc biệt trên thiết bị di động, với khoảng cách hợp lý.
• Hiệu ứng: Thêm hiệu ứng hover (thay đổi màu khi di chuột qua) và focus (viền sáng khi chọn) để tăng trải nghiệm người dùng.

Nguồn Tài liệu Tham khảo

• Hướng dẫn thiết kế nút CTA từ Elementor
• Thực hành tốt nhất cho nút CTA từ Wordstream
• Ví dụ nút CTA từ HubSpot

Lý do trình bày chi tiết

Tại sao tôi lại trình bày kỹ thuật này một cách chi tiết? Tại sao tôi không cứ thế style một cái CTA theo ý mình?

Lý do ở đây không phải là việc xây dựng style một cái nút CTA, mà quan trọng hơn, là cách tiếp cận một vấn đề, đặc biệt trong đào tạo con người.

Giả sử bạn đang hướng dẫn một junior developer về nút CTA:

• Thay vì chỉ nói: "Dùng màu xanh và đặt ở giữa," bạn giải thích CTA nên có màu này, hover vào như thế nào, tại sao lại như thế, tham khảo những ông lớn trong ngành công nghệ xem họ làm như thế nào.

Tôi có một vài lý do, đưa ra đây để các bạn cùng đóng góp ý kiến:

• Các bạn junior dev chẳng hạn, không chỉ biết cách làm mà còn hiểu tại sao làm như vậy, từ đó áp dụng linh hoạt vào các tình huống khác.
• "việc nhỏ nhặt" như thế này không phải là làm mất thời gian, mà là đầu tư vào sự phát triển của các bạn mới. Giúp các bạn mới từ chỉ biết code theo yêu cầu thành những developer có tư duy, chú ý đến chi tiết và hiểu rõ công việc của mình, là những BA và Tester trong phạm vi công việc của mình.
• AI càng ngày càng phát triển, ứng dụng trong đời sống, trong công việc, trong coding. Bạn không dùng AI không sao, nhưng đối thủ của bạn không cho phép điều đó. Bạn dùng AI, dùng đúng lại là việc khác nữa. Và để dùng đúng, không có cách nào khác là trau dồi lý thuyết cơ bản, chi li, để yêu cầu chính xác AI làm việc cho mình, hỗ trợ mình để có hiệu suất tốt hơn. Cấp trên của bạn mới WOW về bạn, thay vì WOW vì AI code gen.

“Một kỹ sư phần mềm có thể bắt đầu sự nghiệp với ngôn ngữ lập trình Java nhưng sau 1 thập kỷ, ngôn ngữ này có thể không còn phổ biến nữa. Nếu không cập nhật kỹ năng, họ sẽ bị đào thải. Ngược lại, những người chủ động học hỏi các công nghệ mới như AI hoặc blockchain sẽ có lợi thế hơn” - trích dẫn.

Khuyến khích các bạn đọc quyển này nhé.

Chúc các bạn thành công

/Son Do

#wecommit100xshare #1percentbettereveryday

#servantleader #leadership #TechLeadership #PeopleFirst #LongLifeLearning #technology #productivity #UX #CTAbutton