Jul 09, 2019

Tại sao tạo nút CANCEL không nên có màu ?!

Nút Cancel dùng để làm gì?

Khi dùng các phần mềm trên máy tính hoặc điện thoại bạn sẽ bắt gặp và sử dụng rất nhiều lần nút cancel đúng không ạ? Có bao giờ bạn tự hỏi nút cancel thực sự để làm gì và nó được thiết kế như thế nào để người dùng có thể hiểu và sử dụng nó một cách nhanh, thuận lợi và tránh nhầm lẫn với các nút kêu gọi khác không nhé?

Với BA hoặc UI/UX design thì cần hiểu gì về nguyên tắc cơ bản khi thiết kế nút cancel để giúp sản phẩm có trải nghiệp tuyệt vời hơn.

Nút cancel dùng để loại bỏ màn hình hiện tại của người dùng và đưa họ trở lại màn hình trước đó. Nút cancel là một biện pháp bảo vệ để ngăn chặn những thay đổi không mong muốn đối với hệ thống. Nhưng khi nó được thiết kế trông giống như một nút kêu gọi hành động, thì nút cancel thật khó để nhận ra nhận ra.

Nút Cancel biểu thị cho sự dự phòng an toàn, không phải là lời kêu gọi hành động. Nói cách khác, nút Cancel của bạn sẽ không nên có màu.

Một nút có màu thường là báo hiệu kêu gọi hành động. Nút Cancel không phải là lời kêu gọi hành động vì không có thay đổi nào đối với hệ thống xảy ra sau khi người dùng nhấn nút cancel cả. Tức là nhấn vào nút này sẽ không gây ra sự thay đổi hệ thống.

Bạn không nên nhấn mạnh nút cancel bằng màu sắc, hoặc bạn sẽ tạo cho người dùng ấn tượng đó. Thay vào đó, bạn cần cho họ biết rằng khi ấn vào đây nó sẽ không thực hiện bất kỳ thay đổi nào và là một lối thoát an toàn khỏi hành động.

Tóm lại, nó sẽ đảm bảo cho người dùng sự an toàn khi nhấn vào nó, hệ thống sẽ không bị thay đổi.

A screenshot of a cell phoneDescription automatically generated

Cách thiết kế màu đối với nút cancel

Nút Cancel phải có màu trung tính để biểu thị nút trung tính. Khi người dùng thấy rằng nút Cancel không có màu, họ sẽ nhận ra đó là nút dự phòng an toàn dễ dàng hơn trong việc lựa chọn nó.

Khi mỗi nút trên màn hình có một màu, những nút này sẽ cạnh tranh nhau để được chú ý từ người dùng, điều này sẽ làm cho người dùng mất thời gian suy nghĩ và lựa chọn.

Sự cạnh tranh khiến người dùng suy ngẫm từng hành động lâu hơn. Nút Cancel màu trung tính giúp họ quyết định nhanh hơn bằng cách không cạnh tranh. Người dùng chuẩn bị hành động cũng sẽ không bị phân tâm bởi nút trung lập.

Nút “Cancel” có nhiều tên gọi khác nhau?

Không phải tất cả các nút Cancel đều có nhãn Cancel, nhưng có chức năng giống như một. Ví dụ: “Not Now”, “No Thanks”, “Maybe Later”, or “Skip tùy vào từng ngữ cảnh khác nhau.

Màu sắc trung tính của nút cancel

Càng có nhiều nút trên màn hình, nút Cancel càng cần thiết. Khi tất cả các nút có cùng 1 màu trên 1 màn hình sẽ gây khó khăn cho việc người dùng lựa chọn nút cancel.

Nhưng khi nút Cancel là màu trung tính, nó làm cho các lựa chọn nút trực quan hơn, dễ lựa chọn hơn để tránh bị nhầm lẫn khi sử dụng nút và người dùng cảm thấy thoải mái hơn với tác vụ hiện tại.

Nút CANCEL dùng màu xám vừa đủ

Khi sử dụng màu xám trên một nút, điều cần thiết là làm cho màu xám đủ tối. Mặt khác, nút không rõ ràng và có thể trông giống như ở trạng thái bị vô hiệu hóa.

Để đảm bảo nút của bạn dễ đọc, hãy kiểm tra độ tương phản màu bằng công cụ tỷ lệ tương phản WCAG 2.0, chẳng hạn như đánh giá màu . Công cụ này cho bạn biết nếu màu xám của bạn vượt qua các tiêu chuẩn tiếp cận cho màu văn bản.

Thiết kế nút CANCEL trung lập

Dùng màu trung tính, để phân biệt với các nút kêu gọi hành động khác. Càng nhiều nút thì màu trung tính này phải đủ nổi bật để người dùng nhận diện nhanh hơn và thao tác dễ hơn.

Đối với người lỡ bấm nhầm và cần thoát ra nhanh thì màu xám này giúp họ nhận ra ngay để nhấn vào.
Đối với những người sẵn sàng hành động thì màu xám này giúp họ bỏ qua nó nhanh chóng và tập trung vào các tác vụ khác.

Tóm lại khi thiết kế nút “Cancel” bạn nên sử dụng màu trung tính, dễ nhận biết để tránh sự nhầm lẫn với các nút kêu gọi hành động khác.

Nguồn tham khảo:

https://uxmovement.com/buttons/why-cancel-buttons-should-never-have-a-color/

Biên soạn và tổng hợp nội dung: Nguyễn Trọng Phúc

Click để đọc tiếp

Sự khác nhau giữa Data Analysis và Data Modeling

Chỉ trong vài năm trở lại đây, dữ liệu đã trở thành một yếu tố hàng đầu mà các doanh nghiệp phải quan tâm. Điều này cũng tác động lớn đến kỹ năng làm việc với dữ liệu, Data Analysis và Data Modeling là hai trong số các kỹ năng đó.
Ảnh hưởng từ đại dịch COVID-19 lên trẻ em qua tranh ảnh

Trẻ em là đối tượng chịu ảnh hưởng nặng nề từ đại dịch, theo thống kê từ UNICEF đã có hàng trăm triệu trẻ em phải chịu cảnh đói nghèo, suy dinh dưỡng và không được đến trường. Tất cả sẽ được mô tả qua các con số thống kê trong bộ ảnh này.
10 đầu sách dành cho bạn học DAX và Power Query

DAX và Power Query là hai chủ đề được rất nhiều bạn đọc quan tâm. Trong bài viết lần này, BAC sẻ tổng hợp các quyển sách hay giúp bạn có thể tự học hoặc dùng làm tài liệu tham khảo, ngoài ra, trong phần cuối sẽ có thêm một blog hữu ích khác.
5 quyển sách hay nhất về SQL nên đọc trong năm 2022

SQL là một trong số những ngôn ngữ phổ biến nhất hiện nay, đặc biệt là với công việc dữ liệu. Dù bạn là người mới bắt đầu hay một chuyên gia về dữ liệu, thì 5 đầu sách trong bài viết này chắc chắn không nên bỏ qua trong năm 2022.

Bình luận

Nguyễn Thị Mai Bình

Business Analyst

Với một người ngoại đạo như mình thì những chuyên đề về "kỹ thuật" của BA hết sức quan trọng. Ví dụ như sử dụng các diagram để mô hình hóa requirement, viết User Story/Use case, v...v..

Đến với khóa học Fundamental Business Analysis, mình đã được gặp thầy Lộc, một người người rất nhiệt tình và có tâm. Ngoài việc chia sẻ các kinh nghiệm thực tế trên lớp thì thầy còn dành thời gian ra để tư vấn, hỗ trợ, góp ý CV cho mình. Bên cạnh đó trung tâm và anh Phụng cũng hỗ trợ gửi CV, kết nối học viên tới mạng lưới các công ty đối tác chất lượng, điều này giúp học viên như mình tìm được công việc phù hợp nhất. Cảm ơn BAC.
Xem chi tiết +
Phạm Quế

Business Analyst

Khoá học Product Design của BAC đã cung cấp cho tôi nhiều kiến thức và nền tảng vô cùng hữu ích. Giảng viên giảng dạy rất nhiệt tình, truyền cho chúng tôi ngọn lửa đam mê và nhiệt huyết trong ngành. Đồng thời chia sẻ các kiến thức và kỹ năng cần thiết trong bài giảng một cách dễ hiểu hơn. Số lượng học viên không quá nhiều nên chất lượng giảng giạy vô cùng tốt. Giảng viên sửa bài tập 1-1 nên bài giảng sẽ chuyên sâu hơn.
Xem chi tiết +
Nguyễn Văn Long

Chuyên viên về chế độ kế toán & Giải pháp nghiệp vụ Tài chính kế toán trong ứng dụng CNTT - Tập đoàn Điện lực Việt Nam (EVN)

Tôi đã tham gia khóa Phân tích nghiệp vụ phần mềm cơ bản 3.0 tại BAC. Ở đây, tài liệu đào tạo cung cấp nhiều nội dung bổ ích và trình bày dễ hiểu. Giảng viên rất nhiệt tình, ngoài nội dung giảng dạy theo giáo trình còn chia sẻ nhiều kinh nghiệm thực tiễn, các câu hỏi của học viên đều được giải đáp ngay trên lớp và có minh họa từ các dự án trong thực tế. Sau tất cả, tôi cảm ơn BAC và Thầy giáo Thái Sơn.
Xem chi tiết +