I’ve had a number of papers rejected where I’ve varied multiple (font) attributes within a single visualization – jump ahead to fig. 6 for an example. There are members in the visualization community and the typography community who have reservations about varying too many things at once. However, there can be some cases where multiple variations are actually useful to tasks such as noticing similarities and differences between elements, as will be explored in this post.
Noticing a Difference
There have been many psychology experiments looking at preattentive perception. Healey has a great summary. When presented with some kind of visual search task, the requirement is to determine (quickly) whether or not a particular target exists. This is a bit like looking for the thing that is different among all the other things. There’s a lot of nuances in this research, for example some types of visual cues can be perceived more quickly than others. Some types of cues are not symmetic, e.g. finding an Q in a field of O’s is faster than finding an O in a field of Q’s:
A Q in a field of O’s is easier to find than an O in a field of Q’s.
The same kind of nuances apply to font attributes such as bold or italic as well. Here’s an interesting example using font weight. In fig. 2, finding the different name in the first and second examples is easy because the difference in weight between plain and bold in the font family Segoe UI is significant. However in the third column, weights used are plain and light variants in the font family Segoe UI, which don’t have as much differentiation. It’s reasonable to assume that finding the light text using the font Segoe will be slower than finding the bold text.
Fig. 2. Find bold in plain or vice versa is fast; but finding lightweight in plain will be harder.
In addition to the font attribute, the choice of font family may impact the degree of notice-ability. Fig 3 shows italics. Typographers already think italics are a quieter form of emphasis than bold. And Stroebelt’s research seems to confirm this too. On the left, italics are used in the sans-serif font Segoe UI, wherein the italicized form of the font is very similar in shape to original font with an oblique skew, i.e. a geometric transformation of the letters* (see footnote). At the far right is an example using Garamond, which, like most serif fonts, supports true italics, wherein the shapes of the italic letters are different from their upright counterparts. Presumably italics set in Garamond pop-out more quickly than italics set in a sans-serif. This is purely conjecture and not actually proven. It would be very interesting to test and see if the results confirm the hypothesis.
Fig. 3. Presumably the noticing the difference in the sans-serif font Segoe (left) is not as fast and effective as noticing the italics in the serif Garamond font.
This can be explored with each font attribute. Fig. 4. shows some examples using font family and case. Noticing blackletter in the middle of sans serif (left top row) is a lot easier than trying to find the serif in the middle of sans serif (right top row).
Fig. 4. Spot the difference in font family (top row) and case (lower row).
Interference among multiple attributes
Search tasks become more complicated when multiple attributes are varied among each element. Some visual attributes can interfere with the ability to quickly detect the target attribute. Search for a combination of attributes is difficult. The classic example is the interference between shape and color. Fig. 5. asks you to find a specific club in a field of spades. Mixing multiple attributes can make it harder to locate the target.
Fig. 5. Finding a combination of attributes can be difficult.
Difficulty decoding multiple attributes
Another challenge with multiple attributes is the ability to decode. If only a single attribute varies, like the examples in fig. 1 -4, remembering what the attribute means is easy. However, when many different data attributes vary, it can be more difficult to remember, given the limitations of short term memory. E.g. fig. 5. right could be described as a collection 35 people, with red indicating republicans, spades indicating men, and underlines indicating high wealth. Seeing a specific marker, e.g. red club with underline, requires one to recall each mapping to decode. With each additional data attribute the cognitive load increases, the time to decode increases and the chance of error increases.
However, the task may not be searching and locating targets, nor deciphering the encoding for a particular glyph. Sometimes the task may simply be to assess whether an item is the same or different compared to its neighbors. The alphanumeric map in figure 6 of UK postcodes varies italics, font weight and case.
Fig. 6. UK post code areas indicating data via font weight, italic, and case.
Even without knowing the encodings, we can ask simple questions such as whether a particular location is similar to its neighbors. For example, NG is similar to S and LE (near center top) or CA is similar to LA, DL, TD and FY (near top left).
We may also get a sense of the degree of difference between items. Near center bottom we can see wc. Immediately above is nw, in a slightly heavier font, while to the right is EC, in an upper case font. Above left from wc is HA, varying in both weight and case, indicating more difference than the previous two comparisons. This notion of degree of difference is also completely untested. Some differences may not even be noticed (see research on change blindness).
A Difference is Insightful Information
Depending on the task, seeing differences may adequately solve requirements, as illustrated in the previous example. There may be various applications where noticing differences is a relevant tasks, for example, understanding differences between elements in a items in a scatterplot, glyphs on a map, nodes on a graph, or possibly infographics (think Isotype, where pictographs may be combined of a number of elements).
Sometimes there may be additional tasks, such as a task that requires accurate decoding. This can be facilitated in many ways, such as providing a legend or providing interactions such as tooltips.
One could make a similar argument to use interactivity to reveal similarities and making all the visual attributes uniform. For example, pointing at NG in figure 6 could be used to highlight the similar S, LE, B and CF – no need to adjust italic, weight and case. While this is feasible, the viewer loses the ability to see patterns serendipitously. By making the differences visible, one can see patterns much more readily than relying on slow mouse movements across all the possible combinations and permutations. Of course, both techniques (visual encoding and interactive highlighting) could be used together to improve the overall effectiveness.
*Note 1: Segoe UI, unlike many sans serif, does have italics which vary letter form. Compare Segoe UI lowercase a and l in their plain and italic forms to see the difference. In this example, however, the variation between Segoe plain/italic is not as pronounced as the variation between Garamond plain/italic.