Sáng lễ 30/4 mình chạy xe ra đầu hẻm mua ổ bánh mì, ngước lên thấy nguyên con hẻm treo cờ đỏ rực từ đầu tới cuối. Tới xe bánh mì của chú đầu ngõ cũng cắm một lá cờ nhỏ bay phần phật, nhìn không khí lễ hội vui cực kỳ.
Cầm ổ bánh mì về phòng, theo thói quen tay mình lại bấm mở cái app chứng khoán lên ngó. Đang nghỉ lễ nên bảng điện đứng im re, nhưng tự nhiên mình nhìn rồi nghĩ bụng: ngoài đường thì đỏ cỡ nào cũng vui, chứ ngày thường mở app lên mà thấy nguyên bảng điện đỏ rựccccc như con hẻm sáng nay thì chắc... tắt máy đi ngủ luôn khỏi ăn lễ.
Nghĩ cũng ngộ: cùng một mã màu đỏ đó, đặt ở ngoài đường thì là ăn mừng, còn bê vào trong app thì lại thành cắt lỗ.
Nó giống hệt như câu "Giỏi quá ha!" trong tiếng Việt mình vậy. Lúc mình khoe vừa đạt học bổng mà mẹ nói câu đó thì đúng là khen thật, chứ lúc vừa làm sập server hay trễ deadline mà sếp nhắn câu đó vào group chat thì... bạn tự hiểu số phận rồi đấy.
Cùng một mặt chữ, nhưng ngữ cảnh và tông giọng mới là thứ quyết định ý nghĩa thật sự.
Trong thiết kế giao diện (UI) cũng vậy. Hồi mới học design, tụi mình hay học thuộc lòng công thức kiểu sách giáo khoa: đỏ là báo lỗi (error), xanh lá là thành công (success), vàng là cảnh báo (warning), cứ thế bê nguyên xi đi áp dụng khắp mọi nơi. Nhưng khi làm sản phẩm cho người dùng ở Việt Nam hay châu Á, bê nguyên công thức đó vào rất dễ gặp cảnh dở khóc dở cười.
Rốt cuộc màu đỏ mang ý nghĩa gì trong đầu con người?
Hồi năm 2020 có một khảo sát khá thú vị đăng trên tạp chí Psychological Science: nhóm nghiên cứu mời gần 4.600 người đến từ 30 quốc gia (nói 22 thứ tiếng khác nhau) ngồi ghép các màu sắc với cảm xúc tương ứng.1
Kết quả cho thấy hầu hết các màu đều có sự đồng thuận rất cao trên toàn cầu: màu vàng gần như ở đâu cũng gợi cảm giác vui vẻ, màu đen và xám đi liền với sự buồn bã, còn màu trắng mang lại cảm giác nhẹ nhõm.
Riêng màu đỏ là trường hợp cá biệt duy nhất bị gắn chặt với hai cảm xúc trái ngược hoàn toàn nhau cùng một lúc: tình yêu và sự tức giận.
Chính nhóm tác giả cũng phải gọi màu đỏ là màu gây tranh cãi nhất thế giới. Với người này nó là sự nồng nhiệt, đam mê; với người khác nó lại là tín hiệu báo động, nguy hiểm. Thậm chí ở nhóm người tham gia khảo sát tại Trung Quốc, màu đỏ còn kiêm thêm cả cảm xúc vui sướng và may mắn.
Nói nôm na là cùng một khối màu đỏ đặt trên màn hình, người dùng này nhìn vào có thể hiểu là "chúc mừng bạn", còn người kia lại giật mình tưởng "thôi xong, bấm nhầm rồi".
(1) Bản thân màu sắc không có một ý nghĩa cố định nào cả, ý nghĩa của nó nằm ở văn hóa và trải nghiệm của người đang nhìn vào màn hình.
Khi bảng điện ở Sài Gòn bay sang Thượng Hải
Ở Việt Nam mình, ai từng ngó qua bảng điện chứng khoán đều thuộc nằm lòng quy ước: xanh lá là tăng giá, đỏ là giảm giá, vàng là đứng giá, còn tím (kịch trần) và xanh lơ (chạm sàn) là hai thái cực cảm xúc mạnh nhất.2
Dân đầu tư trong nước còn chế ra đủ thứ thuật ngữ nghe rất tượng hình như "thị trường đỏ lửa" hay "xanh vỏ đỏ lòng" - nghe tới chữ đỏ thôi là đã thấy mùi bay màu tài khoản rồi.
Nhưng nếu bạn cầm đúng cái tư duy màu sắc đó bay sang Thượng Hải hay Đài Loan rồi mở bảng chứng khoán của họ lên, bạn sẽ bị rối não ngay lập tức: ở bên đó màu đỏ mới là tăng giá, còn màu xanh lá là đang cắm đầu giảm.3
Trong văn hóa Trung Quốc, màu đỏ đại diện cho tài lộc và hồng phát. Họ còn có hẳn thành ngữ 满堂红 (mãn đường hồng - cả sảnh đỏ rực) để chỉ những phiên giao dịch mà toàn bộ thị trường cùng tăng điểm. Thế là có cảnh trớ trêu: cùng nhìn vào một màn hình đỏ rực, các chứng sĩ ở Hà Nội với Sài Gòn thì ôm đầu thở dài, còn nhà đầu tư ở Thượng Hải thì rủ nhau đi khui bia ăn mừng.
Bạn có thể bấm chuyển thử hai chế độ màu trên cái bảng điện giả lập dưới đây để xem não mình phản ứng thế nào:
| Mã | Tham chiếu | Khớp | +/− |
|---|---|---|---|
| PHỞ | 25,00 | 26,75 | +1,75 |
| BÚN | 18,20 | 18,90 | +0,70 |
| XÔI | 12,50 | 12,50 | 0,00 |
| CHÈ | 9,80 | 9,35 | −0,45 |
| BÁNH | 40,00 | 37,20 | −2,80 |
Bạn để ý thử xem: dù con số cộng trừ giữ nguyên không đổi, nhưng vừa bấm chuyển sang Kiểu Trung Quốc một phát là mắt người Việt mình tự nhiên thấy bất an liền, vì não mình đã bị lập trình quá sâu rằng "màu đỏ = mất tiền".
Sự khác biệt văn hóa này lớn tới mức các siêu ứng dụng tài chính đa quốc gia như Moomoo phải thiết kế hẳn một mục riêng trong phần Settings, cho phép user tự chọn Red is Up (Đỏ là tăng) hoặc Green is Up (Xanh là tăng) tùy theo thói quen của từng nước.4
(2) Ý nghĩa của màu sắc suy cho cùng chỉ là một quy ước xã hội, mà đã là quy ước thì mỗi nơi sẽ chơi theo một luật riêng.
Bài toán "hai màu đỏ" oái oăm ở Việt Nam
Làm Product Designer ở thị trường Việt Nam còn đau đầu hơn ở chỗ: người Việt mình sống chung với cả hai thái cực của màu đỏ cùng một lúc.
Một mặt, chúng ta theo văn hóa Á Đông: Tết nhất, đám cưới, khai trương, lì xì, câu đối... cái gì vui vẻ, may mắn nhất đều phải sơn màu đỏ. Mặt khác, trong học tập, giao thông và tài chính, chúng ta lại dùng chuẩn phương Tây: cô giáo chấm bài sai bằng mực đỏ, đèn đỏ là phải dừng, số dư ngân hàng bị trừ hiện màu đỏ, chứng khoán giảm cũng màu đỏ nốt.
Ở ngoài đời thực thì hai cái màu đỏ này chẳng bao giờ đánh nhau, vì xung quanh chúng ta có bối cảnh (context) quá rõ ràng - không ai cầm phong bao lì xì ngày Tết mà lại sợ mình đang bị phạt nguội cả.
Nhưng khi đưa lên màn hình điện thoại rộng có vài inch, mọi bối cảnh bên ngoài bị cắt sạch.
Tai nạn nghề nghiệp hay gặp nhất là vào mỗi dịp Tết Nguyên Đán: từ app ngân hàng, ví điện tử cho tới sàn thương mại điện tử đều đồng loạt thay "áo Tết" với background đỏ rực, banner đỏ, nút bấm đỏ, pháo hoa lì xì bay ngập tràn màn hình. Rồi đúng lúc user nhập sai mã OTP, hệ thống hiện lên một dòng báo lỗi... cũng bằng chữ màu đỏ luôn:
Kết quả là dòng thông báo lỗi tàng hình luôn vào trong cái nền Tết, user bấm nút Xác nhận chục lần không hiểu sao app không chạy rồi quay ra tưởng app bị đơ.
Chuyện tương tự cũng xảy ra với màu trắng: các template thiết kế kiểu tối giản (minimalism) của phương Tây cực kỳ chuộng tông trắng tinh khôi cho dịch vụ cưới hỏi, nhưng nếu bê nguyên một giao diện trắng toát không một chút sắc ấm đó về làm app đặt tiệc cưới cho các bậc phụ huynh ở Việt Nam dùng thì rất dễ bị chê, vì người lớn tuổi ở mình vẫn hay nhạy cảm chuyện màu trắng gợi liên tưởng tới đám tang.
(3) Ở Việt Nam, màu đỏ vừa là bao lì xì vừa là dòng báo lỗi - tuyệt đối đừng để hai thứ đó đứng chung trên một màn hình mà mặc đồ giống hệt nhau.
Và còn những người dùng thậm chí không nhìn thấy màu đỏ
Ngoài chuyện văn hóa vùng miền, có một sự thật sinh học mà anh em làm UI rất hay quên mất: không phải người dùng nào cũng nhìn thấy màu sắc giống như màn hình MacBook của chúng ta.
Hội chứng mù màu đỏ - xanh lá (Red-Green Color Blindness) là dạng rối loạn sắc giác phổ biến nhất trên thế giới, làm cho người mắc nhìn thấy màu đỏ và màu xanh lá cây thành một tông màu nâu vàng khá giống nhau.
Theo thống kê y khoa thì ở châu Âu có khoảng 8% nam giới mắc hội chứng này, còn ở nam giới châu Á (như Trung Quốc, Nhật Bản) tỷ lệ rơi vào khoảng 4% đến 6,5%.5 Tính trung bình ra thì cứ khoảng 20 người dùng nam giới mở app của bạn lên sẽ có 1 người không phân biệt được hai màu xanh - đỏ.
Bạn thử bấm nút "Mắt mù màu" ở bảng giá rút gọn bên dưới mà xem:
| Mã | Giá |
|---|---|
| PHỞ | 26,75 |
| CHÈ | 9,35 |
| BÚN | 18,90 |
| BÁNH | 37,20 |
Khi mất đi khả năng phân biệt xanh - đỏ, một cái bảng hay widget chỉ hiển thị tên mã và con số lập tức trở thành vô nghĩa vì người xem chịu chết không biết mã nào đang tăng, mã nào đang sập.
Đó là lý do vì sao bộ quy chuẩn tiếp cận web quốc tế (WCAG) có một quy tắc bất di bất dịch: không bao giờ được dùng màu sắc làm phương tiện duy nhất để truyền tải thông tin.6
Chỉ cần bạn bấm thêm nút "Thêm ▲▼" ở cái bảng trên, mọi thứ lập tức rõ ràng trở lại cho tất cả mọi người bất kể mắt họ nhìn thấy màu gì.
(4) Đừng bao giờ bắt màu sắc phải gánh toàn bộ thông tin một mình, hãy luôn đi kèm chữ viết hoặc ký hiệu (icon) rõ ràng.
Vậy kinh nghiệm rút ra lúc ngồi vẽ UI là gì?
Có một bài test siêu nhanh và chẳng tốn đồng nào mà mình cực kỳ hay xài mỗi khi thiết kế xong một màn hình quan trọng: chuyển toàn bộ màn hình đó về chế độ trắng đen (Grayscale).
Nếu ở chế độ trắng đen mà mình vẫn phân biệt được rõ ràng đâu là nút chính, đâu là thông báo lỗi, mã nào đang tăng hay giảm... thì tức là cấu trúc giao diện đã vững, màu sắc lúc đó thêm vào sẽ làm rất tốt vai trò truyền cảm xúc. Còn nếu vừa kéo về trắng đen mà giao diện mất sạch ý nghĩa thì chắc chắn mình đang bắt màu sắc làm việc quá sức.
Điểm thứ hai là luôn phải tự hỏi tệp người dùng của mình đang sống ở đâu và màn hình này sẽ xuất hiện vào dịp nào. Nếu làm chiến dịch mùa Tết với tông đỏ chủ đạo, hãy nhớ bọc các thông báo lỗi vào một cái khung nền sáng riêng biệt kèm theo icon cảnh báo rõ ràng, thay vì chỉ thả một dòng text đỏ chơ vơ giữa rừng hoa đào.
(5) Hãy coi màu sắc như phần nhạc nền tạo cảm xúc, còn nội dung chính vẫn phải nằm ở câu chữ và ký hiệu.
Chiều muộn ngày 30/4, nắng tắt dần mà mấy dây cờ ngoài hẻm nhìn vẫn rực rỡ.
Ở ngoài đời thật, chẳng ai cần một dòng chú thích nào để hiểu màu đỏ hôm nay mang ý nghĩa gì, bởi cả không gian ngày lễ xung quanh đã tự giải thích hết rồi.
Còn cái màn hình điện thoại của tụi mình thì không có được sự ưu ái đó. Nó chỉ có vài trăm pixel nhỏ xíu và một người dùng đang lướt vội, nên mọi sự rõ ràng đều phải do chính tay người thiết kế chuẩn bị trước.
Lê Tuấn Anh
Nguồn tham khảo
- Domicele Jonauskaite và cộng sự, "Universal Patterns in Color-Emotion Associations Are Further Shaped by Linguistic and Geographic Proximity", Psychological Science, 2020.
- Finhay, "Hiểu rõ ý nghĩa các màu trong bảng chứng khoán".
- Benzinga, "Did You Know? You Don't Want To Be In The Green If You're Trading In China, Japan Or Taiwan", 2021.
- moomoo, hướng dẫn đổi màu tăng/giảm trong phần Cài đặt.
- Jennifer Birch, "Worldwide prevalence of red-green color deficiency", Journal of the Optical Society of America A, 2012.
- W3C, WCAG 2.1, tiêu chí 1.4.1 "Use of Color".