it-swarm-vi.com

Nên "Có, xóa nó" thành màu đỏ hay màu xanh lá cây?

Thiết kế giao diện cho CMS (Hệ thống quản lý nội dung), tôi tình cờ gặp một nghịch lý và tôi hơi bối rối về what để làm và tại sao để làm điều đó ..

Bối cảnh

Trước khi xóa một album, người dùng được yêu cầu xác nhận hành động.

Màu xanh lá cây "Có"

First option

Màu đỏ "Có"

Second option

Tùy chọn nào trực quan hơn cho người dùng?

787
Diéssica

Cả hai cách dường như đặt ra một mô hình dương tính giả. Điều này có thể đơn giản hơn và không phải buộc người dùng dành thời gian có ý nghĩa về sự liên kết màu sắc với nhãn.

Chỉ cần làm cho nút "Xóa" nổi bật hơn. Làm cho nút "Hủy" bớt nổi bật. Liên quan đến việc ghi nhãn trong các nút, không cần đặt nhiều ngữ cảnh vào những gì thực chất là các hành động đơn giản (không/có? Hoặc hủy/xóa) vì điều đó đòi hỏi phải xử lý nhiều hơn về phía người dùng.

enter image description here

Người dùng thường sẽ liên kết một hành động như "Xóa" hoặc "Xóa" thành màu đỏ. Và, như mọi khi, cung cấp một cách để "hủy bỏ" hành động.

1358
jnmnrd

Tôi không chắc bạn chỉ nên nghĩ về màu đỏ và màu xanh lá cây. Màu đỏ thường là liên quan đến nguy hiểm , có khả năng có từ thời trung cổ (cần dẫn nguồn). Nhanh chóng tìm kiếm hình ảnh của Google cho "xóa" mang lại hình ảnh gần như hoàn toàn màu đỏ.

Đối với tôi (và với bootstrap ) màu xanh lá cây biểu thị sự thành công, màu đỏ biểu thị sự nguy hiểm.

Bootstrap buttons

Vì xóa là một hành động nguy hiểm, tôi khuyên bạn nên giữ nút xóa màu đỏ. Bạn có bị hạn chế sử dụng màu xanh lá cây/đỏ? Nếu vậy tôi sẽ khuyên bạn nên sử dụng hình ảnh thứ hai của bạn. Đèn dừng của Hoa Kỳ cho tôi biết rằng màu xanh lá cây có nghĩa là "tiếp tục". Sử dụng lý do này, bạn có thể nói "Không, giữ nút" màu xanh lá cây có nghĩa là "Không, giữ nó và tiếp tục" và màu đỏ "Có, xóa nó" có nghĩa là "Có, xóa nó ngay cả khi nó nguy hiểm." Dù sao đi nữa, tôi sẽ cân nhắc làm cho nút "Không, giữ nó" thành màu xanh vì đây là màu hành động khá chuẩn (ví dụ: đây là màu mặc định của các liên kết không được lọc).

Chỉnh sửa : Tôi nghĩ @ JNMNRD có câu trả lời tốt nhất về điều này. Đây là hình ảnh của @ JNMNRD không có từ. Bạn có thể cho biết nút nào có nghĩa là xóa?

Delete

321
circuitry

Nhìn vào điều này từ một góc độ hơi khác, trong đó có thể bạn có thể xem xét loại bỏ hoàn toàn xác nhận và thay vào đó chuyển sang quy trình "Làm/Hoàn tác".

Phương pháp này thường được sử dụng trên các dịch vụ của Google:

enter image description here

Nó có những ưu điểm mà nó trung lập về mặt văn hóa và hiệu quả hơn cho người dùng (một lần nhấp thay vì hai lần để xóa).

Nhược điểm là nó là liên kết tạm thời và bị ghi đè khi thực hiện một hành động khác - ví dụ như khi báo cáo một email khác là thư rác. Nó cũng bị loại bỏ khi bạn đăng xuất, mất tập trung hoặc làm mới.

Để giúp tránh những nhược điểm này, bạn có thể xem xét bao gồm một số loại chức năng thùng rác trên trang web giống như SharePoint.

221
Graham Wager

Với tất cả sự tôn trọng, tôi nghĩ rằng mọi câu trả lời cho đến nay đã bỏ lỡ phần nào.

Trước hết, dựa trên phần Ngữ cảnh trong câu hỏi của bạn ...

Bối cảnh

Trước khi xóa một album, người dùng được yêu cầu xác nhận hành động.

... chúng ta có thể suy luận rằng đây không phải là một lỗi hoặc phương thức, nhưng đúng hơn đó là một xác nhận phương thức, ngụ ý một cảnh báo hoặc thận trọng màu như màu vàng , không màu xanh lá cây hoặc đỏ , như thành công lỗi màu sắc tương ứng. Và vì nó một phương thức xác nhận, từ ngữ có lẽ nên thay đổi thành một cái gì đó như:

Vui lòng xác nhận việc xóa album này:

Để biết thêm khả năng sử dụng của phương thức xác nhận, bạn có thể embolden nút Xác nhận để làm cho nó nổi bật hơn một chút. Và đối với những người bị mù màu hoặc đọc các vấn đề , tôi thường đặt biểu tượng khớp với những gì đang được xác nhận. Trong trường hợp này, một thùng rác thùng rác có vẻ phù hợp.

Khi bạn cộng tất cả lại với nhau, đây là một ví dụ về những gì bạn nhận được:

confirmation modal


Cập nhật dựa trên nhận xét về từ ngữ của các nút ...

Tôi đã suy nghĩ về từ ngữ của điều này một thời gian. Các ý kiến ​​nghiêng về việc sử dụng Xóa thay vì Xác nhận , nhưng tôi nghĩ có gì đó tốt hơn. Vì biểu tượng là một thùng rác thùng rác và chúng ta đang nói về loại bỏ một album , tôi nghĩ từ ngữ phải phù hợp với rằng thay thế.

Vì vậy, tôi nghĩ về nó và nghĩ ra Giữ Thay vào đó, thùng rác . Cả hai đều trùng khớp với câu hỏi liệu người ta nên xóa album hay hủy hành động, chưa kể màu sắc vẫn hoạt động đối với người dùng mù màu, Keep được tô đậm làm rõ hành động mặc định là gì và cùng nhau, các từ tạo ra 100 % rõ ràng về hành động mà một người đang xác nhận.

updated confirmation modal

132
Code Maverick

Người dùng có nhiều khả năng suy nghĩ hai lần trước khi nhấp vào thứ gì đó màu đỏ. Mà một trong hai tùy chọn bạn muốn họ nghĩ hai lần trước khi nhấp?
[.___.] Một trong hai lựa chọn có khả năng kích hoạt nhiều sự kiện không thể đảo ngược hơn?

Nguồn: http://en.wikipedia.org/wiki/Red#Warning_and_danger

43
Rolf

Tôi đã nghiên cứu một chút sau khi đọc qua các câu hỏi của bạn và các câu trả lời hiện tại, và thấy rằng có một số bằng chứng cho thấy rằng việc ưu tiên màu đỏ ở người, giống như ở các loài linh trưởng khác, phụ thuộc vào bối cảnh là thân thiện hay thù địch ( Maier et al., 2009 và các nghiên cứu tiếp theo).

Như được tóm tắt trong bản tóm tắt (nhấn mạnh của tôi):

Ba thí nghiệm đã được tiến hành dựa trên sở thích màu sắc bằng cách sử dụng mô hình lựa chọn tự phát với những người tham gia trẻ sơ sinh.

Thí nghiệm 1 đã chứng minh rằng những người tham gia thích màu đỏ hơn màu xanh lá cây trong môi trường phòng thí nghiệm thân thiện.

Thử nghiệm 2 đã chứng minh rằng sở thích của người tham gia đối với màu đỏ thay đổi theo bối cảnh màu được thể hiện: Màu đỏ được ưa thích trong bối cảnh hiếu khách (theo khuôn mặt vui vẻ), nhưng không phải trong bối cảnh thù địch ( sau một khuôn mặt tức giận). Đã tìm thấy mẫu đối diện cho màu kiểm soát màu xanh lá cây.

Thí nghiệm 3 đã sử dụng thao tác bối cảnh tương tự, nhưng màu kiểm soát thứ hai, màu xám, đã được thêm vào để kiểm tra rõ ràng liệu bối cảnh có ảnh hưởng đến sở thích chỉ dành cho màu đỏ hay không. Theo dự đoán, đã đưa ra lựa chọn thay thế thứ hai, ưu tiên phụ thuộc vào ngữ cảnh cho màu đỏ, nhưng không phải màu xanh lá cây hoặc màu xám, đã được tìm thấy. Những kết quả này đại diện cho bằng chứng đầu tiên về sự điều tiết bối cảnh trong tài liệu ưu tiên màu sắc.

(Bản ghi cơ sở dữ liệu PsycINFO (c) APA 2012, mọi quyền được bảo lưu)

Người ta tự hỏi liệu bối cảnh của hành động này - xóa một cái gì đó - có đủ để đẩy nó vào lãnh thổ 'thù địch' hay không. Trực giác của tôi là nếu việc xóa là vô tình (người dùng nhấn 'xóa', nhận ra họ không có ý định làm điều đó và được trao cơ hội cuối cùng để cứu công việc của họ), và có thể vẫn như vậy ngay cả khi điều đó xảy ra là cố ý (người dùng bực bội khi phải xóa một rào cản khác trong cách thực hiện mục tiêu?).

28
Jessica Yang

Tiêu chuẩn hiện có trong phần còn lại của ứng dụng của bạn là gì? Bạn có sử dụng các nút màu đỏ để cho biết "Tôi muốn hoàn thành hành động này" và các nút màu xanh lá cây có nghĩa là "hủy hành động này" không? Có còn đường nào khác không?

Nếu đó là bất cứ thứ gì giống như, tốt, hầu như mọi phần mềm tôi từng thấy, thì tiền của tôi sẽ có màu xanh lá cây để "tiếp tục và làm điều đó" và màu đỏ cho "hủy bỏ! Hủy bỏ!".

Mặc dù "màu đỏ" cho "cảnh báo" là một điểm công bằng, vị trí của nó là trước đạt đến giai đoạn này - làm cho nút "xóa" ban đầu thành màu đỏ. Nhưng bạn đang hỏi ở đây về giai đoạn xác nhận, nên luôn luôn xử lý "tiếp tục" và "hủy" một cách nhất quán, bất kể hoạt động được tiếp tục hay hủy bỏ có thể là gì. Nếu màu đỏ thường là "hủy", nhưng đôi khi "tiếp tục", thì bạn chỉ đang mời người dùng nhầm lẫn.

18
Dave Sherohman

Bạn có thể chọn đặt một cuộc gọi chính và phụ để hành động.

Ví dụ từ LinkedIn:

example

Điều này cung cấp một hành động xác nhận đơn và rõ ràng mà người dùng có thể thực hiện mà không làm gián đoạn mối lo ngại về khả năng truy cập, sai lệch văn hóa và nhầm lẫn quyết định có thể đến từ việc chia tách các tùy chọn bằng cách màu một mình.

Ngoài ra, làm thế nào nó được viết trong ví dụ trên là rất rõ ràng. Làm thế nào câu hỏi có thể được viết lại không để lại sự mơ hồ:

Bạn có chắc chắn muốn xóa album này không? CÓ/Hủy

Cũng nghĩ về lưu lượng người dùng cho việc này. Đó không phải là cách thực hành tốt để cung cấp một hành động tuyệt đối mà không an toàn.

cung cấp một hoàn tác

Nguồn: Một số lựa chọn thay thế cho cụm từ "Bạn có chắc chắn muốn XYZ" trong hộp thoại xác nhận không?

Đây cũng là một cách khác để cung cấp khả năng xóa:

example

Người dùng có thể mắc lỗi trên các cửa sổ xác nhận. Nếu người dùng chuẩn bị xóa một cái gì đó quan trọng mà họ sẽ không bao giờ lấy lại được, thì điều quan trọng là bạn phải chắc chắn rằng người dùng hoàn toàn chắc chắn trước khi họ tiếp tục. Thay vì cung cấp cho người dùng một nút xác nhận mà họ có thể bấm nhầm, hãy cung cấp cho họ một trường văn bản và yêu cầu họ gõ Word xóa xóa để xác nhận. Khi người dùng gõ xóa xóa xóa trong trường văn bản, không có nghi ngờ rằng họ muốn xóa. Không có tình cờ nhấn nút xóa. Không có gì phải hối tiếc khi người dùng xóa, bởi vì trường văn bản xác nhận làm cho họ chắc chắn về những gì họ sẽ làm trước khi họ làm điều đó.

Nguồn: http://uxmovement.com/buttons/how-to-make-sure-users-dont-accidentally-delete/

17
Pdxd

Giải pháp của tôi để xóa mọi thứ là một nút có biểu tượng thùng rác mở ra một cửa sổ bật lên nhỏ. Tôi nghĩ rằng đây là một giải pháp tốt vì:

  • không có hộp thoại làm phiền, mọi người đều ghét hộp thoại xác nhận!
  • xác nhận là cần thiết. không có nhấp chuột chính thức
  • người dùng chỉ phải đọc hai từ, không có câu hỏi khó chị
  • màu đỏ biểu thị rằng nó thực sự bị xóa, bạn có thể xác định nó bằng cách thêm "không thể đảo ngược" để xóa
  • tối thiểu chuyển động của chuột và mắt
  • lãng phí không gian tối thiểu
  • không có chuyển đổi ngữ cảnh

screenshot## Heading ##

13
daniel

Màu xanh lá cây thường được sử dụng trong các giao diện và địa điểm để biểu thị "đi", "tiếp tục" hoặc "có". Trong trường hợp của bạn, đó chính xác là những gì người dùng đang cố gắng làm. Họ đang tiếp tục với hành động trong quá khứ của họ (đó là nhấn nút xóa). Màu đỏ được xem là điểm dừng, như "dừng lại, tôi đã thay đổi ý định!"

Trong trường hợp của bạn, tôi sẽ sử dụng những gì người dùng đã sử dụng: màu xanh lá cây để tiếp tục và màu đỏ để hủy bỏ.

10
Mike

Tại sao chúng phải có hai màu khác nhau? Dường như điều này đang khiến mọi thứ trở nên phức tạp hơn do sự khác biệt về văn hóa và các vấn đề khác đã được đưa ra (mặc dù, tôi không chắc chắn khán giả dành cho ứng dụng hoặc trang web này là gì. không liên quan nếu nó là một cơ sở người dùng rất cụ thể cho một ứng dụng).

Như một người khác đã đề cập, tại sao không làm cho nút hành động chính nổi bật hơn và nút Hủy ít nổi bật hơn? Ví dụ, trong iTunes, khi bạn xóa một tệp nhạc, cửa sổ Nhắc có nút màu xám cho nút Hủy và nút hành động chính có màu xanh lam. Ngoài màu xanh lam, màu sắc còn rung động để gọi sự chú ý đến nó.

Ngoài ra, trong ví dụ ban đầu của bạn, các nhãn nút có vẻ dài dòng. Bạn đã hỏi họ "Bạn có thực sự muốn xóa album này không?" Tại sao không gắn nhãn các nút đơn giản là "Không" và "Có" hoặc "Hủy" và "Xóa"?

9
Dmacatude

Màu xanh lá cây phải luôn luôn tích cực, liên quan đến tùy chọn "Có, đi trước", vì vậy nó phải là màu xanh lá cây. Thực tế là bạn đang xóa một cái gì đó thay vì tạo ra nó là không quan trọng.

Màu đỏ được sử dụng để "Không, tôi đã thay đổi ý định" hoặc "Không, tôi không muốn bạn làm điều đó", bất kể "đó" là gì.

7
Dave Murray

Các nút được sử dụng để gửi/gửi thông tin hoặc thực hiện hành động, không để Nhắc không hành động. Nút duy nhất phải là một nút tiến hành trong dòng chảy. Bất kỳ hành động khác nên được đại diện bởi một liên kết. Trong bối cảnh này, tôi sẽ ủng hộ việc sử dụng màu nút không được sử dụng ở bất kỳ nơi nào khác trên trang web hoặc chỉ dành riêng cho các hành động nghiêm trọng nhất. Tôi cho rằng đây sẽ là màu đỏ. Vấn đề là buộc người dùng thoát khỏi trạng thái tinh thần thụ động khi nhấp vào các nút màu X ở vị trí Y (màu xanh lá cây, dưới cùng bên phải) và để họ hỏi rõ ràng "điều này sẽ làm gì?"

7
Matt Langan

Đừng sử dụng bất kỳ màu nào cho một hành động như vậy. Cả hai hành động đều có tầm quan trọng như nhau. Có thể người dùng đã vô tình nhấp vào 'Xóa' hoặc người dùng thực sự muốn 'Xóa' Album.

Màu sắc là một sự phân tâm không cần thiết trong một kịch bản như vậy và không giúp ích gì cho bối cảnh.

Cho phép văn bản trên nhãn nút để xác nhận các hành động: "Hủy" và "Xóa Album"

4
Sumi

@JNMNRD có giải pháp tốt nhất.

Thông thường, hành động bạn muốn người dùng thực hiện nên được đặt ở bên phải và vì đây là thông báo xác nhận, sau đó hành động xóa nên được đặt ở bên phải.

Ngoài ra, bằng cách đưa ra hai màu cho các hành động khác nhau, bạn sẽ tạo cho chúng một hệ thống phân cấp giống nhau. Trong khi đó, nếu người dùng đã thực hiện một hành động để xóa và đây chỉ là một xác nhận, thì các hành động không nên cạnh tranh. Điều này chỉ làm việc cho mục đích xác nhận.

Đó là lý do tại sao để tùy chọn hủy trung tính là điều có thể sử dụng nhất vì người dùng của bạn sẽ đọc hướng dẫn ngay lập tức tập trung vào nút xóa, tuy nhiên, nếu họ hối hận, họ sẽ có cơ hội hủy.

1
Miguel Fernandez

Trên thực tế tôi rất thích trải nghiệm người dùng Github trong khi xóa một dự án, màu sắc của kiểu chữ cùng với đường viền được thay đổi thành màu đỏ cho thấy rõ ràng có điều gì đó nguy hiểm đang xảy ra.

enter image description here

Github hiển thị cửa sổ bật lên để đảm bảo rằng người dùng thực sự muốn xóa dự án hoặc kho lưu trữ.

enter image description here

0
Pir Abdul