Nguyên tắc Gestalt trong việc trình bày dữ liệu

Như bài trên chúng ta đã biết được nguyên nhân dẫn đến việc trình bày dữ liệu bị thất bại. Phần tiếp theo chúng ta sẽ thực hành thực tế Từng bước loại bỏ sự phức tạp trong trình bày dữ liệu bằng nguyên tắc Gestalt.

Nguyên tắc Gestalt về nhận thức thị giác

Nguyên tắc này nghiên cứu về cách con người nhận thức về cách sắp xếp của thế giới xung quanh họ. Đồng thời cách con người tương tác cũng như tạo nên các cách sắp xếp đều có thể kích thích thị giác.

Chúng ta sẽ đi sâu vào tìm hiểu từng nguyên lý.

Sự gần gũi

Chúng ta thường nhận định rằng các đối tượng gần nhau đều thuộc một nhóm. Nguyên tắc về sự gần gũi này được minh họa trong Hình 1.

Chúng ta thường nhận định có 3 nhóm dấu chấm khác nhau dựa trên sự gần nhau giữa chúng.

Hình 1 Nguyên tắc Gestalt về sự gần gũi

Chúng ta có thể áp dụng nguyên tắc này vào việc thiết kế biểu đồ. Ví dụ như hình 2, chỉ nhờ việc sắp xếp khoảng cách giữa các chấm mà thị giác của chúng ta phân biệt đường hình bên trái là hàng dọc (theo cột) và hình bên phải là hàng ngang (theo dòng).

Hình 2 Ví dụ về cách sắp xếp thành cột và dòng.

Sự tương đồng

Các đối tượng giống nhau về màu sắc, hình dạng, kích thước hay định hướng thường được nhận định là chung một nhóm. Ví dụ qua hình 3, chúng ta thấy rằng các chấm tròn màu xanh nhạt trong hình bên trái là một nhóm và các ô vuông trong hình bên phải là một nhóm.

Hình 3 Nguyên tắc Gestalt về sự tương đồng

Nguyên lý này hỗ trợ giúp thu hút khán giả chú ý vào một hướng nhất định của hàng hay biểu đồ của chúng ta. Ví dụ trong hình 4, sự tương đồng về màu sắc trở thành một gợi ý cho thị giác của chúng ta để nhìn theo hàng ngang (theo dòng) thay vì nhìn theo hàng dọc (theo cột). Việc này giúp giảm sự phụ thuộc của chúng ta vào các đường viền trong bảng biểu.

Hình 4 Ví dụ về cách sử dụng màu để định hướng.

Sự khoanh vùng

Chúng ta thường nghĩ các đối tượng được khoanh vùng là một nhóm. Dù không cần khoanh vùng một cách đặc biệt, chỉ cần một font nền khác biệt như hình 5 là đủ.

Hình 5 Nguyên tắc Gestalt về nguyên lý khoanh vùng 

Ngoài ra còn có thể áp dụng cách này vào việc phân cách về thị giác trong biểu đồ của chúng ta, việc thể hiện hàm ý trong dữ liệu trở nên đơn giản hơn rất nhiều. Ví dụ như hình 6.

Hình 6 Một ví dụ về nguyên lý bằng việc khoanh vùng phần dự đoán (Forecast)

Sự bao quát

Nguyên lý này nói về não bộ con người thích những thứ đơn giản và những thứ đã quen thuộc với chúng ta. Do đó con người thường gộp những đối tượng riêng biệt thành một nhóm mà bỏ qua chi tiết từng thành phần. Nói dễ hiểu hơn, như trong hình 7, các gạch nối đơn lẻ sẽ được chúng ta nhìn nhận là một hình tròn tổng thể trước khi xem xét kỹ các gạch nối đơn đó.

Hình 7 Nguyên tắc Gestalt về nguyên lý bao quát.

Dưới góc nhìn của nguyên lý này có thể thấy các ứng dụng thiết kế đồ thị hay có các cài đặt mặc định là các yếu tố như đường viền biểu đồ hay font nền (như excel) là không cần thiết. Chúng ta có thể bỏ nó đi mà các biểu đồ vẫn được hoàn thành. Đơn giản, dễ nhìn, dễ hiểu và không gây ức chế thị giác. Ví dụ hình 8 có thể thấy: các dữ liệu của chúng ta sẽ nổi bật hơn khi không dùng những yếu tố đó.

Hình 8 Ví dụ về việc loại bỏ các yếu tố thiết kế.

Sự liên tục

Nguyên lý này tương tự nguyên lý bao quát: khi nhìn nhận mọi việc, thị giác của chúng ta thường tìm kiếm sự đơn giản nhất và hình dung ra sự liên tục ngay cả khi chúng không phải là như vậy.

Ví dụ qua hình 9, đem các vật thể hình (1) chia tách chúng ra, mọi người có thể lầm tưởng là 2 vật thể đó sẽ giống hình (2), tuy nhiên cũng có thể như hình (3).

Hình 9 Nguyên tắc Gestalt về sự liên tục 

Chúng ta có thể áp dụng nguyên tắc này vào thiết kế biểu đồ, ở đây là việc bỏ đi trục tục trong hình 10. Thị giác chúng ta vẫn nhận ra các thanh ngang thẳng hàng do sự nhất quán của khoảng trắng giữa các nhãn ở bên trái và các thanh ở bên phải. Bằng cách áp dụng nguyên lý bao quát này đã giúp chúng ta loại bỏ các yếu tố thiết kế không cần thiết để làm nổi bật các dữ liệu quan trọng.

Hình 10 Biểu đồ không sử dụng trục tung.

Sự kết nối

Đây là nguyên lý Gestalt cuối cùng. Nguyên lý này phân tích ra rằng, chúng ta thường nhận định các đối tượng được kết nối với một đối tượng gần khác là một nhóm. Tính chất này mạnh mẽ hơn so với các tính chất về màu sắc, kích thước hay hình dạng của các đối tượng. Ví dụ như hình 11, thị giác của bạn chắc chắn sẽ thấy sự liên kết giữa các đối tượng trong hình khi được nối với nhau bằng một đường thẳng là một nhóm, thay vì tính chất tương đồng màu sắc, hình dáng hay kích thước của chúng. 

Tuy nhiên ở hình cuối cùng, sẽ có nhiều người cho rằng nguyên lý kết nối này không chặt chẽ bằng việc khoanh vùng ở 2 hình tròn bên phải.

Cho nên qua ví dụ này, chúng ta đã biết được cách tác động đến mối quan hệ giữa các nguyên lý để tạo ra một cách sắp xếp có thứ tự gợi ý cho thị giác của người xem. (Trong chương 4 tới, chúng ta sẽ tìm hiểu về thứ tự sắp xếp khi chúng ta phân tích các yếu tố thu hút sự chú ý).

Hình 11 Nguyên tắc Gestalt về sự kết nối.

Nguyên lý sự kết nối này rất thông dụng, nhất là trong các biểu đồ đường. Nó giúp dẫn dắt người xem thứ tự của dữ liệu (Hình 12).

Hình 12 Các đường thẳng liên kết các điểm

Sau khi tóm gọn các nguyên tắc Gestalt lại, chúng ta đã nhận thức được cách thức xử lý hình ảnh của thị giác con người. Từ đó bỏ đi các yếu tố không cần thiết cũng như đơn giản hóa quá trình phân tích, thể hiện dữ liệu qua hình ảnh. 

Vậy trong thực tiễn sẽ áp dụng như thế nào, cùng tìm hiểu tiếp qua các ví dụ cụ thể nhé.

Cần từng bước loại bỏ sự phức tạp

Khi chúng ta đã biết các nhân tố gây nên sự phức tạp cũng như sự cần thiết phải loại bỏ chúng khỏi biểu đồ, tiếp theo là cách để thực hiện. Cùng theo dõi ví dụ trực quan sau nhé.  

Tình huống: Giả sử bạn đang dẫn dắt một đội IT. Đội nhận được các nhận xét xuất hiện các sai sót về kỹ thuật từ các nhân viên trong công ty. Trong năm vừa qua, một vài nhân viên đã xin nghỉ và bạn quyết định không thuê thêm nhân sự vào lúc đó.

Nhưng bạn lại nghe gián tiếp biết được các nhân viên còn lại đang than vãn vì phải làm thêm việc. Cho nên bạn suy nghĩ về chuyện cần thêm nhân sự trong năm tiếp theo hay không. 

Do đó bạn cần biết năng suất của các nhân viên còn lại trong đội của bạn sau khi bị thiếu hụt nhân sự. Bạn phác thảo lại xu hướng hàng tháng giữa các vấn đề kỹ thuật nhận được và các vấn đề đã giải quyết được (Hình 13).

Kết luận bạn rút ra được: năng suất đội bị giảm sút do nhân lực không đáp ứng được và cần tuyển thêm nhân sự.

Hình 13 thể hiện biểu đồ gốc mà bạn phác thảo

Hãy phân tích tính phức tạp của biểu đồ trên bằng những kiến thức nguyên tắc Gestalt, cách sử dụng căn lề, khoảng trắng và tương phản mà bạn đã học được. Bạn nhận biết được bao nhiêu vấn đề và có thể thay đổi hay loại bỏ những gì.

Dễ dàng phân tích được 06 vấn đề mà biểu đồ mắc phải.

Loại bỏ phần viền của biểu đồ

Hầu hết các biểu đồ không cần thiết có đường viền (theo nguyên tắc Gestalt đã chứng minh về sự bao quát). Thay vào đó ta hãy sử dụng khoảng trắng để phân biệt giữa biểu đồ và các yếu tố khác.

Hình 14 Biểu đồ không có đường viền

Loại bỏ các đường phân cách (gridlines)

Nếu bạn cho rằng người xem cần thiết so sánh các dữ liệu với các số liệu trên trục tung và trục hoành thì hãy để được phân cách (gridlines). Và bạn chỉ nên dùng font màu xám nhạt. Đừng để chúng khiến người xem xao nhãng.

Tất nhiên nếu có thể thì nên loại bỏ chúng vì việc này sẽ giúp tăng tính tương phản giữa các dữ liệu và font nền.

Hình 15 Biểu đồ được loại bỏ đường phân cách 

Loại bỏ các điểm đánh dấu dữ liệu (data markers)

Chú ý: Bất cứ yếu tố nào thêm vào biểu đồ sẽ khiến người xem ảnh hưởng khi tiếp nhận thông tin. Hãy đơn giản hóa việc thể hiện dữ liệu bằng các đường thẳng.

Tuy nhiên không phải bạn không nên sử dụng các điểm đánh dấu dữ liệu mà hãy sử dụng chúng có mục đích, thay vì chỉ do đó là cài đặt mặc định của phần mềm.

Hình 16 Biểu đồ được loại bỏ các điểm đánh dấu dữ liệu

Đơn giản hóa các nhãn dán của 2 trục

Thường xuyên áp dụng nhất là thao tác loại bỏ các con số không (số 0) không cần thiết trên trục tung. Bởi vì chúng làm phức tạp hóa các con số. Hãy loại bỏ chúng để người xem dễ dàng phân tích dữ liệu. Chúng ta có thể viết tắt cho các tháng trong năm và đặt thành hàng ngang trên trục hoành.

Hình 17 Biểu đồ sau khi đơn giản hóa các nhãn dán 

Dán nhãn trực tiếp lên các dữ liệu

Sau khi bỏ các nhân tố gây cản trở quá trình tiếp nhận thông tin, người xem có thể theo dõi dữ liệu của từng đối tượng dễ dàng hơn. 

Hãy nhớ trách nhiệm của người thiết kế biểu đồ là xác định và giải quyết bất cứ vấn đề nào gây khó khăn cho người xem khi phân tích biểu đồ.

Trong tình huống này, ta áp dụng nguyên tắc Gestalt về sự gần gũi để đặt các trực tiếp nhãn dán lên từng đối tượng dữ liệu.

Hình 18 Biểu đồ sau khi được dán nhãn trực tiếp

Sử dụng màu sắc tương đồng

Sau nguyên tắc về sự gần gũi, tiếp theo áp dụng tiếp nguyên tắc Gestalt về sự tương đồng. Cụ thể ở biểu đồ này, chúng ta dùng cùng màu sắc cho cùng nhãn dãn của dữ liệu mà nó thể hiện.

Đây là gợi ý cho khán giả về mối quan hệ giữa 2 yếu tố trong biểu đồ.

Hình 19 Sử dụng màu sắc tương đồng

Sau 06 thao tác loại bỏ sự phức tạp và chỉnh sửa, chúng ta cùng xem 2 biểu đồ trước và sau nhé (Hình 20).

Hình 20  Hai biểu đồ trước và sau khi chỉnh sửa

Kết luận

Khi truyền đạt thông tin cho khán giả cũng chính là bạn đang yêu cầu họ phải tiếp nhận và xử lý thông tin. Mọi sự phức tạp về hình ảnh đều làm cản trở khán giả tiếp nhận truyền đạt từ bạn.

Nguyên tắc Gestalt về nhận thức thị giác hướng dẫn bạn xác định những nhân tố gây phức tạp và loại bỏ chúng.

Việc sắp xếp thẳng hàng, sử dụng khoảng trắng thông minh đều giảm sự mệt mỏi khi phân tích dữ liệu. Đồng thời bạn nên chú ý dùng sự tương phản để nhận thức và xử lý thông tin nhanh hơn.

Sự phức tạp là kẻ thù của bạn, hãy trục xuất nó khỏi bài trình bày của bạn. Thật tốt vì bạn đã học được cách xác định và loại bỏ nó.

Gitiho.com sẽ bật mí tiếp cho các bạn nhiều bí quyết xây dựng các loại biểu đồ để trình bày dữ liệu hoàn hảo hơn, hãy xem tiếp nhé:

Cách sử dụng Heatmap khi xây dựng bảng biểu.

Cách dùng Biểu đồ Điểm và hướng dẫn vẽ.

Ưu điểm của Biểu Đồ Đường và cách sử dụng.