Màu sắc và giao diện
Computer Vision
11
UI
25
White

Ngoc Dao viết ngày 22/03/2016

Tại sao 3 màu cơ bản lại là RGB chứ không phải màu nào khác? Tiến sĩ Tobias Komischke sẽ trả lời câu hỏi này và những vẫn câu hỏi rất thiết thực với lập trình viên và designer.

User Experience

User Experience (UX) là khái niệm gắn liền với tương tác giữa người và hệ thống kĩ thuật. Cụ thể hơn, nó là mức độ tiện dụng và lôi cuốn website hoặc ứng dụng cung cấp cho người dùng. Độ tiện dụng cao hàm ý sản phẩm cho phép người dùng đạt mục đích một cách hiệu quả. Nhiều chỉ dẫn nổi tiếng để đạt độ tiện dụng cao được ghi ở ISO 9241-110 [1] và tài liệu Heuristics của Nielsen [2].

Sự lôi cuốn là mối liên hệ thuộc về cảm xúc giữa người dùng và hệ thống mà họ tương tác. Người dùng có thích nó? Ghét nó? Họ có nghĩ nó hấp dẫn hay mốt hay duyên dáng? Họ có cảm thấy tự hào khi tương tác với nó? Mặc dù sự lôi cuốn không thể định nghĩa ngắn gọn như sự tiện dụng, nó có cùng độ quan trọng đối với sự thành công của một sản phẩm bởi vì những hệ thống lôi cuốn mang lại sự thoải mái và nhu cầu sử dụng, các yếu tố làm tăng giá trị của chúng.

Màu sắc và giao diện

Màu sắc là cảm nhận khi ánh sáng có bước sóng giữa 360nm và 720nm đập vào mắt chúng ta và được hệ thống thị giác của chúng ta xử lí [3]. Mắt chúng ta có 3 loại tế bào màu sắc, mỗi loại nhạy nhất với bước sóng dài, vừa, và ngắn của ánh sáng. Chúng là tế bào hình côn L, M và S. Hình 1 cho thấy ánh sáng bước sóng 530nm tác động tế bào M nhất, L ít hơn chút và chỉ một ít S. Màu được cảm nhận sẽ là xanh lá cây.

Hình 1: Màu sắc đuợc cảm nhận nhờ 3 loại tế bào (theo [4]).

Trên màn hình máy tính màu sắc được định nghĩa bằng mô hình màu RGB (R: đỏ, G: xanh lá, B: xanh da trời). Ba màu này được gọi là màu cơ bản và ứng với các bước sóng tế bào L, M và S nhạy cảm nhất. Các màu cơ bản không thể được tạo bằng cách trộn các màu khác. Thay vì thế, bằng cách trộn các màu cơ bản, tất cả các màu khác được tạo ra. Mỗi điểm ảnh trên màn hình hiển thị màu được trộn bởi một nguồn ánh sáng đỏ, một nguồn xanh da trời và mộ nguồn xanh lá, các nguồn nằm gần nhau đến nỗi không thể phân biệt.

Tương phản màu sắc

Thường vật hoặc khu vực được tô màu trên giao diện không được hiển thị riêng biệt, mà nằm cạnh hoặc nằm chồng lên vật hoặc khu vực khác. Điều này tạo nên hiệu ứng tương phản. Nếu không đủ tương phản, chúng ta không phân biệt được các phần khác nhau trên màn hình. MS Word, Powerpoint, Excel, Outlook v.v. dựa trên nền trắng chữ đen là có lí do - độ tương phản mạnh nhất và do đó dễ đọc nhất.

Ngoài ra, tương phản màu sác có thể được dùng một cách có tính toán để thu hút sự chú ý về giác quan của người dùng đến phần tử giao diện quan trọng hoặc cần nhập dữ liệu.

Tương phản màu sắc còn hay được dùng để tăng sự lôi cuốn cho giao diện. Các nghiên cứu cho thấy màu ấm (ví dụ đỏ, vàng, cam) ưa được chọn để hiện trên nền màu lạnh (ví dụ xanh da trời, xanh lá, hồng) và ngược lại.

Hiệu ứng tương phản cũng có thể gây hại cho user experience. Dưới đây là hai ví dụ nổi bật. Nói chung, bất kì khu vực nào trong thị trường nhìn thấy được cũng có khuynh hướng trộn màu bù của nó vào khu vực nó tiếp giáp. Ví dụ, hình vuông màu xám trông có vẻ xanh lá khi bao quanh bởi màu đỏ, và trông có vẻ đỏ khi bao quanh bởi màu xanh lá. Hiệu ứng này gọi là tương phản đồng thời [4]. Trên giao diện, cùng một nút bấm thỉnh thoảng nhìn rất khác trên nền có màu khác nhau.

Một hiện tượng tương phản gây vấn đề nữa là quang sai màu sác [5]. Thấu kính, kể cả thấu kính trong mắt chúng ta, bẻ cong ánh sáng có những bước sóng khác nhau những lượng khác nhau. Hiệu ứng là ánh sáng có màu khác nhau không chiếu đến cùng một điểm trên võng mạc - hiệu ứng dễ nhận thấy nhất là kết hợp của màu tím và đỏ hay xanh da trời và đỏ (hình 2), bởi vì bước sóng của màu tím và xanh da trời nằm ở đầu kia trên dải quang phổ nhìn thấy được so với màu đỏ (hình 1).

Hình 2: Quang sai màu sắc.

Do đó, chữ trên hình 2 nhìn nhoè so với nền. Vì vậy, nên tránh tương phản đỏ và tím/xanh da trời trên giao diện. Tuy vậy, rất hay gặp tương phản đỏ-xanh da trời, có lẽ vì người thiết kế giao diện cố tránh kết hợp đỏ và xanh lá vì lí do khuyết tật màu sắc (xem phần khuyết tật màu ở dưới). Hình 3 liệt kê các kết hợp của màu nền và màu nằm trên mang lại tương phản tốt.

 

Màu nền

Black

White

Violet

Blue

Cyan

Green

Yellow

Red

Màu nằm trên

Black

 

good

 

 

good

good

good

 

White

good

 

good

good

 

 

 

good

Violet

 

good

 

 

 

 

good

 

Blue

 

good

 

 

good

good

good

 

Cyan

good

 

 

good

 

 

 

 

Green

good

 

 

good

 

 

 

 

Yellow

good

 

 

good

 

 

 

 

 

Red

 

good

 

 

good

 

good

 

Hình 3: Kết hợp màu mang lại tương phản tốt.

Khuyết tật màu

Khi nói mù màu người ta thường chỉ sự bất lực về cảm nhận một số màu. Gọi đây là khuyết tật màu thì thích hợp hơn, bởi trong đa số trường hợp không phải là người ta hoàn toàn không cảm nhận thấy màu nào đó, mà là cảm nhận sai [3]. Khuyết tật màu xảy ra khi một loại tế bào cảm nhận màu sắc nào đó bị thiếu hoặc bất thường. Bảng 1 liệt kê tỉ lệ khuyết tật màu do tế bào L, M, và S bị ảnh hưởng. 80 trong 1000 đàn ông và chỉ 4 trong 1000 phụ nữ bị khuyết tật màu nào đó. Vì đường cong của tế bào L và M nằm sát nhau (hình 1), hiệu ứng khuyết tật do tế bào L và M giống nhau. Khi có vấn đề với tế bào L hoặc M màu hiển thị phần lớn dựa trên tông xanh da trời và vàng, cặp màu bù đỏ-xanh lá cây không được cảm nhận chính xác.

Khuyết tật màu

Nguyên nhân

Thị giác màu

Mắc phải [%]

-

-

có thể nhìn thấy tất cả các màu

Đàn ông: 92.0
Phụ nữ: 99.6

Bị vấn đề cảm nhận màu đỏ & xanh lá

Tế bào L thiếu hoặc khuyết tật

- chủ yếu hoặc hoàn toàn chỉ thấy màu xanh da trời & vàng
- lẫn lộn màu đỏ & xanh lá

Đàn ông: 2.00
Phụ nữ: 0.04

 

Bị vấn đề cảm nhận màu đỏ & xanh lá

Tế bào M thiếu hoặc khuyết tật

như trên

Đàn ông: 6.00
Phụ nữ: 0.39

 

Bị vấn đề cảm nhận màu xanh da trời & vàng

Tế bào S thiếu hoặc khuyết tật

- chủ yếu hoặc hoàn toàn chỉ thấy màu đỏ & xanh lá
- lẫn lộn màu xanh da trời & vàng

Đàn ông: 0.004
Phụ nữ: 0.002


Mù màu hoàn toàn

Thiếu tế nào L, M, S

không nhìn thấy bất kì màu gì

Đàn ông: 0.003
Phụ nữ: 0.002

Báng 1: Khuyết tật màu và tỉ lệ mắc phải (theo [3]).

Khuyết tật màu do tế bào S có hiệu ứng là màu có màu đỏ và xah lá, cảm giác về cặp màu bù xanh da trời và vàng cũng bị ảnh hưởng. Tình trạng này cũng rất hiếm, chỉ ảnh hưởng 4 trên 100 000 đàn ông và 2 trên 100 000 phụ nữ. Cũng vậy với mù màu hoàn toàn: 3 trên 100 000 đàn ông và 2 trên 1000 000 phụ nữ không thể nhìn thấy màu sắc, do đó thị giác của họ không màu và chỉ dựa vào độ xám.

Theo dữ liệu ở bảng 1 người bị khuyết tật màu thường gặp vấn đề với màu đỏ và xanh lá. Xác suất khuyết tật khác đỏ-xanh lá rất thấp. Thực tế, xác suất một người lên cơn động kinh vì các phần tử giao diện nhấp nháy trên màn hình cao gấp 400 lần [6].

Câu hỏi là khuyết tật màu sắc gây vấn đề ở mức độ nào đến tính dễ dùng của sản phẩm. Câu trả lời là nó phụ thuộc bản chất của ứng dụng. Trong tất cả trường hợp màu sắc được dùng vì lí do thẩm mỹ như trên website của hầu hết công ty, tác động do vấn đề cảm nhận màu sắc gây ra thấp hơn so với khi màu sắc được dùng để chỉ trạng thái của hệ thống, ví dụ hệ thống điều khiển. Nói chung, không nên chỉ dựa vào màu khi muốn diễn tả thông tin quan trọng. Ví dụ, hiển thị trạng thái của hệ thống bằng đèn màu đỏ và xanh lá gây vấn đề cho người khuyết tật màu đỏ-xanh lá. Họ sẽ khó khăn khi phân biệt đèn màu đỏ và xanh lá. Do đó, nên thêm nhãn "OK" hoặc "Chú ý" hoặc hình tượng (dấu check hoặc dấu chấm cảm) kèm cùng với màu.

Màu sắc và sự lôi cuốn thị giác

Màu rất thích hợp để tạo sự lôi cuốn thị giác cho sản phẩm phần mềm. Chúng ta thường gán ý nghĩa với màu sắc (bảng 2). Những màu này có thể được dùng để nâng cao thiết kế cho giao diện. Ví dụ, dùng màu trắng làm nền cho phần mềm y tế là phù hợp, vì nó mang ý nghĩa sạch sẽ. Ví dụ khác là trang web của Liên Hiệp Quốc [7], nó có màu xanh, mang ý nghĩa hoà bình.

 

Màu

Ý nghĩa

Red

hot, stop, aggression, error, warning, fire, daring

Violet

female, cute, cotton-candy

Orange

warm, autumnal

Yellow

happy, sunny, cheerful, slow down, caution

Brown

warm, fall, dirty

Green

envy, jealousy, a novice, spring-like (fertile), pastoral

Blue

peaceful, water, male

Purple

Royal

White

virginal, clean, innocent, cold

Black

evil, ghostly, death, fear, mourning

Gray

overcast, gloom, old age

Bảng 2: Ý nghĩa màu sắc theo quan niệm phương Tây (theo [8]).

Chú ý là màu ở bảng 2 gắn liền với văn hoá phương Tây. Bởi vì ý nghĩa của màu phụ thuộc vào văn hoá, chúng có thể có ý nghĩa khá khác ở các vùng khác trên trái đất. Ví dụ màu đỏ mang ý nghĩa "Cái chết" ở Ai Cập, "Sự sống" và "Sáng tạo" ở Ấn Độ và "Hạnh phúc" ở Việt Nam [9].

Giao diện cuốn hút thường có tập hợp màu hài hoà cân đối. Tạo tập hợp màu là kĩ năng không dễ vì phải tính đến nhiều yếu tố, bao gồm cả giá trị của nhãn hiệu của công ty và ý nghĩa tương ứng của màu sắc (xem bảng ý nghĩa màu sắc ở trên). Vấn đề cá nhân cũng cần được tính toán cẩn thận (xem hiệu ứng tương phản ở trên).

Có vài cách để tạo bộ màu đơn giản mà không cần designer đồ hoạ giúp [10]. Ví dụ, bạn có thể chọn ba màu liền nhau bất kì trên bánh xe 12 màu. Hoặc bạn có thể chọn màu đối diện nhau trên bánh xe màu (màu bù nhau). Tuy vậy nhớ là màu đỏ và xanh lá không hợp với người khuyết tật màu đỏ-xanh lá (xem phần khuyết tật màu trên). Ngoài ra, có thể dùng sẵn màu ở trang kuler của Adobe.

Hình 4.  Bộ màu dựa trên các màu tương tự nhau (theo [10).

Giới thiệu tác giả

Tiến sĩ Tobias Komischke đã có hơn 10 năm kinh nghiệm làm việc trong lãnh vực user experience. Ông là thẩm định viên nhiều tạp chí kĩ thuật và hội thảo và đã xuất bản hơn 30 bài viết. Ở Infragistics ông chịu trách nhiệm mảng user experience trong (phát triển) và ngoài (đào tạo & tư vấn) công ty.

Tham khảo

  • [1] ISO 9241-110 (2006). Ergonomics of human-system interaction – Part 110: Dialog principles. Berlin: Beuth.
  • [2] Nielsen, J. ().Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods. New York City: John Wiley & Sons.
  • [3] Wyszecki, G, Stiles, W.S. (1982). Color science. 2nd edition. New York City: John Wiley & Sons.
  • [4] Gleitman, H. (1991). Psychology. 3rd Edition. New York City: W.W. Norton & Company.
  • [5] Kaiser, P. K., Boynton, R. M. (1996). Human Color Vision. Washington, D.C.: Optical Society of America.
  • [6] Fisher R.S., Harding G., Erba G., Barkley G.L., Wilkins A. (2005) Photic- and pattern-induced seizures: a review for the Epilepsy Foundation of America Working Group Epilepsia, 46 (9), 1426-1441.
  • [7] http://www.un.org/
  • [8] Waters, C. (1996). Web Concept & Design. Indianapolis: New Riders Publishing.
  • [9] Russo, P., & Boor, S. (1993). How fluent is your interface? Designing for international users. INTERCHI '93. 342-347.
  • [10] Williams, R. (2008). The Non-Designer”s Design Book. 3rd Edition. New York City: Peachpit Press.

Nguồn: Colors and the UI

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Ngoc Dao

102 bài viết.
283 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
62 8
Làm thế nào để nâng cấp trang web mà không làm gián đoạn dịch vụ? Đây là câu hỏi phỏng vấn các công ty lớn thường hỏi khi bạn xin vào vị trí làm lậ...
Ngoc Dao viết hơn 2 năm trước
62 8
White
40 1
Bài viết này giải thích sự khác khác nhau giữa hai ngành khoa học máy tính (computer science) và kĩ thuật phần mềm (software engineering), hi vọng ...
Ngoc Dao viết hơn 2 năm trước
40 1
White
34 1
Nếu là team leader, giám đốc công ty hay tướng chỉ huy quân đội, vấn đề cơ bản bạn gặp phải là “hướng mọi người đi theo con đường bạn chỉ ra”. Thử...
Ngoc Dao viết hơn 2 năm trước
34 1
Bài viết liên quan
White
1 2
Kĩ thuật chụp ảnh ra đời từ khoảng 2 thế kỉ trước. Nếu để ý, sẽ thấy tất cả ảnh giấy tồn tại được cho đến ngày nay đều là ảnh sepia. Sepia là từ ti...
Ngoc Dao viết hơn 2 năm trước
1 2
White
0 1
Có ảnh mẫu của một vật thể (ví dụ: ô tô), và ảnh thật chứa một vài vật thể ấy (ví dụ: các ô tô trong bãi đỗ xe). Làm sao để nhận dạng được vị trí c...
Ngoc Dao viết hơn 2 năm trước
0 1
White
10 5
(Ảnh) Ai đã tìm hiểu qua về xử lí ảnh (ví dụ dùng thư viện nổi nhất hiện nay là (Link)), chắc đều từng bắt gặp tấm ảnh này. Tuy nhiên có lẽ không ...
Ngoc Dao viết hơn 2 năm trước
10 5
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
102 bài viết.
283 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!