Blog thumbnail

5 cách để sử dụng ảnh hiệu quả cho website

mustread by khuedinh 27/05/2019

1/ Sử dụng hình ảnh liên quan đến nội dụng cần thể hiện

Sử dụng hình ảnh chỉ với mục đích trang trí hiếm khi mang lại trải nghiệm tốt cho người dùng. Trong hầu hết trường hợp, người đọc sẽ bỏ qua các hình ảnh đó, trong các trường hợp khác, chúng sẽ khiến người đọc mất tập trung vào nội dung.

Ví dụ, nhiều website doanh nghiệp sử dụng hình ảnh về các tòa nhà nhằm tạo cảm giác hiện đại, chắc chắn. Tuy thế, những hình ảnh này không mang lại bất kỳ thông tin nào về doanh nghiệp đến người xem.

Đừng sử dụng hình ảnh chỉ vì muốn website bạn đẹp hơn. Hãy cân nhắc đến thông điệp mà bạn muốn truyền tải đến người đọc.

Khi sử dụng hình ảnh, phải cân nhắc đến thông điệp mà bạn muốn truyền tải đến người đọc. Bên cạnh đó, cũng cần chú ý tới yếu tố cảm xúc. Ví dụ, khi người dùng nhận được một thông báo lỗi trong quá trình điền form, sử dụng một khuôn mặt cười bên cạnh thông báo hiển nhiên là không phù hợp rồi.

2/ Sử dụng hình ảnh có điểm nhấn

Khi sử dụng một hình ảnh không có điểm nhấn bạn sẽ gây khó khăn cho người đọc trong việc hiểu thông điệp truyền tải.

buffterfly
Hình gốc
Tạo điểm nhấn rõ ràng hơn cho hình ảnh bằng cách cách crop bớt hình ảnh

Có một mẹo nhỏ để bạn tạo điểm nhấn cho hình ảnh, đó là giảm bớt đối tượng được thể hiện trong hình. Lý tưởng nhất là chỉ thể hiện một đối tượng trên hình, khi đó hình ảnh sẽ dễ dàng tạo sự chú ý nơi người đọc.

3/ Sử dụng hình ảnh chất lượng cao

Không sử dụng hình ảnh với kích thước không phù hợp. Ví dụ như việc sử dụng hình ảnh kích thước nhỏ hơn qui định sẽ làm việc hiển thị kém tối ưu.

Bên trái: sử dụng hình ảnh quá nhỏ làm hình ảnh bị vỡ khi hiển thị trên website. Bên phải là hình ảnh có kích cỡ phù hợp.

Một vấn đề khác cần phải chú ý là tránh kéo giãn tỉ lệ hình ảnh một cách tùy tiện như hình bên đưới.

4/ Chú ý đến "accessibility" cho hình ảnh

Khi đặt chữ lên hình ảnh, cần chú ý đủ độ tương phản để đảm bảo người dùng có thể đọc được dễ dàng.

Chữ và hình ảnh thiếu độ tương phản gây nên hiện tượng khó đọc.

W3C khuyến nghị về tỉ lệ tương phản giữa chữ và hình:
- Tỉ lệ tương phản giữa chữ nhỏ và background bên dưới: 4.5:1
- Tỉ lệ tương phản giữa chữ lớn (14pt - bold, 18pt - regular) với backgroun bên dưới: 3:1

Công cụ để bạn có thể kiểm tra độ tương phản cho thiết kế của mình: https://uxpro.cc/toolbox/accessibility/color-accessibility/

5/ Cẩn trọng với ảnh stock

Ảnh stock tiết kiệm thời gian rất nhiều cho các website designer, tuy nhiên, cũng như các công cụ khác, nếu bị lạm dụng có thể gây ảnh hưởng không tốt đến trải nghiệm của người đọc.

Một hình ảnh stock về team chăm sóc khách hàng

Ví dụ, nếu trên website của bạn có section về đội ngũ và bạn cần các hình chụp thực tế. Thay vì sử dụng một hình ảnh stock ngẫu nhiên, hãy lấy hình ảnh thực tế của team bạn để sử dụng. Đừng lo lắng khi hình ảnh của team bạn chưa đủ chuyên nghiệp, người dùng sẽ biết đâu là hình ảnh thực tế và đâu là ảnh stock. Sự chân thực tạo nên hiệu quả tốt hơn nhiều so với những hình ảnh stock giả tạo.

Bài gốc trên Medium

LIÊN HỆ VỚI TELOS NHÉ?