Thiết kế button Call to action

Thiết kế button Call to action

Một nửa số button được sử dụng làm lời gọi hành động chính trên trang web không làm cho tôi cảm thấy thích thú khi nhấp vào. Bạn có thể và nên thử nghiệm thiết kế button nhưng, đôi khi, nó chỉ bắt đầu theo lẽ thường. Thiết kế button UX đã thay đổi rất nhiều trong thập kỷ qua. Một xu hướng lâu đời dường như là pha trộn một button vào thiết kế. Có lẽ đẹp mắt về mặt thẩm mỹ, nhưng bạn thực sự muốn nó nổi bật và khiến khách truy cập click vào nó?

Lưu ý rằng không phải mọi button đều là lời gọi hành động được chỉ định. Đôi khi bạn chỉ cần một button, thích trong mẫu bình luận. Trong bài đăng này, tôi sẽ thảo luận về năm loại button và cung cấp cho bạn ý kiến ​​của tôi với tư cách là người lướt web toàn thời gian về những loại này.

Các bài viết liên quan:

Các button mặc định

Tôi đã tìm thấy một bài viết rất hay về cách tạo kiểu các button cho trang web năm 2004 . Mặc dù các button này trông giống như các button và thậm chí có thể đưa bạn trở lại thời kỳ hoài cổ hơn, nhưng hãy để chúng ở đó. Chúng cổ kính, cũ kỹ và nằm trong viện bảo tàng. Không có trên trang web. Tôi luôn do dự khi phải điền vào một biểu mẫu có kiểu cũ đó. Điều này khiến bạn băn khoăn liệu biểu mẫu có an toàn hay không và dữ liệu sẽ không bị thu thập bởi những người mà bạn không muốn họ nhúng tay vào.

Thiết kế button Call to action

Flat Button

Các button phẳng giống như hình vuông hoặc hình chữ nhật có màu với các từ trên chúng. Nó có thể là một biểu ngữ hoặc có thể chỉ là những từ được nhấn mạnh. Tôi biết thiết kế phẳng đã được phổ biến trong một thời gian khá dài. Và rất nhiều nhà thiết kế ở ngoài kia thích button này vì dễ làm cho nó phù hợp với thiết kế hơn. Nhưng tôi nghĩ chúng ta sẽ nhìn lại 10 năm kể từ bây giờ và tự hỏi tại sao chúng ta lại sử dụng chúng. Không nói các button phẳng là sai, nhưng tôi thích các button của tôi trông giống như các button. Để chúng bắt chước một đối tượng ngoài đời thực:

Thiết kế button Call to action

button đầu tiên (trên cùng bên trái) là button phẳng trông giống như biểu ngữ. Trên cùng bên phải là một cải tiến nhỏ. Các góc được bo tròn khiến nó trông giống một chiếc button hơn một chút. Cái dưới cùng bên trái thậm chí còn tốt hơn: một button nâng lên. Bóng tối truyền tải độ sâu, cho biết rằng có thể nhấp vào nó. Và vì lý do chuyển đổi, tôi đã thêm một số sự tin tưởng bổ sung vào người cuối cùng. Điều này có thể hoạt động khi nó là lời gọi hành động chính trên trang web , nhưng không cần thiết đối với các button biểu mẫu. Tôi muốn thêm một lời chứng thực hay ho bên dưới các button biểu mẫu này để nâng cao lòng tin.

Xem thêm Thiết kế trang web chuẩn seo là gì?

Ghost button

Mặc dù các button ma (hoặc các button có đường viền) dường như được sử dụng thường xuyên hơn trong thiết kế UX, nhưng tôi thực sự không khuyến khích sử dụng chúng. Điều này, vì những lý do tương tự, tôi sẽ không sử dụng các button phẳng. UXMag có một số ví dụ tuyệt vời về các ghost button. Tôi đặc biệt thích ví dụ về Haruki Murakami, vì trang web đó thực sự trông rất ấn tượng. Đây là một bức tranh tĩnh:

Thiết kế button Call to action

Tuy nhiên, giống như rất nhiều trang web được liệt kê, bạn sẽ nhanh chóng thấy nó sai ở đâu. button “Available now” không thực sự giống một button. Nếu bất cứ điều gì, nó trông giống như một nhãn hoặc một biểu ngữ. Giống như một phần tử truyền tải thông tin, thay vì một lời gọi hành động. Và trong khi nó trông tuyệt vời, nó chỉ hòa hợp với phần còn lại của trang, điều này gần như khiến nó trở nên vô dụng…

Điều này có nghĩa là bạn không bao giờ nên sử dụng các button ma? Tôi nghĩ điều này phụ thuộc nhiều vào ngữ cảnh mà bạn muốn sử dụng chúng. Chúng có thể khá hiệu quả khi được sử dụng song song với button thứ hai, có điểm nhấn cao hơn. Bởi vì một button ma có trọng lượng nhẹ về mặt hình ảnh, ghép nối nó với một button có sẵn, sẽ tự động truyền tải thứ bậc. Điều này tự động hướng khách truy cập đến hành động chính . Đến button mà bạn cho là quan trọng hơn.

One-state buttons

Có một yếu tố thứ hai quan trọng ở đây. Đây không phải là cách button ban đầu trông như thế nào đối với khách truy cập, mà là về cách button tương tác. Đó là về việc di chuột qua một button và thấy rằng không có gì thay đổi. Nó là một button, hoặc có lẽ không? Tôi phải thực sự nhấp vào nó để tìm hiểu xem thứ trông giống như một button có thực sự là một button hay không. Hừm. Mọi người có xu hướng do dự trước khi nhấp và sử dụng các button một trạng thái mà không có trạng thái di chuột được thiết kế sẽ chỉ khiến họ do dự nhiều hơn.

Thêm trạng thái di chuột có thể đơn giản như gạch dưới các từ trên button hoặc thay đổi màu nền. Hoặc cả hai.

Button UX tốt nhất

Theo quan điểm của tôi, các nguyên tắc đằng sau một button tốt thực sự vượt thời gian và không có cách nào phụ thuộc vào xu hướng. Có một bản tổng hợp hay và đơn giản về các phương pháp hay nhất về button này trên Blogs.adobe.com mà tôi muốn kết hợp với phương pháp trên DesignExclusive:

  • Làm cho nó trông giống như một button (kích thước, hình dạng, màu sắc, độ sâu).
  • Thêm một thông báo rõ ràng về những gì sẽ xảy ra sau khi nhấp chuột.
  • Lưu ý đến thứ tự và vị trí (vị trí) của các button.
  • Độ tương phản màu của button.

Mục đầu tiên trong danh sách trên tóm tắt quan điểm của tôi: một button là một button. Không quá nhiều yếu tố thiết kế. button UX là về sự nhận biết và rõ ràng.

Xem thêm 7 điều quan trọng để thiết kế website

Kết luận

Trong khi viết bài đăng này, tôi nhận ra rằng chúng tôi không theo dõi trong số các phương pháp hay nhất này đối với bức thư trên trang web này. Luôn có chỗ để cải thiện. Khi bạn xem xét các button của chính mình, hãy bắt đầu với những button quan trọng nhất. Thích button mua trên trang sản phẩm hoặc button đăng ký nhận bản tin. Và hãy nhớ rằng không phải tất cả mọi thứ đều là một button hoặc phải giống như nó.

Xem thêm trải nghiệm người dùng

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply