Trực quan hóa dữ liệu đã nhanh chóng trở thành một tiêu chuẩn phổ biến trên web. Nó được sử dụng trong một loạt các ngành, từ thông tin kinh doanh đến báo chí, để giúp chúng tôi hiểu và truyền đạt thông tin nội hàm trong dữ liệu.

Bộ não của chúng ta về cơ bản là xử lý thông tin thông qua hình ảnh trực quan, giúp chúng ta dễ dàng hiểu dữ liệu được mô phỏng bằng biểu đồ và đồ thị hơn dữ liệu được liệt kê trong bảng và bảng tính. Hình ảnh hóa dữ liệu sẽ tận dụng những điểm mạnh này của hệ thống thị giác của con người nhằm hiển thị dữ liệu giúp dễ dàng tiếp thu và hiểu được. Tài khoản người dùng sẽ được tích hợp những tính năng về xử lý hình ảnh nhằm nâng cao và tạo sự thuận lợi cho việc trải nghiệm của người dùng về dữ liệu.

Với rất nhiều công cụ và dàn ý hiện có sẵn để xây dựng những đồ họa này, đã đến lúc quay lại vấn đề cơ bản. Điều gì làm cho dữ liệu mô phỏng có hiệu quả? Chúng ta nên làm theo những nguyên tắc hướng dẫn nào khi thiết kế với dữ liệu?

Các phương pháp sau đây sẽ giúp bạn nắm rõ.

1. Thiết kế cho một khán giả cụ thể

Mô phỏng hóa được sử dụng để tiết lộ các mẫu mã, cung cấp ngữ cảnh và mô tả các mối quan hệ trong dữ liệu. Mặc dù nhà thiết kế không có ảnh hưởng đến các mẫu và mối quan hệ trong một tập hợp dữ liệu nhất định, cô ấy có thể chọn lượng dữ liệu cần hiển thị và bối cảnh cung cấp, dựa trên nhu cầu của khán giả. Sau tất cả, cũng giống như với bất kỳ sản phẩm nào khác, việc hiển thị là vô nghĩa nếu người xem không thể sử dụng nó.

Trực quan hóa cho người chưa có kinh nghiệm nên được cấu trúc một cách rõ ràng và phải hấp dẫn. Các bảng mô phòng hóa nên diễn giải bằng câu chữ về cái mà người xem cần nên hiểu từ  bảng dữ liệu.

Đối với những khán giả là chuyên gia thì việc thiết kế bảng mô phỏng hóa nên hướng tới người đọc nhằm khơi gợi sự ham muốn khám phá nơi họ với tiêu chí phải chi tiết, dự liệu đa dạng nhưng rõ ràng.

2. Sử dụng tính năng tương tác để tạo thuận lợi cho người xem muốn khám phá

Dưới đây là một con số nghiên cứu nghiêm túc: chỉ 10-15% khách truy cập tương tác trên trang web New York Times thực sự nhấp nút. Nhóm đồ họa New York Times tạo ra một số tác phẩm tốt nhất trong lĩnh vực của mình nhưng gần như không ai tương tác với họ!

Chúng ta không thể dựa vào thiết kế trực quan tương tác để xây dựng hiểu biết về dự liệu. Dữ liệu chính không được ẩn đằng sau các yếu tố tương tác và thay vào đó sẽ có sẵn mà không cần tương tác.

Tuy nhiên, tương tác nào là tuyệt vời cho phép tích hợp dữ liệu bổ sung (có thể bị loại trừ), để cho phép người xem quan tâm khám phá tập dữ liệu sâu hơn. Nathan Yau của Flowing data theo phong cách tương tác trực quan này.

Ngoài ra, tương tác có thể được sử dụng như một cái móc để thu hút sự chú ý giúp khán giả của bạn tự đầu tư vào dự án trước khi họ có thể hướng theo một chiều khác. Hãy cùng xem một vài điều thú vị về chữ viết tay và văn hóa từ Quartz. Đoạn phim bắt đầu bằng cách yêu cầu độc giả chỉ vẽ một vòng tròn, trước khi tiếp tục phác thảo một  hình vẽ về văn hóa với một số hình ảnh đơn giản nhưng hiệu quả.

Tương tự, The Pudding gần đây đã phát hành một hình ảnh tương tác để dạy độc giả về nghịch lý sinh nhật. Trong khi hầu hết các nhà thống kê không chắc có thể tìm ra nghịch lý sinh nhật, một vấn đề tiêu chuẩn trong lý thuyết xác suất, khá khô và không trực quan, việc hiển thị này làm cho nó có vẻ hết sức hấp dẫn. Cách người sáng tạo kết hợp các tương tác của những người dùng gần đây làm cho toàn bộ trải nghiệm trở nên tương đối dễ dàng.

Cả hai ví dụ tương tác này đều hoạt động vì chúng cho phép người xem tham gia vào dữ liệu mà không cần sự tương tác nào để hiểu.

3. Hãy dùng những hình ảnh nổi bật để thu hút sự chú ý của người xem

Hình ảnh nổi bật là  đặc tính làm cho một yếu tố thị giác bị thu hút so với môi trường xung quanh của nó, là một công cụ mạnh mẽ trong hiển thị dữ liệu. Nó có thể được sử dụng để hướng  sự chú ý của người dùng đến thông tin quan trọng nhất cho việc hiển thị, để giúp ngăn chặn tình trạng quá tải thông tin. Bằng cách sử dụng hình ảnh nổi bật để làm nổi bật một số chi tiết và loại bỏ những yếu tố phục, vì thế chúng tôi có thể làm cho thiết kế của mình rõ ràng hơn và dễ hiểu hơn.

Một vài thay đổi đối với hình ảnh đến từ màu sắc, kích thước là chủ yếu. Đó là chìa khóa của chúng tôi để kiểm soát tính trực quan của hình ảnh.

Các lược đồ màu là chìa khóa để mô phỏng dữ liệu một cách tuyệt vời bằng màu sắc. Chúng ta có thể sử dụng các màu ấm, có độ bão hòa cao để làm nổi bật các điểm dữ liệu quan trọng và áp dụng các màu sắc mát mẻ, bão hòa để đẩy thông tin ít quan trọng hơn vào nền.

Các yếu tố lớn đòi hỏi sự chú ý nhiều hơn các yếu tố nhỏ, vì vậy hãy tăng quy mô các yếu tố mà bạn muốn người xem đọc trước, đồng thời giảm tỷ lệ văn bản và các yếu tố ít thích hợp hơn.

4. Sử dụng độ dài và định vị để mã hóa thông tin mang tính định lượng và sử dụng màu sắc để mã hóa thông tin phân loại

Sản phẩm nổi tiếng của Cleveland và McGill về trực quan hóa thông tin đã được tìm hiểu xem tính hiệu quả của mã hóa trực quan tới đâu (tức là việc tạo liên kết giữa dữ liệu và những thuộc tính của hình ảnh). Trong những phát hiện của họ, họ xếp hạng các loại mã hóa trực quan khác nhau theo cách chúng ta nhận thức chính xác chúng, dưới đây là danh sách (đã đơn giản hóa):

Vị trí dọc theo thang điểm chung

Chiều dài

Góc

Khu vực

Màu

Điều này cho thấy thiết kế trực quan hóa dữ liệu là lựa chọn đầu tiên của chúng tôi để hiển thị thông tin định lượng, vì thế ta nên mã hóa dữ liệu theo vị trí (như được thấy trong biểu đồ phân tán và biểu đồ thanh dạng cổ điển). Trái ngược với mã hóa dựa trên góc (như biểu đồ hình tròn) hoặc mã hóa dựa trên khu vực (như biểu đồ bong bóng), mã hóa dựa trên vị trí giúp người xem thực hiện so sánh chính xác hơn trong thời gian ít hơn.

Tuy nhiên, đó không phải là để nói rằng tất cả các hình ảnh phải là biểu đồ thanh hoặc ô phân tán. Bạn nên lưu ý những nguyên tắc cơ bản này để tìm ra những cách mới và thú vị cho trực quan hóa dữ liệu.

Những gì tôi thực sự muốn nhấn mạnh ở đây là màu sắc không nên được sử dụng để mã hóa thông tin định lượng, và thay vào đó có thể được sử dụng để mã hóa thông tin phân loại. Tức là, chúng ta có thể sử dụng màu sắc để cho thấy rằng các dữ liệu khác nhau thuộc về các loại khác nhau.

mã-hóa

5. Hãy tạo ra các yếu tố mang tính cầu trúc như Tick Marks và Axes Clear một cách kín đáo

Cho dù bạn có ủng hộ cách tiếp cận của Edward Tufte với chủ nghĩa tối giản trong thiết kế hay không đi nữa thì hãy tự mình làm một việc là loại bỏ sự lộn xộn của hình ảnh khỏi đồ thị của bạn. Làm cho dữ liệu của bạn tỏa sáng bằng cách tạo ra sự tương phản trực quan giữa các yếu tố dữ liệu và các yếu tố phi dữ liệu, như Nadieh Bremer đã thực hiện trong việc trực quan hóa về thời gian sinh tại Mỹ, và cô ấy đã đoạt giải.

Loại bỏ bất kỳ yếu tố cấu trúc nào (như phong nền, đường kẻ và đường viền) không làm rõ được dữ liệu. Giảm bớt các yếu tố cấu trúc cơ bản (như trục, lưới và dấu tick) nếu không dữ liệu của bạn sẽ bớt đi sự chú ý. Lưới kiểu dáng sẽ có màu xám nhạt với mức tối đa là 0,5 pt và các trục kiểu màu đen hoặc xám có mức tối đa là 1 pt.

6. Đánh dấu nhãn dữ liệu

Mỗi phần tử trực quan mã hóa dữ liệu và dự liệu này sẽ được gắn nhãn để người xem hiểu nội dung của nó. Đơn giản, phải không?

Sai rồi. Quá nhiều nhà thiết kế dựa vào lời chú thích để nói với độc giả những biểu tượng hoặc màu sắc đại diện cho chuỗi dữ liệu nào trong biểu đồ của họ. Chú thích đối với các nhà thiết kế thì quá dễ, nhưng đối với người đọc thì lại khó. Họ buộc độc giả lướt qua lại giữa chú thích và dữ liệu, vô tình tạo sự không thoải mái cho độc giả.

Một giải pháp thay thế tốt hơn là gắn nhãn trực tiếp cho chuỗi dữ liệu trên biểu đồ. Nó thường là một thách thức, nhưng bạn là nhà thiết kế mà. Chẳng phải công việc của bạn là làm cho người đọc thông hiểu sao. Trong ví dụ dưới đây, Nathan Yau đã tạo ra một phác thảo để tránh sử dụng chú thích bằng cách tạo ra một màn hình với đa tương tác nhỏ với nhiều nhãn trực tiếp.

7. Ứng dụng dạng tin nhắn và phân cấp trực quan để tạo ra dòng dữ liệu kiểu tường thuật

Các hình ảnh trực quan hay sẽ giúp truyền tải những câu chuyện hấp dẫn. Những câu chuyện này nổi lên từ các xu hướng, mối tương quan hoặc các dòng chú ngắn trong dữ liệu và được củng cố bởi các yếu tố dữ liệu ngoại vi. Những câu chuyện này biến dữ liệu thô thành thông tin hữu ích.

Về mặt giá trị , có vẻ như việc trực quan hóa dữ liệu là tất cả về các con số, nhưng một một báo cáo toàn dữ liệu tuyệt vời không thể những ngôn từ. Kiểu nhắn tin cùng với hệ thống phân cấp trực quan rõ ràng, có thể được sử dụng để dẫn dắt người đọc tiếp cận dữ liệu từng bước một.

Ví dụ về tiêu đề của một hình ảnh nên bắt đầu một cách rõ ràng chính là chìa khóa để chỉ rõ nội hàm của bài viết hay báo cáo . Chú thích nhỏ nằm rải rác giữa các dữ liệu có thể hỗ trợ cho câu chuyện đó bằng cách thu hút sự chú ý đến mục chính.

8. Phủ nội dung thông tin trực tiếp lên biểu đồ

Như tôi  đề cập, chúng ta có thể sử dụng chú thích trong phần trực quan hóa hình ảnh để giúp tạo luồng dữ liệu kiểu tường thuật. Đôi khi, chúng ta có thể thêm các yếu tố đồ họa để làm cho những chú thích đó thậm chí còn có ý nghĩa hơn – để kết nối thông tin đó trực tiếp tới dữ liệu.

Lấy ví dụ này từ Susie Lu. Lớp phủ “Summer Blockbusters” và “Oscar Season” sẽ áp dụng cho các đỉnh và phần trũng trên đồ thị một cách ngẫu nhiên. Chúng giúp người xem hiểu được tầm quan trọng của dữ liệu theo cách trực tiếp hơn chú thích hoặc chú thích.

9. Thiết kế cho trải nghiệm di động

Hình ảnh tĩnh, thường được xuất bản ở định dạng hình ảnh bitmap như JPG và PNG là một thách thức rõ ràng đối với người xem trên thiết bị di động. Vẻ đẹp của nhiều hình ảnh hóa dữ liệu nằm trong dữ liệu trực quan ( trong các điểm dữ liệu nhỏ và mã hóa tinh tế) và nhiều chi tiết trong số này bị mất trên màn hình nhỏ ở định dạng tĩnh.

Một ví dụ điềm hình là về một tác phẩm phức tạp tuyệt đẹp của Accurat studio được trao giải Nobel, có kích thước in ấn tuyệt vời và hiển thị  độ phân giải cao trên màn hình nhưng lại gây khó đọc trên thiết bị di động.

Nhằm tăng trải nghiệm trên di động thì nên sử dụng một loạt các thư viện của JavaScript như D3.js hoặc Highchart hoặc tạo nhiều biến thể cho cùng một hình ảnh trực quan đối với từng loại hình như in ấn , màn hình máy tính, thiết bi di động.

10. Cân bằng sự phức tạp với yếu tố rõ ràng để tăng cường khả năng hiểu cho người đọc

Tất cả các phương pháp hay nhất mà tôi đã trình bày vào ngày hôm nay đều sẽ lu mờ vì một điều: tìm sự cân bằng giữa sự phức tạp và rõ ràng để phù hợp với nhu cầu của khán giả của bạn.

Luôn hấp dẫn để tạo ra một hình ảnh trực quan đầy chi tiết, tinh tế, tò mò, nhưng kiểu đó hiếm khi là cách tiếp cận thích hợp nhất. Hãy thận trọng với thiết kế của bạn sao cho lượng kiến thức truyền đến với của khán giả là đủ bằng việc sắp xếp dữ liệu sao cho hợp lý .

Nguồn : https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/

HỖ TRƠ TƯ VẤN MIỄN PHÍ
(thiết kế logo, bộ nhận diện thương hiệu, thiết kế bao bì, thiết kế menu và các ấn phẩm marketing khác như brochure, catalog, hồ sơ năng lực, Facebook banner…)
DP EXPRESS
International graphic design
Email: thietke.dpexpress@gmail.com
Hotline: 0124 619 3909
Facebook: https://www.facebook.com/thietkedpexpress
Lầu 2, 110 Nguyễn Chí Thanh, Quận 10, TP.HCM