THIẾT KẾ DASHBOARD TRONG BUSINESS INTELLIGENCE

NHẬN THỨC THỊ GIÁC (Visual perception) Giới hạn của bộ nhớ ngắn hạn Trí nhớ của chúng ta có 3 loại khác nhau: iconic memory, short-term memory, và long-term memory. Short-term memory có một nhược điểm chính là nó chỉ lưu giữa từ 3-9 phần thông tin hình ảnh một lúc. Khi dung tích bộ nhớ ngắn hạn bị đầy, thông tin đã được lưu trong bộ nhớ ngắn hạn sẽ được đẩy sang bộ nhớ dài hạn hoặc sẽ bị loại bỏ hoàn toàn ra khỏi bộ nhớ ngắn hạn để thông tin mới được lưu trữ vào. Chúng ta cần phải tận dụng đặc điểm của bộ nhớ ngắn hạn bằng cách thiết kế dashboard sao cho các thông tin liên quan đến nhau được nhóm thành một nhóm để bộ nhớ ngắn hạn có thể ghi nhớ toàn bộ các thông tin này với nhau. Do đó khi dashboard sử dụng nhiều slide hoặc phải kéo lên hoặc kéo xuống, người đọc sẽ quên ngay thông tin ở phần trước hoặc phần trên vì chúng đã bị đẩy ra khỏi bộ nhớ ngắn hạn trước đó.

THIẾT KẾ DASHBOARD TRONG BI

NHẬN THỨC THỊ GIÁC (Visual perception)

Chúng ta cần phải tận dụng đặc điểm của bộ nhớ ngắn hạn bằng cách thiết kếdashboard sao cho các thông tin liên quan đến nhau được nhóm thành một nhóm để

bộ nhớ ngắn hạn có thể ghi nhớ toàn bộ các thông tin này với nhau Do đó khidashboard sử dụng nhiều slide hoặc phải kéo lên hoặc kéo xuống, người đọc sẽquên ngay thông tin ở phần trước hoặc phần trên vì chúng đã bị đẩy ra khỏi bộ nhớngắn hạn trước đó

Preattentive attributes

Quá trình preattentive là một giai đoạn đầu của visual perception xảy ra rấtnhanh dưới mức con người có thể ý thức Sau quá trình preattentive thì quá trìnhattentive tiếp theo và vì vậy chậm hơn Trong quá trình preattentive một số đặc tínhcủa visual sẽ được nhận thức nhanh hơn so với các đặc điểm khác Ví dụ:

Với dãy số này chúng ta khó có thể tìm bao nhiêu số 5 được Dãy số này cóđặc tính hình dạng số không phải là một đặc tính mà preattentive process có thể xử

lý tốt

Với dãy số này chúng ta sử dụng đặc tính color tô màu đen cho các số năm.Não chúng ta nhanh chóng nhận thức được đặc điểm này trong quá trìnhpreattentive process

Theo Colin Ware có 4 nhóm preattentive attributes bao gồm: color, position,form và motion Trong 4 nhóm này chúng ta có các đặc tính sau:

Luminance chính là lượng màu đen so với màu trắng trong cùng một màu.

Saturation và luminance tạo thành intensity (cường độ) của màu sắc

Chúng ta nhận thức màu sắc không chỉ đơn thuần dựa trên ba đặc tính trên mà cònphải dựa vào context của màu sắc nữa

Trong hình trên các hình vuông đều có luminance là 50% black, tuy nhiên vì nềncủa chúng có sự thay đổi luminance từ trắng sang đen, nên chúng ta nhận thức cácmàu sắc của các ô vuông này khác nhau

Trong hình trên chữ Text có màu đỏ, khi đặt ở trên nền đỏ và nền xanh cho hiệuquả khác nhau

Phương hướng còn thường được sử dụng trong line chart

Khi nhìn vào line chart trên chúng ta nhận thấy rõ sale của Europ tăng cao hơn sovới US.

Length and width

Length và width thường được dùng trong trực quan hóa dữ liệu Length chỉkhoảng cách chiều ngang, chiều dọc hay chéo của cột hoặc thanh còn width chỉ độdày của thanh hoặc cột Length thường được dùng trong biểu đồ thanh và cột

Width của line thường ít được dùng hơn length Người ta thường dùng linewidth để vẽ Sankey chart Sankey chart dùng để mô tả sự thay đổi số lượng củamột biến định tính trước và sau một giai đoạn nào đó

Nhìn vào hình này có thể thấy đa số sinh viên humanities đăng kí mônhumanities lúc ban đầu nhưng chỉ có một số ít tốt nghiệp môn humanities Tuynhiên nhìn vào Sankey chart chúng ta khó có thể so sánh được tỷ lệ tốt nghiệp giữacác chuyên ngành với nhau Ngoài ra khi có nhiều nhóm thì Sankey chart sẽ nhìnrất rối khó diễn giải Do đó chúng ta cần cẩn thận khi sử dụng loại chart này đểtrực quan hóa dữ liệu.

Tuy nhiên size cũng có thể dùng trong các tiêu đề, bảng, icon, đồ thị phónglớn để có thể nhấn mạnh đến tầm quan trọng của các objects đó

Shape

Shape chính là hình dạng của một hình thể trong trực quan hóa dữ liệu.thường hình dạng rất hữu ích khi chúng ta tăng sự chú ý của người nhìn về cácnhóm vật thể khác nhau

Hình a chỉ là các hình tròn màu sắc khác nhau khiến mắt người đọc khó phân biệt

ba nhóm màu khác nhau Hình b dùng hình dạng khác nhau nên mắt dễ dàng táchbiệt các vật thể thành 3 nhóm Hình c vừa dùng màu vừa dùng hình dạng để minhhọa ba nhóm khác nhau Trong hình c, người đọc phải tận dụng não bộ nhiều hơnmới có thể dễ dàng phân biệt được 3 nhóm Như vậy có thể thấy chúng ta cần thậntrọng khi muốn kết hợp hai hay nhiều đặc tính trực quan hóa vào đồ thị/biểu đồ

Added marks

Added marks được sử dụng có ích nhất trong dashboard dưới dạng các iconsđơn giản xuất hiện kế bên dữ liệu nhằm thu hút sự quan tâm Bất kì icon đơn giảnnào (như vòng tròn, hình vuông, dấu sao hoặc x) khi đặt kế thông tin đều có mụcđích để nhấn mạnh đến thông tin đó

Enclosure

Sự bao vây nói rằng các đối tượng được bao bọc về mặt vật lý với nhauđược coi là thuộc cùng một nhóm

Trong hình này chúng ta nhận thấy các nhóm đã được sắp xếp theoproximity Tuy nhiên khi muốn biểu diễn theo một biến thứ ba ví dụ trình độ họcvấn, thì phân nhóm sẽ lại khác Các hình chữ nhật là dùng để gom những vật thể cócùng trình độ học vấn lại với nhau

Position

Vị trí không gian đề cập đến vị trí của vật thể trong không gian xác định.Biểu đồ phân tán là một trong những dạng biểu đồ sử dụng đặc điểm vị trí khônggian để trình diễn số liệu

Đối với các loại đồ thị, biểu đồ nên trình bày dưới dạng 2D bởi vì 2D làdạng vị trí không gian mà con người có thể nhận thức dễ dàng và chính xác nhất.Movement

Con người rất dễ bị thu hút khi phát hiện chuyển động Có hai đặc tính củachuyển động là flicker và motion có thể được sử dụng trong trực quan hóa dữ liệu.flicker chỉ hiệu ứng nhấp nháy sao cho thu hút sự chú ý của người đọc trong khimotion liên quan đến việc dịch chuyển của dữ liệu và có thể dùng để trình diễn sựthay đổi theo thời gian chẳng hạn của dữ liệu

Flickering có thể gây phiền hà cho người nhìn khi trình diễn trongdashboard, do đó cần phải tránh sử dụng Tuy nhiên trong một vài trường hợp đặc

biệt có thể sử dụng flickering chẳng hạn như dashboard được cập nhật real timehoặc khi dashboard dùng để theo dõi hoạt động liên tục với các dấu hiệu cảnh bảongay lập tức.

Lựa chọn loại preattentive attributes cho biến định lượng và biến định tính

Không phải tất cả các đặc tính thị giác đều áp dụng cho cả biến định lượnghoặc định tính Chỉ có một số đặc tính áp dụng cho biến định lượng và một số ápdụng cho biến định tính mà thôi

Giới hạn của sự phân biệt nhận thức

Đối với mỗi preattentive attributes,ngoại trừ line length và 2-D location,chúng ta không nên để vượt quá 5 phân biệt trong attributes đó Ví dụ khi chúng tadùng hue thì không nên dùng quá 5 màu để trình bày dữ liệu Khi dùng shapeschúng ta cũng không nên dùng quá 5 hình dạng khác nhau Ngoài ra chúng ta cònphải dùng shape đơn giản không được quá phức tạp

Lựa chọn màu sắc sống động, chi tiết một cách hợp lý

Có nhiều màu sắc dịu nhẹ nhưng cũng có nhiều màu sắc nặng, nên khi trìnhbày dashboard chúng ta cần phải lưu ý chọn màu sắc cho các phần dashboard.Những phần nào cần thu hút sự chú ý của người xem thì dùng màu nặng, màu sặc

sỡ, còn những phần bình thường thì nên dùng màu dịu nhẹ Sau đây là bảng màu

chuẩn và bảng màu nhấn mạnh cần lưu ý để khi sử dụng dashboard chúng ta ápdụng một cách hợp lý.

NGUYÊN TẮC GESTALT CỦA NHẬN THỨC THỊ GIÁC

Gestalt có nghĩa là pattern Các nhà nghiên cứu Gestalt cho rằng con người

sẽ tổ chức những gì họ thấy theo một cách đặc biệt Họ tạo ra các nguyên tắcGestalt giúp mô tả nhận thức trực quan của con người Các nguyên tắc này baogồm: Proximity, Closure, Similarity, Continuity, Enclosure, Connection

Similarity

Con người có đặc tính khi nhìn thấy những vật thể có cùng đặc điểm nào đóthường gán ghép chúng vào cùng một nhóm Do đó khi trình bày trực quan hóa dữliệu chúng ta cũng có thể tận dụng đặc tính này khi muốn trình bày các dữ liệuthuộc vào các nhóm khác nhau nhằm làm nổi bật sự khác biệt giữa chúng

Nhìn vào hình này chúng ta có thể thấy biểu đồ sử dụng đặc tính similarity

và màu sắc (bên trái) để nhóm các đối tượng lại với nhau Bên phải sử dụng đặctính shape và similarity để xếp các vật thể thành 3 nhóm

Ví dụ khi chúng ta muốn trình bày thu nhập thì chúng ta có thể chọn các giátrị thu nhập là màu xanh Khi đó chúng ta trình bày thu nhập ở bất kì nơi nào trongdashboard thì người đọc cũng nhận ra thu nhập vì nó đã được chọn là màu xanh.Proximity

Đặc tính proximity cũng dựa trên nguyên tắc con người thường xem các vậtthể về mặt vật lý gần nhau như xếp vào cùng nhóm Nguyên tắc proximity được sửdụng nhiều trong các biểu đồ trực quan hóa như biểu đồ phân tán

Nguyên tắc proximity còn được sử dụng để hướng người đọc cách scan dữliệu trong dashboard Nếu chúng ta đặt dữ liệu gầu nhau theo chiều ngang thìngười đọc có xu hướng đọc dữ liệu từ trái qua phải theo từng hàng Nếu chúng tađặt dữ liệu theo chiều dọc thì người đọc sẽ đọc dữ liệu từ trên xuống dưới theochiều dọc

Hình này cho thấy đúng quy tắc nêu trên Khi nhìn hình bên trái chúng ta có

xu hướng đọc từ trái qua phải còn nhìn hình bên phải chúng ta có xu hướng đọc từtrên xuống dưới

Enclosure

Nguyên tắc này sẽ giúp nhóm các đối tượng vào cùng một nhóm dựa vàocác đường viền xung quanh nhóm đối tượng đó

Hình trên trình bày hai biểu đồ phân tán các chấm tròn y như nhau, tuy nhiên

vì các chấm tròn được bao bọc bởi hình chữ nhật bên trái và hình thoi bên phải nênchúng ta tập trung vào các chấm tròn trong hình chữ nhật và hình thoi nhiều hơn

Nguyên tắc này thường được dùng trong các đường viền, đổ nền màu, hoặc

đổ bóng trong bảng hoặc đồ thị để làm nổi bật các nhóm đối tượng chúng ta muốnnhấn mạnh đến

Continuity

We perceive objects as belonging together, as part of a single whole, if they are

appear to form a continuation of one another In Figure 4‐16, for instance, we tend

lines as a continuation of one another, more as a dashed line than separate lines

Things that are aligned with one another appear to belong to the same group In the

is obvious which items are division names and which are department names, based

alignment Divisions, departments, and headcounts are clearly grouped, without

lines to delineate them Even though the division and department columns overlap

between, their distinct alignment alone makes them easy to distinguish This same

to tie together separate sections of data on a dashboard

Connection

Nguyên tắc connection cũng giúp chúng ta có thể nhóm các vật thể được kết nốivới nhau thành cùng một nhóm Một dạng biểu đồ thường sử dụng nguyên tắc nàychính là biểu đồ time series

Trong hình này chúng ta thấy có hai đặc tính là màu và shape nhưng chúng ta cũngkhó có thể kết nối chúng lại với nhau để xem xu hướng của các nhóm này như thếnào.

Với hình này đã rõ ràng rằng các điểm actual và forecast được tách biệt rõ ràng khiđược nối với nhau Qua đó chúng ta cũng có thể thấy được xu hướng của chúng

KỸ THUẬT DATA-INK RATIO

Một trong những ý tưởng có ích nhất trong việc tạo bảng và chart hiệu quảtrong trực quan hóa dữ liệu chính là khái niệm data-ink ratio, được đưa ra lần đầu

tiên bởi Edward R Tufte vào năm 2001 trong cuốn sách The Visual Display of Quantitative Information Data-ink ratio đo lường tỷ lệ “data-ink” so với tổng số

lượng ink được sử dụng trong một bảng hay một chart

Data-ink

is the ink used in a table or chart that is necessary to convey the meaning of the

audience Non-data-ink is ink used in a table or chart that serves no useful purpose

in conveying the data to the audience

Let us consider the case of Gossamer Industries, a firm that produces fine silkclothing products Gossamer is interested in tracking the sales of one of its mostpopular

items, a particular style of women’s scarf Table 3.1 and Figure 3.3 provideexamples

of a table and chart with low data-ink ratios used to display sales of this style ofwomen’s scarf The data used in this table and figure represent product sales by

for axes Axes should always be labeled in a chart unless both the meaning and

measure are obvious

Table 3.2 shows a modified table in which all grid lines have been deleted exceptfor

those around the title of the table Deleting the grid lines in Table 3.1 increases thedata-ink

ratio because a larger proportion of the ink in the table is used to convey theinformation

(the actual numbers) Similarly, deleting the unnecessary horizontal lines in Figure3.4

increases the data-ink ratio Note that deleting these horizontal lines and removing(or

reducing the size of) the markers at each data point can make it more difficult todetermine

the exact values plotted in the chart However, as we discuss later, a simple chart is

most effective way of presenting data when the audience needs to know exact

these cases, it is better to use a table

In many cases, white space in a table or a chart can improve readability Thisprinciple

is similar to the idea of increasing the data-ink ratio Consider Table 3.2 and Figure3.4

Removing the unnecessary lines has increased the “white space,” making it easier

Edward R Tufte introduced a concept in his 1983 classic The Visual Display ofQuantitative Information that he calls the "data‐ink ratio." When quantitative data

is displayed in printed form, some of the ink thatappears on the page presents data, and some presents visual content that is not data

(a.k.a non‐data).Figure 5‐2 shows two displays of quantitative data: one in the form of a table andthe other in the form of a graph Take a minute to examine them and try todifferentiate the data ink from the non‐data ink

There isn't much non‐data ink in either the table or the graph, because they were

keep it to a minimum Figure 5‐3 shows the same table and graph, this time with

as red

Tufte defines the data‐ink ratio in the following way:

A large share of ink on a graphic should present data‐information, the ink changing

as the data change Data‐ink is the non‐erasable core of a graphic, the non‐ redundant ink arranged in response to variation in the numbers represented Then,

= data‐ink / total ink used to print the graphic

= proportion of a graphic's ink devoted to the non‐redundant display of data‐ information

= 1.0 ‐ proportion of a graphic that can be erased without loss of data‐ information.1

He then applies it as a principle of design: "Maximize the data‐ink ratio, within

graphic requires a reason And nearly always that reason should be that the ink

This principle applies perfectly to the design of dashboards, with one simple

are always displayed on computer screens, I've changed the word "ink" to "pixels."

dashboard, non‐data pixels any pixels that are not used to display data, excluding

should be reduced to a reasonable minimum Take a moment to examine the

the next page and try to identify the non‐data pixels that can be eliminated

meaningful

The non‐data pixels that you could easily eliminate without any loss of meaninginclude:

 The third dimension of depth on all the pie charts and on the bars in the upper bargraph

 The decoration in the background of the upper bar graph

 The color gradients in the backgrounds of the graphs, which vary from white at

Some of the data pixels on this dashboard could also be removed without a loss of

Reducing the non‐data pixels to a reasonable minimum is a key objective that

effective dashboard design Much of visual dashboard design revolves around two

2 Enhance the data pixels

You start by reducing the non‐data content as much as possible, and then proceed

content with as much clarity and meaning as possible, working to make the most

above the rest (Figure 5‐5)

5.2.1 Reduce the NonData Pixels

The goal of reducing the non‐data pixels can be broken down into two sequentialsteps:

1 Eliminate all unnecessary non‐data pixels

2 De‐emphasize and regularize the non‐data pixels that remain

Let's take a look at how to accomplish these two goals

5.2.1.1 Eliminate all unnecessary nondata pixels

Dashboard design is usually an iterative process You begin by mocking up a

you improve it through a series of redesigns, each followed by a fresh evaluation

redesign, until you have it right As you get better and better at this, the number of

required will decrease, partly because you won't be including unnecessary non‐

No matter how far you advance, however, the step of looking for unnecessary

The next few figures provide examples of non‐data pixels that often find their

Graphics that serve merely as decoration (Figure 5‐6)

Variations in color that don't encode any meaning (Figure 5‐7)

Borders that are used to delineate sections of data when the simple use of

work as well (Figure 5‐8)

Fill colors that are used to delineate sections of content such as a title, the data

the background of a table, or an entire section of data, when a neutral background

(Figure 5‐9)

Gradients of fill color when a solid color would work as well (Figure 5‐10)

Grid lines in graphs (Figure 5‐11)

Grid lines in tables, which divide the data into individual cells or divide either the

when white space alone would do the job as well (Figure 5‐12)

Fill colors in the alternating rows of a table to delineate them when white space

(Figure 5‐13)

Complete borders around the data region of a graph when one horizontal and one

sufficiently define the space (Figure 5‐14)

3D in graphs when the third dimension doesn't correspond to actual data (Figure5‐15)

Visual components or attributes of a display medium that serve no purpose but to

real physical object or more ornate (Figure 5‐16

This is by no means a comprehensive list, but it does cover much of the non‐data

run across on dashboards When you find that you've included useless non‐data

of the above examples, simply remove them

5.2.1.2 Deemphasize and regularize the nondata pixels that remain

Not all non‐data pixels can be eliminated without losing something useful Some

organization, or legibility of the dashboard For instance, when data is tightly

necessary to use lines or fill colors to delineate one section from another, rather

these cases, rather than eliminating these useful non‐data pixels, you should

they don't attract attention Focus should always be placed on the information

the dashboard, which should be almost invisible The trick is to de‐emphasize

making them just visible enough to do their job, but no more.Beginning on the next page are a few examples of non‐data pixels that are either

useful I've shown each of these examples in two ways: 1) a version that is too

illustrates what you should avoid; and 2) a version that is just visible enough to do

objective

Axis lines that are used to define the data region of a graph (Figure 5‐17)

Lines, borders, or fill colors that are used to delineate sections of data when white

(Figure 5‐18)

Grid lines in graphs when necessary to read the graph effectively (Figure 5‐19)

Grid lines and/or fill colors in tables when white space alone cannot adequately

rows (Figure 5‐20)

Fill colors in the alternating rows of a table when white space alone cannot

(Figure 5‐21)

These examples demonstrate how the visual prominence of non‐data pixels can

by using light, lowly saturated colors, such as light grays, and minimal stroke

Non‐data pixels also can be pushed further from notice by regularizing them (that

consistent) If the axis lines of all graphs look the same say, if you use the same

they appear no one graph is likely to catch a viewer's eyes more than the others.

unnoticed, even when they are expressed in muted tones Don't vary the color,

data pixels that serve the same purpose in the dashboard.Another category of content often found on dashboards that can be considered

which supports navigation and data selection Buttons and selection boxes are

navigate to another screen or to choose the data that appears on the dashboard (for

place them in an out‐of‐the‐way location such as the bottom‐right corner of the

visually, so they won't compete with the data for attention Notice how much of the

22 is dedicated to buttons and data selection controls, which I've highlighted with

elements take up far more valuable and prominent real estate on the dashboard than

is required

Similarly, while it may sometimes be necessary to include on the dashboard

important support information, any nonessential text just takes up space that could

attracts attention away from the data, and clutters the dashboard's appearance It

place most instructional or descriptive content either on a separate screen that can

needed or, if possible, in the form of pop‐ups that can be accessed when necessary

mouse Notice how much prime real estate is wasted on the dashboard in Figure

instructions that viewers will probably only need the first time they use thedashboard

5.2.2 Enhance the Data Pixels

Just like the reductionof non‐data pixels, the process of enhancing the data pixels

 Highlight the most important data pixels that remain.Let's examine these two tasks

When you're designing a dashboard, it is tempting to throw everything you think

anyone could everpossibly want onto it Those of us who have worked in the field of business

grown weary of being asked for more (always more!), so the thought of heading

folks everything up front can be appealing On a dashboard, however, where

this is a costly mistake I'm not suggesting that you force people to get by with less

but rather that you honor the consideration of what they really need for the task athand as a strict

criterion for the selection of data By removing any information that isn't really

automatically increase focus on the information that remains.Elimination of unnecessary data pixels is achieved not only through the complete

data but also by condensing data through the use of summaries and exceptions, so

that is displayed doesn't exceed what's necessary For most applications, it would

what is essential for thetask at hand Often, the state of something need not be presented unless there is a

opportunity that requires action If you care about staff expenses only when

defined threshold, why clutter the dashboard with a complete list of all staff

Beware of taking this useful practice of managing by exception too far, however I

recently from an executive of a software company that specializes in dashboards

definition of a dashboard, and in the course of this discussion he stated that a

his ideal dashboard would display a single traffic signal to indicate if everything

needed attention The idea was that he didn't want to be bothered with unnecessary

well, and when something was wrong, he could drill down from that single alert to

detailed dashboards or reports to determine exactly what was wrong before taking

found myself enamored with this idea, attracted to its Spartan simplicity but only

moment my mind became haunted by visions of executives trying to run their

completely out of touch unless thresholds built into the software determined that

informed Anyone who has a job to do needs to keep up with a basic picture of

all is well Too often leaders whether in business, academia, religion, or politics

agendas, relying entirely on others to tell them what they think they should know,

dust of some destructive event settles that they knew far too little to leadeffectively

Before departing from the topic of summaries and exceptions, I want to focus in on

summarizing technique that I find useful on occasion This technique involves

When it is useful to display historical context for a measure, such as the last 12

often information that is more distant from the present is less important than recent

there is no reason to display the full range of data at the same level of detail For

to display the current month as daily measures, the preceding 12 months as

preceding 4 years as annual measures This display would consist of three sections,

different intervals of time, with longer intervals and more summarization used for

distant from the present Graphic displays can be designed to present time series in

illustrated in Figure 5‐24

Varying interest can correspond to distances in space as well as time For instance,

interested in data from his immediate geographical region, and gradually less

increasingly distant geographical areas.1

5.2.2.2 Highlight the most important data pixels that remain

All the information that finds its way onto a dashboard should be important, but

equal: some data is more important than other data The most important

 Information that is only important at the momentWhen you consider the entire collection of information that belongs on a

prioritize it according to what is usually of greatest interest to viewers For

serves the needs of a corporation's executives might display several categories of

personnel data On the whole, however, the executives usually care about some key

others