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

10 cái bẫy cần lưu ý để đạt điểm cao trong các kỳ thi IIBA (Phần 2)

Một trong những bước quan trọng của việc chuẩn bị cho kỳ thi IIBA đó là lưu ý những điều có thể làm giảm điểm số của bạn. Ngoài những cái bẫy trong đề thi các yếu tố như tâm lý, quản lý thời gian,... cũng ảnh hưởng rất nhiều.
10 cái bẫy cần lưu ý để đạt điểm cao trong các kỳ thi IIBA (Phần 1)

Các kỳ thi của IIBA được xem là tiêu chuẩn trong ngành phân tích kinh doanh. Các nhà phân tích kinh doanh ở mọi cấp độ có thể tìm thấy những chứng chỉ phù hợp với trình độ của mình. Đây là cách để bạn đạt được điểm cao trong kỳ thi.
Datastage là gì? Những điều cần biết về Data Stage

Bài viết này chúng ta sẽ thảo luận về kiến trúc của DataStage, tại sao việc tìm hiểu DataStage lại quan trọng như vậy. DataStage là một công cụ ETL không thể thay thế sử dụng trình bày đồ họa để xử lý tích hợp dữ liệu và hơn thế nữa.
Tìm hiểu về Hyperion cho người mới bắt đầu

Hyperion là gì? Điều gì làm cho Oracle Hyperion trở thành một công nghệ độc đáo? Các tính năng chính của nó là gì? Những sản phẩm nào có sẵn trong bộ Oracle Hyperion và rất nhiều câu hỏi khác sẽ được giải đáp chi tiết trong bài viết này.

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 +