Lamsao.com
Đăng nhập
Yêu thích
Lamsao.com
  • Ẩm thực
    • Handmade
      • Gia đình Việt
      • Đời sống
      • Khỏe đẹp +
      • Khám phá
      Lamsao.com
      • Ẩm thực
        • Handmade
          • Gia đình Việt
          • Đời sống
          • Khỏe đẹp +
          • Khám phá
          • LAMSAO.COM
          • Trang chủ
          • Ẩm thực
          • Handmade
          • Gia đình Việt
            • Nhà cửa
            • Gia đình
            • Cha mẹ trẻ
          • Đời sống
            • Giới trẻ
            • Du lịch
            • Văn hóa
          • Khỏe đẹp +
            • Sức khỏe
            • Dinh dưỡng
            • Khỏe đẹp
            • Đẹp
            • Thời trang
          • Khám phá
            • Sự nghiệp
            • Công nghệ
            • Giáo dục
            • Xe 360°
            • Thể thao
          Bài viết yêu thích
          Đăng nhập
          Lamsao.com
          Lamsao.com Công nghệ Thương mại điện tử SEO

          Cách sử dụng “Call to action” trong thiết kế web

          yêu thích
          Để tối đa hóa thành công của website, việc xác định rõ ràng “call to action” là điều cần thiết. Một CTA – lời mời gọi hành động – là một nghệ thuật thu hút người dùng nhấn vào một nút hay điền vào một biều mẫu hay bất kì tương tác nào khác giữa họ với website. Dưới đây ta sẽ xem qua 10 ví dụ làm thế nào để tăng tính hiệu quả cho lời mời gọi hành động của bạn.
          • Google “hạ thấp” website không thân thiện mobile
          • Google xếp hạng website của bạn như thế nào ?
          • SEO nội dung - 4 bước không thể bỏ qua
          • 1

            BaseCamp

            BaseCamp là một dịch vụ rất nổi tiếng và thiết kế của họ thường được nhắc tới bởi sự đơn giản và hiệu quả. Lời mời gọi hành động ở đây là nút màu xanh “See Plans and Pricing”. Họ dùng nhiều dường nét (stroke) khác nhau và gradient màu xanh lá. Họ cũng dùng một mũi tên trỏ trực tiếp vào nút để tối đa hóa cơ hội người dùng click vào đó.

            Click image for larger version

Name:	1.jpg
Views:	14
Size:	18.9 KB
ID:	7986
          • 2

            Tapmates

            Mục tiêu của thiết kế này là mời gọi người dùng nhập địa chỉ email của họ và nhấn vào nút “SIGN UP”, vốn là một lời mời gọi hành động. Nút signup hiển thị rất nổi bởi gradient màu ngọc lamđược đổ bóng rất tinh tế.

            Click image for larger version

Name:	1 (2).jpg
Views:	13
Size:	15.6 KB
ID:	7987
          • 3

            FatCow

            Lời mời gọi hành động ở đây chính là nút “Get Started” màu cam/vàng sáng. Nó nổi bật nhờ hai yếu tố: (1) nó là đối tượng quan trong duy nhất được tô màu vàng, và (2) có thêm một thiết kế hình mũi tên màu xanh nằm phía trên chỉ trực tiếp vào nút này. Với nút “Get Started ” này, họ dùng hiệu ứng bóng láng và đổ bóng cho nút, để trông nổi bật hơn.

            Click image for larger version

Name:	1 (3).jpg
Views:	13
Size:	19.3 KB
ID:	7988
          • 4

            Red Is White

            Trong ví dụ này, ta thấy có hai lời mời gọi hành động khác nhau. CTA được ưu tiên nhất chính là nút “PRE-ORDER”, nó trông nổi bật nhất nhờ có vị trí nằm ở bên trái màn hình, và nó có độ tương phản nhất với phần nền màu đẹn và nút màu hồng tươi.

            Click image for larger version

Name:	1 (4).jpg
Views:	13
Size:	17.1 KB
ID:	7989
          • 5

            Slack

            Lời mời gọi hành động ở đây là nút “Continue” được nhấn mạnh bởi dường viền 1 pixel xanh lá xung quanh nút. Nút sử dụng gradient màu xanh lá, đổ bóng mờ. Trên mặt chữ là gradient trắng-sang-xanh lá.

            Click image for larger version

Name:	5.jpg
Views:	12
Size:	76.8 KB
ID:	7990
          • 6

            Các thành phần góp phần thành công cho lời mời gọi hành động

            - Độ tương phản. Bất kì thứ gì bạn muốn người dùng thấy và thực hiện hành động trên đấy cần dễ dàng nhìn thấy. Các nút và biểu mẫu của bạn càng tương phản với phần nền chúng nằm trên thì khả năng người dùng thấy chúng càng cao.

            - Đường nét. Đường nét (hay đường biên) cũng là yếu tố góp phần tạo tương phản. Yếu tố này không thực sự cần thiết 100% nhưng nếu chúng không phá vỡ thiết kế thì không còn lí do gì để bỏ qua chúng.

            - Gradient. Gradient là yếu tố thực sự làm đối tượng trông nổi bật hơn. Trong hầu hết các ví dụ bên trên đều có sử dụng đến gradient. Nhưng tránh lạm dụng gradient vì chúng dễ làm đau mắt người dùng hơn các yếu tố đơn giản khác trong thiết kế.

            - Đổ bóng. Cũng như gradient, bóng mờ có thể làm đối tượng nổi bật hơn. Nhưng bóng mờ thậm chí còn bị lạm dụng nhiều hơn cả gradient bởi những nhà thiết kế mới vào nghề. Đổ bóng có thể là tài sản tuyệt vời cho thiết kế nhưng cũng có thể là dấu chấm hết của thiết kế bởi chúng làm cho thiết kế trông tồi tệ hơn. Nếu bạn nhìn vào các ví dụ bên trên sẽ thấy khi đổ bóng được sử dụng, chúng được dùng rất thận trọng.

          • 7

            Split-Testing Call to Action

            Nếu mục tiêu của bạn là tối đa hóa đơn đặt hàng, thông tin người dùng, followers, người đăng kí hay bất kì loại data nào từ kết quả của hành động người dùng thực hiện thì split-testing là điều cần thiết. Một phép thử A/B split-testing đơn giản có thể tiết lộ những lỗi thiết kế và dẫn đến tăng chuyển đổi. Một lỗi chết người của người thiết kế đó là “cái tôi”, cho rằng thiết kế ban đầu là thiết kế tốt nhất mà điều này hiếm khi nào đúng. Đôi khi chỉ một thay đổi nhỏ là then chốt làm tăng chuyển đổi lên thành hai con số. Hiện có khá nhiều công cụ để làm split-testing nhưng có lẽ Google Analytics Content Experiments là công cụ tuyệt vời để bắt đầu. Miễn phí 100% và các bước thực hiện split-teting rất dễ thực hiện.

          Bài viết liên quan

          • Google “hạ thấp” website không thân thiện mobile Google “hạ thấp” website không thân thiện mobile
          •  Google xếp hạng website của bạn như thế nào ? Google xếp hạng website của bạn như thế nào ?
          •  SEO nội dung - 4 bước không thể bỏ qua SEO nội dung - 4 bước không thể bỏ qua
          •  Công nghệ hóa việc xây dựng liên kết Công nghệ hóa việc xây dựng liên kết
          • 5 bước để SEO từ khóa lên top Google 5 bước để SEO từ khóa lên top Google
          • 10 thủ thuật Google+ đơn giản nhưng mang lại hiệu quả SEO cao 10 thủ thuật Google+ đơn giản nhưng mang lại hiệu quả SEO cao
          •  Thủ thuật On- page SEO cho một website Thủ thuật On- page SEO cho một website
          • Công cụ đánh giá Onpage trong SEO Công cụ đánh giá Onpage trong SEO

          Được tài trợ

          loading...

          Top 5 tiêu điểm tuần

          • 1 Google xếp hạng website của bạn như thế nào ?
          • 2 5 bước để SEO từ khóa lên top Google
          • 3 10 thủ thuật Google+ đơn giản nhưng mang lại hiệu quả SEO cao
          • 4 Những kỹ năng cơ bản mà một nhà tư vấn SEO
          • 5 Những chiến thuật seo "lỗi thời" làm lãng phí thời gian của bạn

          Bài viết nổi bật

          • Sự khác nhau giữa website và webpage Sự khác nhau giữa website và webpage 2.302 lượt xem
          • Drupal SEO - Vấn đề vẫn là trung lặp nội dung Drupal SEO - Vấn đề vẫn là trung lặp nội dung 2.221 lượt xem
          • Hướng dẫn gửi đơn yêu cầu Google xem xét lại và ví dụ tham khảo Hướng dẫn gửi đơn yêu cầu Google xem xét lại và ví dụ tham khảo 1.894 lượt xem
          • SEO từ khoá cho doanh nghiệp hay SEO tổng thể SEO từ khoá cho doanh nghiệp hay SEO tổng thể 1.552 lượt xem
          • Các cách đơn giản để thiết kế một website bắt mắt Các cách đơn giản để thiết kế một website bắt mắt 1.476 lượt xem
          Về Lamsao Liên hệ
          Video Góp ý Sự kiện
          • Đăng nhập
          • Đăng ký
          Nhớ mật khẩu Bạn quên mật khẩu
          Nhập vào tên đăng nhập để nhận mật khẩu mới

          Lưu bài viết yêu thích

            Tiêu đề