Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2

Assignment description

Description of the second task

Assigned table

At First Glance

The question (tableheader) „At which bank / financial institution in Upper Austria you can get the most for your money?“ is quickly answered by taking a look at the table. The table is quite good readable and intuitive – the data is quite clearly arranged and the font-color of the most relevant data is different to the color of less relevant data.
Anyway, some small defects should be mentioned.

Critics & Suggestions For Table Improvement

Data Alignment

Numbers that represent quantitative values, as opposed to those that are merely identifiers (e.g., customer numbers), should always be aligned to the right.

[Few, 2004]

In the table view the values are not aligned to the right, but they are aligned at the center of the columns. The values in a particular column contain decimal digits of varying number. Hence, the data columns look a bit fringy at the left and right edge. For better reading efficiency, each value could be expressed by using the same number of decimal digits. If a value contains less decimal digits than the other values, the missing final digits could be filled with zeros.

Spanner Headers

If the column’s data are left aligned, its header is left aligned as well, and so on. This is intentional. This practice clearly establishes at the top of each column the nature of its alignment, thereby informing readers how to scan the data. The only exception that is sometimes useful involves spanner headers. When a header is used to label multiple columns, centering it across those columns often helps to clarify the fact that it refers to all of those columns rather to just a single column.

[Few, 2004]

In our example table the spanner header "Kapitalsparbuch" is not centered across its related columns. Through the marking-off boundary lines at the left and right border of the span, it is quite obvious that "Kapitalsparbuch" seams to be a spanner header. But the visual appearance is a bit irritating at first view.

Header Alignment

As mentioned, headers should normally be aligned as the data in its columns. This idea was realized in the table. But for better legibility, the headers should be aligned to the right because the numbers in the correspondent columns are quantitative values (see 3.1).

Rules and Grids

White space can be intentionally manipulated to direct your readers’ eyes to either scan predominantly across the columns or down the rows. If you wish to lead your readers to scan down the columns, rather than across the rows, make the white space between the columns more pronounced than the white space between the rows.

[Few, 2004]

The given table above tries to direct the readers eyes to scan down the rows, which is indeed very useful because of the fact that readers can compare the data of the given row with all the other values of the other rows in that column. Unfortunately the autors decided to use vertical lines to separate the rows from each ohter. We argue that a simple white space would do the job aswell without bringing the very high amount of visual contrast into the tables data. That way the reader can concentrate easily on the given data while the manner of directing the eyes down the rows is still in use. The use of a white space instead of a grid visually "doubles" the space between two neighboured data entries in one row and therefore makes the table visually less stuffed. A rules is only being used here to divide the header part from the data part.

Fill Color

When white space alone can’t be used to effectively delineate columns and rows in tables, fill shades and hues work better than grids and rules. When subtly designed, fill colors are less distracting to the eye as it scans across them. They are limited, however, to one direction, delineating columns or rows but not both simultaneously.

[Few, 2004]

The rows of the table are highlighted by two alternating colours - bright and a darker blue. Unfortunately, the two chosen colors have a quite high luminance intensity difference, so that the darker color highlights each second row a bit more than brighter colored rows. This gives a bit the effect of more important and less important rows. It is better to use subtle fill colors.

This shade of gray is very light yet visible enough to assist our eyes in scanning across a single row without onfusing it with the rows above or below. The shading is light enough that vertical scanning down a column is not significantly disrupted.

[Few, 2004]

The shading of the rows in the table above is another good example for guiding the readers attention along the rows. We think that the shading that was used creating that table is to heavy. On one hand it forces the readers attention in one particular direction but on the other hand it produces a very hard visual contrast. Like above we argue that a lighter shading would line out the data while still retaining the guiding property of shaded lines.

Highlighted Values

As one easily can see the values which represent the best financial offer of each column are higlighted red. We think that this is a good way to lead the readers attention to specific values. On a quick overfly of the whole table the reader can easily figure out the top offers and compare different bank institutes and their benefits in a very time efficient manner. As mentioned before the high visual contrast of the whole table makes it hard to read it properly. A problem which causees difficulties while trying to see the highlighted values and their corresponding bank institutes. By lower the visual contrast as stated in the improvements above the highlighted values can be located in a much better way than before.

Improved Table

Summary

The altered table looks a lot more tidy and organized than the original table thanks to a couple of changes that have been made. The beholder can find the data he's looking for more quickly by using the improved table. The additional white spaces have made the data easily separable and improves the observer's ability to stick to the data he's looking at. The right alignment in each row tightened the unity of the data presented in each column with no negative effect on the legibility while reading the data from left to right. On the contrary, the "horizontal legibility" has kept the original positive feature of alternating fill colors for every other row. This feature has even been made more visible by omiting the vertical rules. We achieved a better grouping of columns by centering the "Kapitalsparbuch" - Spanner and having both spanner rules not collide with the vertical grid lines (since we don't use any). The data presented in the new table has become more transparent to the viewer's eye.

Links

• InfoVis:Wiki UE Homepage

• UE InfoVis

• Gruppe 07

References

• [Few, 2004] Stephen Few, Show Me the Numbers: Designing Tables and Graphs to Enlighten, Analytics Press, 2004, Chapter 8 - Table Design.