Sử dụng màu sắc tương phản trong thiết kế website để tăng trải nghiệm người dùng

Đôi khi màu sắc đẹp bắt mắt không đồng nghĩa với việc đem lại trải nghiệm tốt cho người dùng. Vậy làm sao để có thể kết hợp màu sắc hợp lý cho website đẹp và tăng trải nghiệm người dùng? Website chứa nhiều thông tin, hình ảnh và người dùng thường không muốn xem toàn bộ mà chỉ quan tâm đến thứ mình cần. Hiểu được người dùng thường cần gì, muốn gì để làm nổi bật khu vực đó lên bằng cách sử dụng màu sắc tương phản là một cách làm hiệu quả để giúp tăng trải nghiệm của người dùng. Hãy cùng Ngôi Sao Số tìm hiểu xem đâu là những khu vực được người dùng thao tác nhiều, cần được làm nổi bật và sử dụng màu tương phản như thể nào cho hợp lý nhé!

Những khu vực trên web nên được làm nổi bật

1. Thanh điều hướng nổi bật để dễ dàng tìm kiếm thông tin

Một trong những thách thức đối với những nhà phát triển website trong việc tăng trải nghiệm người dùng khi xây dựng trang web, đó là làm sao để người dùng tìm kiếm nội dung một cách nhanh chóng và hiệu quả nhất. Điều này đặc biệt chính xác đối với những website tin tức, báo online - nơi nội dung được cập nhật liên tục và nhanh chóng. Nếu người dùng truy cập vào những website tin tức và không thể nhanh chóng tiếp cận cái mình cần thì họ sẽ rời website và như vậy tỷ lệ thoát sẽ tăng lên. Và chắc chắn đây không phải là kết quả được mong đợi!

Để người dùng nhanh chóng tìm thấy mục cần tìm thì bạn cần phải tập trung vào tính hiệu quả của thanh điều hướng bằng cách:

• Cấu trúc các chuyên mục rõ ràng, dễ hiểu
• Màu sắc của thanh điều hướng và các chuyên mục phải nổi bật và dễ nhìn thấy để click

Để hiểu rõ hơn, hãy cùng Ngôi Sao Số tham khảo xem một số website tin tức lớn ở Việt Nam làm thanh điều hướng như thế nào nhé:

VnExpress

CafeBiz

2. Nổi bật các nút kêu gọi hành động - CTA (Call To Action)

Các nút kêu gọi hành động thường thấy trên các website là:

• Gọi ngay
• Mua ngay
• Book ngay
• Đặt hàng ngay
• Đăng nhập ngay
• Click vào đây
• Tham gia ngay
• ...

Các nút kêu gọi hành động sẽ hướng khách hàng đến một hành động cụ thể. Khách hàng click vào nút kêu gọi hành động càng nhiều nghĩa là tương tác nhiều và website đang hoạt động có hiệu quả. Vì vậy, thông thường các nút kêu gọi hành động CTA (Call To Action) trên website thường được làm nổi bật hẳn với màu sắc rực rỡ và tương phản cao với những phần còn lại của website.

3. Các giảm giá, khuyến mãi, flash sales...

Các chương trình khuyến mãi, giảm giá, flash sales luôn có sức hút lớn đối với khách hàng, nên hiển nhiên là cần được làm nổi bật. Ngoài ra, những chương trình này cũng không thường xuyên nên khi xuất hiện với màu sắc nổi bật sẽ lại càng thu hút sự chú ý của khách hàng hơn.

Khi các giảm giá, khuyến mãi, flash sales đã gây được ấn tượng với người dùng thì sẽ dễ dẫn đến hành vi tiếp theo của người dùng là click vào các nút kêu gọi hành động.

Cách sử dụng màu tương phản để tăng trải nghiệm người dùng trên web

1. Màu sắc tuân thủ các quy định của bộ nhận diện thương hiệu

Đối với những thương hiệu có các quy định rõ ràng và nghiêm ngặt về sử dụng màu sắc trên website thì bạn chỉ nên sử dụng các màu sắc được phép sử dụng theo quy định. Như vậy, ưu điểm là phạm vi màu sẽ được thu hẹp lại và việc chọn màu cũng trở nên đơn giản và dễ dàng hơn. Tuy nhiên, nhược điểm là nhiều khi màu sắc được phép sử dụng ít nên có những trường hợp dù muốn dùng màu khác cho nổi bật hơn nhưng bạn cũng không được phép dùng.

Có một số bộ nhận diện thương hiệu linh động hơn khi cho phép bạn sử dụng dải màu rộng miễn là cùng palette màu với các màu chính là ok. Trong trường hợp này thì bạn được tự do hơn trong việc dùng màu.

2. Màu sắc sử dụng đảm bảo quy tắc phân cấp thị giác

Phân cấp thị giác là sử dụng sự tương phản giữa các yếu tố thiết kế như tương phản màu sắc, tương phản kích thước để phân cấp các thành tố chính phụ nhằm giúp người xem dễ dàng tiếp nhận và ghi nhớ thông tin muốn truyền tải.

Khi sử dụng màu sắc tương phản trên website thì bạn cần đảm bảo quy tắc phân cấp thị giác. Quy tắc phân cấp thị giác là phần chính cần được làm nổi bật hơn phần phụ và phần chính phụ có thể tương phản với nhau nhưng không được chọi nhau. Ví dụ: để tạo độ tương phản cao bạn có thể sử dụng màu lạnh (màu lục, lam) cùng với màu nóng (đỏ, cam, vàng...) nhưng nếu dùng không khéo màu sắc sẽ chọi nhau gây khó chịu.

3. Tất cả cùng nổi bật nghĩa là không có cái gì nổi bật cả

Nhiều website thiết kế tham chi tiết, muốn cái gì cũng nổi bật. Nhưng cái gì cũng nổi bật nghĩa là không có cái gì nổi bật cả và sẽ dễ khiến người dùng cảm thấy khó chịu và căng thẳng khi truy cập vào wesite. Để điều này không xảy ra, bạn cần phân cấp rõ ràng đâu là phần chính, đâu là phần phụ trên website, sau đó áp dụng quy tắc phân cấp thị giác vào thiết kế để đảm bảo website rõ ràng, dễ tìm kiếm thông tin và thân thiện với người dùng.