Week02.02: misinformation - UX-UI-Design-Lab/DH150-viz GitHub Wiki

Agenda

  1. Pre-attentive attributes (storytelling with data, ch. 4)
  2. Visual perception of graphics
  3. Relative judgements in perception + visual illusion
  4. Mis-information analysis (chartjunk)
  5. Assignment02 demo

In this part, we will learn how the message can be different from what designers meant - or when/how the graphics can be ineffective and inefficient. Assignment02 is designed to help you practice diagnose the potentially unsuccessful visual mapping.

Pre-attentive attributes

It has been questioned whether the image is what our mind created or what the object engraved in in our mind -- In cognition theory, researchers explain that it is the interactive process between the objective traits and the subjective processing. There are some attributes out mind and eyes are optimized to process so quickly, it is like a magnetic -- a certain visual attributes "pop out" and so easily distinguished from the background. For example, you can easily see the letters in the different shade comparing to the letters in the same shade; in different size, or in different orientation.

preattentive attributes, size, orientation, color

The Functional Art, A. Cairo, p.114

So, it seems that when we perceive the world there are several level's of processing -- visual hierarchy. If we apply this attributes in information design we can help users/readers what to pay attention first and next.


Visual perceptions of graphics

However, when the comparison within the perceptual attributes, our eyes seems to well-trained to recognize subtle differences much better (and accurately) than another - changes in the position is least likely missed or mistaken, but color saturation may not be noticed. Cleveland and McGill experimented with some graphs (for analyzing scientific data) and found that some information are harder to be recognized depending on how it were visualized. For example, human brain doesn't seem to work for sharp comparisons in angels, directions, curvature, and area.

graphical perception for analyzing scientific data

Graphical Perception and Graphical Methods for Analyzing Scientific Data, Science, Cleveland & McGill 1985

elementary perceptual attributes in graphics

Design for Information, I. Meirelles 2014

Relative judgements in perception + visual illusion

Even though we perceive the same element in same attribute, the context can influence the judgement. First, psychological magnitude may not be linearly correlated with the stimulus magnitude (visual element's attribute). For example, when we increase one unit of length, we perceive the length one unit increased; but when area was one unit increased, the perceived area in our mind is not one-unit increasing but less than one. (therefore, we are not good at guessing the area). It implies that our visual mapping of quantitative scale can be perceived more or less than what the designer intended.

Stevens' psychological power law

Design for Information, I. Meirelles 2014, p.129

Also, other graphical elements in context can influence the perceived value of the graphics. For example, the same sized circles would be perceived smaller or larger when it is surrounded by the larger or smaller circles (= Ebbinghaus illusion). The lines in the same length can be perceived longer or shorter depending on the background lines (Ponzo illusion) or the shape at the end (arrow inward or outward, Muller-Lyer illusion). the same color can be perceived lighter or darker depending on the background (White's illusion). The parallel lines look angled when it has short lines with a different angles.

ebbinghaus delboeuf muller-lyuer white zollner

Design for Information, I. Meirelles 2014

visual illusions

https://blogs.scientificamerican.com/illusion-chasers/the-best-illusions-of-the-year/

Well, with some reason we add something (ex. meaning) more to what we see. This is what Gestalt psychology are interested in "wholistic perception, in which multidimensional stimuli were perceived in an unanalyzable whole. This tendency makes us hard to distinguish the difference in parts -- when the whole is what we are familiar with (ex. culturally coded). Chernoff's FACES (1973) is an interesting experiment. You can assign, for example, the city's data into the facial features (the rating of a city's health-care facilities to the curvature of the mouth; pleasantness of climate to angle of the eyebrow.)

FACE framework

FACE features

FACE vs. Column, integral dimensions vs. separable dimensions

Visualize This, N. Yao (p.238-243) | The Grammar of Graphics, L. Wilkinson (p.268-269)

Can you see what Los Angeles is like as a city? Can you compare LA with Orlando - and what do you see?

How is this FACES effective or ineffective? Comparing with Bar chart, what do you think integral dimensions in FACES fail or success?

the answer is that it is very hard to recognize the details - selective attention is difficult with FACES. But we can clearly see how city life between LA vs. Orlando would be different as a whole .


Mis-information, Chartjunk

Therefore, it is critical to control the unnecessary visuals. Not only it is waste of resources (data-ink ratio, E. Tufte), but also the unnecessary visuals disturbs people from seeing the data. Showing the data clearly and accurately. You can find Do vs. Don't dos in the reading below.

Readings:

  • Visual Display of Quantitative Information (ch1, 2, 5, 7, E. Tufte, ccle)
  • How to Display Data Badly Wainer, 1984

Take a note and list out what you think make a good graphic vs. bad graphics. You will need your summary of reading for your assignment.

So, can you see why these graphics are problematic or what did Tufte criticize them about?

Monster and Girl with Chart by Nigel Holmes

for more of recent Nigel Holmes works, click here

Q4: Analyze visual attribute of mis-information

please navigate those charts and pick one work to analyze and right-click on the image > open Image in New tab in order to see the large version.

  1. criticize what visual attributes/ graphic components were not properly used;
  2. explain your draft idea how you think you can make it better.

This work of choice will be the one you will redraw to make it simple and easy to understand for your assignment2.


But, it should be noted that, from the creativity standpoint, those works are pretty interesting -- Please check these readings about how such illustrated graphics works: fun and memorability.


Assignment02: Redrawn simply

In this assignment, I want you to choose any one work of Nigel Holmes and redraw it 1) for a scientific data presentation and 2) for a general magazine for public.

Detailed instruction/rubrics can be found here and the demo script here.