Thiết kế như thế nào để bán được hàng?

Bài viết nằm trong chuỗi bài viết nổi bật “Tối ưu hoá tỷ lệ chuyển đổi A-To-Z”, cập nhật thường xuyên

Oanh theo dõi loạt email của David Kadavy của blog Design for Hackers thì rút ra được một số bài học của ông về thiết kế tối ưu chuyển đổi như bên dưới

Theo như lời ông nói, ông không phải là một fan của việc tối ưu hoá chuyển đổi. Vấn đề là vì đa phần mọi người không đủ kiên nhẫn để thực hiện việc A/B testing một cách có khoa học, hay chỉ đơn giản là vì website hiện không có đủ lượng truy cập để kết quả có thể mang ý nghĩa quyết định.

Tuy nhiên, có một số “huyền thoại” v/v những thiết kế như thế nào là “ăn khách” mà ông chắc chắn cho thể bác bỏ ngay. Hãy theo dõi cùng Oanh bên dưới nhé

Chẳng có màu nào tốt nhất

Những người có nhiều kinh nghiệm hơn đã biết rằng những thảo luận “liệu nút mua hàng nên có màu gì là tối ưu nhất” là cuộc nói chuyện thuộc cấp cơ bản và ngớ ngẩn (!) nhất khi nói về thiết kế trong tối ưu chuyển đổi. Nhưng, ông vẫn liên tục bị hỏi về điều đó.

Nói một cách đơn giản: Không có màu nào tốt nhất cả.

Một số người cho rằng, màu được nhiều người yêu thích nhất là màu xanh lam, vì vậy các nút bấm trên website hay trên email của bạn nên có màu xanh. Và ông cho chúng ta xem ví dụ này.

Button Color Case Study

Trong trường hợp này, màu xanh lá cây đánh bại màu xanh dương, giúp tăng doanh số (không chỉ tăng tỉ lệ click-through) gần 36%.

Một số người có thể nói rằng, họ có thể đã tăng chuyển đổi NGAY LẬP TỨC nếu họ sử dụng màu đỏ. Màu ấm, như màu đỏ, màu đẹp và gây chú ý ngay lập tức. Vì vậy, các nút CTA nên có màu ấm.

Tôi thậm chí còn nghe thấy một số người nói rằng, “Màu đỏ là màu tối ưu nhất để sử dụng cho các nút bấm mua hàng.”

Được rồi, hãy để ý xem liệu trong trường hợp này điề đó có đúng không?. Đây là một bài kiểm tra mà Verizon đã thực hiện cách đây nhiều năm. Một thiết kế có rất nhiều nút màu đỏ và một thiết kế có rất nhiều nút có màu xám đen, buồn tẻ, ảm đạm.

Trường hợp này quá đơn giản đúng không? Rõ ràng các nút màu đỏ sẽ giành chiến thắng.

Button Case Study (Red)
Button Case Study (Gray)

Không. Các nút màu xám đậm thu hút số lần nhấp hơn 10% so với các nút màu đỏ.

Sao có thể như thế được? Ông cho rằng rằng vì thương hiệu Verizon có màu đỏ, các nút màu đỏ bị lẫn khuất và không rõ trong tổng thể giao diện của trang. Các nút đó không dủ tương phản với phần còn lại của trang.

Một điều rất thường xuyên đúng trong thiết kế tối ưu cho chuyển đổi là Hãy tạo sự tương phản ở bất cứ nơi nào bạn muốn người dùng hành động.

Lưu ý cách màu xanh dương trong ví dụ đầu tiên không tương phản tốt và cách các nút màu đỏ hòa trộn với phần còn lại của trang Verizon. Cả 2 thiết kế đã chiến thắng qua những bài test là các thiết kế tạo ra độ tương phản nhiều hơn.

Không có Font nào là tốt nhất cả

Một câu hỏi khác mà tôi được hỏi rất thường xuyên là Font chữ nào là font chữ tốt nhất cho chuyển đổi?

Một lần nữa, câu trả lời đúng chính là: Không có phông chữ tốt nhất.

Những gì ông có thể nói với bạn là

Font chữ bạn sử dụng phải rõ ràng để đọc và nên truyền tải một tâm trạng hoặc tính cách phù hợp với thương hiệu của bạn.

Nếu bạn có một nhà thiết kế giỏi, người đó sẽ có thể giúp bạn đưa ra một vài lựa chọn font chữ phù hợp.

Nhưng, nếu bạn tự thực hiện thiết kế của riêng mình, lời khuyên tốt nhất ông có thể cung cấp cho bạn là giữ cho nó rất đơn giản. Nếu bạn nghĩ rằng font chữ trông có đẹp, ngầu, thì đó có lẽ đó là một font chữ sai.

Trong khóa học email của ông, ông cung cấp một danh sách các hướng dẫn và các đề xuất chi tiết nằm ngoài phạm vi của bài học này, Oanh sẽ tổng hợp và đăng ở những bài viết sau.

Vậy Theo lời ông, nếu bạn tự thực hiện thiết kế cho mình, hãy tìm một font chữ thật đơn giản và rõ ràng, sau đó hãy quên nó đi và hãy dành tâm trí để suy nghĩ những thứ khác quan trọng hơn.

Không có CÔNG THỨC NÀO CỤ THỂ ĐỂ thiết kế CỦA BẠN TRỞ NÊN TỐI ƯU NHẤT (Nhưng ÔNG CÓ ĐỀ CẬP ĐẾN MỘT SỐ CÁCH LÀM ĐÚNG VÀ HIỆU QUẢ Ở DƯỚI ĐÂY)

Nếu bạn đã nhận thấy một thông điệp xuyên suốt toàn bộ bài viết này thì đó là về mặt thiết kế hoàn toàn không có bất kì công thức CHUNG nào có thể luôn luôn giúp bạn tăng tỷ lệ chuyển đổi cả

Tuy nhiên, tất cả các trang landing page tốt mà ông đã thấy đều có một điểm chung: Chúng đều hiển thị rất rõ ràng về điều tác giả muốn người dùng thực hiện tiếp theo.

Để đơn giản, Hãy cùng xem 2 thiết kế dưới đây. Bạn nghĩ thiết kế nào đã thắng?

CTA Case Study (No Oli)
CTA Case Study (With Oli)

Bạn có thể nghĩ rằng khi Oli Gardner mặc chiếc nào vest cười tươi tắn sẽ gip tạo dựng niềm tin, do đó làm tăng chuyển đổi so với thiết kế buồn tẻ phía trên.

Nhưng, trên thực tế, ông cho biết, Oli đã giảm 14% tỉ lệ chuyển đổi

Hãy quên tất cả mọi thứ bạn nghĩ rằng bạn biết về tâm lý học, hoặc bất kỳ lý do nào bạn có thể nghĩ rằng việc Oli mỉm cười sẽ làm tăng chuyển đổi. Hãy thử nhìn lại 2 thiết kế một lần nữa, và lần này chỉ tập trung vào chữ “Start….”, bạn có nhận thấy gì không?

Gương mặt đang mỉm cười của Oli CẠNH TRANH sự chú ý với nút “Start….”. Sự hiện diện ở Oli ngay vị trí đó không chỉ tạo nên sự phiền nhiễu mà còn chiếm mất khoảng trắng quý giá có thể được sử dụng để thu hút sự chú ý vào nút “Start…”

Hãy cùng xem các khái niệm này trong một ví du khác

Contrast Example

Phiên bản điều chỉnh vượt trội hơn so với bản gốc tới 60%, một mức đáng kinh ngạc! Hãy dành thời gian để suy nghĩ về lý do tại sao.

Hãy nhìn vào tất cả những gì họ đang cố gắng để thuyết phục bạn bán các thiết kế áo phông của bạn trong bản gốc: “you do the fun part,” “we do billing and shipping, v.v.,”. Cuối cùng, lẫn trong số tất cả những nội dung đó là nút call-to-action (CTA).

Trong phiên bản điều chỉnh, mọi thứ rõ ràng hơn rất nhiều. Họ đã giảm bớt những nội dung thừa thãi và làm cho mọi người chỉ tập trung chú ý đến: Kiếm tiền kiếm tiền.

Ngoài ra, thiết kế rõ ràng hơn nhiều. Phím bấm kêu gọi hành động được được đặt ngay chính giữa, trên một hàng riêng biệt của nó, với nhiều khoảng trống xung quanh nó. Thiết kế đơn giản, nút bấm nổi bật và nội dung thể hiện rõ ràng những gì họ muốn người dùng thực hiện.

Vì vậy, lời khuyên quan trong trọng ông đề cập đến khi thiết kế để tối ưu chuyển đổi đó là:

Hãy thiết kế để khách hàng biết phải làm gì

Theo đó, bất kỳ hành động nào bạn muốn người dùng thực hiện, nơi hiển thị hành động đó phải là nơi hấp dẫn nhất của trang. Sử dụng màu sắc tương phản, kiểu chữ rõ ràng, khoảng trắng được coi là tốt và các yếu tố quan trọng làm nổi bật CTA.

Bài học

  • Không có màu nào là tốt nhất. Tương phản là những gì thực sự quan trọng. CTA, lời kêu gọi hành động của bạn có đủ nổi bật không?
  • Không có font chữ nào là tốt nhất Các font chữ khác nhau tạo ra tâm trạng khác nhau, vì vậy nó phụ thuộc vào đối tượng của bạn. Hãy chọn font chữ dễ đọc nhất.
  • Sự rõ ràng trực quan là chìa khóa để chuyển đổi. Thiết kế của bạn có thể rõ ràng hoặc phức tạp, giống như nội dung của bạn. Hãy giản lược nội dung, thêm khoảng trắng xung quanh nút call-to-action (CTA) và đơn giản hoá các yếu tố graphics

Tổng hợp và Dịch từ liệu của David trên designforhackers.com

Bài viết nằm trong chuỗi bài viết nổi bật “Tối ưu hoá tỷ lệ chuyển đổi A-To-Z”, cập nhật thường xuyên

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s