SPRING

MEWEB

WE DESIGN WEBSITE FOR CUSTOMER

LOVE YOUR BRAND

5 kỹ thuật thiết kế các nút kêu gọi hành động trực quan trên thiết bị di động

5 kỹ thuật thiết kế các nút kêu gọi hành động trực quan trên thiết bị di động

BY NGUYỄN NGOAN June 6, 2019 8 MIN

Nhấn hay không nhấn - đó là câu hỏi trong tâm trí người dùng khi họ thấy nút kêu gọi hành động.

Càng có nhiều nút, người dùng càng mất nhiều thời gian để quyết định. Họ phải kiểm tra từng nút để xác định cái nào đáp ứng tốt nhất mục tiêu của họ. Bất kỳ sự không chắc chắn về các nút có thể khiến họ không có hành động hoặc hành động sai.

Bạn có thể ngăn chặn điều này bằng cách làm cho mức độ ưu tiên của từng hành động trở nên trực quan. Khi người dùng có thể thấy nút nào quan trọng đối với nhiệm vụ của mình, họ có thể thực hiện hành động ngay lập tức. Có một vài kỹ thuật UX bạn có thể sử dụng để tạo sự khác biệt lớn về tính trực giác của các nút gọi hành động.

cta_button-techniques

1. Sắp xếp các nút theo thứ tự tự nhiên mắt người dùng quét qua

Một lỗi phổ biến mà các nhà thiết kế mắc phải là đặt lời kêu gọi hành động chính của họ trước vì họ muốn người dùng chú ý đến nó trước. Điều này là không cần thiết bởi vì trọng lượng hình ảnh của nút đã làm cho nó đáng chú ý.

Không chỉ vậy, việc đặt lệnh gọi hành động chính trước tiên sẽ phá vỡ kiểu quét tự nhiên của người dùng. Người dùng phải quét tất cả các nút và sau đó đảo ngược hướng quét của họ để quay lại lệnh kêu gọi hành động chính.

cta_button-scanning

Thay vì buộc người dùng quét lại các nút, hãy thực hiện lệnh gọi hành động chính ở cuối để người dùng có thể thực hiện bằng cách quét các nút trong một luồng từ trên xuống dưới. Điều này làm hiệu quả để người dùng kiểm tra từng nút trước khi quyết định. Vị trí dưới cùng cũng là dễ dàng nhất để ngón tay chạm vào (trên smartphone) và vì thế tăng hiệu quả hơn nữa.

2. Phân biệt các nút (Button) và văn bản (Text) thông thường với một khung bao quanh (Outline)

Một lỗi khác được thực hiện trên các ứng dụng là chỉ sử dụng văn bản để thể hiện một nút. Nhà thiết kế sử dụng các nút bằng văn bản để hiển thị hành động có mức độ ưu tiên thấp. Nhưng đây là một lựa chọn kém cho lời kêu gọi hành động vì văn bản trong không giống một nút (button). Điều này có thể khiến người dùng bỏ qua những hành động đó và chỉ nhìn thấy hành động chính.

cta_button-shape

Không chỉ các nút trông giống như văn bản khó nhận biết hơn, mà chúng còn là các mục tiêu nhỏ hơn làm cho khó chạm hơn. Để làm cho các nút ưu tiên thấp của bạn dễ dàng chạm và nhận biết hơn, hãy đặt nhãn văn bản bên trong đường viền của nút và không có màu nền. Bây giờ, các nút xuất hiện dưới dạng các nút và không cạnh tranh với lời kêu gọi hành động chính.

3. Thêm màu vào các hành động tuần tự

Nút có mức ưu tiên cao nhất là dễ xác định nhất. Nó dẫn người dùng hành động trực tiếp đến mục tiêu của họ. Nếu bạn không chắc chắn về mức độ ưu tiên của nút, hãy xem xét hành động nào giúp người dùng tiến tới mục tiêu của họ và hành động nào hồi quy họ.

cta_button-actions

Trong ví dụ này, nút "checkout" có mức độ ưu tiên cao nhất vì nó giúp người dùng tiến tới mục tiêu của họ nhanh nhất. Nó nên có mức độ trực quan cao nhất và độ tương phản cao nhất. Nhưng không rõ các hành động nào có mức độ ưu tiên trung bình - nút "xem giỏ hàng - view cart" hay "tiếp tục mua sắm -keep shopping".

Hành động "view cart" có thể đưa người dùng xem các mục họ đã thêm vào giỏ hàng của mình, sau đó dẫn đến thanh toán. Các hành động "keep shopping" hồi quy người dùng quay trở lại các trang sản phẩm cách xa quầy thanh toán.

Dựa trên phân tích này, các lượt xem của giỏ hàng có một mức độ ưu tiên trung bình và việc giữ cho các khu mua sắm có mức độ ưu tiên thấp. Nút "view cart" xứng đáng có trọng lượng trực quan cao hơn và độ tương phản màu cao hơn so với nút "keep shopping".

Bằng cách hiểu mục tiêu của người dùng và kiểm tra cách mỗi hành động người dùng tiến tới mục tiêu đó, bạn có thể thiết lập mức độ ưu tiên của các nút. Bây giờ, bạn đã sẵn sàng làm cho mỗi nút đúng trọng lượng trực quan.

cta_button-blue

Màu sắc là một cách hiệu quả để biểu thị các nút ưu tiên cao vì nó nổi bật so với văn bản màu đen và thu hút sự chú ý của người dùng. Đừng sử dụng cùng màu nền trên các nút cùng màu nền văn bản. Nó làm suy yếu tính trực quan và làm cho nút trở nên khó nhận thấy hơn.

Màu xanh là màu lý tưởng để kêu gọi hành động vì nghiên cứu cho thấy nó được ưa thích nhất bởi tất cả giới tính và nhóm tuổi. Nó cũng là màu phổ biến nhất được sử dụng cho các liên kết trang, làm cho nó trở nên quen thuộc hơn với người dùng.

Nghiên cứu cũng cho thấy người dùng cảm thấy tin tưởng, bảo mật và đáng tin cậy khi nhìn thấy màu xanh. Người dùng có nhiều khả năng nhấn vào các nút gợi lên những cảm giác này.

cta_button-competing

Ngoài ra, đừng sử dụng cùng một màu chính xác cho hai nút khác nhau hoặc người dùng không biết cái nào có mức ưu tiên cao hơn. Và đừng sử dụng các màu khác nhau cho cùng một loại kêu gọi hành động, điều này làm cho người dùng nhầm lẫn và khiến họ tự hỏi màu sắc có ý nghĩa gì. Nó sẽ cung cấp cho mỗi nút có cùng trọng lượng hình ảnh và tín hiệu ưu tiên như nhau.

Thay vào đó, sử dụng màu riêng biệt với cùng thuộc tính "hue" cho cả hai nút, nhưng thay đổi độ bão hòa và độ sáng cho mức ưu tiên trung bình. Điều này làm cho nút ưu tiên trung bình nhẹ hơn về trọng lượng hình ảnh so với nút ưu tiên cao. Bây giờ, cả hai nút không cạnh tranh và có một nút trực quan rõ ràng hơn.

Để tăng cường độ tương phản nhiều hơn, bạn có thể đảo ngược cực tính hiển thị. Sử dụng văn bản sáng trên nền tối cho nút chính và tối trên sáng cho nút phụ. Điều này mang lại cho hành động ưu tiên cao một nhãn văn bản sáng hơn và độ tương phản cao nhất có thể.

4. Thay đổi trọng lượng phông chữ trên nhãn (label) của nút

Áp dụng các kỹ thuật bên trên là đủ để phân biệt mức độ ưu tiên, nhưng có nhiều điều hơn nữa bạn có thể làm. Càng trực quan, càng làm cho người dùng ít phải cân nhắc nhiều, và tỷ lệ nhấp vào nút sẽ cao hơn.

Sử dụng cùng một độ đậm trên mỗi nhãn văn bản sẽ đặt cùng một mức độ nhấn mạnh vào chúng. Sẽ tốt hơn nếu nhấn mạnh mỗi nhãn văn bản khác nhau dựa trên mức độ ưu tiên. Thay đổi độ đậm của nhãn văn bản sao cho các nút ưu tiên cao nhất là các nút đậm nhất và nút ưu tien thấp ít đậm nhất. Bằng cách này, trọng lượng của nhãn văn bản thậm chí còn biểu thị mức độ ưu tiên khi người dùng đọc chúng.

Ví dụ cho bạn thấy làm thế nào nhãn của nút "checkout" đậm hơn và sáng hơn so với phần còn lại. Nhãn nút "view cart" là semibold và nhãn "keep shopping" là trung bình. Do đó, các nhãn văn bản phản ánh trọng lượng hình ảnh của từng hành động. Văn bản "3 items" không được in đậm bởi vì đây là thông tin bổ sung không thể hiện hành động được thực hiện.

5. Đặt biểu tượng trên nút có mức độ ưu tiên cao nhất

Kỹ thuật cuối cùng là đặt một biểu tượng sẽ làm cho các nút của bạn có thể truy cập được đối với người dùng mù màu. Người dùng mù màu không thấy sự khác biệt giữa trọng lượng hình ảnh của các nút. Họ cần một cái gì đó nhiều hơn màu sắc để phục vụ như một gợi ý trực quan.

cta_button-accessible

Đặt một biểu tượng trên nút ưu tiên cao sẽ thêm phần nhấn mạnh để đặt riêng biệt. Nếu bạn đã loại bỏ màu nút và nhãn, người dùng mù màu vẫn có thể nhận ra nút thanh toán.

Biểu tượng cũng làm cho nút dẫn hướng ánh mắt người dùng và đảm bảo nó sẽ thu hút sự chú ý nhất. Nghiên cứu theo dõi mắt đã chỉ ra rằng các yếu tố thị giác nhận được nhiều chú ý của mắt hơn văn bản.

Các nút của bạn có trực quan không?

Các nút của bạn không trực quan nếu người dùng phải mất nhiều thời gian để chọn một hành động trên màn hình hoặc nếu bạn đang có tỷ lệ chạm thấp. Sử dụng các kỹ thuật UX này để làm sắc nét các nút kêu gọi hành động của bạn. Bạn sẽ thấy một sự khác biệt trong tỷ lệ chuyển đổi khi cải tiến các nút.

cta_button-intuitive

Back

Cảm ơn bạn đã đọc bài viết!

Springmeweb thiết kế trang web giúp bạn xây dựng thương hiệu cao cấp và được khách hàng yêu thích.

VIEW ALL WEBSITE

Cảm ơn bạn đã đăng ký tài khoản Springmeweb!

Vui lòng kiểm tra Email, click vào Link để kích hoạt tài khoản.

ABOUT SPRINGMEWEB

CONTACT

  • 038.982.1238
  • F6/24/3Q QUÁCH ĐIÊU, TP HỒ CHÍ MINH