Hệ thống thiết kế

Giải phẫu của nút CTA năm 2017: Thực hành tốt nhất về Giọng nói & Giai điệu, Phong cách và Thành phần.

Ở đây tôi sẽ giải thích cách Hệ thống thiết kế hoạt động bằng một yếu tố giao diện duy nhất: nút CTA chịu trách nhiệm hướng người dùng đến hành động chính của trang web của bạn.

Bài viết này nhằm mục đích trình bày một số hướng dẫn để thiết kế một thành phần gọi hành động hiệu quả và làm thế nào các nhóm có thể làm cho thành phần giao diện này hoạt động thành công cùng nhau.

Tông giọng

Tại sao tôi nên nhấp vào nút này?

a. Bắt đầu với một động từ hành động và viết ở ngôi thứ nhất

Nút CTA của bạn nên bắt đầu bằng một động từ hành động như là Bắt đầu, Ăn Nhận, hay Tải xuống. Họ định hướng hành động.

Trong một thử nghiệm do Michael Aagaard (Trình tối ưu hóa chuyển đổi cao cấp Unbounce) thực hiện, anh đã phát hiện ra rằng việc thay đổi bản sao nút CTA từ người thứ hai sang người thứ nhất dẫn đến tỷ lệ nhấp qua tăng 90%.

b. Sự mong đợi

Hầu hết người dùng web đều do dự khi lấy những thứ họ trình bày trên web theo mệnh giá. Theo kinh nghiệm, lòng tin của họ đã bị đốt cháy trước đó bởi các liên kết hứa hẹn dịch vụ miễn phí chỉ để biết rằng họ phải cung cấp số thẻ tín dụng để có được những gì họ muốn.

Để tăng chuyển đổi nhấp chuột và để tạo lòng tin, hãy lường trước sự hoài nghi của người dùng và nói với họ những gì họ sẽ đạt được bằng cách thực hiện hành động mà bạn đã trình bày với họ. Khi thiết kế nút kêu gọi hành động, hãy nghĩ đến tất cả các câu hỏi tiềm năng mà người dùng sẽ có và đảm bảo rằng bạn trả lời đúng thời gian.

c. Cảm giác cấp bách

Phrasing hành động bằng cách sử dụng các từ táo bạo, tự tin và chỉ huy có thể thay đổi nhận thức của người dùng theo cách để thuyết phục họ rằng họ không nên chờ đợi để hành động nữa và chờ đợi để hành động sẽ dẫn đến một hình phạt hoặc một bỏ lỡ cơ hội.

Cười mở miệng. Cảm giác dễ dàng

Thông thường, một người dùng từ chối do dự hành động bắt nguồn từ suy nghĩ rằng một hành động sẽ khó khăn, tốn kém hoặc mất thời gian. Bằng cách quan tâm đến những lo ngại này, nút CTA của bạn có thể dẫn đến nhiều chuyển đổi hơn.

e. Từ kích hoạt

Từ kích hoạt là những từ và cụm từ kích hoạt người dùng nhấp vào. Chúng chứa các yếu tố cần thiết để cung cấp động lực cho người dùng tiếp tục duyệt. Cung cấp cho họ một lý do tốt để thực hiện hành động mà bạn muốn họ thực hiện. Nếu người dùng đang tìm kiếm các kế hoạch và các mức giá khác nhau, và nút CTA của bạn cho biết các kế hoạch của Cameron và định giá, thì họ sẽ nhấp vào đó. Vì vậy, trong trường hợp này, các kế hoạch của Google và giá cả của những người khác sẽ là những từ kích hoạt.

Hãy suy nghĩ về các từ kích hoạt như từ khóa tìm kiếm!

Jared Spool có những lời khuyên hay trong bài viết: The Right Trigger Words.

Phong cách

Tôi nên nhấp vào đâu?

a. Hình dạng

Điều đầu tiên bạn nên biết là hình dạng của nút CTA của bạn. Hai hình dạng nút phổ biến nhất là các cạnh tròn và vuông, và hình dạng phù hợp nhất với bạn sẽ chủ yếu phụ thuộc vào thử nghiệm. Don lồng bỏ qua yếu tố này. Hình dạng nút có thể và không ảnh hưởng đến tỷ lệ chuyển đổi.

b. Kích thước

Trong các trang web, kích thước của một phần tử so với các phần tử xung quanh cho thấy tầm quan trọng của nó: phần tử này càng lớn thì nó càng quan trọng. Quyết định mức độ quan trọng của các hành động trang web nhất định và kích thước nút CTA của bạn cho phù hợp.

c. Khoảng cách trắng

Việc sử dụng khoảng trắng (hoặc không gian chết) xung quanh nút CTA là một cách hiệu quả để làm cho nó nổi bật ở những khu vực có nhiều yếu tố.

Cười mở miệng. Vị trí

Vị trí của nút CTA là rất quan trọng để thu hút sự chú ý của khách truy cập. Vị trí ở các vị trí nổi bật như phần trên cùng của trang web có thể dẫn đến chuyển đổi trang đích cao hơn vì người dùng có thể sẽ nhận thấy nút CTA và thực hiện hành động.

Các nhà thiết kế sử dụng các ứng dụng di động được thiết kế theo tiêu chuẩn của Google Material Design đã biết rằng nút chính (FAB - Nút hành động nổi) sẽ nằm ở phía dưới bên phải của màn hình. Vấn đề vị trí!

e. Màu tương phản

Đặt màu nhấn cho nút CTA của bạn và gắn với nó. Không sử dụng màu chính hoặc màu phụ của thương hiệu của bạn.

Michael Aagaard nói:

Lời khuyên tốt nhất của tôi là sử dụng màu sắc thông thường và màu tương phản khi bạn thiết kế các nút trang đích của mình. Các bài kiểm tra tốt về việc nheo mắt trước đây luôn luôn hữu ích. Đặt trang của bạn lại với nhau, lùi lại vài bước, nheo mắt và xem nút của bạn có nổi bật không. Tôi thường bắt đầu bằng cách thử nghiệm với một nút màu cam hoặc màu xanh lá cây, đơn giản vì chúng thường hoạt động tốt trong các thử nghiệm. Tôi không nghĩ rằng có bất kỳ lý do tâm lý sâu sắc hơn, có vẻ như chúng nổi bật trên hầu hết các trang đích do thiết kế trung bình. Một lần nữa, đó là tất cả về bối cảnh và tôi đã thấy các thử nghiệm trong đó một nút màu tím đã vượt trội hơn cả các biến thể màu xanh lá cây và màu cam.

Hãy tưởng tượng rằng nút CTA của bạn cần gần như bất thường trên màn hình. Để làm như vậy, tránh một số nguyên tắc Gestalt như gần gũi, tương tự, liên tục và khu vực chung. Chỉ sử dụng một luật: đầu mối. Bằng cách này, nút CTA của bạn sẽ được tô sáng trong chế độ xem của người dùng của bạn.

Thành phần

Nó thời gian để chuyển đổi các yếu tố giao diện của bạn để các thành phần!

a. Trở thành một thành phần cho Nhà thiết kế và Nhà phát triển

Các nhà thiết kế phải tạo ra các giao diện tư duy trong các thành phần, sử dụng các công cụ phù hợp có sẵn trên thị trường như Phác thảo, Adobe XD, Figma, v.v. Các nhà phát triển cũng vậy! Sử dụng một số công nghệ mặt trước để thành phần hóa như React, Angular, Vue.js, v.v.

b. Quy ước tên bằng nhau cho các nhà thiết kế và phát triển

Bây giờ chúng tôi làm việc với các thành phần, các nhóm cần nói cùng một ngôn ngữ. Để làm điều này, chúng ta phải có cùng một quy ước đặt tên cho các thành phần cho cả Nhà thiết kế và Nhà phát triển.

Ví dụ phản ứng:

Ví dụ biểu tượng phác thảo:
nút / nút chính
nút / nút phụ

c. Tối ưu hóa cho kiểm tra đơn vị

Để nhóm QA hoạt động hiệu quả hơn, luôn luôn khai báo một mã định danh cho thành phần của bạn. Và làm cho nó rõ ràng những gì bối cảnh mà các thành phần được áp dụng.

Ví dụ về HTML:

Cười mở miệng. Tối ưu hóa cho Analytics

Thuộc tính dữ liệu tùy chỉnh là một cách nhanh chóng để nắm bắt thông tin bổ sung về nội dung trên trang. Đây là một giải pháp hợp lý giúp bạn hiểu rõ hơn về cách người dùng điều khiển thông qua nội dung của trang web. Thuộc tính dữ liệu tùy chỉnh là cấu trúc của thông số HTML 5 và được hỗ trợ rộng rãi trong tất cả các trình duyệt web chính. Vì nó HTML hợp lệ và HTML rất thân thiện với người dùng để thực hiện, điều này làm cho nó trở nên hấp dẫn hơn khi quay.

Ví dụ về HTML:

Có một số lợi ích khi thực hiện và sử dụng các thuộc tính dữ liệu:

e. Tối ưu hóa cho thử nghiệm A / B

Đưa vào thực tiễn các thực hành tốt về tối ưu hóa Thành phần đã được nói ở trên và tận hưởng để kiểm tra tất cả các mẹo của Giọng nói & Giai điệu và Phong cách.

Ví dụ phản ứng:
Đầu ra HTML:

  Bia hôm nay!
Mục tiêu của một bài kiểm tra không phải là để có được một thang máy, mà là để có được một học tập - Tiến sĩ Flint McGlaughlin, MECLABS

Tối ưu hóa là một quá trình liên tục. Isn mệnh quan trọng cho dù kết quả kiểm tra ban đầu là dương tính hay âm tính.

Tất nhiên, đánh một cú chạy về nhà trong cú swing đầu tiên thì dễ hơn với bản ngã. Nhưng khi bạn tiếp cận tối ưu hóa như một quá trình - không phải là cơ hội một lần để tìm kiếm hàng rào - bạn sẽ thấy rằng việc dừng lại ở một vài căn cứ trên đường đi thường là những gì cần thiết để giành chiến thắng trong trò chơi - Michael Aagaard, Unbounce

Nhớ

Không có gì được viết bằng đá. Kiểm tra rất nhiều. Nó tất cả về bối cảnh.

Tiếp thị trong nước

Tất cả mọi thứ được trình bày trong bài viết này đều có thể được kết hợp với một số chiến lược Tiếp thị trong nước. Tìm hiểu thêm về những gì LỚP trong liên kết dưới đây:

Người giới thiệu