Trang chủ » Thiết kế web » Lời kêu gọi hành động

    Lời kêu gọi hành động

    Các nút kêu gọi hành động trên các trang web thường bị bỏ qua. Các nhà thiết kế đôi khi không hiểu chính xác điều gì tạo ra một nút kêu gọi hành động tốt ngoài việc hấp dẫn và phù hợp với thiết kế tổng thể. Nhưng các nút gọi hành động là quá quan trọng để được thiết kế mà không có một số hiểu biết về những gì làm cho chúng hiệu quả. Rốt cuộc, điểm chính của nút kêu gọi hành động là đưa khách truy cập đến làm một cái gì đó.

    Điều quan trọng là đạt được ít nhất một sự hiểu biết cơ bản về cách màu sắc, tỷ lệ, ngôn ngữ và các yếu tố khác ảnh hưởng đến tỷ lệ chuyển đổi của nút gọi hành động. Các khái niệm ở đây không phức tạp, nhưng chúng có một chút suy nghĩ và lập kế hoạch để tạo ra các nút gọi hành động hiệu quả nhất có thể có trong một thiết kế nhất định. Đọc để biết thêm thông tin về từng điểm này và nhiều hơn nữa.

    Mục đích của các nút "Kêu gọi hành động"

    Các nút gọi hành động có thể phục vụ nhiều chức năng. Sau tất cả, “kêu gọi hành động” thực sự là một chút mơ hồ. Tất cả điều đó có nghĩa là mục đích chính của nó là để có được một khách truy cập vào trang web của bạn để làm việc gì đó. Rằng một cái gì đó có thể là thêm một sản phẩm vào giỏ hàng của họ, tải xuống một cái gì đó, yêu cầu thông tin hoặc bất cứ thứ gì khác.

    Bởi vì các nút kêu gọi hành động có mục đích đa dạng như vậy, rất nhiều sự cân nhắc phải đi vào những gì nút nhắm đến để đạt được. Loại trang web, thị trường mục tiêu và hành động mong muốn đều có thể đóng một vai trò trong cách thiết kế tốt nhất nút gọi hành động.

    Các loại nút "Kêu gọi hành động"

    Có một vài loại nút gọi hành động khác nhau. Mặc dù mỗi loại nhằm mục đích khiến khách truy cập thực hiện một hành động nhất định, hành động đó có thể thay đổi đáng kể. Dưới đây là các loại nút gọi hành động phổ biến nhất, dựa trên hành động họ muốn bạn thực hiện.

    1. Thêm vào nút giỏ hàng

    Các trang web thương mại điện tử thường sử dụng một số nút gọi hành động, nhưng nút được sử dụng rộng rãi nhất là “thêm vào giỏ hàng” nút. Các nút này thường xuất hiện trên các trang sản phẩm riêng lẻ. Mục đích của họ là để lôi kéo khách hàng mua một mặt hàng. Các yếu tố thiết kế phổ biến trong các nút thêm vào giỏ hàng bao gồm từ ngữ đơn giản (như “Thêm vào giỏ hàng” hoặc là “Thêm vào túi” hoặc là “Mua ngay“) và việc sử dụng các biểu tượng (thường là túi hoặc giỏ hàng).

    2. Nút tải xuống

    Các nút tải xuống tương tự như thêm vào các nút giỏ hàng ở chỗ họ đang cố gắng lôi kéo khách truy cập để sở hữu một mặt hàng. Trong trường hợp nút tải xuống, nhiều nhà thiết kế chọn bao gồm nhiều thông tin hơn các loại nút khác (chẳng hạn như thông tin phiên bản hoặc kích thước tải xuống).

    3. Nút dùng thử

    Một số trang web cố gắng lôi kéo khách truy cập của họ dùng thử dịch vụ của họ, thường là dưới dạng dùng thử miễn phí. Đây có thể là tải xuống miễn phí hoặc tài khoản miễn phí, tùy thuộc vào trang web cụ thể. Một số trang web sử dụng “càng đơn giản càng đẹp” triết lý và giữ ngôn ngữ trên các nút của họ ở mức tối thiểu, trong khi những người khác muốn cung cấp thêm thông tin về những gì bản dùng thử chứa.

    4. Tìm hiểu thêm các nút

    Tìm hiểu thêm các nút thường được sử dụng ở cuối một khối thông tin trêu ghẹo (thường trên trang chủ). Các nút này thường đơn giản, nhưng thường quá khổ để thu hút sự chú ý của khách.

    5. Nút đăng ký

    Các nút đăng ký xuất hiện phổ biến nhất trong hai phiên bản khác nhau. Loại đầu tiên thường được liên kết trực tiếp với một hình thức đăng ký. Loại thứ hai thường được sử dụng theo cách tương tự như “thêm vào giỏ hàng” các nút, như một cách để người dùng mua hoặc đăng ký dịch vụ hoặc tài khoản, trước khi họ thực sự đạt được một hình thức đăng ký.

    Có các loại nút gọi hành động khác, nhưng đây là những loại phổ biến nhất. Các nguyên tắc áp dụng cho các nguyên tắc trên có thể cũng sẽ áp dụng cho bất kỳ loại nút gọi hành động nào khác mà bạn có thể đang thiết kế.

    Sử dụng không gian âm có hiệu quả

    Bạn muốn các nút gọi hành động của mình nổi bật so với nội dung xung quanh và thực sự thu hút sự chú ý từ khách truy cập trang web của bạn. Để đạt được điều đó, bạn cần tận dụng không gian âm xung quanh các nút đó. Kết hợp không gian trống giữa nội dung của bạn và nút kêu gọi hành động của bạn. Mặc dù điều này ít quan trọng hơn (và ít phổ biến hơn) trên một số nút, chẳng hạn như thêm vào nút giỏ hàng, với các nút khác, như những nút khác để tìm hiểu thêm, hoạt động tốt hơn với nhiều không gian hơn.

    Điều quan trọng là phải cân bằng lượng không gian âm bạn có xung quanh các nút với kích thước của các nút. Đó là về tỷ lệ. Bạn muốn nút của bạn, không gian xung quanh nó và tất cả nội dung xung quanh trông giống như chúng đi cùng nhau, thậm chí có sự chênh lệch về kích thước. Bạn có thể phải loay hoay với mọi thứ một chút để khiến chúng trông vừa phải.

    Một số hướng dẫn:

    • Đảm bảo có đủ không gian xung quanh nút của bạn để nó không cảm thấy lộn xộn
    • Hãy xem xét các nguyên tắc như quy tắc một phần ba hoặc Tỷ lệ vàng khi xác định bao nhiêu không gian cần bao gồm
    • Không gian âm giúp phòng gọi nút hành động của bạn nổi bật so với nội dung khác của bạn và làm cho nó khác biệt

    Kích thước và màu sắc

    Các nút gọi hành động của bạn lớn đến mức nào là rất quan trọng. Một nút quá lớn sẽ áp đảo mọi thứ xung quanh nó. Một nút quá nhỏ sẽ bị mất trong việc xáo trộn tất cả các nội dung khác trên một trang. Bạn muốn nút của bạn đủ lớn để nổi bật mà không áp đảo thiết kế.

    Màu sắc có thể được sử dụng để tạo hiệu ứng tuyệt vời để giúp cân bằng kích thước các nút của bạn. Đối với các nút lớn hơn, chọn màu ít nổi bật hơn trong thiết kế của bạn (nhưng vẫn nổi bật trở lại nền). Đối với một nút nhỏ hơn, bạn có thể muốn chọn màu sáng hơn, tương phản để thực sự làm cho nút bật. Trong cả hai trường hợp, hãy đảm bảo màu bạn sử dụng đặt nút tách biệt mà không bị xung đột với thiết kế chung của trang web.

    Một số hướng dẫn:

    • Các nút gọi hành động của bạn lý tưởng nhất phải là các nút lớn nhất trên một trang nhất định
    • Sử dụng màu tương phản để làm cho các nút nhỏ hơn nổi bật hơn
    • Sử dụng màu sắc ít khác biệt hơn để làm cho các nút quá khổ phù hợp hơn
    • Bạn gọi các nút hành động cần ra lệnh chú ý mà không áp đảo thiết kế của bạn

    Ngôn ngữ

    Từ ngữ chính xác bạn chọn sử dụng trên các nút gọi hành động của mình có thể có ảnh hưởng rất lớn đến việc chuyển đổi. So sánh “Mua ngay” với “Thêm vào giỏ hàng“. Một cái là khẩn cấp hơn nhiều so với cái kia. Hoặc làm thế nào về “Dùng thử miễn phí” với “Dùng thử miễn phí“? Một là mạnh hơn nhiều so với khác và nổi bật hơn.

    Ngôn ngữ bạn sử dụng trên các nút gọi hành động của mình phải đơn giản và đơn giản nhất có thể. Bạn muốn khách truy cập biết chỉ bằng một cái nhìn chính xác những gì họ sẽ nhận được khi nhấp vào nút. Nếu họ đặt câu hỏi, điều đó có nghĩa là họ đã tạm dừng, điều này có thể dẫn đến tỷ lệ chuyển đổi thấp hơn.

    Đừng quên kích thước phông chữ của bạn, quá. Văn bản trên nút kêu gọi hành động của bạn phải lớn và đậm, phù hợp với kích thước và màu sắc của chính nút đó. Đảm bảo có đủ độ tương phản và văn bản dễ đọc.

    Một số hướng dẫn:

    • Sử dụng ngôn ngữ đơn giản, trực tiếp
    • Sử dụng phông chữ lớn, đậm trên nút cho văn bản chính
    • Đảm bảo rằng ngôn ngữ gọi rõ ràng cho một hành động cụ thể

    Tạo sự khẩn cấp

    Bạn muốn khách truy cập trên trang web của mình thực hiện các hành động mong muốn với ít suy nghĩ nhất có thể. Trong khi bạn không muốn lừa dối khách truy cập của mình, bạn càng cho họ nhiều cơ hội để họ dừng lại và xem xét những gì họ đang làm, bạn càng cho họ nhiều cơ hội hơn để nói “Không”.

    Bạn muốn các nút của bạn mang lại cho họ ấn tượng rằng họ cần phải hành động ngay lập tức. Bạn muốn khuyến khích họ đưa ra quyết định ngay lập tức, vào thời điểm này. Mặc dù điều này sẽ không hoạt động đối với mọi nút gọi hành động (đặc biệt là các nút để mua các mặt hàng có vé cao), nhưng đối với các hành động chi phí thấp hoặc miễn phí, việc khách truy cập nhấp vào với ít suy nghĩ là điều đáng mong muốn.

    Một số hướng dẫn:

    • Khuyến khích khách truy cập của bạn hành động ngay lập tức
    • Đừng cho khách truy cập của bạn bất kỳ lý do để tạm dừng
    • Mặc dù tính cấp bách là quan trọng, nhưng đừng đánh lừa khách truy cập của bạn bằng mọi cách

    Cung cấp thêm thông tin

    Nếu thích hợp, hãy sử dụng nút gọi hành động của bạn để cung cấp cho khách truy cập thêm thông tin về những gì họ sẽ nhận được nếu họ nhấp vào nút. Điều này thường thấy nhất với các nút dùng thử hoặc nút tải xuống. Các ví dụ phổ biến về thông tin bổ sung bao gồm thời gian dùng thử miễn phí sẽ kéo dài hoặc kích thước tải xuống tệp. Thông tin phiên bản cũng thường thấy.

    Khi bao gồm thêm thông tin, hãy nhớ rằng bạn cần tập trung vào lời kêu gọi hành động thực tế. Đảm bảo rằng văn bản cho ngôn ngữ lôi kéo khách truy cập hành động là nổi bật nhất, với các thông tin khác ít được nhìn thấy hơn.

    Một số hướng dẫn:

    • Chỉ bao gồm thông tin bổ sung khi thêm vào trải nghiệm người dùng
    • Thông tin bổ sung chỉ phù hợp với một số loại nút gọi hành động, đáng chú ý nhất là các nút tải xuống hoặc dùng thử
    • Đảm bảo lời kêu gọi hành động chính vẫn là văn bản nổi bật nhất trên nút của bạn

    Ưu tiên

    Điều quan trọng là ưu tiên các nút gọi hành động trên trang của bạn nếu có nhiều nút. Điều này có thể được thực hiện theo một số cách, nhưng phổ biến nhất là thông qua việc sử dụng màu sắc và kích thước.

    Sử dụng màu sắc để làm nổi bật nút quan trọng nhất trên trang hoặc để làm cho những nút ít quan trọng hơn có vẻ ít nổi bật hơn. Hoặc sử dụng kích thước để làm nổi bật nút quan trọng nhất (bằng cách làm cho nút lớn hơn) và làm nổi bật các nút ít quan trọng hơn.

    Biểu tượng và hình ảnh

    Bao gồm các tín hiệu trực quan trong các nút gọi hành động của bạn cũng có thể giúp tăng tỷ lệ chuyển đổi. Một biểu tượng của một giỏ mua hàng trên một “thêm vào giỏ hàng” nút, ví dụ, hoặc một mũi tên trên nút tải xuống đều là những ví dụ tốt. Cũng nghĩ về các biểu tượng duy nhất để sử dụng, nhưng hãy đảm bảo rằng biểu tượng đó thêm vào trải nghiệm người dùng bằng cách làm rõ nút này để làm gì và không thêm bất kỳ sự nhầm lẫn nào.

    Một số hướng dẫn:

    • Đảm bảo các biểu tượng bạn sử dụng giúp làm rõ ý nghĩa nút của bạn, thay vì nhầm lẫn với nó
    • Các biểu tượng dễ nhận biết có thể ngay lập tức biểu thị ý nghĩa cho khách truy cập của bạn
    • Đừng ngại sử dụng các biểu tượng ít được sử dụng, miễn là ý nghĩa của chúng vẫn rõ ràng

    Ví dụ

    Ở đây có một ít ví dụ về các nút gọi hành động tuyệt vời. Mặc dù chúng hoàn toàn không tuân thủ các nguyên tắc trên, nhưng chúng đáp ứng đủ các tiêu chí để được coi là tuyệt vời.

    Phát trực tiếp - Phân biệt các nút "mua ngay" (cho các tùy chọn trả phí) và "đăng ký" (cho các tùy chọn miễn phí) là một chiến lược tốt.

    Windows 7 - Nút "Nhận Windows7" ​​lớn, màu xanh lá cây dễ dàng cho khách truy cập phát hiện.

    Tập tin HQ - Nút màu xanh lá cây tươi sáng ở đây thực sự nổi bật trên nền trắng.

    Nhật ký - Sử dụng các màu khác nhau cho các nút "Tải xuống" và "Mua" sẽ đặt chúng tách biệt và ưu tiên cho nút "Mua".

    Hương vị - Nút này sử dụng tuyệt vời một biểu tượng và sử dụng văn bản lớn hơn, đậm để nổi bật.

    GoodBarry - Một nút gọi hành động màu xanh lá cây tươi sáng khác.

    Sáng tạo suốt đời - Tiếp tục cùng một kiểu chữ từ bản sao cơ thể đến nút kêu gọi hành động sẽ tạo cảm giác gắn kết.

    Người tiếp tục - Nút gọi hành động màu đỏ sáng với kiểu in đậm nổi bật trên nền màu xanh.

    Thông báo - Một ví dụ điển hình bao gồm thông tin bổ sung trong nút kêu gọi hành động.

    Mực - Một ví dụ tuyệt vời về việc ưu tiên các nút có kích thước.

    Chủ đề thanh lịch - Một ví dụ tuyệt vời khác về việc sử dụng màu sắc để nổi bật mà không bị xung đột với các yếu tố thiết kế xung quanh.

    ZenDesk - Một ví dụ tuyệt vời khác về việc làm cho một nút nổi bật bằng cách sử dụng màu sắc.

    Storenvy - Một nút tròn là bất ngờ và nổi bật, đặc biệt là khi được bao quanh bởi một đường viền màu trắng.

    Bara'Mail - Đôi khi, một nút kết hợp hoạt động tốt hơn trong thiết kế trang web tổng thể của bạn, đặc biệt là khi hành động ít khẩn cấp hơn.

    Nhiêu tai nguyên hơn

    • Các nút gọi hành động: Ví dụ và thực tiễn tốt nhất - Từ tạp chí Smashing
    • Các nút kêu gọi hành động tốt - Từ UX booth
    • Các nút gọi hành động: Kích thước có vấn đề không? - Từ Nhận Đàn hồi
    • 10 kỹ thuật cho hiệu quả “Kêu gọi hành động” - Từ Boagworld
    • 5 mẹo để tạo nút gọi hành động hiệu quả - Từ SitePoint