Bí quyết chọn bảng màu hoàn hảo cho UI

Một trong những vấn đề cơ bản và muôn thuở của nhiều nhà thiết kế UI (giao diện người dùng) chính là: Chọn bảng màu (color scheme) sáng hay tối? Lựa chọn nào cũng chứa nhiều thách thức, ý tưởng trái chiều khiến ta phải cân nhắc để cho ra sản phẩm tốt đến người dùng.

Trong phạm vi bài viết này, chúng tôi sẽ chia sẻ vài "bí kíp" giúp nhà thiết kế không phải quá "đau đầu" trong việc chọn bảng màu phù hợp cho giao diện.

Các yếu tố ảnh hưởng đến việc lựa chọn bảng màu

Sự thật, không có một sự lựa chọn nào phù hợp cho tất cả. Giải pháp đưa ra phần lớn phụ thuộc vào nhiều yếu tố bao hàm khía cạnh người dùng, mục đích kinh doanh, điều kiện thị trường và xu hướng thiết kế hiện tại.

1. Tính dễ đọc và rõ ràng

Cả hai yếu tố này đều liên quan trực tiếp đến việc nhận diện nội dung được trình bày trong văn bản. Tính dễ đọc được định nghĩa là người đọc có thể dễ dàng đọc từng từ, từng câu và từng đoạn văn bản. Còn tính rõ ràng được đo lường bằng mức độ nhanh chóng và trực quan của người dùng có thể phân biệt từng chữ cái trong một phông chữ cụ thể.

Những đặc tính này người thiết kế nên chú trọng một cách cẩn thận, đặc biệt đối với giao diện chứa nhiều văn bản. Trong nhiều yếu tố liên quan khác nhau, cách chọn bảng màu nào phù hợp với giao diện đóng vai trò vô cùng quan trọng cho việc nhận diện văn bản một cách hiệu quả. Ví dụ như, những chữ màu đen trên tông nền trắng hoặc sáng sẽ to hơn khi chữ màu trắng trên tông nền đen. Chữ khó đọc dẫn đến trải nghiệm người đọc kém: Người dùng không thể tìm được dữ liệu mình cần, cho dù dữ liệu có hữu ích đến đâu nhưng khó đọc, thì người dùng sẽ dễ "bỏ cuộc" hay thậm chí bỏ qua thông tin quan trọng.

Nếu như vậy thì có nghĩa giao diện với nền sáng sẽ dễ đọc hơn? Không hẳn.

Jacob Nielsen, một trong những bậc thầy nổi tiếng về thiết kế giao diện người dùng nói rằng: "Sử dụng các màu có độ tương phản cao giữa chữ và nền. Độ rõ ràng tối ưu nhất là chữ đen nền trắng (positive text). Chữ trắng nền đen (negative text) cũng tốt. Mặc dù sự tương phản ngang nhau, nhưng chữ trắng nền đen sẽ khiến tốc độ người đọc chậm hơn. Sự rõ ràng trong cách phối màu sẽ khiến cho bất kỳ văn bản trên nền trắng dễ đọc hơn là nền đen thuần tuý."

Vì vậy, chọn bảng màu nào cũng đều dễ đọc nếu người thiết kế nghiên cứu kỹ lưỡng tính đặc thù của từng văn bản trên nhiều phông nền khác nhau và cẩn thận khi lựa chọn phông chữ phù hợp.

Một vài nghiên cứu khoa học của thập niên 1980 chỉ ra rằng khối lượng văn bản nhiều trên nền sáng dường như là lựa chọn hiệu quả đối với đa số người dùng. Đó cũng là cách quảng cáo đang hoạt động, D. Bauer và C.R. Cavonius chia sẻ khám phá của mình trên bài luận "Improving the legibility of visual display units through contrast reversal" (1980). Đặc biệt hơn, họ còn phát hiện những người tham gia sẽ đọc văn bản chính xác hơn 26% khi nó là chữ đen trên nền trắng.

Tại sao lại như vậy? Jason Harrison đến từ Đại học British Columbia giải thích hiện tượng này. Những người mắc chứng loạn thị (theo số liệu thống kế nhiều nguồn tỷ lệ này chiếm đến 50% dân số) cảm thấy khó khăn khi nhận diện chữ trắng nền đen hơn chữ đen nền trắng. Một phần của việc này cũng liên quan đến mức độ ánh sáng. Với màn hình sáng (nền trắng) tròng đen sẽ khép nhỏ lại làm giảm đi hiệu ứng "biến dạng" thấu kính. Với màn hình tối (nền đen) tròng đen sẽ mở ra để tiếp nhận ánh sáng nhiều hơn đồng thời làm biến dạng thấu kính tạo ra nhiều điểm mờ ở mắt. Dựa trên phát hiện này, nếu giao diện của bạn là văn bản chứa nhiều chữ thì nền trắng sẽ khiến người đọc cảm thấy thân thiện hơn.

2. Yếu tố tiếp cận

Yếu tố tiếp cận được định nghĩa là khả năng giao diện web hay giao diện di động có thể tiếp cận người dùng càng nhiều càng tốt và cung cấp đầy đủ chức năng bất kể trên nền tảng nào. Vì vậy, quyết định "dùng hoặc không dùng" không chỉ dựa vào khả năng vật lý mà còn chủ yếu dựa vào nhu cầu và sở thích người dùng. Bảng màu được nhắc đến là yếu tố hàng đầu ảnh hưởng đến khía cạnh này. Việc lựa chọn màu palette và những cách phối màu khác, người thiết kế cần hiểu rõ người dùng theo từng độ tuổi, nhu cầu đặc biệt, hoặc bất lợi để xác định chọn lựa màu cho màu nền và bố cục. Và khi đó, nghiên cứu dữ liệu người dùng trở nên vô cùng hữu ích cho người thiết kế UX hiểu rõ hơn khách hàng mục tiêu.

3. Yếu tố rõ ràng

Được định nghĩa là khả năng nhìn thấy và phân biệt được tất cả chi tiết chủ đạo trên màn hình hoặc giấy. Đầu tiên nó đề cập đến sự đơn giản và tính trực giác của việc điều hướng: Bố cục rõ ràng và dễ hiểu cho việc tìm kiếm thông tin, người dùng không mất quá nhiều thời gian để tìm thứ mà họ cần. Nếu yếu tố này không được kiểm thử cẩn thận, nó sẽ dẫn tới việc rối loạn phân cấp thị giác và biến màn hình thành một đống hỗn tạp. Yếu tố tương phản đóng vai trò chủ đạo ở đây và bảng màu trở thành vai trò nền tảng. Để kiểm tra, người thiết kế sẽ xem giao diện đã đủ gọn gàng và đủ độ tương phản hay chưa. Đồng thời cũng đừng quên thủ thuật "kinh điển" là "hiệu ứng mờ", là khi bạn nhìn vào màn hình hoặc trang web ở chế độ mờ (blurred mode) và có thể thấy rõ và tiếp cận dễ dàng tất cả những điểm quan trọng.

4. Độ phản hồi

Độ phản hồi của giao diện nghĩa là người dùng có thể sử dụng đầy đủ các chức năng của nó trên bất kỳ các thiết bị nào họ sử dụng. Không chỉ trông lôi cuốn và đẹp mắt trên màn hình độ phân giải cao, mà khi chuyển sang màn hình độ phân giải thấp nó vẫn mang lại trải nghiệm đầy đủ cho người dùng. Do đó, bạn sẽ thấy một vài bảng màu nhìn sẽ rất đẹp ở bước thiết kế nhưng dần dà vẻ đẹp sẽ phai nhạt mỗi ngày tuỳ theo môi trường mà nó ứng dụng vào. Vì bảng màu có ảnh hưởng trực tiếp đến màu sắc, hình dáng và nhận diện văn bản, nên nó phải được kiểm tra trên nhiều thiết bị đa dạng trước khi đưa đến quyết định cuối cùng.

5. Môi trường

Giao diện web và mobile là hai giao diện điển hình thường được sử dụng trong môi trường. Đơn cử, việc sử dụng liên tục dưới ánh sáng tự nhiên, trên một nền tối đúng nghĩa có thể tạo ra hiệu ứng phản chiếu, đặc biệt là trên màn hình gương, loại màn hình thường dùng cho máy tính bảng và smartphones. Ngược lại, ở điều kiện môi trường xấu, nền tối trên màn hình sẽ làm giảm ánh sáng tạo ra trải nghiệm xấu cho việc điều hướng và độ dễ đọc. Vì vậy, vấn đề phối màu, tương phản và sắc thái là những yếu tố nhà thiết kế cần chú trọng.

Điều cần làm khi lựa chọn bảng màu

Với những yếu tố được đề cập phía trên, chúng tôi xin chia sẻ vài điều cơ bản cho nhà thiết kế trong việc chọn lựa bảng màu cho giao diện web lẫn mobile.

Mục đích của giao diện. Bạn sẽ chọn được bảng màu phù hợp hơn khi xác định được những điểm cốt lõi của tiện ích giao diện và khả năng giải quyết vấn đề. Nếu giao diện người dùng (UI) và định hướng văn bản(text-driven) như: Blog, nền tảng tin tức, e-reader…, nền trắng là một lựa chọn hiệu quả. Ánh sáng sẽ làm cho không gian màn hình thông thoáng và rộng rãi, người dùng sẽ dễ tập trung vào văn bản. Mặt khác, nếu giao diện là định hướng mĩ thuật(visually driven) và sử dụng hình nhiều hơn chữ, bảng màu khi đó sẽ là nền tối hoặc sáng là giải pháp tốt. Khi đó màu sắc của hình ảnh có chiều sâu hơn và bố cục tổng thể sẽ trở nên tinh tế và sang trọng.

Phân tích khách hàng mục tiêu. Định nghĩa và phân tích khách hàng mục tiêu là điều quan trọng hàng đầu mà mỗi nhà thiết kế nên làm. Biết được ai là người dùng tiềm năng của bạn và hiểu được điều họ muốn khi ghé thăm website hay ứng dụng (app) sẽ tạo được nền tảng tốt cho một giao diện dễ dùng, hữu ích. Đối tượng trung niên và người già sẽ thích giao diện với bảng màu sáng vì trực quan và dễ điều hướng. Người trẻ hơn thường tìm đến giao diện có nền tối. Còn teen và trẻ em thường bị thu hút bởi những giao diện tươi vui và bắt mắt. Sự lựa chọn màu sắc dĩ nhiên tuỳ thuộc vào chức năng và nội dung bên trong. Nhưng sở thích của khách hàng mục tiêu luôn là định hướng tốt.

Nghiên cứu đối thủ. Một khía cạnh khác bạn cũng nên để ý là sản phẩm của bạn sẽ không được thị trường chú ý. Nó phải chiến đấu với nhiều đối thủ cạnh tranh khác để giành được sự chú ý từ người dùng. Cho nên việc lựa chọn bảng màu đúng sẽ khiến ứng dụng hay website của bạn trở nên độc đáo và lấy được sự tương tác từ phía người dùng. Dành thời gian để tìm hiểu những sản phẩm liên quan trong cùng phân khúc giúp bạn tiết kiệm nhiều thời gian cho việc thiết kế.

Kiểm thử, kiểm thử, và kiểm thử. Những điều nói trên chung quy hướng đến một điều quan trọng: Màu sắc ảnh hưởng trực tiếp đến khả năng sử dụng và tính hấp dẫn của giao diện, nên mọi giải pháp thiết kế cần được kiểm thử nhiều bước, ở mọi độ phân giải, trên nhiều loại màn hình, và dưới những môi trường đa dạng. Nên nhớ rằng ấn tượng đầu tiên rất quan trọng với người dùng. Vì vậy quá trình kiểm thử sẽ giúp bạn nhận ra điểm mạnh và điểm yếu của bảng màu trước khi sản phẩm được ra mắt trên thị trường.

Các giải pháp thỏa hiệp

Sử dụng bảng màu phù hợp là điều tốt nhưng không phải lúc nào ta cũng cứng nhắc bám chặt vào nó. Nhà thiết kế UI giỏi đôi khi sẽ đưa ra vài giải pháp thoả hiệp cho người dùng tự quyết định.

1. Giao diện nền tối, tab màu trắng cho văn bản

Đây là xu hướng phổ biến của giao diện dựa trên bảng màu nền tối. Hướng tiếp cận này sẽ giải quyết được vấn đề thường hay tranh cãi: ứng dụng hộp (boxes) với màu nền sáng cho những blocks dữ liệu chính. Một trong những case thành công được ứng dụng hiệu quả là ứng dụng Watering Tracker được thiết kế bởi đội ngũ Tubik.

2. Trao người dùng quyền lựa chọn bảng màu

Một hướng tiếp cận khác là trao quyền cho người dùng lựa chọn. Ứng dụng của bạn sẽ có chế độ (mode) gợi ý cho người dùng bảng màu để chọn (như phần mềm Upper ở dưới đây). Việc trao quyền sẽ làm ứng dụng trở nên thân thiện hơn. Không chỉ là vấn đề dễ sử dụng và tính thẩm mỹ, nó còn mang tính cá nhân hoá cho người dùng.

idesign.vn - Người dịch: Bobby - Nguồn: Uxplanet.org

Xem thêm những bài liên quan khác:

Tâm lý học về hình dạng