Làm cách nào để chuyển đổi màu nút trong javascript?

Eduard Kuric là Trưởng phòng Nghiên cứu UX và là Người sáng lập UXtweak. Anh ấy có kinh nghiệm cá nhân gần gũi với cả thiết kế và sử dụng nghiên cứu UX … Thông tin thêm về Eduard ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

• Các mẫu thiết kế giao diện Đào tạo UX

• Quảng cáo trên tạp chí Smashing

• Giao diện người dùng SmashingConf 2023

• Các mẫu thiết kế giao diện thông minh, khóa học 9h-video

• Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern

Vấn đề làm thế nào để thiết kế một nút chuyển đổi hiệu quả, hiển thị rõ ràng tùy chọn đã chọn là một câu hỏi mở dài hạn của các nhà thiết kế UI/UX. Trong phần thứ hai này, Eduard Kuric giải thích một danh sách phức tạp các dấu hiệu trực quan được sử dụng bởi các nút chuyển đổi để cho biết tùy chọn nào đang hoạt động

Trong bài viết đầu tiên của chuyên mục hai phần này, chúng tôi đã đề cập đến một vấn đề quan trọng chưa được giải quyết trong thiết kế giao diện người dùng liên quan đến các nút chuyển đổi. Nhận biết tùy chọn nào đang hoạt động không dễ dàng. Có nhiều loại visual cue để lựa chọn. kiểu phông chữ, màu sắc và đường viền, chỉ để nêu tên một số. Để đánh giá tín hiệu trực quan nào giao tiếp hiệu quả với tùy chọn được bật, chúng tôi đã tiến hành nghiên cứu trường hợp kỹ lưỡng với hơn 100 người dùng thực và 27 tín hiệu trực quan. Đọc tiếp để tìm hiểu về những phát hiện của chúng tôi và ý nghĩa của chúng khi thiết kế các nút chuyển đổi của riêng bạn

Kết quả nghiên cứu điển hình

Hãy xem những gì chúng tôi đã tìm ra về các cách hiệu quả để nhấn mạnh vào một nút để làm rõ rằng nút đó đang hoạt động. Nhưng trước tiên, một bản tóm tắt nhanh về những người tham gia của chúng tôi

Đánh giá của người tham gia

Sau khi việc thu thập dữ liệu của chúng tôi hoàn tất, trước tiên chúng tôi phải xem xét chất lượng của những người tham gia nghiên cứu của chúng tôi. Việc rà soát này đã dẫn đến việc một số thí sinh bị loại, chủ yếu là những em có biểu hiện chọn đáp án ngẫu nhiên 50-50, biểu hiện rõ ràng của việc không nỗ lực hoàn thành nhiệm vụ một cách thực chất. Sau khi chúng tôi loại bỏ những kẻ phạm tội này, chúng tôi chỉ còn lại số lượng người tham gia sau mỗi nghiên cứu

Kiểu học. Thử nghiệm 5 giâyNhóm thử nghiệm 20 giây. 1212Số người tham gia. 28293027

Ghi chú. Những con số này vẫn cao hơn số lượng kết quả mà chúng tôi đặt ra để thu thập ở mức tối thiểu vì chúng tôi tính đến tỷ lệ bỏ học lên tới 16% khi triển khai tuyển dụng trực tuyến

Số liệu để so sánh tiện ích của các dấu hiệu trực quan

Chúng tôi đã tiến hành bốn nghiên cứu với công cụ Five Second Test. Hai với giới hạn thời gian 5 giây và hai với giới hạn 20 giây. Chúng tôi cần một số liệu có thể so sánh một cách khách quan giữa các lần chuyển đổi với nhau và mức độ hiệu quả của một lần chuyển đổi cụ thể trong các biến thể thử nghiệm 5 giây và 20 giây

Chúng tôi đã tạo một số liệu có trọng số mà chúng tôi đặt tên là điểm Tự tin-Thành công. Điểm Thành công-Tự tin được tính từ số câu trả lời đúng (theo kỳ vọng) kết hợp với các câu trả lời theo thang đo Likert cho câu hỏi. “Bạn cảm thấy chắc chắn như thế nào về câu trả lời của mình?”

Đầu tiên, chúng tôi tính riêng độ tin cậy trung bình cho các câu trả lời đúng và sai và cho mỗi lần chuyển đổi. Độ tin cậy trung bình có thể dao động từ 0 đến 1 dựa trên cách người tham gia trả lời câu hỏi thang đo Likert. Ví dụ: nếu mọi người trả lời chọn bên chuyển đổi chính xác đều trả lời “Hoàn toàn chắc chắn” trên Likert, thì độ tin cậy trung bình cho các câu trả lời đúng cho chuyển đổi đã cho sẽ là 1

Sau đó, chúng tôi đã sử dụng độ tin cậy trung bình được tính toán cho các câu trả lời đúng và sai và tính toán điểm Tin cậy-Thành công của chuyển đổi bằng cách sử dụng công thức sau

Success-Confidence score = (correct_num * correct_conf) - (incorrect_num * incorrect_conf)

correct_num -> number of correct answers

incorrect_num -> number of incorrect answers for toggle

correct_conf -> average confidence with correct answers

incorrect_conf -> average confidence with incorrect answers 

Vì chúng tôi có sẵn số lượng người tham gia khác nhau cho mỗi bài kiểm tra, nên chúng tôi đã chuẩn hóa điểm Tự tin-Thành công bằng cách chia nó cho tổng số người tham gia cho bài kiểm tra nhất định. Kết quả trong công thức sau

Điểm tin cậy thành công được chuẩn hóa = Điểm tin cậy thành công / số người tham gia

Thang điểm của Điểm tin cậy-Thành công chuẩn hóa là -1 đến 1. Điểm trừ 1 biểu thị một nút bật tắt khi tất cả người tham gia đưa ra câu trả lời sai với độ tin cậy cao và 1 chỉ định một nút bật tắt khi tất cả người trả lời trả lời đúng với độ tin cậy cao

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ các Hội thảo Smashing về giao diện người dùng & UX, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Christine Vallaure và rất nhiều người khác

Chuyển đến hội thảo ↬

Đánh giá các câu hỏi nghiên cứu

yêu cầu 1. Chữ in đậm

Tỷ lệ lỗi thấp là 1. 7% và điểm Tự tin Thành công cao là 0. 86 xác nhận kỳ vọng của chúng tôi rằng văn bản được tô đậm trong nút chuyển đổi làm cho các tùy chọn được coi là hoạt động so với văn bản thông thường. Phiên bản chuyển đổi này thậm chí còn hoạt động đủ tốt để giành được thứ hạng trung bình tốt thứ ba trong số tất cả các chuyển đổi được đánh giá. Dựa trên kết quả này, chúng tôi có thể phát âm một cách an toàn văn bản in đậm trong nút hoạt động như một giải pháp chức năng nhưng đơn giản để thông báo tùy chọn chuyển đổi nào được chọn. Kiến thức này sẽ đặc biệt hữu ích nếu tất cả các nút chuyển đổi của bạn sử dụng phông chữ có trọng lượng bằng nhau, như thường lệ

(Xem trước lớn)

yêu cầu 2. Cỡ chữ

Chúng tôi đã thử nghiệm bốn chuyển đổi với sự khác biệt về kích thước khác nhau giữa văn bản trong các nút hoạt động và không hoạt động. Đúng như dự đoán, việc chuyển đổi trong đó sự khác biệt về kích thước phông chữ hầu như không đáng chú ý hoạt động kém nhất với tỷ lệ lỗi gần 15% và điểm tin cậy chỉ là 0. 63. Trong khi đó, chuyển đổi với sự khác biệt lớn nhất về kích thước phông chữ được nhận thấy với tỷ lệ lỗi chỉ là 4. 4% và điểm tin cậy là 0. 81, cả hai đều là những cải tiến đáng kể khi so sánh với sự khác biệt nhỏ nhất. Hiệu suất của hai chuyển đổi ở giữa được đặt giữa hai thái cực này. Thật bất ngờ, nút bật tắt có chênh lệch nhỏ thứ hai lại vượt trội hơn một chút so với nút bật tắt có chênh lệch lớn thứ hai. Tuy nhiên, sự bất thường này đủ nhỏ để được giải thích bằng nhiễu trong dữ liệu

Do tỷ lệ hiệu suất nói chung tăng theo kích thước phông chữ, nên kỳ vọng của chúng tôi về “sự khác biệt về kích thước lớn hơn có nghĩa là gợi ý trực quan tốt hơn cho các nút bật tắt” đã được xác nhận. Tuy nhiên, vì việc sử dụng phông chữ lớn hơn đáng kể để thể hiện trạng thái hoạt động có thể không hấp dẫn về mặt hình ảnh, chúng tôi khuyên bạn nên sử dụng văn bản in đậm thay thế. Văn bản in đậm không chỉ dễ đưa vào thiết kế của bạn hơn mà còn hoạt động tốt hơn

(Xem trước lớn)

câu trả lời 3. Độ tương phản của màu đảo ngược trong nhãn văn bản

Các kết hợp màu đảo ngược đen trắng và cam & xanh lam được chứng minh là một trong những cách chuyển đổi hoạt động kém nhất mà chúng tôi đã thử nghiệm, với tỷ lệ lỗi là 19. 3% và 23. 7% và độ tin cậy chỉ 0. 56 và 0. 41, tương ứng. Mức độ tin cậy thấp cho thấy rằng ngay cả những người trả lời đã cố gắng chọn câu trả lời đúng cũng không tự tin chút nào vào câu trả lời của họ. Dự đoán của chúng tôi về các màu tối hơn được coi là hoạt động đã được xác nhận bởi tỷ lệ lỗi nhỏ hơn 0. 5 trong cả hai trường hợp. Tuy nhiên, độ tin cậy thấp làm suy giảm sức mạnh của tỷ lệ lỗi thấp hơn. Điều này có nghĩa là giả thuyết của chúng tôi rằng màu phông chữ đảo ngược là một dấu hiệu trực quan không hiệu quả đã được xác nhận. Cố gắng tránh sử dụng các màu có cùng tầm quan trọng về mặt hình ảnh, như đã thấy trong câu hỏi nghiên cứu số 8 liên quan đến chuyển đổi hình nền

(Xem trước lớn)

yêu cầu 4. Nhận thức văn hóa về màu đỏ vs. màu xanh lá cây trong nhãn văn bản

Một kết quả có vẻ đáng ngạc nhiên (mặc dù không hoàn toàn bất ngờ) đến từ chuyển đổi với văn bản màu đỏ và màu xanh lá cây. Tỷ lệ lỗi cho chuyển đổi này là 32. 5% và độ tin cậy chỉ 0. 32, khiến nó trở thành một trong những Toggles hoạt động kém nhất nói chung, với thứ hạng trung bình là 24. 67. Kết quả này cho thấy rằng sự kết hợp màu đỏ/xanh lá cây không những không cải thiện kết quả so với các cặp màu khác mà còn thực sự làm cho kết quả tồi tệ hơn. Lời giải thích khả dĩ có thể là màu xanh lá cây được coi là một công tắc, không phải là dấu hiệu của trạng thái hoạt động. Mù màu đỏ-lục cũng là dạng khiếm khuyết thị giác màu phổ biến nhất, đó là lý do đủ để không sử dụng gợi ý trực quan này, vì các câu trả lời sai trong thí nghiệm của chúng tôi cũng phản ánh

(Xem trước lớn)

yêu cầu 5. Màu so với. đen/trắng trong nhãn văn bản

Sự kết hợp của các nhãn đầy màu sắc và màu trắng hoạt động tốt (xếp hạng trung bình là 9. 33). Việc chuyển đổi có vấn đề đáng ngạc nhiên là sự kết hợp giữa màu sắc và màu đen. Chuyển đổi này với tỷ lệ lỗi là 14% và độ tin cậy chỉ bằng 0. 59 cho thấy những người tham gia không thể chọn bên tích cực một cách đáng tin cậy. Chúng tôi dự đoán rằng hiện tượng này rất có thể là do sức mạnh thị giác của văn bản màu đen so với văn bản màu, bất kể màu sắc. Do đó, không nên chỉ phân biệt các bật/tắt đang hoạt động và không hoạt động bằng cách biến văn bản màu đen không hoạt động thành màu sắc. Để có các phương pháp tiếp cận dựa trên màu sắc tốt hơn, chỉ cần tiếp tục đọc những phát hiện của chúng tôi cho các câu hỏi nghiên cứu tiếp theo

(Xem trước lớn)

yêu cầu 6. Màu cơ bản vs. màu trung tính (màu xám) trong nhãn văn bản

So với các chuyển đổi từ câu hỏi nghiên cứu ngay trước đó, chuyển đổi này thể hiện nền tảng trung gian giữa các tùy chọn không hoạt động màu trắng và đen với màu xám của nó. Điều này được phản ánh trong thứ hạng trung bình kết quả là 12, tốt hơn so với màu sắc so với. tùy chọn màu đen, nhưng tệ hơn so với màu sắc so với. trắng

(Xem trước lớn)

yêu cầu 7. Độ bão hòa khác nhau của cùng một màu trong nhãn văn bản

Biến thể màu văn bản cuối cùng của các chuyển đổi mà chúng tôi đã thử nghiệm cũng đã xác nhận lý thuyết của chúng tôi. Sự khác biệt về độ bão hòa là một dấu hiệu đủ mạnh để đảm bảo kết quả hài lòng (tỷ lệ lỗi là 8. 7% với độ tin cậy là 0. 77). Điều này cho thấy rằng người trả lời đã chọn đúng phương án một cách đáng tin cậy. Lưu ý rằng mặc dù tỷ lệ lỗi có thể so sánh giữa chính và. màu trung tính, độ bão hòa khác nhau của cùng một màu truyền cảm hứng cho sự tự tin cao hơn. Do đó, tùy chọn thích hợp hơn là sử dụng độ bão hòa thấp hơn của cùng màu thay vì thang độ xám cho các nút chuyển đổi không hoạt động

(Xem trước lớn)

RQ 8. Độ tương phản của màu đảo ngược trong nền và RQ 9. Nhận thức văn hóa về màu đỏ và màu xanh lá cây trong nền

Các chuyển đổi được xác định trong các giả thuyết này là đối trọng với các chuyển đổi từ các giả thuyết 3 và 4. Chúng tôi giữ các cặp màu giống nhau, nhưng lần này chúng tôi tô màu nền của nút chuyển đổi thay vì tô màu văn bản. Kết quả với màu nền tuân theo cùng một mẫu như với văn bản, với sự kết hợp đen trắng hoạt động tốt nhất, màu cam-&-xanh lam đứng thứ hai và đỏ-&-xanh lá cây ở vị trí cuối cùng. Tuy nhiên, so với các biến thể văn bản màu, các biến thể điền hoạt động tốt hơn các biến thể văn bản thay thế (tỷ lệ lỗi cải thiện 5-8%)

Điều thoạt nghe có vẻ phản trực giác là mặc dù nền đen trắng có khả năng gây nhầm lẫn cao hơn do cài đặt chế độ tối/sáng, nhưng nó vẫn hoạt động tốt hơn so với văn bản thay thế đen trắng hoặc màu đảo ngược với sắc độ. Việc cài đặt chế độ sáng/tối sẽ ảnh hưởng như thế nào đến kết quả của việc chuyển đổi cụ thể này có thể cần được điều tra thêm. Tuy nhiên, để xây dựng một chuyển đổi tối ưu, có thể không cần thiết, xét đến kết quả tổng thể tốt hơn mà các loại nền chuyển đổi khác đạt được

(Xem trước lớn)(Xem trước lớn)

RQ 10. Độ bão hòa khác nhau của cùng một màu trong nền

Các sắc thái khác nhau của màu cam đạt tỷ lệ lỗi là 9. 7% và điểm Tự tin Thành công chuẩn hóa là 0. 72. So với điều đó, các sắc thái khác nhau của màu xám có tỷ lệ lỗi là 15% và điểm Tự tin-Thành công được chuẩn hóa là 0. 63 cho chuyển đổi màu xám — cả hai điểm tổng thể đều ở mức khá đã chứng minh những dấu hiệu trực quan này là có thể sử dụng được. Sự cải thiện của màu cam so với biến thể thang độ xám là rất đáng kể (dẫn đến thứ hạng trung bình là 13. 67 so với 18). Điều quan trọng cần lưu ý là mặc dù biến thể màu cam hoạt động tốt hơn biến thể màu xám nhưng hiệu suất của chúng vẫn ở mức trung bình tốt nhất. Nếu màu nền được sử dụng ở dạng này, chúng tôi khuyên bạn nên kết hợp chúng với một dấu hiệu trực quan khác

(Xem trước lớn)

RQ 11. Màu bão hòa và màu thang độ xám trong nền

Như mong đợi, phiên bản có nút không hoạt động có màu xám nhạt hơn hoạt động tốt hơn (6. tỷ lệ lỗi 1% và 0. 79) so với phiên bản màu xám đậm hơn (12. tỷ lệ lỗi 3% và 0. 66 tự tin). Nó cũng vượt trội so với phiên bản màu cam từ giả thuyết 10 và hoạt động tốt về tổng thể, đạt thứ hạng trung bình là 6. 67 (tốt thứ sáu). Phiên bản bão hòa hơn được đặt ở nửa dưới nhưng vẫn vượt trội so với phiên bản thang độ xám từ giả thuyết 10 (xếp hạng trung bình 15 so với 18). Kết quả của hai giả thuyết này cho thấy rằng nếu chúng ta muốn sử dụng màu tô bão hòa để biểu thị hoạt động, thì tốt nhất là kết hợp với màu xám bão hòa thấp.

(Xem trước lớn)

RQ 12. Thiết kế đảo ngược của các nút

Chúng tôi tin rằng sự đảo ngược của thiết kế sẽ gây nhầm lẫn cho người dùng hơn là độ bão hòa được mô tả trong giả thuyết 10 và 11. Với 6. tỷ lệ lỗi 1% và 0. 78 Điểm tự tin thành công, chuyển đổi này xếp ngay dưới biến thể có độ bão hòa tốt nhất (màu bão hòa và màu xám ít bão hòa hơn), đạt vị trí thứ bảy chung cuộc với thứ hạng trung bình là 7. 33. Tuy nhiên, điều quan trọng cần lưu ý là việc chuyển đổi này hoạt động kém hơn đáng kể trong bài kiểm tra 20 giây so với bài kiểm tra 5 giây (giảm 9 điểm giữa các bảng xếp hạng). Điều này có thể được giải thích là do một nửa có nền được lấp đầy (nền chính xác để chọn) thu hút sự chú ý của người dùng rất nhanh (dẫn đến hiệu suất tốt hơn trong bài kiểm tra 5 giây). Tuy nhiên, khi người dùng được cung cấp thời gian dài hơn để quan sát chuyển đổi, họ bắt đầu đặt câu hỏi về bản năng của mình, dẫn đến tỷ lệ lỗi tăng hơn gấp đôi (từ 3. 5% đến 8. số 8%). Do đó, chúng tôi khuyên bạn nên tránh đảo ngược các nút bật/tắt bằng các dấu hiệu trực quan để tránh nhầm lẫn tiềm ẩn và không làm nổi bật nút không hoạt động theo bất kỳ cách nào

(Xem trước lớn)

RQ 13. Đường viền nổi bật của nút hoạt động

Đúng như dự đoán, phần phác thảo được đánh dấu đã cung cấp một gợi ý đáng tin cậy để người trả lời quyết định (8. tỷ lệ lỗi 8% và 0. 76 điểm Thành công-Tự tin). Xếp hạng trung bình là 10 đặt nút chuyển đổi này ở nửa trên của các nút chuyển đổi hiệu suất khôn ngoan. Do các tín hiệu trực quan khác vượt trội hơn, nên kết hợp với một tín hiệu khác để có hình ảnh rõ nét hơn

(Xem trước lớn)

RQ 14. Nút không hoạt động trùng với nền

Một kết quả thú vị khác. Mặc dù chúng tôi nghi ngờ rằng những người được hỏi có thể gặp khó khăn khi nhận thức nút không hoạt động là một nút, nhưng việc chuyển đổi này đã đạt được kết quả xuất sắc. Với tỷ lệ lỗi chỉ bằng 0. 9% và độ tin cậy lớn hơn 0. 89, xếp hạng đầu tiên về tổng thể với thứ hạng trung bình là 1. 33, đây là một cải tiến so với màu bão hòa đơn giản so với. chuyển đổi thang độ xám được thấy trong RQ11. Điều này có nghĩa là việc có nút không hoạt động có cùng màu với môi trường xung quanh là cách tối ưu để giao tiếp lựa chọn trong nút chuyển đổi

(Xem trước lớn)

RQ 15. Dập nổi vs. nút gỡ lỗi

Tỷ lệ lỗi cho cả hai nút nổi là 83. 3% và điểm tin cậy cũng giống như -0. 58. Điều này có nghĩa là theo đuổi thuyết đa hình không phải lúc nào cũng là giải pháp đúng đắn, ít nhất là khi chuyển đổi

Chúng tôi hy vọng kết quả này là do việc sử dụng phổ biến các hiệu ứng dập nổi trong giao diện kỹ thuật số để tăng thêm trọng lượng cho các thành phần giao diện. Một chuyển đổi với trọng lượng trực quan hơn sẽ được coi là hoạt động

(Xem trước lớn)

RQ 16. dấu kiểm

Đúng như mong đợi từ bản chất đơn giản của nó, biểu tượng dấu kiểm được thêm vào nút hoạt động trong chuyển đổi hoạt động rất tốt, đạt thứ hạng trung bình tốt thứ hai là 2. 33 chỉ với tỷ lệ lỗi 5% trên điểm Tin cậy-Thành công là 0. 86. Vấn đề duy nhất mà chúng tôi thấy khi chọn nút chuyển đổi này là khả năng bao gồm rườm rà của nó trong thiết kế web và nó có thể tạo ra các kết nối không mong muốn với các hộp kiểm

(Xem trước lớn)

RQ 17. Nút radio

Mặc dù bản chất của chuyển đổi nút radio tương tự như thiết kế dấu kiểm, nhưng khi được sử dụng làm biểu tượng, ý nghĩa của nó ít rõ ràng hơn. Điều này đã được xác nhận bằng cách đạt được thứ hạng trung bình kém hơn là 5. 67 và tỷ lệ lỗi cao hơn là 9% kết hợp với điểm Tự tin Thành công thấp hơn chỉ là 0. 8. Mặc dù tín hiệu trực quan này có hiệu suất khá tốt, nhưng việc sử dụng các nút radio làm bật tắt không phù hợp với ngữ nghĩa của chúng vì các nút radio được dùng trong các biểu mẫu, trong khi các nút bật tắt được dùng để biểu thị sự thay đổi trạng thái ngay lập tức

(Xem trước lớn)

Xếp hạng các tín hiệu thị giác

Chúng tôi đã xếp hạng riêng biệt các tín hiệu trực quan được biểu thị bằng nút bật/tắt dựa trên kết quả mà chúng đạt được trong các bài kiểm tra 5 giây, bài kiểm tra 20 giây và cả hai kết hợp. Điều này dẫn đến 3 bảng xếp hạng riêng biệt. Chúng tôi đã tính toán thứ hạng trung bình cho mỗi lần chuyển đổi và đưa ra ba lần chuyển đổi tồi tệ nhất và ba lần chuyển đổi tốt nhất

chuyển đổi tồi tệ nhất

Vị trí cuối cùng thứ ba - Bật tắt # 9 - Nhãn văn bản màu đỏ và xanh lá cây

(Xem trước lớn)

• thứ hạng trung bình. 24. 67
• Xếp hạng bài kiểm tra 5 giây. 25
• Xếp hạng bài kiểm tra 20 giây. 24
• xếp hạng tổng hợp. 25

Vị trí cuối cùng thứ hai — Chuyển đổi #22 — Nút dập nổi (phiên bản không có bóng)

(Xem trước lớn)

• thứ hạng trung bình. 26. 33
• Xếp hạng bài kiểm tra 5 giây. 27
• Xếp hạng bài kiểm tra 20 giây. 26
• xếp hạng tổng hợp. 26

Vị trí cuối cùng - Chuyển đổi #27 - Nút dập nổi (phiên bản bóng tối)

(Xem trước lớn)

• thứ hạng trung bình. 26. 67
• Xếp hạng bài kiểm tra 5 giây. 26
• Xếp hạng bài kiểm tra 20 giây. 27
• xếp hạng tổng hợp. 27

Toggles tốt nhất

Người chiến thắng ở vị trí thứ ba — Toggle #2 — Chữ in đậm

(Xem trước lớn)

• thứ hạng trung bình. 2. 67
• Xếp hạng bài kiểm tra 5 giây. 4
• Xếp hạng bài kiểm tra 20 giây. 2
• xếp hạng tổng hợp. 2

Người chiến thắng ở vị trí thứ hai — Chuyển đổi #24 — Dấu kiểm

(Xem trước lớn)

• thứ hạng trung bình. 2. 33
• Xếp hạng bài kiểm tra 5 giây. 1
• Xếp hạng bài kiểm tra 20 giây. 3
• xếp hạng tổng hợp. 3

Người chiến thắng ở vị trí đầu tiên — Toggle #26 — Nút không hoạt động trùng với nền

(Xem trước lớn)

• thứ hạng trung bình. 1. 33
• Xếp hạng bài kiểm tra 5 giây. 2
• Xếp hạng bài kiểm tra 20 giây. 1
• xếp hạng tổng hợp. 1

Sự khác biệt giữa bài kiểm tra 5 giây và 20 giây

Mục tiêu thứ hai của chúng tôi là tìm hiểu sự khác biệt trong nhận thức về các nút bật tắt dựa trên thời gian người trả lời phải quan sát chúng, trước khi quyết định câu trả lời. Kỳ vọng của chúng tôi là kết quả từ các bài kiểm tra 20 giây về tổng thể sẽ tốt hơn (tỷ lệ lỗi thấp hơn và điểm tin cậy cao hơn) so với kết quả của các bài kiểm tra 5 giây vì những người tham gia sẽ có nhiều thời gian hơn để suy nghĩ về các nút bật tắt trước mặt họ

Chúng tôi đã tính toán các giá trị trung bình và kết quả có thể được nhìn thấy trong bảng sau

Loại thử nghiệmTỷ lệ lỗi trung bìnhTrung bình n. điểm tin cậy bài kiểm tra 5 giây0. 17280. kiểm tra 574920 giây0. 16700. 6013

Kết quả xác nhận kỳ vọng của chúng tôi vì tỷ lệ lỗi trung bình thấp hơn trong các bài kiểm tra 20 giây và điểm Tự tin-Thành công cao hơn. Tuy nhiên, những khác biệt này không có ý nghĩa. Điều khiến chúng tôi quan tâm là liệu có bất kỳ chuyển đổi cụ thể nào cho thấy sự khác biệt đáng kể giữa hai biến thể thử nghiệm hay không. Do đó, chúng tôi tập trung vào các chuyển đổi cho thấy sự cải thiện/suy giảm lớn nhất giữa kết quả thử nghiệm 5 giây và 20 giây

Toggles hoạt động tốt hơn sau 20 giây

Sự cải thiện lớn nhất về số thứ hạng đạt được giữa thử nghiệm 5 giây và 20 giây được chia sẻ giữa các chuyển đổi #4, #11 và #18 được thấy bên dưới. Tất cả đều tăng 6 hạng khi người tham gia có nhiều thời gian hơn để quan sát họ. Điều này có nghĩa là độ rõ của các tín hiệu được cải thiện khi có thêm thời gian quan sát

(Xem trước lớn)

• Xếp hạng bài kiểm tra 5 giây. 16
• Xếp hạng bài kiểm tra 20 giây. 10
• Chênh lệch tỷ lệ lỗi. -0. 0527
• Chênh lệch Điểm tin cậy-Thành công được Chuẩn hóa. 0. 0913

Dấu hiệu trực quan này có sự khác biệt về kích thước phông chữ nhỏ thứ hai giữa trạng thái hoạt động và không hoạt động. Chúng tôi tin rằng sự thay đổi về thứ hạng là do một số người tham gia cần thời gian để nhận thấy sự khác biệt về kích thước phông chữ nhỏ hơn. Tuy nhiên, sự khác biệt đủ đáng chú ý khi thời gian bổ sung được thêm vào bài kiểm tra

Hai bật tắt tiếp theo có đủ điểm chung để chúng ta cùng nhau phân tích

(Xem trước lớn)

• Xếp hạng bài kiểm tra 5 giây. 12
• Xếp hạng bài kiểm tra 20 giây. 6
• Chênh lệch tỷ lệ lỗi. -0. 0526
• Chênh lệch Điểm tin cậy-Thành công được Chuẩn hóa. 0. 0912

(Xem trước lớn)

• Xếp hạng bài kiểm tra 5 giây. 17
• Xếp hạng bài kiểm tra 20 giây. 11
• Chênh lệch tỷ lệ lỗi. -0. 0526
• Chênh lệch Điểm tin cậy Chuẩn hóa. 0. 0772

Cả hai tín hiệu này đều được thiết kế theo cách mà màu sắc rõ ràng hơn/bão hòa hơn biểu thị tùy chọn đang hoạt động trong khi tùy chọn không hoạt động được thể hiện bằng màu nhạt hơn. Sự khác biệt về kết quả cho thấy rằng một tỷ lệ phần trăm người dùng nhất định ban đầu xem màu nhạt hơn là màu rõ nét hơn. Tuy nhiên, tỷ lệ phần trăm giảm khi người dùng dành nhiều giây hơn để suy nghĩ về việc chuyển đổi. Để thực hiện chuyển đổi dễ hiểu ngay lập tức, một nhà thiết kế giao diện có lẽ nên xem xét các dấu hiệu trực quan khác

Toggles hoạt động kém hơn sau 20 giây

Chuyển đổi 15

(Xem trước lớn)

Chuyển đổi 17

(Xem trước lớn)Toggle Number Xếp hạng kiểm tra 5 giây Xếp hạng kiểm tra 20 giây Chênh lệch tỷ lệ lỗi. Chênh lệch Điểm tin cậy1511190. 0526-0. 10181715210. 0877-0. 1299

Toggle 15 cho thấy thứ hạng giảm nhiều nhất, trong khi Toggle 17 chịu những thay đổi tiêu cực đáng kể nhất về tỷ lệ lỗi và điểm tin cậy

Chúng tôi giải thích sự sụt giảm của hai điều này bởi thực tế là hai nút chuyển đổi này giống nhau theo cách — cả hai đều có nửa tối và nửa sáng — có nghĩa là chúng sẽ được cảm nhận khác nhau, chẳng hạn như khi sử dụng cài đặt chế độ sáng so với chế độ tối . Mặc dù phản ứng theo bản năng của người dùng có thể là chọn màu tối hơn khi hoạt động, nhưng sau một thời gian, nhiều người sẽ bắt đầu nghi ngờ bản thân. Thay vì màu tối hơn thu hút ánh nhìn của họ, họ có thể bắt đầu suy nghĩ quá nhiều rằng màu sáng hơn được làm nổi bật trên nền tối. Một chuyển đổi tốt không nên khuyến khích những nghi ngờ như vậy

Tiềm năng cho nghiên cứu trong tương lai

Tất cả các tín hiệu mà chúng tôi đã kiểm tra trong nghiên cứu của mình đều đơn giản/số ít. Từ đây, bước tiếp theo tự nhiên của nghiên cứu sẽ là đi sâu hơn, với một nghiên cứu tập trung vào việc đánh giá những phát hiện của chúng tôi một cách chi tiết hơn. Tôi có thể sử dụng phông chữ đậm trong nút chuyển đổi không hoạt động nếu nút không hoạt động thậm chí còn đậm hơn không?

Một bước tiếp theo sẽ là thử nghiệm tác động của sự thay đổi màu sắc. Độ bão hòa của màu xanh lá cây có hoạt động tốt như độ bão hòa của màu cam không?

Kiểm tra hiệu suất của các tín hiệu trực quan trong các nguyên mẫu điều hướng trang web bằng cách sử dụng các bảng màu khác nhau là một lĩnh vực đầy tham vọng khác để tiếp tục nghiên cứu. Chúng tôi đã thử nghiệm các nút bật tắt của mình trong khoảng trống, nhưng có thể hiệu suất của chúng sẽ khác nhau tùy thuộc vào ngữ cảnh trực quan

Phần kết luận

Trong bài viết này, chúng tôi đã mô tả nghiên cứu của mình trong đó chúng tôi đã phân tích một danh sách phức tạp các dấu hiệu trực quan được sử dụng bởi các nút chuyển đổi để cho biết tùy chọn nào đang hoạt động. Bằng cách thử nghiệm các câu hỏi nghiên cứu của mình với người dùng thực, chúng tôi đã thu thập được một lượng dữ liệu đáng kể để đưa ra các tuyên bố đáng tin cậy về hiệu quả của các tín hiệu trực quan

Dưới đây là một số điểm chính mà chúng tôi đã đạt được mà bạn nên ghi nhớ khi thiết kế nút chuyển đổi tiếp theo của mình

• Nếu bạn chọn sử dụng màu làm chủ đạo, chúng tôi khuyên bạn nên sử dụng kết hợp màu sống động bão hòa (tương ứng lý tưởng với bảng màu CTA của bạn) và màu trung tính theo thang độ xám nhạt. Nên sử dụng các màu trong nền của chuyển đổi hơn là sử dụng văn bản có màu. Nếu màu của nút không hoạt động giống với màu nền xung quanh, điều này sẽ cải thiện hơn nữa mức độ dễ hiểu của nút
• Không nên sử dụng các màu tương phản có trọng lượng hình ảnh tương tự trong bất kỳ trường hợp nào. Nhận thức văn hóa của màu đỏ và màu xanh lá cây sẽ không giúp bạn truyền đạt những gì được chọn. Có nhiều cách tốt hơn để làm điều này. Hãy cảnh giác với sự kết hợp màu đen và trắng. Các công tắc sử dụng bảng màu này là những công cụ dễ bị nhầm lẫn nhất bắt nguồn từ cài đặt chế độ tối/sáng
• Bạn có thể chọn một đường dẫn tối giản và sử dụng chính phông chữ để hiển thị sự khác biệt giữa các trạng thái nút. Sự kết hợp đậm-mỏng là giải pháp phù hợp, nhưng bạn cũng có thể sử dụng các cỡ chữ khác nhau. Chỉ cần đảm bảo phân biệt đủ kích thước phông chữ. Bạn cũng nên sử dụng trọng lượng hoặc kích thước phông chữ để hỗ trợ các dấu hiệu trực quan khác vì nó rất linh hoạt
• Nếu bạn quyết định sử dụng hình nổi làm gợi ý chính — bạn thực sự không nên. Nó được chứng minh là không đáng tin cậy trong việc truyền đạt trạng thái hoạt động của một chuyển đổi. Ngay cả một đường viền đơn giản cũng hiệu quả hơn. Nếu bạn quyết định sử dụng các công tắc nổi để thu hút thị giác, chúng tôi khuyên bạn nên kết hợp dập nổi với một gợi ý trực quan chính, chẳng hạn như văn bản in đậm hoặc tô màu
• Không có gì xấu hổ khi sử dụng các thiết kế mà bạn chắc chắn sẽ hiệu quả. Cả biểu tượng đánh dấu hoặc nút radio đều hoạt động rất tốt. Hạn chế rõ ràng của việc chọn chúng là sự phức tạp trong thiết kế web của bạn vì các nút radio vì các thành phần giao diện người dùng phục vụ một chức năng khác với các nút bật tắt. Các dấu tích có thể được coi là đã lỗi thời (giống như một dạng vật lý hơn là một trang web). Đối với các biểu tượng nút radio, bạn cũng có thể sử dụng nút radio để thay thế

Thực hiện theo các mẹo này và các thiết kế nút chuyển đổi của bạn sẽ không còn khiến người dùng phải do dự về những gì được chọn vào lúc này

Làm cách nào để thay đổi màu của nút trong JavaScript?

Làm cách nào để chuyển đổi màu nền JavaScript?

Làm cách nào để thay đổi màu nút khi di chuột qua trong JavaScript?