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

Ti sao 3 màu cơ bn li là RGB ch không phi màu nào khác? Tiến sĩ Tobias Komischke s tr li câu hi này và nhng vn câu hi rt thiết thc vi lp 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 (trình spam còn kém xa bạn phananhvu
). Ở 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: