Trong Copywriting, nút lệnh thường được gọi là CTA (call to action). Chúng đặt ở những vị trí quan trọng của các trang bán hàng – nơi tạo ra sự chuyển đổi, biến khách hàng tiềm năng trở thành người mua hàng. Nhưng trong UX Writing, nút lệnh có nhiều tên gọi khác nhau. Chúng có mặt ở khắp mọi nơi trên giao diện người dùng.
Chúng không chỉ tạo ra sự chuyển đổi, mà còn giúp người dùng nhận biết được thao tác họ cần làm, hành động cần thực hiện để đạt được mục đích của mình. Họ tương tác bằng cách nhấn, chạm hay nói để được đưa đến bước tiếp theo.
Nếu xem các loại thông báo trên giao diện là cách chúng ta đối thoại với người dùng, thì nút lệnh chính là phương tiện để người dùng “nói chuyện” với chúng ta.
Chúng kích hoạt cuộc trò chuyện giữa người dùng và trải nghiệm. Khi người dùng đọc các quy định điều kiện, điều khoản, họ nhấn “có, tôi đồng ý”. Khi họ quên mật khẩu, họ nhấn “quên mật khẩu”, hệ thống hướng dẫn cách lấy lại mật khẩu.
Dù bất kỳ dạng nội dung nào, nút lệnh đều đóng vai trò vô cùng quan trọng. Bài viết hôm nay, chúng ta sẽ cùng tìm hiểu các loại nút lệnh và cách viết chúng.
Các loại nút lệnh
Không phải nút lệnh nào cũng có chữ đi cùng, một số nút lệnh sẽ dùng các biểu tượng thay thế ví dụ nút “lưu” trên Microsoft word. Việc sử dụng các biểu tượng giúp giao diện trông gọn gàng, bớt đi số từ cần hiển thị trên màn hình. Một số loại nút lệnh khác bao gồm chữ và biểu tượng nhằm mục đích nhấn mạnh một thao tác quan trọng trên màn hình.
Dưới đây là một số nút lệnh thường xuyên xuất hiện trên các ứng dụng. Khi làm việc, bạn sẽ dùng tiếng anh để gọi tên các nút lệnh nên mình sẽ giữ nguyên tên tiếng anh của chúng. Tuy nhiên, tùy theo từng công ty, mỗi nơi có thể sử dụng tên gọi khác nhau. Các tên gọi của nút lệnh trong bài viết được tham khảo từ Material Design phiên bản 3.0 của Google.
1. Elevated button (tên gọi khác Primary button): Dạng nút lệnh bao gồm chữ, icon và phần phủ bao quanh chữ theo đường viền.
2. Filled button: Dạng nút lệnh bao gồm chữ và phần màu đậm phủ bao quanh chữ theo đường viền.
3. Filled tonal button: Dạng nút lệnh bao gồm chữ, phần màu nhạt phủ bao quanh chữ theo đường viền.
4. Outlined button (tên gọi khác Secondary button): Dạng nút lệnh gồm chữ và đường viền bao quanh.
5. Text button: Dạng nút lệnh chỉ có chữ viết.
6. Icon button: Dạng nút lệnh chỉ có icon.
7. Segmented button: Tập hợp hai đến ba nút lệnh tạo thành một dải.
8. Floating action button (FAB): Dạng nút lệnh gồm icon và phần bao quanh icon dựa theo hình tròn hoặc hình vuông.
9. Extended FAB: Dạng nút lệnh giống như FAB nhưng lớn hơn, có thêm chữ viết.
Ngoài ra còn có Radio button – dạng nút lệnh cho phép người dùng lựa chọn giữa các loại thông tin, như hình dưới:
Tuy nhiên trong bài viết này, mình sẽ tập trung vào 9 loại nút lệnh được nhắc đến ở trên. Bây giờ, chúng ta sẽ cùng tìm hiểu cách sử dụng chúng.
Phân cấp ưu tiên dựa trên màu sắc
Màu sắc càng đậm sẽ thu hút sự chú ý càng cao. Vì vậy, một số nhóm nút lệnh sẽ được phân cấp mức độ ưu tiên dựa trên màu sắc, cụ thể như trong hình ảnh ở trên:
-
Màu xanh đậm: Mức độ ưu tiên cao, dành cho các nút lệnh quan trọng, cần hình ảnh bắt mắt thu hút người dùng.
-
Màu xanh nhạt: Mức độ ưu tiên trung bình, dành cho các nút lệnh có mức quan trọng vừa phải.
-
Màu trắng: Mức độ ưu tiên thấp, dành cho nút lệnh có chứa thông tin ở cấp độ thấp.
Một lưu ý nhỏ, phân cấp dựa trên màu sắc chỉ là một yếu tố giúp xác định mức độ ưu tiên của nút lệnh. Tùy thuộc vào bố cục và vị trí hiển thị, các nút lệnh có sự ưu tiên khác nhau.
Cách sử dụng
Các nút lệnh trên sẽ được chia thành 3 nhóm. Mỗi loại nút lệnh được phân cấp mức độ ưu tiên dựa trên màu sắc, bố cục, vị trí hiển thị.
Nhóm nút lệnh xếp ở mức ưu tiên cao nhất – Dành cho hành động chính, quan trọng nhất hoặc phổ biến nhất trên màn hình: Filled button, Extend FAB, FAB.
Nhóm nút lệnh xếp ở mức ưu tiên trung bình – Dành cho hành động ít quan trọng hơn, không gây sự chú ý, giúp người dùng tập trung vào những phần quan trọng hơn: Filled tonal button, Elevated button, Outline button.
Nhóm nút lệnh xếp ở mức ưu tiên thấp – Dành cho các hành động bổ sung hoặc cho người dùng lựa chọn với mức độ nổi bật thấp nhất: Text button, Icon button, Segmented button.
Chúng ta có thể sắp xếp nhiều nút lệnh trên cùng một giao diện. Tuy nhiên, mỗi màn hình chỉ sử dụng duy nhất một nút lệnh ở mức độ quan trọng. Khi sắp xếp các nút lệnh, chúng ta cần thể hiện rõ, những nút lệnh khác ít quan trọng hơn. Điều này giúp thu hút sự chú ý của người dùng, họ dễ dàng thực hiện các hành động họ đang mong muốn một cách nhanh chóng.
Cách viết nội dung UX trên một nút lệnh
Nút lệnh mang đến hiệu quả tốt nhất khi chúng dễ nhận biết, đưa ra một hành động cụ thể và chỉ nên dài từ một đến hai từ.
Sử dụng các từ mang nghĩa chung chung, mơ hồ, sẽ khiến người dùng không biết hành động họ cần thực hiện cụ thể trong bối cảnh là gì.
Trong một vài trường hợp, nội dung của nút lệnh nên nhất quán với các từ trong tiêu đề. Ví dụ một người cần tạo tài khoản, họ bắt gặp tiêu đề “tạo tài khoản”. Nút lệnh gắn nội dung “tạo tài khoản” và cho phép người dùng thực hiện hành động đó.
Hai cụm từ này đi kèm với nhau trong một màn hình, thể hiện rõ ràng nội dung và hành động người dùng cần thực hiện. Người dùng sẽ thực hiện một hành động cụ thể được đặt ra ở phần tiêu đề.
Sử dụng một động từ khác có thể gây mâu thuẫn và khiến người dùng bối rối.
Điều quan trọng, bạn nên xác định bối cảnh và mục đích của thông điệp cần truyền tải trước khi bắt tay vào viết; đảm bảo nội dung của nút lệnh phù hợp với bối cảnh và thông điệp.
Chúng ta sẽ cùng tìm hiểu kỹ hơn về chức năng của từng nút lệnh và cách sử dụng chúng.
Nhóm nút lệnh phổ biến
1. Elevated button
Elevated button: Dạng nút lệnh bao gồm chữ, icon và phần phủ bao quanh chữ theo đường viền. Nút lệnh sử dụng tông màu có hiệu ứng đổ bóng.
Cách sử dụng: Sử dụng chúng khi cần làm cho nút lệnh nổi bật, tách biệt khỏi nền để trực quan hơn.
2. Filled button
Filled button: Dạng nút lệnh bao gồm chữ và phần màu đậm phủ bao quanh chữ theo đường viền. Chúng là dạng nổi bật nhất và tác động trực quan nhất, xếp sau FAB.
Chức năng: Sử dụng cho các hành động quan trọng, hoặc thể hiện bước cuối cùng để hoàn thành một quy trình.
3. Filled tonal buttons
Filled tonal button: Dạng nút lệnh bao gồm chữ, phần màu nhạt phủ bao quanh chữ theo đường viền.
Chức năng: Sử dụng khi cần nút lệnh thể hiện hành động có độ ưu tiên ở mức trung bình, mức độ nhấn mạnh cao hơn Outline buttons.
4. Outlined buttons
Outlined buttons: Dạng nút lệnh gồm chữ và đường viền bao quanh.
Chức năng: Sử dụng khi cần nút lệnh thể hiện hành động có mức độ ưu tiên trung bình. Chúng chứa các hành động quan trọng nhưng không phải là hành động chính trên một màn hình.
Khi chúng đi cùng với Filled buttons, nhằm mục đích chỉ ra một hành động phụ, thay thế hành động chính.
5. Text buttons
Text button: Dạng nút lệnh chỉ có chữ viết, không có đường viền màu sắc bao quanh.
Chức năng: Sử dụng khi cần nút lệnh thể hiện hành động có mức độ ưu tiên ở cấp thấp nhất,
Cách sử dụng: Thường sử dụng khi đưa ra nhiều hành động cùng lúc (hình dưới), hoặc ở những nơi không làm phân tán các nội dung lân cận.
Cách sử dụng nhóm nút lệnh phổ biến
-
Sử dụng khi cần yêu cầu một hành động cụ thể cho người dùng thực hiện trên một màn hình.
-
Tùy thuộc mức độ quan trọng của hành động, lựa chọn các loại nút lệnh khác nhau.
-
Không nên lựa chọn quá nhiều nút lệnh trên một giao diện. Chúng sẽ làm người dùng bối rối và mất tập trung khi cần thực hiện hành động.
6. Icon button
Icon button là dạng nút lệnh chỉ chứa biểu tượng. Nút lệnh này tạo nhiều khoảng trống trên giao diện, giúp thiết kế của bạn trông đơn giản, gọn gàng.
Chức năng: Cho phép người dùng lựa chọn hành động cần thực hiện chỉ bằng một lần nhấn.
Ví dụ: Khi bật Messenger trên Facebook, bạn sẽ thấy các icon đại diện cho các hành động khác nhau.
Lưu ý:
-
Các nút biểu tượng thường xếp cùng nhau theo hệ thống
-
Hãy lựa chọn các biểu tượng có ý nghĩa rõ ràng.
-
Khi người dùng di chuột vào biểu tượng, có thể hiển thị thêm một nội dung mô tả hành động của nút lệnh.
7. Segment buttons
Segment buttons: Các nút lệnh được xếp theo từng mục đoạn giúp người dùng dễ dàng thay đổi các tùy chọn, chuyển đổi chế độ xem hoặc sắp xếp các thành phần (elements).
8. Floating action buttons (FAB)
Chức năng FAB: Chỉ sử dụng cho hành động quan trọng nhất trên màn hình.
Cách hiển thị: FAB sẽ xuất hiện trước tất cả các nội dung khác trên giao diện. Người dùng có thể nhận ra ngay nhờ hình tròn và biểu tượng icon ở chính giữa.
Ví dụ: Khi bạn mở Google Form, bạn sẽ thấy nút lệnh này ở ngay góc phải màn hình.
Lưu ý:
-
FAB có thể chỉ chứa biểu tượng, không đi cùng chữ viết. Vì vậy, bạn cần chọn biểu tượng rõ nghĩa, người dùng nhận biết được hành động họ cần thực hiện khi nhìn thấy biểu tượng.
-
Không nên dùng nhiều nút lệnh FAB trên cùng một giao diện. FAB chỉ sử dụng đại diện cho một hành động quan trọng, người dùng dễ dàng tìm thấy và thực hiện thao tác nhanh chóng.
9. Extended FABs
Extended FABs là nút lệnh nổi bật nhất trong tất cả các nút. Khi một biểu tượng quá mơ hồ, không thể hiện rõ hành động bạn cần người dùng thực hiện, bạn nên sử dụng nút lệnh này.
Chức năng Extended FABs: sử dụng cho hành động quan trọng nhất màn hình, tương tự như nút lệnh FAB ở trên. Tuy nhiên, khác với FAB, nút lệnh này bao gồm chữ viết và biểu tượng (có thể sử dụng hoặc không biểu tượng tùy theo bối cảnh).
Cách hiển thị: tương tự như nút lệnh FABs.
Ví dụ: Khi bạn mở email, bạn sẽ thấy nút lệnh này ở góc phải màn hình.
Như vậy, chúng ta đã cùng nhau điểm qua các loại nút lệnh phổ biến trên giao diện người dùng và cách sử dụng chúng. Đây là một bài khá dài nhưng sẽ vô cùng hữu ích với các bạn UX Writers và Designers.
Việc nhận biết, phân biệt được các loại nút lệnh sẽ giúp các bạn thiết kế ngôn ngữ, hình ảnh có hệ thống và có sự nhất quán.
Cảm ơn các bạn đã đọc bài viết hôm nay.
Share
